Приглашаем посетить
Фет (fet.lit-info.ru)

Creating a Fixed-Width Variation

Previous Page
Table of Contents
Next Page

Creating a Fixed-Width Variation

Creating a fixed-width version of the round-cornered box requires only two background images.

The first image can be applied to the <div> container using background: #09f url(lesson17f.gif) no-repeat 0 100%;. This will place the image in the bottom corner of the box. The image used is shown in Figure 17.10.

Figure 17.10. Background image used to style the <div> element.

Creating a Fixed-Width Variation


The <div> element needs to be given a width to match the width of the two images. 400px has been used here. This measurement can be changed to suit your needs.

The <div> must also be given some bottom padding so that the text doesn't sit over the top of the image. This can be achieved using padding-bottom: 20px.

The <p> element must be padded on both sides to keep it away from the edges of its container. This can be achieved using padding: 0 20px.

The <h2> element must have the margins set to 0 so that there are no gaps at the top of the container. It must also be padded on the top right and left using padding: 20px 20px 0 20px;.

A background image is applied to the <h2> element using background: url(lesson17e.gif) no-repeat 100% 0;. This will position the image at the top left of the element. The image is shown in Figure 17.11.

Figure 17.11. Background image used to style the <h2> element.

Creating a Fixed-Width Variation


Finally, the .furtherinfo paragraph content needs to be aligned right. This can be achieved using text-align: right as shown in Listing 17.8. The results can be seen in Figure 17.12.

Listing 17.8. CSS Code for Styling the Fixed-Width, Round-Cornered Box
div#pullquote
{
    background: #09f url(lesson17f.gif) no-repeat 0 100%;
    width: 400px;
    padding-bottom: 20px;
}

div#pullquote p
{
    padding: 0 20px;
}

div#pullquote h2
{
    margin: 0;
    padding: 20px 20px 0 20px;
    background: url(lesson17e.gif) no-repeat 100% 0;
}

div#pullquote p.furtherinfo
{
    text-align: right;
}

Figure 17.12. Screenshot of fixed-width, round-cornered box.

Creating a Fixed-Width Variation



Previous Page
Table of Contents
Next Page