Css Tutorials

Sunday, December 25, 2011

Chapter 9 CSS Positioning and Layout

Chapter 9 CSS Positioning and Layout
How do I decide when to use a class and when to use an ID?
Can I make an inline element display as if it were block-level, and vice-versa?
How do margins and padding work in CSS?
How do I make text wrap around an image without using the HTM align attribute?
How do I stop the next element moving up when I use float?
How do I align a site’s logo and slogan to the left and right without using a table?
How do I set an item’s position on the page using CSS?
How do I center a block on the page?
How do I create a liquid, two-column layout with the menu on the left, and the content on the right?
Can I reverse this layout and put the menu on the right?
How do I create a fixed-width, centered, two-column layout?
How do I create a full-height column?
How do I add a drop shadow to my layout?
How do I create a three-column CSS layout?
How do I add a footer to a liquid layout?
How do I display a thumbnail gallery without using a table?
How do I create boxes with rounded corners?
Summary

How do I decide when to use a class and when to use an ID?

How do I decide when to use a class and when to use an ID?

At first glance, classes and IDs seem to be used in much the same way: you can assign CSS properties to both classes and IDs, and apply them to change the way (X)HTML elements look. But, in which circumstances are classes best applied? And what about I

Solution

The most important rule, where classes and IDs are concerned, is that an ID must be only used once in a document, as it uniquely identifies the element to which it is applied. Once you have assigned an ID to an element, you cannot use that ID again within that document.

Classes, on the other hand, may be used as many times as you like within the same document. Therefore, if you have on a page a feature that you wish to repeat, a class is the ideal choice.

You can apply both a class and an ID to any given element. For example, you might apply a class to all text input fields on a page; if you want to be able to address those fields using JavaScript, each field will need a separate ID, too. However, no styles need be assigned to that ID.

I tend to use IDs for the main, structural, positioned elements of the page, so I often end up with IDs such as header, content, nav, and footer. Here’s an example:

Can I make an inline element display as if it were block-level, and vice-versa?

Can I make an inline element display as if it were block-level, and vice-versa?

Sometimes, we need to cause the browser to treat HTML elements differently than it would treat them by default.

Solution

In Figure 9.1, you can see that we’ve forced a div element to display as an inline element, and a link to display as a block.

Figure 9.1. Displaying the block-level element inline, while the inline element displays as a block

Here’s the markup that achieves this effect:

