WEB STANDARDS CREATIVITY

The markup is as follows. Note that both lists feature an identical number of list items, and that each menu list has a unique
ID (m1 and m2).
Home
News Archive
Band Diary
Gigs
Downloads
Discography
Gallery
Merchandise
Members Area
li>Forums
We also knew that each menu item might feature unique treatment, so each link has its own unique ID that will come in
handy shortly.
Without CSS, the two lists will appear in their normal flow, one below the other. Therefore, we use margin values to push
and pull each into position. The first (m1) is simply given a left margin of 20px to move it away from the left edge of the
masthead. The second (m2) is moved 130px from the left edge of the masthead, and 160px from its natural position. Therefore,
m2 is moved to the bottom right of the other menu, and then pulled up enough to line up with it, thanks to the large
negative top margin. There is no need for positioning or floats.
#masthead ul#m1 {
margin: 0 0 0 20px;
padding-top:5px;
}
#masthead ul#m2 {
margin:-160px 0 0 130px;
}
chapter 1 Semantic Structure, Dirty Pretty Presentation
15