Cool web site - 480 CHAPTER 17 CUSTOMIZING YOUR BLOG S LAYOUT
480 CHAPTER 17 CUSTOMIZING YOUR BLOG S LAYOUT Next comes some style tweaking. To do something more attractive with the images, which otherwise display sequentially in the text, add two rules to allow you to float images to the left or right as you feel appropriate. Floating an image in this way allows the text to flow around the image. Add a margin to prevent the text from flowing too closely to the images. Also add two .storycontent rules to adjust the margins of the article paragraphs and headings to add a little more white space to the article. If text is too dense, it can be hard for your visitors to read. Listing 17-12 shows the new rules added to the style sheet. Listing 17-12. New Style Rules in styles.css .imageleft { float: left; margin-right: 1.5em; margin-bottom: 0.5em; } .imageright { float: right; margin-left: 1.5em; margin-bottom: 0.5em; } .storycontent p { margin-bottom:0.75em; } .storycontent h2 { margin-top:1.5em; margin-bottom:0.5em; } In order to choose which way an image floats, you just need to add the appropriate class attribute to the image tag in the article. Figure 17-19 shows the code in the article, in this case floating an image to the left. Figure 17-19. The class in the tag will cause the image to float left.
We recommend you use shared web hosting services, because many users agree that it is cheap, reliable and customer-satisfying webhost.