nline-block.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head>
<title>Inline and block level elements</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#one { background-color: #CCCCCC; color: #000000; border: 2px solid #AAAAAA; padding: 2px 6px 2px 6px; }
#two { background-color: #CCCCCC; color: #000000; border: 2px solid #AAAAAA; padding: 2px 6px 2px 6px; display: inline; }
a { background-color: #ACACAC; color: #FFFFFF; text-decoration: none; padding: 1px 2px 1px 2px; } a.block { display: block; }
</style>
</head>
<body>
<div id="one">A div is a block level element.</div>
<p>It is possible to display a div or any other block level element as an inline element.</p>
<div id="two">This div is displaying as an inline element.</div>
<p>This paragraph contains a
<a href="http://www.sitepoint.com/" >link</a> that displays as an inline element.</p>
<p>This paragraph contains a <a class="block"
href="http://www.sitepoint.com/">link</a> that displays as a
block element.</p>
</body>
</html>

Discussion

Block-level elements are distinguished from inline elements in that they may contain inline elements as well as other block-level elements. They’re also formatted differently than inline elements—block-level elements occupy a rectangular area of the page, spanning the entire width of the page by default, whereas inline elements flow along lines of text, and wrap to fit inside the blocks that contain them. HTML elements that are treated as block-level by default include headings (h1, h2, h3, … ), paragraphs (p), lists (ul, ol), and various containers (div, blockquote).

In the example above, we see a div that displays as normal. As it’s a block-level element, it takes up the full width of the parent element, which, in this case, is the body. If it were contained within another div, or a table cell, it would stretch only to the width of that element.

If we don’t want the div to behave in this way, we can set it to display inline by applying this CSS property:

display: inline;

We can cause an inline element to display as if it were a block-level element in the same way. In the above example, note that the a element displays as an inline element by default. We often want it to display as a block—for example, when we’re creating a navigation barusing CSS. To achieve this, we set the display property of the element to block. In the example above, this causes the gray box that contains the linked text to expand to the full width of the screen.

How do margins and padding work in CSS?

How do margins and padding work in CSS?

What’s the difference between the marginand paddingproperties, and how do they affect elements?

Solution

The margin properties add space to the outside of an element. You can set margins individually:

margin-top: 1em;
margin-right: 2em;
margin-bottom: 0.5em;
margin-left: 3em;

You can also set margins using a shorthand property:

margin: 1em 2em 0.5em 3em;

If all the margins are to be equal, simply use a rule like this:

margin: 1em;

This rule applies a 1em margin to all sides of the element.

Figure 9.2 shows what a block-level element looks like when we add margins to it. The code for this page is as follows:

margin.html

Figure 9.2. Applying margins to an element with CSS

The padding properties add space inside the element—between its borders and its content. You can set padding individually for the top, right, bottom, and left sides of an element:

padding-top: 1em;
padding-right: 1.5em;
padding-bottom: 0.5em;
padding-left: 2em;

You can also apply padding using this shorthand property:

padding: 1em 1.5em 0.5em 2em;

As with margins, if the padding is to be equal all the way around an element, you can simply use a rule like this:

padding: 1em;

Figure 9.3, which results from the following code, shows what a block looks like with padding applied. Compare it to Figure 9.2 to see the differences between margins and padding.

padding.html

Discussion

The above solution demonstrates the basics of margins and padding. As we’ve seen, the margin properties create space between the element to which they are applied and the surrounding elements, while padding creates space inside the element to which it is applied. Figure 9.4 illustrates this point.

Figure 9.3. Applying padding to an element in CSS

Figure 9.4. Applying margins, padding, and borders

If you’re applying margins and padding to a fixed-width element, they will be added to the specified width to produce the total width for that element. So, if your element has a width of 400 pixels, and you add 40 pixels’ worth of padding on all sides, you’ll make the element 480 pixels wide. Add 20 pixels of margins to that, and the element will occupy a width of 520 pixels (a visible width of 480 pixels with 20 pixels of spacing on either side). If you have a very precise layout, remember to calculate your element sizes carefully, including any added margins and padding.

In Internet Explorer 5 and 5.5, padding (and borders) are interpreted as being included within the specified width of the element; in these browsers, the element just described would remain 400 pixels in width with the padding included; adding margins would reduce the visible width of the element. One workaround for this peculiarity is to apply padding to a parent element, rather than adding a margin to the element in question. Alternatively, you could use the box model hack described in Chapter 7.

How do I make text wrap around an image without using the HTML align attribute?

How do I make text wrap around an image without using the HTML align attribute?

With HTML, it’s possible to wrap text around an image using the align attribute. This attribute is now deprecated, but there is a CSS equivalent!

Solution

Use the CSS float property to float an image to the left or right, as shown in Figure 9.5.

Here’s the code for this page:

float.html

Figure 9.5. Floating an image to the left using the float property

Discussion

The float property takes the element out of the document flow and “floats” it against the edge of the block-level element that contains it. Other block-level elements
will then ignore the floated element and render as if it isn’t there. Inline elements such as content, however, will make space for the floated element, which is why we can use float to cause our text to wrap around an image.

As we can see clearly in Figure 9.5, the text bumps right up against the side of the image. Figure 9.6 shows that, if we add a border to that image, the text bumps right up against the side of the border.

Figure 9.6. Text rendering against an image to which borders are applied

To create space between our image and the text, we need to add a margin to the image. Since the image is aligned against the left-hand margin, we’ll probably only want to add right and bottom margins to move the text away from the image slightly:

float2.html (excerpt)

.featureimage { float: left; width: 319px; border: 2px solid #000000; margin-right: 20px; margin-bottom: 6px; }

Figure 9.7 shows the resulting display, with extra space around the floated image.

Figure 9.7. Adding right and bottom margins to an image to improve the display

How do I stop the next element moving up when I use float?

How do I stop the next element moving up when I use float?

Floating an image or other element causes it to be ignored by block-level elements, although the text and inline images contained in those elements will appear to wrap around the floated element. How can you force elements on your page to display below the floated element?

Solution

The CSS property clear allows you to make a given element display beneath any floated elements as if they had not been floated in the first place. In this example, we apply this property with a value of both to the first paragraph that follows the list of ingredients:

float-clear.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>float and clear</title>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<style type="text/css">
.featureimg {
float: right;
width: 319px;
margin-left: 20px;
margin-bottom: 6px;
border:1px solid #000;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<h1>Chinese-style stuffed peppers</h1>
<img src="peppers1.jpg" width="319" height="213" alt="peppers"
class="featureimg" />
<ul>
<li>1 tablespoon of oil</li>
<li>1 crushed garlic clove</li>
<li>Peeled and finely chopped fresh ginger root</li>
<li>250g minced pork, beef or Quorn</li>
<li>1 chopped spring onion</li>
<li>1 chopped celery stick</li>
<li>Grated rind of 1 lemon</li>
<li>Finely chopped red chilli (optional)</li>
<li>4 large green peppers</li>
</ul>
<p class="clear">These stuffed peppers are lovely as a …</p>
...
</body>
</html>

As shown in Figure 9.8, where we’ve floated the image to the right of the page, this markup causes the paragraph to be pushed down so that it begins below the floated image.

Figure 9.8. The first paragraph displaying clear of the floated image

Discussion

The float property takes an element out of the flow of the document: the block-level elements that appear after it will simply ignore the floated element. This effect can be seen more clearly if we apply a border to the elements in our document, as illustrated in Figure 9.9, which adds a two-pixel border to the ul and p elements in the page.

The floated image basically sits on top of the block elements. The text within those elements wraps around the image, but the elements themselves will ignore the fact that the floated element is there. This means that, in our example, if the height of the ingredients list is less than that of the image, the paragraph after the list of ingredients will wrap around the image, as Figure 9.10 shows.

Figure 9.9. Applying a two-pixel border to the ul and p elements

Figure 9.10. Using the clear property to clear the paragraph from the float

To get the paragraph to begin at a point below that at which the image finishes, we can use the clear property:

float-clear.html (excerpt)

.clear { clear: both; }

We apply this CSS class to the first <p> tag after the ingredients list:

float-clear.html (excerpt)

<p class="clear">These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.</p>

If we leave the borders in place and reload the document as in Figure 9.10, we can see that the paragraph begins below the pepper image; its border does not run behind the image at all.

The clear property can also take values of left or right, which are useful if you want to clear an element only from left or right floats, respectively. The value you are most likely to use, though, is both. Be aware that both float and clear can trigger bugs, particularly in Internet Explorer. We discussed one of these bugs in Chapter 7.

How do I align a site’s logo and slogan to the left and right without using a table?

How do I align a site’s logo and slogan to the left and right without using a table?

If you’ve ever used tables for layout, you’ll know how easy it is to create the type of effect shown in Figure 9.11 with a two-column table. This method allows you to align the contents of the left-hand table cell to the left, and those of the right-hand cell to the right. Fortunately, the same end result is achievable using CSS.

respectively,.JPG

Figure 9.11. Aligning the logo and slogan left and right, respectively, using CSS

Solution

We can use float to create this type of layout:

slogan-align.html

slogan-align.css

body { margin: 0; padding: 0;
background-color: #FFFFFF;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
border-top: 2px solid #2A4F6F;
}
#header {
border-top: 1px solid #778899;
border-bottom: 1px dotted #B2BCC6;
height: 3em;
}
#header .slogan {
font: 120% Georgia, "Times New Roman", Times, serif;
color: #778899;
background-color: transparent;
float: right;
width: 300px;
text-align:right;
margin-right: 2em;
margin-top: 0.5em;
}
#header .logo {
float: left;
width: 187px;
margin-left: 1.5em;
margin-top: 0.5em;
}

