Okay.. I know the basics of putting a Div within a Div.
Code (text):
<div id="container">
<div id="articles">
</div>
</div>
This has always worked for me. Lately i've been trying to add a slide Show Jquery plugin so i can at least have some kind of Slideshow at the top of my site. Ive been spending a whole week testing all sorts of CSS,HTML and Jquery slideshows with none of them ever working properly. My knowledge in Jquery is biggeiner, but i can copy and paste no problem, which is what many of these sites only need.
I finally got one working today, but as soon as i started to add my FaceBook Plugin the slide show stopped working. Worse of all i'm trying to play the slideshow within a Div="banner". It's just a frame really to place around the slide show.
<div id="frame">
<div id="slideshow">
</div>
</div>
This seems to work no problem with any other sites ive made with containting content within a Div, and even including this one. You can see it in my code that my article section , and this was set up no problem. So is my jquery code just flawed, or am i missing the big picture? I'm new to the whole Jqery placement.. Some people say to place it at the start of the <body> and then some say to place it near the end of <body> I'm starting to notice the more Jquery plugins i add to the site the more its being a huge hassle when everything before was running smoothly graphically. Ive wasted a week now trying to figure out these things. All all I'm really wanting is a simple FaceBook plugin, and a Slideshow at the top of the site to display some new things being added to the site
Code (text):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lumbre Fire Tribe</title>
<link href='http://fonts.googleapis.com/css?family=Belleza' rel='stylesheet' type='text/css'/>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="fb-root"></div> <!--FaceBook Plugin Script-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
slideShow();
});
function slideShow() {
var showing = $('#slideshow .is-showing');
var next = showing.next().length ? showing.next() : showing.parent().children(':first');
showing.fadeOut(800, function() { next.fadeIn(800).addClass('is-showing'); }).removeClass('is-showing');
setTimeout(slideShow, 5000);
}
</script>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1"
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="bg"><img src="Img/lumbre_bg.jpg" width="100%" height="100%" alt=""></div>
<div class="container">
<header>
<img src="Img/Lumbre_Mock_03 (2).png" /> <!--Logo-->
</header>
<nav>
<ul> <!--Nav_Bar_Links-->
<li><a href="#home">Home</a></li>
<li><a href="#tribe">Tribe</a></li>
<li><a href="#gear">Gear</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div id="banner">
<img src="Img/Lumbre_Mock_2_07.png"/><img src="Img/Lumbre_Mock_2_10.jpg" width="785" height="268" alt="image 1" class="is-showing" />
<div id="slideshow"><img src="Img/Lumbre_Mock-Recovered-Recovered_03.jpg" width="785" height="268" alt="image 2" />
</div>
</div>
<div id="event"><img src="Img/Lumbre_Mock_2_11.jpg"/></div>
<div class="fb-comments" data-href="https://www.facebook.com/LumbreFire" data-colorscheme="dark" data-numposts="1" data-width="341"></div>
<div id="content">
<article>
<h1><p>Welcome</p></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non scelerisque diam, id
adipiscing libero. Maecenas sollicitudin semper nisi, in aliquam lorem lobortis ut. Praesent turpis nibh, consectetur a dolor imperdiet, sodales congue turpis. Proin nibh nulla, pulvinar sed elit id, commodo sagittis est. Nam sed elit et dolor lacinia ornare at eu nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris fringilla vehicula lacus, ac mollis tortor malesuada ac. In suscipit dui urna, vitae malesuada massa pretium sed. Pellentesque feugiat urna diam, sit amet aliquet ante varius non. Quisque fermentum tortor lacus, vel lobortis turpis euismod ut.
</p></article>
<div class="links">
<div id="shop">
<a href="#shop">
<img border="0" alt="Shop" src="Img/Lumbre_Mock_2_18.png" width="437" height="126">
</a></div>
<div id="training">
<a href="#training">
<img border="0" alt="Shop" src="Img/Lumbre_Mock_2_21.png" width="437" height="126">
</a></div>
<div id="tribe">
<a href="#tribe">
<img border="0" alt="Shop" src="Img/Lumbre_Mock_2_23.png" width="437" height="125">
</a></div>
</div> <!--End of Links-->
</div>
</div>
<!--End of Container-->
<div id="footer">
<aside>
<a id="facebooklink" href="#" title="Star"><span>Star button</span></a>
<a id="twitterlink" href="#" title="Star"><span>Star button</span></a>
</aside>
<section>
<div id="navigation">
<img src="Img/Lumbre_Mock_05.png" />
<ul> <!--Footer_Nav_Bar_Links-->
<li><a href="#home">Home</a></li>
<li><a href="#tribe">Tribe</a></li>
<li><a href="#gear">Gear</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div id="office">
<img src="Img/Lumbre_Mock_07.png" />
<p>+972 333 4333 <br />
1232 Purbery Dr.
<br />Dallas, Tx 75432</p>
</div>
<article>Copyright © 2013 3rd Eye Design</article>
</section>
</div> <!--End of Footer-->
</body>
</html>
/* pushes the page to the full capacity of the viewing area */
html {height:100%;
}
body {height:100%; margin:0; padding:0;
}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;
}
.container {
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:960px;
margin:0px auto;
position:relative; /* places the content ontop of the background image */
z-index:1;
}
/*Nav Bar*/
nav {
margin:20px 0px 40px 365px;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li
{
display:inline;
margin-right:20px;
font-family:"Times New Roman", Times, serif;
}
a:link,a:visited
{
color:#666;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
font-weight:bold;
}
header{ /*Logo*/
margin-top:30px;
margin-left:30px;
}
#banner { /*Slide Show*/
width:819px;
position:relative;
margin: 0px auto 0px auto;
}
#slideshow {
height: 268px;
width: 785px;
margin: 0 auto 0 auto;
overflow:hidden;
}
#slideshow img { display:none; position:relative; }
#slideshow .is-showing { display: inline; position:relative}
#event { /*Event Listings*/
width:341px;
float:left;
margin-right:30px;
margin-left:124px;
margin-bottom:40px;
}
.fb-comments { /*FaceBook Plugin*/
width:314px;
float:left;
margin-right:124;
margin-bottom:40px;
}
#content {
position:relative;
width:820px;
height:463px;
margin:0px 70px 120px 70px;
float:left;
background-image:
url(Img/Lumbre_Mock_2-Recovered__18_03.png)
}
article {
width:331px;
height:444;
background:url(Img/Lumbre_Mock_2-Recovered_18.png);
margin:10px 7px 0px 28px;
float:left;
}
.links {
float:left;
width:437px;
}
#shop {
width:437;
float:left;
height:126;
margin-top:24px;
}
#training {
width:437;
float:left;
height:126;
margin-top:14px;
}
#tribe {
width:437;
float:left;
height:126;
margin-top:14px;
}
#footer {
clear:both;
width:100%;
height:276px;
position:relative;
z-index:1;
background-image:
url(Img/Lumbre_Mock_2_20.png);
}
aside {
width:30%;
}
section {
width:70%;
}
#facebooklink
{
float:left;
margin:50px 0px 0px 100px;
display: inline;
width: 53px;
height: 48px;
background:url(Img/facebook_link.png) no-repeat 0 0;
}
#facebooklink:hover
{
background-position: 0 -59px;
}
#facebooklink span
{
position: absolute;
top: -999em;
}
#twitterlink
{
float:left;
margin:50px 0px 0px 3px;
display: inline;
width: 54px;
height: 48px;
background:url(Img/twitter_link.png) no-repeat 0 0;
}
#twitterlink:hover
{
background-position: 0 -59px;
}
#twitterlink span
{
position: absolute;
top: -999em;
}
#navigation {
float:left;
width:20%;
}
/*Footer Nav Bar*/
#navigation {
margin-top:60px;
margin-left:35px;
}
#navigation ul li {
margin:3px 0px 0px 10px;
}
#navigation ul
{
list-style-type:none;
margin:0;
padding:0;
padding-top:0px;
padding-bottom:0px;
}
#navigation li
{
display:block;
margin-right:1px;
font-family:"Times New Roman", Times, serif;
}
#navigation a:link, #navigation a:visited
{
color:#FFF;
text-align:center;
padding:0px;
text-decoration:none;
text-transform:uppercase;
}
#navigation a:hover, #navigation a:active
{
font-weight:bold;
}
#office { /*Office Container Footer*/
margin-top:60px;
margin-left:35px;
float:left;
width:20%
color:#FFF
}
p {
color:#FFF
}
section article{ /*Copyright*/
color:#FFF;
margin-left:99%;
}