Okay.. I know the basics of putting a Div within a Div. <div id="container"> <div id="articles"> </div> </div> Code (markup): 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 <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%; } Code (markup):
first off everyone from time to time spends weeks on f'n thing, so don't get too down. That's a lot of code to interpret. Try adding an opening html tag first.
.... The <html> tag is only missing because of me slightly not highlighting it while copy. That's not my problem. But thanks for the advice. But if you just go to the #Banner and see how i'm trying to place the #slideshow within it you'll understand my problem. I don't really understand how it's hard to interpret. But if anybody with experience could help me i'd really appreciate it. Thanks!
My first advice would be to swing an axe at the HTML 5 bloat, get some proper semantics in there with graceful degradation for images/css off, and get what appear to be presentational images out of the markup. You've got some really bizarre stuff in there like paragraphs inside headings, article around your copyright notice, etc, etc... THEN swing an axe at the jquery asshattery... to be frank something like an image rotator has no malfing business on websites in the first place, but if you insist on bloating out the page with scripttard garbage that pisses all over accessibility, you could probably do it far cleaner without jQ in the mix. Even the nonsense of declaring that 960px fixed width means you've got major accessibility issues before you even start THINKING about goofy animated scripting! I'd have to see it live with the images you are using to weight in much more -- but really I get the feeling you are trying to add 'gee ain't it neat' animooted nonsense to a non-viable inaccessible layout. Lemme guess, you let some PSD jockey spank it on the screen and call it a layout before you had semantic markup of your content? Broken back-asswards way of building a site. Guessing WILDLY (since you have zero images off graceful degradation), if I was writing the same page my markup would likely look a bit more like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Belleza" media="screen,projection,tv" /> <title> Lumbre Fire Tribe </title> </head><body> <!-- empty span below are image replacement sandbags, do not remove! --> <div id="fb-root"></div> <div id="top" class="widthWrapper"> <h1>Site title<span></span></h1> <ul id="mainMenu"> <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 id="banner"> <img src="Img/Lumbre_Mock_2_07.png" alt="Describe this!!!" /> <img src="Img/Lumbre_Mock_2_10.jpg" alt="Describe this!!!" /> <img src="Img/Lumbre_Mock-Recovered-Recovered_03.jpg" alt="Describe this!!!" /> <!-- #banner --></div> <!-- assuming this next one should even BE an image ! --> <img src="Img/Lumbre_Mock_2_11.jpg" alt="Describe this!!!" id="event" /> <!-- love how facebook ignores the rules and just makes up their own fictional BS --> <div class="fb-comments" data-href="https://www.facebook.com/LumbreFire" data-colorscheme="dark" data-numposts="1" data-width="341"></div> <div id="content"> <h2>Welcome</h2> <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> <ul class="links"> <li class="shop"><a href="#shop">Shop</a></li> <li class="training"><a href="#training">Training</a></li> <li class="tribe"><a href="#tribe">Tribe</a></li> </ul> <!-- #content --> <!-- #top.widthWrapper --></div> <div id="footer"><div class="widthWrapper> <a id="facebooklink" href="#">FaceBook<span></span></a> <a id="twitterlink" href="#">Twitter<span></span></a> <div id="footerNav"> <h2>Describe This<span></span></h2> <ul> <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> <!-- #footerNav --></div> <div id="office"> <h2>Describe This<span></span></h2> +972 333 4333<br /> 1232 Purbery Dr.<br /> Dallas, Tx 75432 </div> © 2013 3rd Eye Design <!-- .widthWrapper, #footer --></div></div> <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1" ></script> <!-- banner script should go here --> </body></html> Code (markup): Though without the images, alt text, proper background colors to fall back on when images are unavailable, etc, etc...
Here is an image of what the site looks like on my screen compared to yours. I don't really know why you'd say a slide show would be bulky.. Does this help at all? See how the top slide show is sitting within a box with a background that is a gray grungy? http://thedsho.deviantart.com/art/Lumbre-Website-Mock-Design-407056277
Generally speaking what you're trying to do shouldn't be that big a deal -- unless you're either inserting the scripts in the wrong place in the code (entirely possible), in an order they don't like (even more possible) or if in general the two just don't like each-other. ... that said, that design reeks of "WCAG, what's that?" and is an accessibility train wreck. Serif fonts on screen, fixed width, and massive images that really have no business on websites in the first place. Ever notice that you don't see giant backgrounds and textures like that on SUCCESSFUL websites? There's a REASON for that. Toss in a slideshow of christmas only knows how many massive images, and it's going to take so long to load NOBODY is going to give a **** about your content. That entire mockup should be thrown in the trash as 'not viable for web deployment' -- the body background ALONE would be three to ten times larger than I'd allow for an entire site template's HTML+CSS+SCRIPTS+IMAGES. The fixed height content areas would make dynamic fonts and impossibility, the fixed width design is by definition an accessibility train wreck in the age of responsive layout, and the (over) use of transparencies in the images would make images off graceful degradation a pain in the ass to implement, if not an impossibility. On the whole it screams it was put together by an artist who doesn't know enough about HTML, CSS, or accessibility minimums to be designing ANYTHING for the Internet -- though that's pretty much ALWAYS the case when you start out with some goofy picture of a website, instead of semantic markup of content of value. Markup your content (or a reasonable facsimile) semantically, choosing tags based on what they mean NOT what they look like, design your layoutS (YES, PLURAL) for your various media targets and responsive breakpoints using CSS, then and ONLY then bring in the PSD jockey to spank it all over the screen with their goofy graphics, assuming you even need them at that point with CSS3 on the table. ... because at the end of the day people visit websites for the content, not the graphics you hang on it. Starting out from some goof-assed picture is putting the cart before the horse, and a completely back-assward way of building a website. That you're having trouble inserting more "gee ain't it neat" garbage into an already bloated page is hardly a shock -- as again I'd pitch that all in the trash. It's a poster-child for everything wrong with that approach to building a site.
Well.... If you want some examples of the type of sites i inspire to dev you can look at a few of these... http://awardonline.com/ http://www.teehanlax.com/story/social-portrait/ http://www.alexsign.de/ http://purefixcycles.com/ All these sites are using full screen backgrounds with images and Javascript. How can you say that a website that is visually appealing is useless on the internet? The information on my site is displayed perfectly, even with the images you know where to-go and what you need to do to get there is pretty obvious. It's very simple, even more simple than most of these sites i used as examples, which are obviously influenced by Graphic Designers as well. You say one thing, yet it's not true. Do you by chance have a portfolio of your own work you can show me so i can see some examples of your experience, and maybe what you mean by less graphics? Because what i see is a different future of the web that you see possibly. If anything my code shows that i'm new too coding, which would be the reason why people go to sites like these. If i was a professional i most likely would not be asking for advice. But i do think my code is readable, and actually not much different from yous. Now is your point to use less graphics on sites? Because I don't think i even have that many graphics in the first place... and when it comes to smart phone accessibility i agree that i need to look more into that, what would you say one would do to a site wrapper for that approach? I thought the point of using htm5 tags like <Article> when it's a article helps with the reading of the code. Would it be counter productive to fill my code with Divs when i could simply achieve the same goal with a <article> <section> tag?
... and those sites are ALL not just accessibility train wrecks, they're EXACTLY what I'm talking about for developer ineptitude -- they are not ANYTHING I would suggest that you aspire to. The first one "Award" even at 1920x1080 feels like it's designed to be a ten foot interface, I'd hate to see how useless that mess is on anything smaller display-wise. The goofy parallax scrolling trickery just makes it harder to even find the content much less figure out what the **** the site is even about.... though this one does NOT seem to have any of the massive images -- just massive scripttard trickery. The second one ('painting a social portrait') under normal circumstances I'd have killed for taking too damned long to load -- it's filled with far too much pointless space and bandwidth wasting graphics that just get in the way of even getting at what little content is actually present. The massive text being painful to read since you can't seem to fit more than 20 words on a page at a time. "AlexSign" is also inaccessible buggy broke crap -- doesn't even render right in Opera or Chrome, and in FF and IE it's almost too big for my 1920x1080 laptop; It's like a mactard designed it for 2560x1440 IPS and to hell with everyone else. MASSIVE space and bandwidth wasting image rotator at the top pushing anything resembling real content 'below the fold', and on the whole is so useless I'd be shocked if they have anything resembling 'conversions'. The fixie website is the least offensive of them, though it too reeks of developer ineptitude mated to letting some artsy fartsy type piss all over the page with their ignorance of what the Internet is or how to design for it... (of course with fixies being hipster nonsense... rip out that rear hub and put a nexus internal with a coaster brake on it!) In all cases those types of sites cost more to host, and more importantly likely cost the owners in conversions and potential sales losses. They reek of the owner being sucked in by flash when there's no real substance or usability on those sites. No matter how pretty they are, if they're useless to visitors, what good are they? They are ALL filled with bloated scripttard bull, and massive images 'too large for web deployment'... they have no semantics making using screen readers a pain in the ass, and when the smallest of them is 1.5 megabytes in 50 separate files, the MINUTE PLUS PAGE-LOADS unless you live in a magical high-speed fairytale-land (which I don't...) pretty much guaranteed that even if I cared about those sites content, I'd likely still be a bounce. To put it in perspective, for me a content-less site template's HTML+CSS+SCRIPTS+IMAGES should not exceed 72k in 16 files, and with content really shouldn't be more than double that. I'm NOT saying you can't have attractive websites. My EWI website for example: http://www.ewiusb.com Has everything I'm talking about in terms of accessibility. Semi-fluid responsive layout, dynamic fonts, putting legible color contrasts at the forefront -- but still has a decent amount of eye-candy. YOU CAN do even more graphically if you're willing to take the time and have the talent, but pissing all over a page with graphics, gee ain't it neat animated script-tard BS usually ends up being nothing more than dumping a can of shellac on a pile. Look at the major success stories of the Internet for proof enough of that -- you really think e-Bay has some artist spanking it on the screen for their layouts? E-Bay, Amazon, Google, FaceBook, wikipedia, slashdot, digg -- not exactly a visual tour-de-force, even when they're bloated to the gills with scripttard crap. This is because they recognize what's important to them -- CONTENT! Compared to those, the sites you linked to are the free "paid by advertising" fishwrappers everyone pitches in the trash without reading every week. Seriously, if it's the future of design, that's just more of the Internet I'll not even be visiting... Nor will my quadriplegic neighbor... or my blind neighbor on the other side... or our friends in Canada and Australia suffering through bandwidth caps and overage charges, etc, etc... Naturally the artsy fartsy types will use the lame "that's not our target audience" and "It's only x%" defense for their BS -- which they do to so many different 'small groups' it's a miracle there's anyone left to suffer through their garbage in the search for what's ACTUALLY important -- the content! ... and I guarantee those who crap out very pretty but ultimately useless sites like those will most always dive for the lame excuses. Also, try reading the "what's wrong with your website" series of articles I posted on a friends forum -- the link is in my siggy.