Creating a Top-Only Flexible Variation


To create a top-only flexible variation of the round-cornered box, two background images are needed.

The first image can be applied to the <div> container using background: #fff url(lesson17g.jpg) no-repeat;. This will place the image in the top-left corner of the box. The image used is shown in Figure 17.13.

Figure 17.13. Background image used to style the <div> element. The image should be made over 2,000 pixels long so that it will grow to the width of the widest monitors.


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(lesson17h.jpg) no-repeat 100% 0;. This will position the image at the right of the element. The image is shown in Figure 17.14.

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


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

Listing 17.9. CSS Code for Styling the Top-Only Variation
div#pullquote {     background: #fff url(lesson17g.jpg) no-repeat; } div#pullquote p {     padding: 0 20px; } div#pullquote h2 {     margin: 0;     padding: 20px 20px 0 20px;     background: url(lesson17h.jpg) no-repeat 100% 0; } div#pullquote p.furtherinfo {     text-align: right; } 

Figure 17.15. Screenshot of styled top-only variation.





Sams Teach Yourself CSS in 10 Minutes
Sams Teach Yourself CSS in 10 Minutes
ISBN: 0672327457
EAN: 2147483647
Year: 2005
Pages: 234
Authors: Russ Weakley

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net