Forum Moderators: not2easy
what I'm trying to accomplish is a list that behaves like a grid (table).
Not that it doesn't work, it works, but only under certain circumstances (e.g. small font, no background colors, border problems are just around the corner...).
I want this list to be displayed correctly under any circumstance, no matter if there are 20 <h1>'s in it or if the padding of each list item is set to 12 em. If you do that now, the list items will render off (intended) position.
Also, the .specs classed #divs have to float (both left and right if needed), but that's not a big deal.
If one would be so kind as to lend me a hand, I would be much appreciative.
Sincerely,
Deleted.
This is what I got so far:
------------------------------------
The styles:
.grid {
font-size:10px;
font-family:verdana;
width:350px;
float:left;
border:0px solid red;
margin:10px;
}
.grid ul {
padding:0;
margin:0;
list-style:none;
width:100%;
border:1px solid silver;
border-top-width:0;
}
.grid ul li {
float:right;
border-top-width:0;
border-right-width:0;
border-left:1px solid silver;
width:38%;
padding:1px;
}
.grid .first {
float:left;
border-left-width:0;
width:60%;
}
---------------------------
The HTML:
<div class="grid">
<ul>
<li class="first">Field</li>
<li>Value</li>
</ul>
<ul>
<li class="first">Field</li>
<li>Value</li>
</ul>
<ul>
<li class="first">Field</li>
<li>Value<br />Value<br />Value<br />Value</li>
</ul>
<ul>
<li class="first">Field</li>
<li>Value</li>
</ul>
</div>
<div class="grid">
<ul>
<li class="first">Field</li>
<li>Value</li>
</ul>
<ul>
<li class="first">Field</li>
<li>Value<br />Value<br />Value<br />Value</li>
</ul>
<ul>
<li class="first">Field</li>
<li>Value</li>
</ul>
<ul>
<li class="first">Field</li>
<li>Value</li>
</ul>
<ul>
<li class="first">Field</li>
<li>Value</li>
</ul>
</div>
<dl>
<dt>Eggs</dt>
<dd>Tasty round food</dd>
<dt>Bacon</dt>
<dd>Food made out of pigs</dd>
</dl>Each <dt> (term) has an associated <dd> (definition). <dl>s allow for 1-to-many and many-to-1 relationships to be expressed as well by using multiple <dt>s followed by one <dd>, or vice versa.
The default styling on a <dl> isn't very table-like but you can approximate a normal table styling with CSS like:
dt {
width: 12em; /* plucked out of thin air */
float: left;
clear: left;
}
dd {
float: left;
}
Thanks alot, I've tried it, it works better than the list items, so thanks for that (-;
The only problem left are some borders overlappeng (I think I can fix that myself...) and some weird spacing between each <dl>
This has to look and act as a 2 column table, borders and cell-growth including ...
It still breaks down if one messes with the size, padding (larger dan 2px) etc... :(
This is what I have so far:
---------------------------
.specs {
font-size:11px;
font-family:verdana, sans-serif;
margin:5px;
width:300px;
float:left;
}
.specs dt,
.specs dd {
border:1px solid silver;
float: left;
margin:0;
padding:2px;
width:48%;
border-bottom:0;
}
.specs dt {
clear: left;
border-right:0;
border-left:0;
}
.specs dl {
padding:0;
margin:0;
}
.last dd,
.last dt {
border-bottom-width:1px;
}
.specs dd {
border-right:0;
}
<div class="specs">
<dl>
<dt>Field</dt>
<dd>Value</dd>
</dl>
<dl>
<dt>Field</dt>
<dd>Value</dd>
</dl>
<dl>
<dt>Field</dt>
<dd>Value<br />Value<br />Value<br />Value</dd>
</dl>
<dl class="last">
<dt>Field</dt>
<dd>Value</dd>
</dl>
</div>
