HTML and CSS Reference
In-Depth Information
Titling and Hiding Groups of Links
If you wanted to view the sample site using a non-CSS supporting browser (a simple handheld
device perhaps), you would have no trouble working out what the various groups of links do—
the site would appear similar to the unstyled document as previously shown in Figure 12-16.
However, you could add some extra help in the form of a heading or two but use CSS to hide
those extra headings for browsers that
do
understand CSS:
.hide {
display:none;
}
That's all you need to do to hide the content from display. Now what parts of the page do
you want to hide? They appear in bold in the following code. Note that the related links already
have a visible heading—there's no need to hide that particular heading.
<div id="wrapper">
<div id="header">
<h1><img src="logo.gif" alt="TravelGo.com" /></h1>
<h2><img src="getting-you-there.gif" alt="Getting you there since 1972" /></h2>
<div id="headerlinks"><a href="/contact/">Contact Us</a> | <a
href="/sitemap/">Site
Map</a> | <a href="/finder/">Store Locator</a></div>
<div id="headersearch">
<form>
<input type="text" name="txtSearch" id="txtSearch" />
<input type="image" src="searchbutton.gif" alt="Search" />
</form>
</div>
</div>
<h3 class="hide">Primary navigation</h3>
<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>
