CSS Layouts - Pro CSS Techniques

HTML and CSS Reference

In-Depth Information

<h2>Prague - Charles Bridge</h2>

</div>

<div id="footer">Legal mumbo jumbo goes here</div>

</div>

</body>

■

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

side

•

Move the navigation over to the right and increase the font size on those links substan-

tially

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 :

Search WWH ::

Custom Search

Home