PDA

Click to See Complete Forum and Search --> : Using DIVS to replicate the functionality of TABLES. Help Please!!

JSDN_UK
08-23-2006, 11:29 AM
Hi again,

Some things are best explained with pictures, so here goes...

What i'm trying to achieve is this...

http://www.aestheticnet.com/enfield/image_table.gif

But what I get (using div's) is this...

http://www.aestheticnet.com/enfield/image_div.gif

Can anyone see where I've gone wrong with my code??? Any help would be fantastic!!!


.feature_item {
background-color:#f5ecd0;
height:100%;
}

.promoimage {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
float: right;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}

<div class="feature_item" style="padding-top:10px; padding-left:10px; border-bottom:1px solid #000000; overflow:hidden">
<img src="/images/features/feature_graffiti_lge.jpg" alt="Latest Campaign Image" class="promoimage"/>
<h1>£500 Reward. The Writing is on the Wall...</h1>
<p>Enfield Council has declared war on graffiti - to help us bag-a-tagger and earn a £500 reward, call 0208 379 1000...</p>
<p><a href="/downloads/graffiti_reward.pdf">See the flyer</a>.</p>
<p style="clear:both"></p>
</div>

<div class="feature_item" style="border-bottom:1px solid #000000; overflow:hidden; vertical-align:top">
<div style="float:left; width:50%; padding-top:10px; padding-left:10px; padding-bottom:10px; overflow:hidden">
<img src="/images/features/feature_thames_sml.jpg" alt="Report a water leak on the road" class="promoimage"/>
<h1>Report a water leak on the road</h1>
<p>Help preserve one of our most important natural resources. If you see a water leak on the road don't hesitate to notify Thames Water immediately.</p>
<p><a href="http://www.thames-water.com/UK/region/en_gb/content/report_leakage">Report a water leak</a>.</p>
<p style="clear:both"></p>
</div>
<div style="float:right; width:50%; padding-top:10px; padding-left:10px; padding-bottom:10px; overflow:hidden">
<img src="/images/features/feature_autumn_sml.jpg" alt="Events Image" class="promoimage"/>
<h1>The Enfield Autumn Show</h1>
<p>Come to the fantastic annual Enfield Autumn Show. Novelty acts, motorcycle display teams, music concerts, rides, horticulture and crafts, flying owl display, charity stalls, animal rescue charities, kids events, football, funfair and much more.</p>
<p>Enfield Town Park, Enfield Town, EN1.
<br/>10.30am till 6.00pm.
<br/>&pound;5.00 adults, &pound;3.00 concessions - Kids 15 and under FREE.
<br/>Saturday 9th and Sunday 10th September 2006</p>
<p style="clear:both"></p>
<!-- <p><a href="http://www.enfield.gov.uk/press%20releases/2006/julsep/Council%20offers%20FREE%20SWIMMING.htm">See the press release</a>.</p> -->
</div>
</div>
WebJoel
08-23-2006, 02:26 PM
Here's a possibility. Creating a centered DIV for the top part, and an indentical DIV centered just below it (accounting for padding, it won't be the same width as the top DIV).
In that bottom DIV, float one left and float one right. Bypass alot of extra coding that you have (but you'll want to import your background color, actual images, removed/add borders or border colors that you want, etc. This is just a template that I did in about 5-minutes, based upon the *gif image you showed and your posted textual content.


<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<style type="text/css">
body, html {margin:0; padding:0; border:0;} /* Re-sets IE to "zero" for these values */
img {margin:5px;}
</style>
</head>

<body>
<!-- This is the top box, note width and margin -->
<div style="width:640px; height:200px; margin:15px auto 0 auto; padding:6px; border:1px solid brown;">
<img src="/images/features/feature_graffiti_lge.jpg" alt="Latest Campaign Image" style="float:right; width:130px; height:195px;" />
<h1>£500 Reward. The Writing is on the Wall...</h1>
<p>Enfield Council has declared war on graffiti - to help us bag-a-tagger and earn a £500 reward, call 0208 379 1000...</p>
<p><a href="/downloads/graffiti_reward.pdf">See the flyer</a>.</p>
</div>

<!-- This is the bottom box, width MUST equal top-box width in order to center correctly -->
<div style="width:652px; height:200px; margin:0px auto; border:1px solid brown;">

<!-- this is the bottom-left quadrant -->
<div style="width:300px; margin:0; border-right:1px dotted red; padding:6px 10px 6px 6px; float:left;">
<h1>Report a water leak on the road</h1>
<img src="/images/features/feature_thames_sml.jpg" alt="Report a water leak on the road" style="float:right; width:90px; height:135px;" />
<p>Help preserve one of our most important natural resources. If you see a water leak on the road don't hesitate to notify Thames Water immediately.</p>
<p><a href="http://www.thames-water.com/UK/region/en_gb/content/report_leakage">Report a water leak</a>.</p>
</div>

<!-- this is the bottom-right quadrant -->
<div style="width:320px; padding:6px; margin:0;float:right">
<h1>The Enfield Autumn Show</h1>
<img src="/images/features/feature_autumn_sml.jpg" alt="Events Image" style="float:right; width:65px; height:110px;" />
<p>Come to the fantastic annual Enfield Autumn Show. Novelty acts, motorcycle display teams, music concerts, rides, horticulture and crafts, flying owl display, charity stalls, animal rescue charities, kids events, football, funfair and much more.
<br />
<br />
Enfield Town Park, Enfield Town, EN1.<br />
<br/>10.30am till 6.00pm.
<br/>&pound;5.00 adults, &pound;3.00 concessions - Kids 15 and under FREE.
<br/>Saturday 9th and Sunday 10th September 2006</p>

</div>
</div>
</body>
</html>
JSDN_UK
08-24-2006, 05:13 AM
Thanks, but do you know of a method whereby you can use % widths???

Any ideas/hints/code/resources would be fantastic!!
JSDN_UK
08-24-2006, 07:49 AM
Ok... Worked it out for myself. Here's the code if anyone else is having similar problems



<div class="feature_item" style="border-bottom:1px solid #000000; overflow:hidden">
<div style="margin:10px">
<img src="/images/features/feature_graffiti_lge.jpg" alt="Latest Campaign Image" class="promoimage"/>
<h1>£500 Reward. The Writing is on the Wall...</h1>
<p>Enfield Council has declared war on graffiti - to help us bag-a-tagger and earn a £500 reward, call 0208 379 1000...</p>
<p><a href="/downloads/graffiti_reward.pdf">See the flyer</a>.</p>
</div>
</div>

<div class="feature_item" style="border-bottom:1px solid #000000; overflow:hidden; vertical-align:top">
<div style="float:left; width:50%; margin-right:-1px; border-right:1px solid #000000;">
<div style="margin:10px">
<img src="/images/features/feature_thames_sml.jpg" alt="Report a water leak on the road" class="promoimage"/>
<h1>Report a water leak on the road</h1>
<p>Help preserve one of our most important natural resources. If you see a water leak on the road don't hesitate to notify Thames Water immediately.</p>
<p><a href="http://www.thames-water.com/UK/region/en_gb/content/report_leakage">Report a water leak</a>.</p>
<p style="clear:both"></p>
</div>
</div>
<div style="margin-left:-1px; float:right; width:50%; border-left:1px solid #000000;">
<div style="margin:10px">
<img src="/images/features/feature_autumn_sml.jpg" alt="Events Image" class="promoimage"/>
<h1>The Enfield Autumn Show</h1>
<p>Come to the fantastic annual Enfield Autumn Show. Novelty acts, motorcycle display teams, music concerts, rides, horticulture and crafts, flying owl display, charity stalls, animal rescue charities, kids events, football, funfair and much more.</p>
<p>Enfield Town Park, Enfield Town, EN1.
<br/>10.30am till 6.00pm.
<br/>&pound;5.00 adults, &pound;3.00 concessions - Kids 15 and under FREE.
<br/>Saturday 9th and Sunday 10th September 2006.</p>
<!-- <p><a href="http://www.enfield.gov.uk/press%20releases/2006/julsep/Council%20offers%20FREE%20SWIMMING.htm">See the press release</a>.</p>-->
<p style="clear:both"></p>
</div>
</div>
</div>
WebJoel
08-25-2006, 08:35 AM
Yes, nice. But try re-sizing this. You'll see that having two adjacent 50% width won't work in a 100% container with a border, and borders/margins on the two lower DIV, as manually reducing the screen width causes the right-hand bottom div to drop-down, return, drop-down, return, etc. I forget what this is called, this in & out appearance 'bug', but there is a fix to it. ("float drop"??)

I'm not even sure if this appears on an 800x600 resolution. Looks nice on 1024x768.
Also, in the image you showed, the "picture" in each section is to the right of the text. You can do this with <img src="/" style="float:right;" /> and maybe add some margin to the img, to keep the text from getting too close.