Discussion

The float property allows us to align the elements in our header with either side of the viewport. Before adding the float, our elements will display next to each other, as in Figure 9.12.

The elements appear side by side because the HTML that marks them up dictates nothing about their positions on the page. Thus, they appear one after the other. Let’s take a look at the markup that controls the slogan’s alignment:

Figure 9.12. The elements displaying at their default positions

slogan-align.html (excerpt)

<div id="header">
<img src="stage-logo.gif" width="187" height="29" alt="Stage & Screen" class="logo" />
<span class="slogan">theatre and film reviews<span>
</div>

By floating the class logo to the left and slogan to the right, we can move the elements to the left and right of the display. I’ve also added a rule to align the text in our slogan to the right—without this line, the text that comprises our slogan will still be left-aligned within the span element that we floated to the right! Figure 9.13 shows the result.

Figure 9.13. Applying float to make the elements display as desired

To provide some space around the elements, let’s add a margin to the top and left of the logo, and the top and right of the slogan:

slogan-align.css (excerpt)

#header .slogan { font: 120% Georgia, "Times New Roman", Times, serif; color: #778899; background-color: transparent; float: right; width: 300px; text-align: right; margin-right: 2em; margin-top: 0.5em; }
#header .logo { float: left; width: 187px; margin-left: 1.5em; margin-top: 0.5em; }

One thing to be aware of when you’re using this technique is that, once you’ve floated all the elements within a container, that container will no longer be “held open” by anything, so it will collapse to zero height. To demonstrate this point, I’ve added a large border to my header in Figure 9.14. Here, the elements have not been floated, so the header surrounds the elements.

Figure 9.14. Showing the size of the header when elements are not floated

Once I float the elements right and left, the header loses its height, because the elements have been taken out of the document flow. The thick red line at the top of Figure 9.15 is actually the header’s border.

Figure 9.15. Floating the elements causing the header to collapse

To avoid this problem, you can set an explicit height for the block:

slogan-align.css (excerpt)

#header { border-top: 1px solid #778899; border-bottom: 1px dotted #B2BCC6; height: 3em; }

The block now occupies the desired area of the page, as Figure 9.16 shows.

Figure 9.16. The page displaying normally after a height is set for the header <div>

When you’re setting heights in this kind of situation, keep in mind the potential impact that user-altered text sizes may have on your layout. Using ems is a handy way to set heights, as they will expand relative to the text size, so they can accommodate larger text sizes without running the risk of having the floated element burst out of the box.