Simplifying Layout....

How can I simplify the code below:

HTML Code:

<div id="categories"> <table width="174" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="3"><img src="images/infobox/box_top_green.jpg" width="174" height="26" alt="" /></td> </tr> <tr> <td colspan="3" background="images/infobox/box_head_green.jpg" align="center" class="infoBoxHeadingLeft" height="17">Shop Online</td> </tr> <tr> <td width="11" valign="top" background="images/infobox/box_left_bg.jpg"><img src="images/infobox/box_left_top.jpg" width="11" height="44" alt="" /></td> <td rowspan="2" width="152" valign="top" class="infoBox"> <img src="images/pixel_trans.gif" border="0" alt="" width="152" height="1" /> <p><a href="index.php?cPath=1"><span class="title">Herbs & Spices</span></a><br />The finest quality herbs and spices at realistic prices.</p> <p><a href="index.php?cPath=2"><span class="title">Natural Teas</span></a><br />We search the world for the finest teas and infusions to offer you.</p> <p><a href="index.php?cPath=3"><span class="title">Handmade Incense</span></a><br />Incenses blended from our own ingredients within ritual space</p> <p><a href="index.php?cPath=4"><span class="title">Incense Resins</span></a><br />Resins from the easily attainable to the rare and exotic.</p> <p><a href="index.php?cPath=5"><span class="title">Aromatherapy Oils</span></a><br />Essential and Fragrance oils of the highest quality from around the world.</p> <p><a href="index.php?cPath=6"><span class="title">Bath and Beauty</span></a><br />All Natural, Herbal solutions to Bath and Beauty</p> <p><a href="index.php?cPath=7"><span class="title">Tarot</span></a><br />Tarot Decks and Boxes from the common to the ornate</p> <p><a href="index.php?cPath=8"><span class="title">Ritual Tools</span></a><br />Ritual Tools from around the world, many handmade.</p> <p><a href="http://stores.ebay.com/thewitchesgrove" target="ebay"><span class="title">Current Auctions</span></a><br />Check out our current auctions on eBay</p>  <img src="images/pixel_trans.gif" border="0" alt="" width="152" height="1" /></td> </td> <td width="11" valign="top" background="images/infobox/box_right_bg.jpg"><img src="images/infobox/box_right_top.jpg" width="11" height="44" alt="" /></td> </tr> <tr> <td width="11" valign="bottom" background="images/infobox/box_left_bg.jpg"><img src="images/infobox/box_bottom_left.jpg" width="11" height="27" alt="" /></td> <td width="11" valign="bottom" background="images/infobox/box_right_bg.jpg"><img src="images/infobox/box_bottom_right.jpg" width="11" height="27" alt="" /></td> </tr> <tr> <td colspan="3"><img src="images/infobox/box_bottom.jpg" width="174" height="36" alt="" /></td> </tr> </table> </div>

And still have it viewable in fifth generation browsers?

Quote:

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> </div> </div>

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

Yeah it is a box with borders... It however takes multiple images for the top and bottom. You can see an actual presentation of this at: www.witchesgrove.com

It is the boxes on the left hand side. I am working on simplifying the entire page but it needs to work properly in Internet Explorer 5+. Less concerned about standards compliancy than getting it to look that same in all browsers.

Quote:

Originally Posted by W. Luke

Yeah it is a box with borders... It however takes multiple images for the top and bottom. You can see an actual presentation of this at: www.witchesgrove.com

That's much easier. Just don't think tables.

Code:

.greenboxed { background: url(left_and_right_side_combined.gif) repeat-y; width: 137px; /* set to the width of the graphic above */ } .greenboxed h2 { background: url(top_section.gif) no-repeat; text-align: center; padding: 30px 0 10px 0; /* vertical padding to get the text in the green area - fine tune this */ } .greenfooter { background: url(bottom_section.gif) no-repeat bottom; padding: 0 15px 30px 15px; /* should push the content away from the sides of the box, and make room for the bottom graphic */ } <div class="greenboxed"> <div class="greenfooter"> <h2>Title</h2> ... as above ... </div></div>

That should be about it. You still need to set fonts, and then combine the images into the three above.

hth,
Douglas

Thanks, I couldn't get either of these to work in Mozilla Firefox but will work on it more later this week after I get the initial changes up using tables.

I need to get my changes up as soon as possible for marketing purposes so while I want to simplify the code, that isn't really a priority right now. Thanks for the effort.

The theory was sound, here's a tested implimentation:

http://www.redmelon.net/box/

Works in IE4 too.

It uses the "if in doubt, add another div" method, which is almost as reliable as using tables, even in older browsers.

Douglas

I'll work with your last example there... seems a lot simpler. I even got it to work on the first try. ;)