a how-to do digital media maker things – working with the students in the new media research studio @mccnyu
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.
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:
3. Mark your list as .nav li.
4. The only style you have to specify for your .nav li is the floating:
5. Mark the links for your navigation bar as .nav a. There will be two sections for your navigation bar link styles.