Posted By

kevh on 12/11/06


Tagged

css xhtml cssbuttons


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

christessmer
vali29
monapdx


CSS Buttons - horizontal nav bar w/out images


 / Published in: CSS
 

URL: http://kevh.net/geekness/css-buttons/

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

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

Report this snippet  

You need to login to post a comment.