Originally Posted by
W. Luke
How can I simplify the code below:
And still have it viewable in fifth generation browsers?
I'm taking this as a box with a border. It could be make simpler if you know the width of the box before you make the graphics.
It might look something like this:
HTML Code:
<style type="text/css">
/* START */
/* set background images */
.rbroundbox { background: url(background.gif) repeat; }
.rbtop { background: url(top_border.gif) repeat-x; }
.rbtop div { background: url(top_left.gif) no-repeat top left; }
.rbtop div div { background: url(top_right.gif) no-repeat top right; }
.rbbot { background: url(bottom_border.gif) repeat-x; }
.rbbot div { background: url(bottom_left.gif) no-repeat top left; }
.rbbot div div { background: url(bottom_right.gif) no-repeat top right; }
.rbcontentside { background: url(left_border.gif) repeat-y; }
.rbcontentwrap { background: url(right_border.gif) repeat-y right; }
/* height and width stuff, particularly for the height of the bottom and top bars */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 9px;
font-size: 1px;
}
.rbcontent { padding: 0 1em 0em 1em ; margin: 0; }
#categories h2 { background: url(images/infobox/box_head_green.jpg) }
#catagories dt { apply .title style here }
#catagories dd { apply .data style here }
#catagories dt,
#catagories dd,
#catagories dl {
margin: 0;
padding: 0;
}
</style>
<div id="categories">
<div class="rbcontentwrap">
<div class="rbcontentside">
<div class="rbtop"><div><div></div></div></div>
<div class="rbcontent">
<h2>Shop Online</h2>
<dl>
<dt><a href="index.php?cPath=1">Herbs & Spices</a></dt>
<dd>The finest quality herbs and spices at realistic prices.</dd>
<dt><a href="index.php?cPath=2">Natural Teas</a></dt>
<dd>We search the world for the finest teas and infusions to offer you.</dd>
<dt><a href="index.php?cPath=3">Handmade Incense</a></dt>
<dd>Incenses blended from our own ingredients within ritual space</dd>
<dt><a href="index.php?cPath=4">Incense Resins</a></dt>
<dd>Resins from the easily attainable to the rare and exotic.</dd>
<dt><a href="index.php?cPath=5">Aromatherapy Oils</a></dt>
<dd>Essential and Fragrance oils of the highest quality from around the world.</dd>
<dt><a href="index.php?cPath=6">Bath and Beauty</a></dt>
<dd>All Natural, Herbal solutions to Bath and Beauty</dd>
<dt><a href="index.php?cPath=7">Tarot</a></dt>
<dd>Tarot Decks and Boxes from the common to the ornate</dd>
<dt><a href="index.php?cPath=8">Ritual Tools</a></dt>
<dd>Ritual Tools from around the world, many handmade.</dd>
<dt><a href="http://stores.ebay.com/thewitchesgrove" target="ebay">Current Auctions</a></dt><dd>Check out our current auctions on eBay</dd>
</dl>
</div>
<div class="rbbot"><div><div></div></div></div>
</div><!-- /rbcontentside -->
</div><!-- /rbcontentwrap -->
</div><!-- /#categories -->
The HTML is simpler, not sure if it is simpler overall.
(That is border code taken directly from my site, so you'll need to set the images. Don't bother with any of the code on those pages. I feel it dating quickly, and I have better versions now locally than what is there... I should really update the stuff.)
Douglas
Bookmarks