HTML and CSS Reference
In-Depth Information
<div id="content-wrapper">
<div id="content-inner">
<h2>Prague - Charles Bridge</h2>
<p><img src="charles-bridge.jpg" alt="Charles Bridge at night" /></p>
<div id="navigation"></div>
<div id="related"></div>
<div id="footer">Legal mumbo jumbo goes here</div>
Note The two div s that are related to the navigation and related links are still present in the source but
they're empty. You could simply remove those elements; however, that would create a different page tem-
plate, and if you are happy to create many variations of a page by changing the underlying construction,
then the style switcher approach is not really relevant. This approach—using CSS attributes to show or hide
portions of a page—is most effective and appropriate when you want to have a single-page template that
adapts to different circumstances, and you're most likely to use it when implementing in a CMS or using the
templating feature in programs like Dreamweaver or GoLive. It's perfectly acceptable to have an empty div
that doesn't display on screen like this—you'll be adding a few extra bytes to your page, but you'll enjoy the
great advantage of maintaining just one page structure across a whole site that can be controlled and
switched via CSS rules.
Switching to a Section Entry Page
Let's tweak the design once more to demonstrate the switching technique further. Now we're
going to do the following:
Get rid of the related-links content
Change the main content so that it takes up 50 percent of the design on the left-hand
Move the navigation over to the right and increase the font size on those links substan-
We're also going to change the content that appears in the relevant sections to reflect the
type of content we might expect to see in that layout. Remember, though, that the overall page
structure—the div s that hold everything together—will not change at all. We'll use this page
layout as an entry page for a specific section of our site, so we'll give it an id of entry :
<body id="entry">
Search WWH ::

Custom Search