I worked on MagnoliaWoman.com, a Web site for a new woman’s magazine, for several weeks. One of the last things I did was design a page for the “She Said” feature, which uses quotes and photos of local women. My editor wanted to use all the quotes and all the pictures on the Web site, so I had to find a way to package them attractively.
I think this CSS styling worked nicely. It’s very customizable for colors, etc., and the empty div at the end ensures that it will work even if you have a short quote that doesn’t take up the whole box.
In my example, I’ve used a Homer Simpson quote, because nobody gives good quote like Homer.
Here’s the CSS:
.quotebox {width:500px; display:block; margin-left: auto; margin-right: auto; margin-bottom: 20px; padding: 10px; border:3px double #CCC; border-width:3px 0; color:#333; background-color:#f0f0f0; font-size: 16px; font-family: Georgia;}
.quotebox img { float: left; margin: 8px; width: 50px; border: 5px solid #fff; }
.after { clear:both;}
And here is the HTML markup:
<div class="quotebox">
<img src="photoURLhere" alt="alternatetexthere" />
<p>Quote quote quote quote quote quote quote quote</p>
<div class="after"></div>
</div>
Write a Comment