How to Format Pictures Using Cascading Style Sheets

Today I am going to skip working on taxes all day long and try to learn how to nicely style the History of Murano Glass page that I created the other day. I am going to do so by learning a couple of the Cascading Style Sheets tricks that Emi is so good at using.

Emi has more experience styling content and I am definitely jealous. My knowledge of cascading style sheets is average at best and I tend to use them improperly out of old habit. Plus, I tend to forget some of the things that I learn. For example, how do you get a photo to nest with the paragraph and not push the text below it? I know that I’ve done it before, but… When I try to wrap text around a picture I always get only one line of text to the side of the picture and the rest goes below… something that looks awful! If I were a little more enterprising, I would go look at a page I like and find out the styles that were used and reverse engineer the process. Perhaps that is what I should do, but it still sounds a little daunting. Wouldn’t it be easier to just have the pro tell you how to do it?

Yes! It would DEFINITELY be easier. Emi has agreed to help after lunch. I will make sure to create some sample files and save them on our intranet for future reference. I am also going to save a “before” version of the page so that I can look back and see how bad I was.

OK, now I’m done. The first thing I had to decide was the layout. Instead of our usual two column format, we thought that a three column format would make the article easier to read. To create 3 columns I took our existing layout which has a div (id=containerBody) that contains the entire page, then 2 divs (id=sideLinks to the left and id=contentSideLinks) inside the containerBody div for the navigation bar and the actual body of the page. To add the third column I created two divs (id=contentSideLinksBody and id=contentSideLinksMore) inside the contentSideLinks divand made the first one float left and the second one float right.

That was pretty easy. I had to make sure that the width of the divs did not exceed the width of the div that contained them. Then to create some spacing between the two, I added padding-left: 30px; to the right div (contentSideLinksMore). The padding gets added to the width so, I had to reduce the width by 30px to make sure that the second div would fit to the right of the left one.

Then I formatted my text by creating some sections with headings, I cut the long article into two pages, and got to my holy grail: embedding photos with text and make sure that the text wraps around the photo. What I figured was that this would happen automatically if you properly placed an img tag inside a p tag. The reality is that you have to define a class for float: left; and a class for float: right; and use the former for pictures aligned to the left and the latter for pictures aligned to the right.

When I was done, my History of Murano Glass article looked a lot better and I had the basis for formatting a lot of other articles.

Be Sociable, Share!

Leave a Reply