What is Marcopoloni?

Our goal is to bring people like you, who cherish and appreciate fine artistry, closer to the artisans who create them. Everything we offer is handmade by carefully-selected artisans who pour their love and pride into each piece of work.

Much as Marco Polo brought the Western world in contact with the treasures of the Far East in the late 13th century, Marcopoloni strives to put you in touch with beautiful handmade goods from around the world!

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!

You must be logged in to post a comment.

February 2019
« Mar