Posted By

kevh on 12/11/06

Tagged

css
xhtml

Versions (?)

Last Edited at 12/11/06 04:57pm

Statistics

Viewed 898 times

Favorited by 1 user(s)

Related snippets

CSS Buttons - horizontal nav bar w/out images

/ Published in: CSS

created some navigation buttons for a site i'm working on, this is without images in a horizontal arrangement. kevh.net has the article on creating the vertical navigation, and how to do both using images instead of native CSS styling

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

#horizontal{
width: 100%; /* This makes our containing div 100% of the width of its container, in this example it is the browser window */
text-align: center; /* For centering container items in IE6 */
}
#horizontal ul{
margin: 0 auto; /* This centers the list in Firefox */
width: 520px; /* Specified width to prevent menu from being wider than screen, this can also be a percentage */
list-style-type: none; /* This removes the line item markers */
text-align: center; /* Aligning the text in the list */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
#horizontal li{
display: inline; /* Makes the list take up a single line */
width: 100px; /* Maximum width for items in list */
float: left; /* Prevents list items from taking up an entire row when they are set to display as block */
line-height: 10px; /* Sets height for lines in list */
}
#horizontal li a:link, #horizontal li a:visited{
display: block; /* Makes the link take up the entire area specified in the width and height attributes */
width: 100%;
text-decoration: none; /* Removing the underline */
background-color: #333333;
color: #CCCCCC; /* Setting font color */
border-color: #666666; /* This will help add some dimension to our buttons once we give them borders */
border-style: outset; /* This works correctly in IE7, and kinda half works in Firefox, in all, it adds dimension to our buttons */
border-width: 2px; /* Border width should be taken into account for your list width */
height: 100%;
}
#horizontal li a:hover, #horizontal li a:active{
border-style: inset; /* Makes the button appear to press in when it is hovered on */
}