12 replies [Last post]
technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 39 weeks 3 days ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 260
Points: 8

I have been intrigued by this post: http://www.csscreator.com/css-forum/ftopic15816.html and have a few questions on the use of <dl> and siblings.

1. Other than degradation and styling, what are the other considerations to favor these tags over table tags?

2. Is there a neat way to define a title tag, ie a cell that extends both <dt> and <dd> to use it as an indicator of what the form contains?

3. The code below has a bar to indicate the total width of the sample is 441px (including border). How come? I defined a 120px for <dt> and a 400px for <dd>, so where do I lose these 80px? Hardcoded perhaps?

4. There is a starting space to push the content of the <dd> a little to the right. Padding did not work. Why not? What is a better way to pad the content?

Thanks in advance

Tech

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<style>
body {
  font: normal 12px Arial, sans-serif;
	padding: 0; 
	margin: 0;
}
.bar { 
  background-color: #987;
	height: 12px;
	width: 441px;
	margin: 0;
}
dt {
  float: left;
  width: 120px;
  height: 22px;
  padding-top: 5px;
  padding-left: 5px;
  vertical-align: center;
  background: #EDB;
  border-left: solid 1px #A98;
  border-bottom: solid 1px #A98;
}
dt.head {
  float: left;
  width: 120px;
  height: 24px;
  padding-top: 5px;
  padding-left: 5px;
  vertical-align: center;
  background: #DCA;
  border: 0;
  border-left: solid 1px #A98;
  font-weight: bold;
}
dd {
  width: 400px;
  height: 22px;
  padding-top: 5px;
  vertical-align: middle;
  background: #FEC;
  border-right: solid 1px #CC9;
  border-bottom: solid 1px #CC9;
}
dd.head {
  width: 400px;
  height: 24px;
  padding-top: 5px;
  vertical-align: middle;
  background: #DCA;
  border: 0;
  border-right: solid 1px #CC9;
  font-weight: bold;
}
</style>
</head>

<body>

<form>
<div class="bar"></div>
<dl>
<dt class="head">Quantity</dt><dd class="head">&nbsp;Metric</dd>
<dt>Menge til ordre</dt><dd>&nbsp;<input name="" type="text" value="1590" /></dd>
<dt>Menge til lager</dt><dd>&nbsp;<input name="" type="text" value="1590" /></dd>
</dl>
</form>

</body>
</html>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Re: Positioning questions on &lt;dl&gt; &lt;dt&gt; &lt;dd&gt

technossomy wrote:
3. The code below has a bar to indicate the total width of the sample is 441px (including border). How come? I defined a 120px for <dt> and a 400px for <dd>, so where do I lose these 80px? Hardcoded perhaps?

4. There is a starting space to push the content of the <dd> a little to the right. Padding did not work. Why not? What is a better way to pad the content?

Its a good learning point, to check how your html displays in different browsers with no styling. In FF with the Web Developer you can simply disable all styling.

If you do that you'll see that browsers assign some default indent to dd elements. That default indent, is probably padding-left but it could be margin-left and from your description amounts to 40px with your current font-size.

Moral, when you want to know where extra space is coming from, make sure you are controlling the relevant margin and padding values.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Positioning questions on &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;

You might want to peruse this article:

http://www.maxdesign.com.au/presentation/definition/

Verschwindende wrote:
  • CSS doesn't make pies

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 39 weeks 3 days ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 260
Points: 8

Re: Positioning questions on &lt;dl&gt; &lt;dt&gt; &lt;dd&gt

Thanks guys

Chris..S wrote:
Its a good learning point, to check how your html displays in different browsers with no styling. In FF with the Web Developer you can simply disable all styling.

I later on indeed noticed that IE displays the table entirely differently.

thepineapplehead: the articles at maxdesign suggests that in this case <dl> lists are not the ideal option as I need a quite elaborate topology for my purposes; back to tables then.

Tech

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Positioning questions on &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;

What are you trying to achieve? Maybe a mockup gif could help us see and suggest tables or a <dl>.

Verschwindende wrote:
  • CSS doesn't make pies

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 39 weeks 3 days ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 260
Points: 8

Positioning questions on &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;

pineapplehead, I haven't checked this forum in a while, but for the record included is a mock up of the type of styling I was pursuing.

The styling I came up with is included below.

Best wishes

technossomy

<style type="text/css">
body { font: normal 10px Arial, sans-serif; }
td { padding: 3px; margin: 0; font: normal 12px Arial, sans-serif; }
thead td { color: white; font-weight: bold; background-color: #986; border-top: solid 3px #653; }
thead td.channel { font-weight: normal; background-color: #DDC; border: 0; }
tbody td { border: 0; border-bottom: solid 1px #FED; }
tbody td.hmetric, td.hvalue { font-weight: bold; background-color: #FEC; border-left: solid 1px #EEC; }
tbody td.metric { background-color: #FFD; border-left: solid 1px #FED; }
tbody td.value { background-color: #FFE; border-right: solid 1px #FED; }
tfoot td { }
tfoot td.logo { font: normal 10px Arial, sans-serif; }
</style>

webbedit
Offline
Enthusiast
Tyne and Wear, UK
Last seen: 12 years 31 weeks ago
Tyne and Wear, UK
Joined: 2005-08-17
Posts: 133
Points: 0

Quick mockup

http://webbedit.co.uk/scrapbook/technossomy/

I use DL loads to layout forms etc. so happy to put together an example for you. Needs the width to be restricted but otherwise is very close to your graphic example.

Hope it helps.

Paul Gardner
Partner - Webbed IT

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 39 weeks 3 days ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 260
Points: 8

Positioning questions on &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;

Thanks webbedit. Looks good.

What I particularly like about your example is that there is no need to fiddle around with margins, as - in my case - commonly no margining is required between the text and the border or the viewport. The style element "border-collapse: collapse" which is to be used with tables for this purpose is not always suited.

Best

tech

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Positioning questions on &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;

Try reducing the page width so that an item needs to fit over two lines. It falls apart. :?

I use

<dl>
<dt><span> ... </span><dd> ... </dd>
<dt><span> ... </span><dd> ... </dd>
...
</dl>

clear the dt and float the span.

stonewall
stonewall's picture
Offline
Enthusiast
between a rock and a hard place
Last seen: 16 years 13 weeks ago
between a rock and a hard place
Timezone: GMT-5
Joined: 2006-04-06
Posts: 93
Points: 0

Positioning questions on &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;

wouldn't this be an appropriate place for a table?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 41 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Positioning questions on &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;

That is an argument that could go on for a while, it really looks suited to a definition list to me. Someone else may think differently.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 18 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Positioning questions on &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;

I would favor table on this one, though a dl would be semantic, too, if the order is kept. The fact that each 'field' has a header, and that the fields could be re-ordered says table more than definition.

I.e.; the term (dt) ^AEX is defined (dd) as Amsterdam Exchange. The reverse is not strictly true. Whereas, the header 'index' for ^AEX and the header 'description' for Amsterdam Exchange is true in either order for a given record (row).

Strictly speaking, the data (td) are described by the headers (th) for each column, and the data are related in a positional manner for each record (tr).

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 10 weeks 2 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Positioning questions on &lt;dl&gt; &lt;dt&gt; &lt;dd&gt;

I'd use a table Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies