/ 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 */ }
URL: http://kevh.net/geekness/css-buttons/