Styling the .furtherinfo Class


Styling the .furtherinfo Class

The last paragraph inside the round-cornered box is styled with a .furtherinfo class. This paragraph will be used to position the third image in the bottom-left corner.

The paragraph must be given some padding, but it will only be padded on the left edge. This can be achieved using padding: 0 0 0 20px.

The background image can be set using background: url(lesson17c.gif) no-repeat 0 100%;. The vertical background position is set to 100%, so the bottom edge of the image will sit against the bottom of the <p> element. The image is also set to no-repeat so that it does not repeat across the background of the <p> element as shown in Listing 17.6. The results can be seen in Figure 17.8.

Listing 17.6. CSS Code for Styling the .furtherinfo Class
div#pullquote {     margin: 2em;     background: #09f url(lesson17a.gif) no-repeat; } div#pullquote h2 {     margin: 0;     padding: 20px 20px 0 20px;     background: url(lesson17b.gif) no-repeat 100% 0; } div#pullquote p {     padding: 0 20px; } div#pullquote p.furtherinfo {     padding: 0 0 0 20px;     background: url(lesson17c.gif) no-repeat 0 100%; } 

Figure 17.8. Screenshot of styled .furtherinfo class.





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