This is my first time really using css and I can imagine it's a bit messy, but the problem i'm having is that the divs below the header navigation are not centered, and they should be touching the header.
I've tried everything I can think of to resolves this and nothing is working.
Can anyone help me? Thanks!!
So here's what the layout should look like
and heres what the layout looks like at the minuite: www.cannibalex.com
Heres the Html:
Heres the CssHTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> <title>Al Smith</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"></div> <div id="header"> </div> <div id="nav" style="width: 1024px; height: 46px"> <img alt="" src="images/nav_01.jpg" /><img alt="" src="images/nav_02.jpg" /><img alt="" src="images/nav_03.jpg" /><img alt="" src="images/nav_04.jpg" /><img alt="" src="images/nav_05.jpg" /><img alt="" src="images/nav_06.jpg" /><img alt="" src="images/nav_07.jpg" /><img alt="" src="images/nav_08.jpg" /><img alt="" src="images/subnav.jpg" /></div> <div style="position: absolute; width: 311px; height: 20px; z-index: 1; left: 382px; top: 16px" id="twitter_div"> <ul id="twitter_update_list"></ul></div> <marquee> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/cannibalex.json? callback=twitterCallback2&count=1"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/cannibalex.json? callback=twitCallback&count=1"></script></marquee> <div id="parent"> <div style="position: absolute; width: 212px; height: 359px; z-index: 5; left: 752px; top: 461px" id="nav2seven"></div> <div style="position: absolute; width: 212px; height: 37px; z-index: 4; left: 752px; top: 392px" id="nav2five"></div> <div style="position: absolute; width: 212px; height: 34px; z-index: 1; left: 752px; top: 429px" id="nav2six"></div> <div style="position: absolute; width: 283px; height: 84px; z-index: 3; left: 752px; top: 237px" id="nav2one"></div> <div style="position: absolute; width: 212px; height: 38px; z-index: 1; left: 752px; top: 321px" id="nav2two"></div> <div style="position: absolute; width: 71px; height: 501px; z-index: 1; left: 964px; top: 319px" id="nav2three"></div> <div style="position: absolute; width: 212px; height: 33px; z-index: 1; left: 752px; top: 359px" id="nav2four"></div> <div style="position: absolute; width: 43px; height: 585px; z-index: 2; left: 12px; top: 237px" id="contentleft"></div> <div style="position: absolute; width: 699px; height: 528px; z-index: 1; left: 54px; top: 237px" id="contentwindow"></div> <div style="position: absolute; width: 698px; height: 57px; z-index: 1; left: 54px; top: 763px" id="footer"></div></div> </body> </html>
HTML Code:body {background-color: black} #header{width: 1024px ; padding: 0px 0 0 0px; height:124px; margin-right:auto; margin-left:auto; background-color: #BABEDB; background-image: url(images/header.jpg); background-repeat: no-repeat; clear: both; } #nav{width: 1024px ; padding: 0px 0 0 0px; height:59px; margin-right:auto; margin-left:auto; background-color: #BABEDB; clear:both; } #twitter{width: 331px ; padding: 0px 0 0 0px; height:20px; font-family: Arial, Helvetica, sans-serif; margin-right:auto; margin-left:auto; clear:both; } #twitter_div { display: none; font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #B00; padding: 5px; background: #EEE; border: 1px solid #666; width: 600px; line-height: 1.5; margin-bottom: 10px; } #twitter_update_list { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000; list-style: none; margin: 0px; padding: 0px; clear: both; } #contentleft{width: 43px ; padding: 0px 0 0 0px; height:585px; margin-right:auto; margin-left:auto; background-color: #BABEDB; background-image: url(images/sides_02.jpg); background-repeat: no-repeat; } #contentwindow{width: 698px ; padding: 0px 0 0 0px; height:528px; margin-right:auto; margin-left:auto; background-color: #BABEDB; background-image: url(images/sides_03.jpg); background-repeat: no-repeat; clear: both; } #nav2one{width: 283px ; padding: 0px 0 0 0px; height:84px; margin-right:auto; margin-left:auto; background-color: #BABEDB; background-image: url(images/nav2_03.jpg); background-repeat: no-repeat; clear: both; } #nav2two{width: 212px ; padding: 0px 0 0 0px; height:38px; margin-right:auto; margin-left:auto; background-color: #BABEDB; background-image: url(images/nav2_04.jpg); background-repeat: no-repeat; clear: both; } #nav2three{width: 71px ; padding: 0px 0 0 0px; height:501px; margin-right:auto; margin-left:auto; background-color: #BABEDB; background-image: url(images/nav2_05.jpg); background-repeat: no-repeat; clear: both; } #nav2four{width: 212px ; padding: 0px 0 0 0px; height:33px; margin-right:auto; margin-left:auto; background-color: #BABEDB; background-image: url(images/nav2_06.jpg); background-repeat: no-repeat; clear: both; } #nav2five{width: 212px ; padding: 0px 0 0 0px; height:37px; margin-right:auto; margin-left:auto; background-color: #BABEDB; background-image: url(images/nav2_07.jpg); background-repeat: no-repeat; clear: both; } #nav2six{width: 212px ; padding: 0px 0 0 0px; height:34px; margin-right:auto; margin-left:auto; background-color: #BABEDB; background-image: url(images/nav2_08.jpg); background-repeat: no-repeat; clear: both; } #nav2seven{width: 212px ; padding: 0px 0 0 0px; height:359px; margin-right:auto; margin-left:auto; background-color: #BABEDB; background-image: url(images/nav2_09.jpg); background-repeat: no-repeat; clear: both; } #footer{width: 698px ; padding: 0px 0 0 0px; height:57px; margin-right:auto; margin-left:auto; background-color: #BABEDB; background-image: url(images/sides_12.jpg); background-repeat: no-repeat; clear: both; }







Reply With Quote