homepage Welcome to WebmasterWorld Guest from 54.197.111.87
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to create navigation button like menu?
ljCharlie




msg:1212567
 3:24 pm on Jun 27, 2006 (gmt 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;
}

 

4css




msg:1212568
 4:27 pm on Jun 27, 2006 (gmt 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.

kiwibrit




msg:1212569
 10:43 pm on Jun 27, 2006 (gmt 0)

Try:

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

a0731370




msg:1212570
 1:18 am on Jun 28, 2006 (gmt 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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved