PDA

View Full Version : Navigation Menu

wizard210
01-18-2005, 07:15 PM
I have a css template I'm working on. It may not be the greatest but It is something I like. I tried to recreate the layout like on the site "alistapart" minus the right column. On my navigation I'm stumped on how to center the links across the page. Plus to make them spread out a little bit. Could someone help me out. Or at least explain the concept to me.


<html>
<head>
<title>Horizontal Menu</title>
</head>

<style>
body{
background-color: #cccccc;
}

#page{
margin-top: 5px;
margin-right: auto;
margin-left: auto;
border: 1px solid;
background-color: white;
width: 70%;
}

#head{
padding: 0px;
background-color: red;
border-bottom: 1px solid;
border-top: 1px solid;
}


#main{
text-align: left;
color: black;
background-color: yellow;
border-bottom: 1px solid;
}

#footer{
background-color: blue;
border-top: 1px solid;
border-bottom: 1px solid;
}


#nav ul{
padding : 0;
margin : 0;
white-space : nowrap;
background-color : #003399;
color : White;
float : left;
width : 100%;
border-style : solid;
border-color : #0066CC;
border-width : 2px 0 2px 0;
}
#nav ul li{
display : inline;
}
#nav ul li a{
padding-left : 1em;
background-color : #003399;
color : White;
font-weight : bold;
text-decoration : none;

border-right-color : #0066CC;
border-right-style : solid;
border-right-width : 1px;
}
#nav ul li a:hover{
background-color : #99CCFF;
color : #000066;
}
</style>
<body>
<div id="page">

<div id="head">
<h2>Header</h2>
</div>

<div id="nav">
<ul>
<li><a href=>Link 1</a></li>
<li><a href=>Link 2</a></li>
<li><a href=>Link 3</a></li>
<li><a href=>Link 4</a></li>
</ul>
</div>

<div id="main">
<p>content</p>
<p>content</p>
<p>content</p>
</div>

<div id="footer">
<p>content</p>
</div>
</div>
</body>
</html>
gsnedders
01-18-2005, 07:26 PM
The display:inline should be on the ul, not the li... I think...
wizard210
01-18-2005, 07:32 PM
I tried that but it changes the nav back to a vertical alignment. I have gotten the links to spread out. I'm not having trouble getting the border on the right of the last link to go away. I tried this:


#nav ul li.last{
border-right: none;
}


this code doesn't do anything. Of course I gave the last li a class names "last". Any suggestions.
Puffin the Erb
01-18-2005, 07:57 PM
Change the following part of your StyleSheet :

#nav ul{
padding : 0;
margin : 0;
white-space : nowrap;
background-color : #003399;
color : White;
float : left;
width : 100%;
border-style : solid;
border-color : #0066CC;
border-width : 2px 0 2px 0;
text-align:center; /* changed */
}
#nav ul li{
display : inline;
}
#nav ul li a{
padding : 0 1em 0 1em ; /* changed */
background-color : #003399;
color : White;
font-weight : bold;
text-decoration : none;
border-right-color : #0066CC;
border-right-style : solid;
border-right-width : 1px;

}

Bear in mind <!DOCTYPE> will influence the layout in modern browsers.
I would advise you to use a <!DOCTYPE> of

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
wizard210
01-18-2005, 08:02 PM
Thanks for the help. Still having trouble getting the right border off of that last list item. Any ideas on how to get rid of it.
Puffin the Erb
01-18-2005, 08:19 PM
Just change the code as follows:

#nav ul li a{
padding :0 1em 0 1em ;
background-color : #003399;
color : White;
font-weight : bold;
text-decoration : none;
border-right-color : #0066CC;
border-right-style : solid;
border-right-width : 1px;

}

#end {border-right-width : 0 !important;} /*added - plus add id="end" below */

#nav ul li a:hover{
background-color : #99CCFF;
color : #000066;
}

</style>
<body>
<div id="page">

<div id="head">
<h2>Header</h2>
</div>

<div id="nav">
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li ><a id="end" href="" >Link 4</a></li>
</ul>
</div>
wizard210
01-18-2005, 08:48 PM
Worked like a charm. Thanks so much for all your help and your speedy replies.