okay nvm with this, i got a new layout, and its all div'd by me, but i dont think i did it perfectly. can someone look over it right quick, its really bare because its just the layout, nothing else. no text just images with div's. http://soldiersoffortune.darkstargamers.com/v2/ ill post the whole css and index.html down here. body { background: #212121; margin: 0px; padding: 0px; } #container { width: 80%px; position: relative; left: 50%; margin-left: -400px; /* half the width of the div */ background: #212121; width: 800px; height: 1000px; } #leftstuff { float: left } #header { background-image:url("images/divs/header.gif"); width: 796px; height: 326px; } #nav { background-image:url("images/divs/nav.gif"); margin-top: -301px; margin-right: 15px; width: 358px; height: 41px; float: right; } #left_box { background-image:url("images/divs/left_box.gif"); width: 245px; min-height: 75px; margin-left: -1px; } #members { background-image:url("images/divs/members.gif"); width: 245px; height: 34px; margin-left: -1px; } #content { background-image:url("images/divs/content.gif"); width: 552px; min-height: 184px; margin-left: 244px; margin-top: -184px; } #footer { background-image:url("images/divs/footer.gif"); margin-left: 2px; width: 796px; height: 50px; } p.copyright { font-size: 80%/50%; font-face: verdana; text-align: center; } Code (markup): <html> <head> <title>Soldiers Of Fortune</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link type="text/css" rel="stylesheet" href="css.css" /> </head> <body bgcolor="#212121" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" link="#13c600" vlink="#13c600" alink="#13c600" text="#FFFFFF"> <div id="container"> <div id="header"></div> <div id="nav"></div> <div id="left_box"></div> <div id="members"></div> <div id="left_box"></div> <div id="content"></div> <div id="footer"></div> </body> Code (markup):
Looks fine in FF2, IE6 screws it up. Might would advise doing a reset before you put in text elements like headers, paragraphs etc since those will bounce the symmetry of your layout.
Yeah, I figured it wouldnt be perfect, this is my first time coding a layout from scratch... This was origunally a table layout but I had to change that.. Any ideas wat exactly I should change? Any help is GREATLY appreciated
I'm guessing its something in this: #content { background-image:url("images/divs/content.gif"); width: 552px; min-height: 184px; margin-left: 244px; margin-top: -184px; } Here's a screenshot of IE6: http://www.imageazure.com/gal/viewer.php?id=822783Clipboard01.jpg Looks good for a first time effort. Or a 10th even. I usually shy away from negative margins if at all possible. One thing though is IE6 treats min-height as height. It shouldn't affect that layout but who knows. It might be honoring the negative margin too.
Thanks for the compliment I dont know why this does this in ff. Maybe the margins are different? Idon'tknow. Haha maybe one of the CSS Gurus will feel generous and ficks it up Thats wat Stomme Poes did for me last time Haha. Thanks Again in advance for the halp.
anyone wanna help me out with this? im new so i wouldnt know what to do to make it smoothly run with more content. Another thing, how coudl i make it so that the main content div is always the length of the two left divs and vice versa, so when one side is stretched, the other side is also. Thanks.
its fine in my ie7, but would that make ie6 fine too? i added a float to the left stuff and the content so that it would not have to be margined. ill repost my css and html. jas.. css body { background: #212121; margin: 0px; padding: 0px; } #container { position: relative; left: 50%; margin-left: -400px; /* half the width of the div */ background: #212121; width: 800px; height: 1000px; } #leftstuff { float: left } #header { background-image:url("images/divs/header.gif"); width: 796px; height: 326px; margin-left: 1px; } #nav { background-image:url("images/divs/nav.gif"); margin-top: -301px; margin-right: 15px; width: 358px; height: 41px; float: right; } .left_box { background-image:url("images/divs/left_box.gif"); width: 245px; min-height: 75px; } #members { background-image:url("images/divs/members.gif"); width: 245px; height: 34px; } #content { background-image:url("images/divs/content.gif"); width: 552px; min-height: 184px; float: left; } #footer { background-image:url("images/divs/footer.gif"); margin-left: 2px; width: 796px; height: 50px; clear: both; } p.copyright { font-size: 15px; font-family: verdana; color: #333333; text-align: center; } Code (markup): html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>Soldiers Of Fortune</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link type="text/css" rel="stylesheet" href="css.css"> </head> <div id="container"> <div id="header"><p class="copyright">Copyright</p></div> <div id="nav"></div> <div id="leftstuff"> <div class="left_box"></div> <div id="members"></div> <div class="left_box"></div> </div> <div id="content"></div> <div id="footer"></div> </div> </body> Code (markup):
i changed my site again, just moved some stuff around, but when i add text to the boxes. a ilttle space is created at the top, but it only appears to happen in ff. does ff make space above text in every design? another thing, i want my content box and the two left boxes to always end squared off, so that the footer is always in contact with both. if the content box stretches alot, i want the other two to stretch as well, and if the two left boxes stretch, i want the right content box to stretch. here is new versions of css and html css body { background: #212121; margin: 0px; padding: 0px; } #container { position: relative; left: 50%; margin-left: -400px; /* half the width of the div */ background: #212121; width: 800px; height: 1000px; } #leftstuff { float: left } #header { background-image:url("images/divs/header.gif"); width: 796px; height: 326px; margin-left: 1px; } #nav { background-image:url("images/divs/nav.gif"); margin-top: -301px; margin-right: 15px; width: 358px; height: 41px; float: right; } .left_box { background-image:url("images/divs/left_box.gif"); width: 245px; min-height: 75px; } #members { background-image:url("images/divs/members.gif"); width: 245px; height: 34px; } #content { background-image:url("images/divs/content.gif"); width: 552px; min-height: 184px; float: left; } #footer { background-image:url("images/divs/footer.gif"); margin-left: 3px; width: 796px; height: 50px; clear: both; } p { font-size: .25em/.25em; font-family: arial; color: #FFFFFF; padding-left: 20px; } p.copyright { font-size: 15px; font-family: arial; color: #333333; text-align: center; } Code (markup): html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html> <head> <title>Soldiers Of Fortune</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link type="text/css" rel="stylesheet" href="css.css"> </head> <div id="container"> <div id="header"><p class="copyright">Copyright</p></div> <div id="nav"></div> <div id="leftstuff"> <div class="left_box"></div> <div id="members"></div> <div class="left_box"></div> </div> <div id="content"></div> <div id="footer"></div> </div> </body> Code (markup):