« Grisoft Updates Free AVG Anti-Virus Tool | Main | MSN's desktop search »
November 16, 2004
CSS Boxes around Testimonials
Many websites these days bear witness to the popularity of colored boxes used for quotes, testimonials and other places where the authors want the text to stand out from the rest of the page.
Over the years there have been a number of hacks to create this type of effect using Tables, but some of the attributes used in the making, such as leftmargin, topmargin, marginwidth, marginheight and bordercolor, have never been part of a formal specification.
The markup might look something like this:
<table align="center" cellpadding="15" cellspacing="0" width="300" style="bordercolor="ff0000" border="1" bgcolor="#0000ff"><tr><td><font size="+1" face="Arial,Helvetica,Sans-Serif" color="#ffffff"><i>Some text</i></font></td></tr></table>
All it takes to start making a mess of your web page is to forget to close one of these tags. We all know that is easy enough to do. Luckily there is a much better way using CSS. You can replace all of the markup up above with:
<div class="myblock>Some text</div>
The beauty of this method is you only have to create the style information once and then you can call the style into your page as many times as you like. Lets look at the CSS:
.myblock (
font-family: arial, verdana, sans-serif;
font-size: 10pt;
color: navy;
border: solid 1px black;
background-color: #C8F8E8;
margin-left: 5mm;
margin-right: 5mm;
padding: 15;
)
Of course you can always add additional properties and values or remove ones you don't want. Using this this type of construct saves you from using invalid markeup and depreciated tags and attributes. You are also less likely to make a mistake when re-using <div class="myblock>Some text</div> in place of tables.
If you would like to see an example, see this article on my blog:
http://www.homebusiness-websites.com/myarchives/2004/11/get_positioned.html
I've modified the stylesheet so that any time I use blockquote tags in my articles it puts the text in a neat blue box.
If you would like to know more about this method please see the URL below for reference:
http://www.w3.org/TR/REC-CSS2/box.html
Posted by Steve MacLellan at November 16, 2004 07:40 AM
Trackback Pings
TrackBack URL for this entry:
http://www.homebusiness-websites.com/mt/mt-tb.cgi/41
Comments
Post a comment
Thanks for signing in, . Now you can comment. (sign out)
(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)