The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P19 pptx

Centering the content on the page Now, in “How do I create a liquid, two-column layout with the menu on the left and the content on the right?” we saw that we could use absolute positio

The result is shown in Figure 9.33

Figure 9.33 The floated, fixed-width, centered layout with a border

Discussion

For the purposes of this discussion, we’ll ignore purely aesthetic-style properties such as borders, colors, and fonts, so that we can concentrate on the layout Both versions of this layout begin with a centered div, similar to the layouts we worked with in “How do I center a block on the page?” This div is given the ID wrapper:

chapter09/2col-fixedwidth.css or chapter09/2col-fixedwidth-float.css (excerpt)

body {

margin: 0;

padding: 0;

⋮

⋮

The result of applying these styles is shown in Figure 9.34

Figure 9.34 Centering the content on the page Now, in “How do I create a liquid, two-column layout with the menu on the left and the content on the right?” we saw that we could use absolute positioning to control the navigation’s location, and apply enough margin to the content of the page so that there’d be no overlap between the two blocks The only difference in this layout is that we need to position the navigation within the centered wrapper block, so we’re unable to give it an absolute position on the page

Instead of using absolute, you can set an element’s positionproperty to relative which, unlike absolute positioning, keeps the element within the document flow; instead, it lets you shift the element from the starting point of its default position

on the page If no coordinates are provided in order to shift the element, it will ac­ tually stay exactly where the browser would normally position it However, unlike

an element that lacks having a position value specified, a relatively positioned

In plain English, an element with position: absolute that’s contained within an element with position: relativewill base its position on the edges of that parent element, instead of the edges of the browser window This is exactly what we need

to use to position the navigation within the centered block in this example The first step is to set the position property of wrapper to relative:

chapter09/2col-fixedwidth.css (excerpt)

⋮

We then use absolute positioning to set the location of the navigation block:

chapter09/2col-fixedwidth.css (excerpt)

Finally, we add a margin to the main content of the page to make space for the newly positioned navigation area:

chapter09/2col-fixedwidth.css (excerpt)

As long as the content of the page occupies more vertical space than the navigation, this layout will work just fine Unfortunately, since the navigation block is abso­ lutely positioned, it’s unable to affect the height of the wrapper block, so if the

content is shorter than the navigation, the wrapperblock will be too short to contain the navigation We can see this effect by adding a two-pixel, red border to the wrapper, and adding text to the sidebar so that it becomes longer than the content

In Figure 9.35, you can clearly see that the content in the sidebar extends below the wrapper element

Figure 9.35 The content in the sidebar extending below the bottom of the wrapper block

The alternative method of using floated blocks to achieve our design goals is more complex, but it overcomes the limitation I just mentioned, enabling us to position

a footer below the columns regardless of which column is the longest First, we float the navigation block left and the content block right:

chapter09/2col-fixedwidth-float.css (excerpt)

This should give us the same layout as the positioned example offered However,

if we now look at the layout with the red border on the wrapper, you’ll find that the red border only wraps the header area of the page The wrapper no longer wraps!

Figure 9.36 Floating the navigation left and the content right

One of the reasons we wanted to use a floated layout, however, is to add a footer I will add this to the document below the floated columns:

chapter09/2col-fixedwidth-float.html (excerpt)

Reload the page, and as you can see in Figure 9.37, the border of the wrapper block now cuts through the page content This occurs because we floated most of the block’s contents, removing them from the document flow The only element inside wrapper that’s still within the document flow is the footer block, which can be seen in the bottom-left corner of the wrapper block, where it has been pushed by the floated blocks

If we set the clear property of the footer block to both, the footer will drop down below both of the floated blocks; this forces the wrapper to accommodate both the navigation and the content—no matter which is taller The page now renders as shown in Figure 9.38:

chapter09/2col-fixedwidth-float.css (excerpt)

⋮

Figure 9.37 After adding the footer

Figure 9.38 The footer set to clear: both

If you’ve tried to add a background to a side column like the one shown in “How

do I create a fixed-width, centered, two-column layout?”, you may have discovered you’re unable to make the column extend to the full height of the taller column next

to it, forcing your background to look a little strange For example, applying a background image to the navigation element will simply display the background behind the navigation list, rather than stretching it down the column to the end of the content, as shown in Figure 9.39

Figure 9.39 The gray background displaying only behind the navigation content

Solution

The solution to this problem is to apply the background image to a page element that does extend the full height of the longer column, but displays at the same width

as our navigation, making it look as though the background is on the navigation column In this case, we can apply the background image to wrapper, as Figure 9.40 illustrates:

chapter09/2col-fixedwidth-float.css (excerpt)

Figure 9.40 The background appearing to be attached to the navigation column

Discussion

This simple technique can be used to great effect in your layouts In this example,

I chose to apply the image to the wrapperblock, as I want the background to extend right down to the end of the content; the solid image on my header background hides the sidebar background image as it extends all the way to the top of the page You could also use this technique to have the background stop above the footer, or

after a certain section of content: simply apply the background to an element that contains the section of content you want

Creating Gradient Backgrounds

I’ve used a repeating background image here as my image is the same all the way down the page You could also use a tall image with a gradient fading to your background color and set it to no-repeat

How do I add a drop shadow to my layout?

Drop shadows are commonly used on layouts—particularly on content boxes within a layout Let’s add a drop shadow to a fixed width layout such as the one

we worked with in the section called “How do I create a full-height column?”

Solution

We can add a drop shadow to the edges of this layout using two images: one for the background, and one to create the shadow effect at the bottom of the layout Fig­ ure 9.41 shows the effect we’re working to create

To create this effect, we need to add some markup that will provide us with hooks

to which we can add the two images

The first image, which I’ve named shadow-bg.jpg and can be seen in Figure 9.42, is

a background image that we’ll apply to the div with an ID of wrapper This image

is the left and right drop shadow, and it repeats down the page The second image,

shadow-bottom.jpg, we’ll apply to the bottom of our layout

Figure 9.42 The files used to create the drop shadow effect I’ve increased the width of my wrapperblock by 20 pixels because I want the content area to stay the same width, but I need to allow room for the shadow on either side

of the content I’ve also added the shadow image as a background image on this element:

chapter09/2col-fixedwidth-shadow.css (excerpt)

Next, I wrap an additional div—which I’ve named wrapper2—around the content, navigation, and footer elements, just inside the wrapper block:

I add to this div the sidebar background image that I’ve moved from the outer wrapper I also add some padding to this div to push the page contents away from the drop shadow:

chapter09/2col-fixedwidth-shadow.css (excerpt)

Finally, I need to add the bottom of the drop shadow I add another div element with an id of btm to the code just before the closing </div> of the outer wrapper:

chapter09/2col-fixedwidth-shadow.html (excerpt)

Now I simply add the drop shadow bottom image as a background image to this div and give it a height equal to the size of the background image:

chapter09/2col-fixedwidth-shadow.css (excerpt)

Voilá—our drop shadow is complete!

How do I create a three-column CSS layout?

Many designs fall into a three-column model As demonstrated in Figure 9.43, you might need a column for navigation, one for content, and one for additional items such as advertising or highlighted content on the site Let’s see how we can accom­ plish this type of layout using CSS

Figure 9.43 A three-column layout developed in CSS

Solution

A three-column, liquid layout is easily created using a simple technique, similar to the one we used to build the column layout in “How do I create a liquid, two-column layout with the menu on the left and the content on the right?”:

chapter09/3col.html

chapter09/3col.css

Discussion

This layout uses a simple technique We start with the unstyled document shown

in Figure 9.44, which has three divs: one with ID content, one with ID side1, and one with ID side2

Figure 9.44 The unstyled XHTML document

We create the three columns using the following CSS fragments We place both the left-hand and right-hand columns with absolute positioning: side1 is positioned from the left edge of the page, side2 from the right We also add some significant top padding to these columns to make room for background images that will act as headings:

chapter09/3col.css (excerpt)

chapter09/3col.css (excerpt)

⋮

The content block simply sits between the two absolutely positioned columns, with margins applied to the content to give the columns the room they need:

chapter09/3col.css (excerpt)

Figure 9.45 shows what the page looks like with these initial positioning tasks complete

Figure 9.45 Three columns appearing with the initial CSS positioning With our three columns in place, we can simply style the individual elements as required for the design in question I’ve used background images of tomatoes on the body and on side2, as you can see previously in Figure 9.43