Class 17
Creating Horizontal Navigation
• Step 1. In the html file, insert an unordered
list with list items.
<div id="navigation" ...
Step 2. Get rid of List Style!
#navigation ul {
margin: 0;
padding:0;
list-style:none;
}
Step3: Display inline to flatten horizontally
#navigation li {
display:inline;
}
STEP 4
STYLE!
Upcoming SlideShare
Loading in …5
×

Class 17

465 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
465
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Class 17

  1. 1. Class 17
  2. 2. Creating Horizontal Navigation • Step 1. In the html file, insert an unordered list with list items. <div id="navigation" class="grid_12"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Featured</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div>
  3. 3. Step 2. Get rid of List Style! #navigation ul { margin: 0; padding:0; list-style:none; }
  4. 4. Step3: Display inline to flatten horizontally #navigation li { display:inline; }
  5. 5. STEP 4 STYLE!

×