CSS: creating a horizontal navigation bar

If you are familiar with HTML element tags and basic CSS, creating a horizontal navigation bar is easy to accomplish. The elements used for this are the html <ul> and <li> tags (in the html <body> section) and the corresponding tags in css in the <head><style> section of your page.

If you have no idea what I just said, refer to W3C’s tutorial for basic HTML and CSS.

HTML

1. Type out the content of the navigation bar using the basic html unordered list <ul> tag.

2. Place it wherever you would like your navigation bar to appear within the <body></body> tags.

CSS: floating method (easiest and most efficient method)

1. Mark your unordered list styles as .nav ul.

2. Specify the margins, the padding, the overflow, and the bottom border:

.nav ul

{list-style:none;

margin-left:100;

padding-left:0;

overflow:hidden;

border-bottom:none;}

3. Mark your list as .nav li.

4. The only style you have to specify for your .nav li is the floating:

.nav li

{float:left;}

5. Mark the links for your navigation bar as .nav a. There will be two sections for your navigation bar link styles.

6. First .nav a section:

.nav a

{display:block;

width:12em;

font-weight:bold;

background-color:insert color;

text-align:center;

padding:5px;

text-decoration:none;}

7. Second .nav a section:

.nav a:link {color:#color;  background-color:insert color;}

.nav a:visited {color:#color;}

.nav a:hover {color:#color; background-color:insert color;}

.nav a:active {color:#color;}

8. Send the styles through a CSS practice board to make sure you have the colors that you want!

-Hannah Miller

~ by him22 on January 31, 2011.

One Response to “CSS: creating a horizontal navigation bar”

  1. Overall this post is excellent, and it’s a good habit for people to get into, creating navigation elements this way (as opposed to mixing up the content with a hard-coded visual layout or using too many images). I did not have any difficulty following the steps and didn’t catch any procedural errors.

    In order to improve these instructions even further, I’d offer the following suggestions:

    – indent the steps so they’re easier to visually tell apart
    – use “code” tags to make source examples easier to see and copy/paste
    – add some links to an HTML validator and a CSS validator
    – mention the importance of a DOCTYPE for predictable browser behavior
    – optionally, add some screenshots to latter steps
    – optionally, add a link to a popup in which a working example is seen

    Thanks for the contribution. 🙂

Comments are closed.

 
%d bloggers like this: