PDA

View Full Version : Bit of div/css help please


SmileUK
10-02-2008, 10:32 PM
I'm doing my very first div / css layout and I've come to a bit of a problem.
http://i59.photobucket.com/albums/g295/maltfish/oops.png
How do I get the 'home' div under the 'navigation' div.
Heres the source code to help you

<!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>
<title>MyTropica - SNAPPY SLOGAN</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body {
background-image: url(images/layout/backtest.png);
text-align: center;
margin: 0px;
}
body, td, tr, table, th, div, span {
font-family: Arial;
font-size: 11px;
color: #000000;
font-weight: normal;
}
#top {
background-image: url(images/layout/top_bar.png);
background-repeat: repeat-x;
font-weight: bold;
height: 17px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
text-align: left;
border-bottom: 1px dotted #A6A6A6;
}
#bottom {
background-image: url(images/layout/top_bar.png);
background-repeat: repeat-x;
font-weight: bold;
height: 17px;
width: 98%;
padding-left: 1%;
padding-right: 1%;
padding-top: 3px;
text-align: left;
border-top: 1px dotted #A6A6A6;
position: absolute;
bottom: 0px;
left: 0px;
float: left;
}
.spacer {
height: 10px;
}
#main {
width: 800px;
margin-top: auto;
text-align: center;
}
#navtop {
background-image: url(images/layout/top_bar.png);
background-repeat: repeat-x;
width: 195px;
padding-right: 5px;
font-weight: bold;
padding-top: 3px;
border: 1px dotted #A6A6A6;
height: 17px;
float: left;
}
#contenttop {
background-image: url(images/layout/top_bar.png);
background-repeat: repeat-x;
width: 545px;
padding-right: 5px;
font-weight: bold;
padding-top: 3px;
border: 1px dotted #A6A6A6;
height: 17px;
float: right;
}
#advert {
background-image: url(images/layout/grey.png);
width: 400px;
border: 1px dotted #A6A6A6;
height: 125px;
}
.navbutton {
background-image: url(images/layout/grey.png);
width: 195px;
padding-right: 5px;
font-weight: bold;
padding-top: 3px;
border-left: 1px dotted #A6A6A6;
border-right: 1px dotted #A6A6A6;
border-bottom: 1px dotted #A6A6A6;
height: 17px;
float: left;
margin: auto;
}
-->
</style>
</head>
<body>
<div id="top">Hello and welcome to MyTropica.net</div>

<div class="spacer"></div>

<center>
<div id="main">

<center>
<div id="advert">Some type of rotating advert here</div>
</center>
<div class="spacer"></div>

<div id="navtop">Navigation</div>
<div class="navbutton">Home</div>
<div id="contenttop">Main Content</div>

<div id="bottom">Copyright MyTropica 2008+</div>

</div>
</center>

</body>
</html>
kk.
10-02-2008, 10:48 PM
youve used class"navbutton" for the home, change it to navtop

does that work?
SmileUK
10-02-2008, 10:50 PM
The home is meant to be navbutton, navtop is the bit that says 'navigation' thanks for replying though

edit:
i can make 2 buttons go under each other, if i remove the 'float: left;' out of 'navbutton' however this makes them in the center, not to the left.
I'll keep trying

edit 2:
by using another div to put the whole of the navigation in, I have made it work.
kk.
10-02-2008, 10:55 PM
ok try change the nav button class to float: left

Want to hide these adverts? Register an account for free!