Welcome to WebmasterWorld Guest from 54.144.39.205

Forum Moderators: not2easy

Message Too Old, No Replies

How to create navigation button like menu?

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

New User

10+ Year Member

joined:Apr 4, 2005
posts:7
votes: 0


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 June 27, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 23, 2004
posts:728
votes: 0


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 June 27, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Oct 14, 2004
posts:319
votes: 0


Try:

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

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

New User

10+ Year Member

joined:June 14, 2006
posts:37
votes: 0


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]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members