HTML and CSS Reference
In-Depth Information
body#splash #navigation {
body#splash #related {
body#splash #footer {
padding:5px 0 5px 1.5em;
The end result (with a fancy image in the content area instead of paragraphs of text) looks like
Figure 7-18.
Figure 7-18. A splash page, switched using CSS
We've hidden the parts we don't want to see and moved other parts of the page to fill
those spaces vacated. But hang on a minute, what's happened to the navigation and related-
links lists? All we've done is hide them using the CSS display property; it may well be that
unless you've done a bit of pruning, unneeded content will exist in that markup. Ideally, what
you should have is something like this:
<body id="splash">
<div id="wrapper">
<div id="header"><h1>Fictional TravelCo &trade;</h1></div>
<div id="breadcrumb">
You are here: <a href="/travel/">Travel</a> &gt;
<a href="/travel/destinations/">Destinations</a> &gt; Europe
Search WWH ::

Custom Search