Welcome to WebmasterWorld Guest from 54.163.168.15

Forum Moderators: not2easy

How to create navigation button like menu?

   
3:24 pm on Jun 27, 2006 (gmt 0)

10+ Year Member



I want to create a vertical navigational button like menu on the left side of the page. I manage to get the look and feel the way I wanted. The problem is, I can't get the width to be the same size. It seem that the width of the background color for the text button will only go as far as the number of characters are in the button. Is there a way to make it so all the button are the same width?

Here is what I have so far.

#nav {
padding: 0;
clear: both;
float:left;
width: 150px;
margin-bottom: 0px;
background-color: #D45F00;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
font-variant: normal;
color: #FFFFFF;
margin-right: 0px;
margin-left: 0px;
text-align: left;
padding: 7px 5px;
border-bottom: 3px solid #7F0000;
border-top: 1px solid #AA0055;
}
#nav a:link, #nav a:visited{
color: #FFFFFF;
text-decoration: none;
margin: 0px;
padding-right: 5px;
padding-left: 5px;
text-transform: capitalize;
padding-top: 3px;
padding-bottom: 3px;
border-top: 2px solid #FF9900;
border-right: 1px solid #FF9900;
border-bottom: 1px solid #996600;
border-left: 1px solid #FF9900;
background-color: #CC6600;
}
#nav a:hover {
background-color: #CC6633;
border-top: 2px solid #663300;
border-right: 1px solid #CC9933;
border-bottom: 1px solid #CC9933;
border-left: 1px solid #663333;
}
#nav ul {
list-style: none;
margin: 0;
}
#nav ul li {
margin: 0 0 7px 0;
font-size: small;
}
#nav ul li ul li {
margin: 0 0 5px 15px;
}

4:27 pm on Jun 27, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



try this:
#nav li {
display: inline;
}
a great site to go to for playing with lists is list a matic. There are tutorials for all sorts of lists.
10:43 pm on Jun 27, 2006 (gmt 0)

10+ Year Member



Try:

#nav a {
display:block;
width:100%;
}

1:18 am on Jun 28, 2006 (gmt 0)

5+ Year Member



Hi :)

Your code is a bit unordered and
hard to read. Organize your code
like this example.

[2]
#nav {
clear: both;
float:left;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding: 7px 5px;
width: 150px;
background-color: #D45F00;
color: #FFFFFF;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
font-variant: normal;
border-bottom: 3px solid #7F0000;
border-top: 1px solid #AA0055;}

[/2]

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month