I'm stuck again, my images overflows from my container? http://raineer24.github.io/gilboaquarry/ #featured { display: inline-block; list-style: none; margin: 0 auto; padding: 0; width: 1440px; float: left; } #featured li { display: inline-block; width: 460px; overflow: hidden; float: left; } Code (markup): http://raineer24.github.io/gilboaquarry/
Did you try setting a max-width of 100% on images? Then they will be limited to the width of their parent container and should scale (if my memory is correct).
Really that layout is filled with issues because -- as I've told a LOT of people lately -- it's built with "not viable for web deployment" layout concepts -- like 100% perfect width perfect height identical elements in a row. Laugh is here, it has the exact opposite problem, they do NOT add up to the width. Your CSS doesn't make a lot of sense... floats are inherently block and setting display won't change that, px metric widths are inaccessible rubbish that shouldn't be used on layout elements like LI, floated LI can trip rendering bugs in FF and IE, inaccessible non-dynamic px metric fonts... .. and that's before we talk the markup with it's gibberish use of numbered headings, endless pointless DIV for nothing, classes for nothing, and in some cases even lists for nothing, CSS LINK with no media targets, illegible colour contrasts... you've got a laundry list of how NOT to build a website here. .... though if I were to GUESS as to the problem, you're using floats which is putting them all the way to the left... yeah, as I resize the display they are stuck left when everything else is centered. That means you need to make sure their wrapping parent, #featured, is set to a fixed width and centered. Though again that massively useless fixed width (and the resulting hard to follow flow text) is why design concepts like this built from fixed widths and fixed fonts are NOT viable concepts for a web design... Just to show what I mean, I find it EXTREMELY unlikely your markup needs to be much more than: <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="css/screen.css" media="screen,projection,tv" /> <title> Gilboa Quarry </title> </head><body> <div id="top"> <h1> Gilboa Quarry <span>-</span> <small>The Midwest's Premier Dive Site</small> </h1> <div id="contact"> <a href="#" class="phone">(419) 456-3300</a> <a href="#" class="address">Gilboa Quarry, 3763 Old St. Rt. 224, Ottawa, OH 45875</a> <!-- #contact --></div> <ul id="registerAndSocial"> <li><a href="#">Register</a></li> <li><a href="#" class="connect facebook">Facebook</a></li> <li><a href="#" class="connect vimeo">Vimeo</a></li> <li><a href="#" class="connect youtube">Youtube</a></li> </ul> <ul id="mainMenu"> <li><a href="#">HOME</a></li> <li><a href="#">DIVING</a></li> <li><a href="#">MEDIA GALLERY</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">EVENTS</a></li> <li><a href="#">WHAT'S NEW</a></li> <li><a href="#">CONDITIONS</a></li> <li><a href="#">SUMMER HOURS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">DIVE PROFESSIONALS</a></li> </ul> <div id="banner"> <h2>diving and dive training</h2> <p> Gilboa Quarry is the best inland place to scuba dive in Northwest Ohio. </p> <!-- #banner --></div> <h2>OPEN WATER DIVING</h2> <p> Gilboa Quarry is a great location for diving and dive training. The quarry provides two distinct personalities: the shallow side at 5 - 65 ft provides great recreational enjoyment, while the deep side of the quarry with depths of 130 plus feet is suitable for technical training. </p> <img src="images/img1.jpg" alt="a treeline" class="fullPlate" /> <h2>GO CAMPING</h2> <p> Gilboa Quarry offers plenty of camping space. Camping areas are conveniently accessible by gravel road allowing for easy drive up access to the quarries main sites. </p> <div class="gallery"> <img src="images/f1.jpg" alt="Diver exiting a tunnel" /> <img src="images/f2.jpg" alt="Diver near surface from below" /> <img src="images/f3.jpg" alt="Outdoor camp with fireflies" /> <!-- .gallery --></div> <!-- #top --></div> </body></html> Code (markup): given what you've done so far... but most of the images used are simply too big and too much of a pain to even be put on a website that way. There's a reason you don't see successful websites pulling stunts like that. Well, unless said sites are trying to scam people new to web development into THINKING such concepts are viable.
Thanks for helping @deathshadow Could you possibly explain this to me? They're both the same image size: 1440px and the top one didn't break. Still, I don't get it...
One is centered, one is floated, they're adding up to the same width, they're just not positioned the same. though you now seem to be scaling them down at smaller sizes -- really as I said those images are just too big to have ANY business as part of a layout in the first place. I'd probably either shrink them to 256px wide or narrower and put the content next to them, or swing an axe at them so you have room for ACTUAL content. ITs' a "Not viable for web deployment" layout concept, which is why you do NOT see many "real" websites pulling this type of stunt.
@ deathshadow Thank you Any good advice or suggestion how can I code the calendar part like a widget? mY sITE
Considering the word widget means a "vague abstraction or concept used as a placeholder" I have NO clue what that question even means. If you are talking about how to mark up a calendar, it's OBVIOUSLY tabular data so use CAPTION for the date, THEAD w/ TH scope="col" for the day titles and TBODY/TD fro the days and classes for said days being "special". Apart from that, I've no clue what you are even asking.