WEB STANDARDS CREATIVITY

The columns should now line up exactly with the vertical grid lines. But what about the masthead and all those lists? Well,
with a little CSS, I can remove the bullets, display them in a line, and make sure the height of the masthead is related to the
typography within it.
Once I have the alignment correct, I remove the gray from the columns and, for the purposes of this example, I add a height
to the columns to show how the grid would extend when there is content in the divs.
Styling the masthead and the language menu
The masthead is simply floated left and given a width of 100%, to make sure the div stretches all the way across.
#masthead {
float:left;
width:100%;
background: #000;
margin: 1em 0 0 0;
}
The languages menu, as you can see from the HTML, is just a with an id of language. First, I give it a little padding
above so the type doesn’t touch the top of the browser window. This is set in pixels, unlike all my other typography measurements,
which are set in ems, because I don’t want this value to change when the text is resized. I want it to be over on
the right, so I float the whole list right and give it a list-style of none, to get rid of the bullets.
#language {
padding: 2px 0 0 0;
float: right;
list-style:none;
}
Next, I float each left, and add some padding to both sides. Note this padding is declared in ems rather than pixels. This
is because when the text is resized, I want this space to be proportionally retained. If this measurement were given in pixels,
the space would resize in Internet Explorer, but the text would not. Finally, I add a border to the right to visually separate the
elements.
#language li {
float: left;
padding: 0 1em 0 1em;
border-right: 1px solid #fff;
}
Then I make the links white to stand out against the black. I will be overriding this default color with a separate color style
sheet, but I always find it easier to begin developing in black and white.
#language li a {
color: #fff;
}
I find that designing in black and white first helps clarify the design decisions I’m making. If color isn’t part of
the problem, remove it and think about it another time.
chapter 6 Grid Design for the Web
147