Css navigation problem.

halfalime

05-22-2008, 10:02 AM

Hi,

I didnt know how to put a title to this but my problem is that i am making a simple css layout and when i put text in my nav bar the spaces between the buttons get bigger....

Heres the code:

body
{
background-color:#dad8d8;
}

#main
{
width:65%;
min-height:550px;
background-color:white;
margin:auto;
}

#header
{
width:100%;
height:100px;
background-image: url(background.gif);
}

#header2
{
width:100%;
height:40px;
background-image: url(background2.gif);
}

#footer
{
width:65%;
height:20px;
background-image:url(background.gif);
margin:auto;
}

#nav
{
width:22%;
min-height:50px;
margin-left:5px;
}

#button
{
width:100%;
height:20px;
background-color:gray;
text-align:center;
margin-top:5px;

}

p.button
{
color: white;
font: arial;
font-family: arial;
font-size:x-small;
padding-top:4px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title></title>
</head>
<body>
<div id="main">
<div id="header">
</div>
<div id="header2">
</div>
<div id="nav">
<div id="button"><p class="button">Home</p></div>
<div id="button"><p class="button">About us</p></div>
<div id="button"><p class="button">FAQ</div>
<div id="button"><p class="button">Services</p></div>
<div id="button"><p class="button">Enquiries</p></div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>

Thanks
HalfALime

abduraooft

05-22-2008, 10:21 AM

The easy and semantic way to create a navigation list is with unordered-list, <ul>
Say,
<ul id="nav">
<li>Home</li>
<li>About us</li>

</ul>
The way yo have given id is invalid, as we can't use the same id value for more than one element in a document. And no need to use an extra <p> tags for each item.

PS: Adding a style *{
margin:0;
padding:0;
} is useful to remove all default margin/padding settings(in browser) of all elements.

effpeetee

05-22-2008, 11:43 AM

This works for me.

http://exitfegs.co.uk/a22.html

Adjust the margins to space the buttons.
Put the css back into your style sheet.

Frank

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>For test purposes only.</title>
<style type="text/css">

* {
margin: 0;
padding: 0;
border: none;
}

body {
background-color: #dad8d8;
}

#main {
width: 65%;
min-height: 550px;
background-color: white;
margin: auto;
}

#header {
width: 100%;
height: 100px;
background-image: url(background.gif);
}

#header2 {
width: 100%;
height: 40px;
background-image: url(background2.gif);
}

#footer {
width: 65%;
height: 20px;
background-image: url(background.gif);
margin: auto;
}

#nav {
width: 22%;
min-height: 50px;
margin-left: 5px;
}

.button {
display: block;
margin:5px 0 0 50px;
height: 20px;
width: 59%;
background-color: gray;
text-align: center;
}

li.button {
color: white;
font-family: arial, sans-serif;
font-size: x-small;
padding-top: 4px;
}

</style>
</head>

<body>
<div id="main">
<div id="header"></div>

<div id="header2"></div>

<div id="nav">
<ol>
<li class="button">Home</li>

<li class="button">About us</li>

<li class="button">FAQ</li>

<li class="button">Services</li>

<li class="button">Enquiries</li>
</ol>
</div>

<div id="footer"></div>
</div>
</body>
</html>