CANNIBALEX
26-05-2009, 10:56 AM
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
http://www.studentupload.co.uk/uploads/alsmithdark.jpg
and heres what the layout looks like at the minuite: www.cannibalex.com (http://www.cannibalex.com)
Heres the Html:
<!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>
Heres the Css
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; }
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
http://www.studentupload.co.uk/uploads/alsmithdark.jpg
and heres what the layout looks like at the minuite: www.cannibalex.com (http://www.cannibalex.com)
Heres the Html:
<!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>
Heres the Css
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; }