HTML and CSS Reference
In-Depth Information
And here are the additions to the CSS file:
/* Entry page styles */
body#entry #content-wrapper {
padding-left:1em;
padding-right:50%;
}
body#entry #navigation {
font-size:x-large;
position:absolute;
top:4em;
right:20px;
}
body#entry #related {
display:none;
}
body#entry #footer {
padding:5px 0 5px 1.5em;
}
Put it all together, and you get the page shown in Figure 7-19.
Figure 7-19.
An entry page to a site section
We hope you are beginning to see the power of using this technique. You need only create
the hooks for areas of a web page that you may or may not need to populate with content and
use CSS to decide what gets shown. Wave goodbye to CMS solutions that require different
page templates for what may be fairly trivial cosmetic tweaks and let CSS take the strain.
