HTML and CSS Reference
In-Depth Information
CHAPTER 12
■ ■ ■
Styling Lists
B ack in the dim distant past (well, Chapter 8 actually, but it feels like a while back now), we
committed something of a sin—we demonstrated a CSS technique that took a series of links
inside div elements and styled them so that they ranged across the page horizontally to form
header navigation. As we admitted at the time, that approach is not the best way to accom-
plish our goal; we were merely doing it that way to show that it's possible. For some people,
styling a div could be the only choice they have, due to restrictions of a CMS or HTML that's
output by some other process. However, even with that disclaimer firmly stated, we still had
a dirty feeling about it. Here's where we ask for absolution.
The truth is, the header links that we were demonstrating were, at their heart, a list of
links. You may not have thought so at the time, given that their design—one link after another
horizontally—doesn't look the same as a “standard” list. But the whole point of CSS is that the
presentation (horizontal, gradient background, whatever) is separate from the underlying
semantics (it's a list of links, or a logical grouping).
With that in mind, let's revisit the header that we built in Chapter 8, break apart the offend-
ing markup, and start from scratch. Afterward, we'll look at some of the many ways lists can be
presented depending on their purpose or position on the page.
The Basic List
So, we're getting rid of the <div> tags and instead opting for list items. Here's how the XHTML
for the navigation looks:
<div id="tablinks" class="clearfix">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/travel/" class="current">Travel</a></li>
<li><a href="/flights/">Flights</a></li>
<li><a href="/hotels/">Hotels</a></li>
<li><a href="/late-deals/">Late Deals</a></li>
</ul>
</div>
255
Search WWH ::




Custom Search