standards compliant version of table based content layout 1

[theEclipse]

Hello

I am working on an addition to my website. Does anybody know how to achieve this effect without using a table?

<table border="0"><tr><td valign="top">Ingredients:</td><td> One cup flour<br />3 Eggs<br />1 Tbsp baking powder</td></tr></table>

Also posted online for example


Its a one-row table with a heading in the left cell and the content in the right cell so that the content is indented to the end of the heading.

Robert Carpenter
"Disobedience to conscience is voluntary; bad poetry, on the other hand, is usually not made on purpose." - C.S. Lewis (Preface to Paradise Lost)
ô¿ô

http://www.robertcarpenter.net

 

[Vragabond]

Two floated divs.

 

[ChrisHirst]

<div style="width:50%;margin:0px auto;">
<div style="width:30%;float:left;">Ingredients:</div>
<div style="width:65%;float:right;">
One cup flour<br>
3 Eggs<br>
1 Tbsp baking powder<br>
</div>
</div>

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[ChrisHirst]

whoops missed code tags.


Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.

 

[theEclipse]

thanks Chris!

Robert Carpenter
"Disobedience to conscience is voluntary; bad poetry, on the other hand, is usually not made on purpose." - C.S. Lewis (Preface to Paradise Lost)
ô¿ô

http://www.robertcarpenter.net

 

[ChrisHunt]

I think it's better to use a lists than anonymous <div>s, the CSS can be slicker too. Here's how I'd do it (expanding on your example somewhat):

<dl class="recipe">
<dt>Ingredients</dt>
<dd>
  <ul>
    <li>One cup flour</li>
    <li>3 Eggs</li>
    <li>1 Tbsp baking powder</li>
  </ul>
</dd>
<dt>Serves</dt>
<dd>Four</dd>
<dt>Method</dt>
<dd>
  <ol>
    <li>Mix all the ingredients together in a bowl.</li>
    <li>Cook them.</li>
  </ol>
</dd>
</dl>

If you look at the above unstyled, you'll see that it already looks fairly good. I'll add some CSS to style the deflist...

dl.recipe {
   padding-top: 1px; /* contain margins */
}

dl.recipe dt {
  font-weight: bold;
  line-height: 1;    /* fix FF bug */
  text-align: left;
  float: left;
  clear: both;
  width: [red]5em[/red];
  margin-top: 0.5em;
}

dl.recipe dd:after { /* fix FF float/clear "bug" */
  content: "."; 
  display: block; 
  height: 0;
  margin: 0;
  clear: both; 
  visibility: hidden;
}

dl.recipe dd {
  margin-left:  [red]6em[/red]; /* wider than dt width */
  margin-top: 0.5em;
}

You should adjust the values given in red to suit your requirements - whatever value you pick for the width of [tt]dl.recipe dt[/tt], the left margin of [tt]dl.recipe dd[/tt] should be a little wider. Using ems as your measurement units ensures that it still works if text is resized.

Firefox bugs are rare, and perhaps worth mentioning. FF will increase the line height of bold text compared to normal (a bug, I think), so I explicitly set it back again.

Without the [tt]dl.recipe dd:after[/tt] rule, if a <dt> takes up more lines than its associated <dd>, FF makes the next <dd> ride up into the available space. I don't know whether this is a true bug or not (it's probably just a different interpretation of the spec), but it isn't what we want here. Putting an invisible object after each <dd> which clears both and doesn't itself float solves the problem.

Obviously you can fine-tune the other two lists' appearances too by styling [tt].recipe ul[/tt] and [tt].recipe ol[/tt] respectively.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[theEclipse]

ChrisHunt-

The thing that makes me nervous about doing things like that is this: are the things that I am displaying really lists (or definitions)?

Robert

Robert Carpenter
"Disobedience to conscience is voluntary; bad poetry, on the other hand, is usually not made on purpose." - C.S. Lewis (Preface to Paradise Lost)
ô¿ô

http://www.robertcarpenter.net

 

[ChrisHunt]

It seems reasonable to me to say that, for a recipe, "ingredients" is a term, and that it's defined by the list of stuff. If you look at the spec, you'll see that it says

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

Which is clearly even further from a technical "definition".

Frankly, I don't lose too much sleep over theological questions of semantics.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd