HTML and CSS Reference
In-Depth Information
Note
We've kept the unordered list inside the same outer containing
div
with an
id
of
tablinks
, as we
did in the previous layout in Chapter 8. It's not always necessary to wrap the list in a containing
div
—you
could simply give the
ul
an
id
and manipulate that. We've also left
class="current"
on one of the links
for the purposes of getting the styling right, but we'll show you a smarter way of indicating what page you
are on later in this chapter.
■
The previous code would result in a dull-looking and entirely inappropriate list, as shown
in Figure 12-1.
Figure 12-1.
The unstyled list: it needs a bit of work to become a navigation bar, doesn't it?
Removing Browser Default Styling
There's a process that we need to go through to get this list of links looking the way we want.
The first step is to reset some of the default styling that each browser applies to the list—for
example, the bullet points and the padding and margins. To see where these different parts of
the list item are located, take a look at Figure 12-2, which shows the block-level elements that
make up this list.
Figure 12-2.
The list's structure revealed
You can see in Figure 12-2 that the unordered list, the
ul
element, has padding on the left
side; the individual list items have no margins, but the bullet icon sits outside of the list items.
At least, this is how the list items are understood by Firefox—other browsers may treat the
default styling of lists differently or to varying degrees, so the safest way to begin is to reset all
of it. The following CSS shows how you can do this (but only for lists that are in the
div
with an
id
of
tablinks
):
