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.

How do I get the 'home' div under the 'navigation' div.
Heres the source code to help you

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>
<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

Thread: Bit of div/css help please

Thread Tools

Bit of div/css help please

Posting Permissions