Forum Moderators: open
I've been trying to figure out what would be the best tags for this situation and I'd love to have some input from people here. Here are the tags that are available according to the W3c...
[w3.org...]
I'd prefer to be able to do this without using <br /> tags but that would probally mean figuring out how to keep "Cheat Code" and "- Effect." on the same line and THEN break.
Cheat codes are overwhelmingly entered via input through the keyboard (my site concentrates on computer games) so I figured the <kbd> tag may be a good choice and then use <dfn> tag afterwards. Anyway, lets hear some suggestions please! ;-)
<dl>
<dt>Cheat code</dt>
<dd>Effect</dd>
<dt>Cheat code</dt>
<dd>Effect</dd>
</dl>You can or course combine the above with
<kbd></kbd><dfn></dfn>
dt, dd { float: left; }
dt { clear: left; }That's untested but should work.
Also the first character (a space) is not being rendered by Gecko, IE, or Opera.
dd {
float: left;
margin: 0px;
}
dt {
clear: left;
float: left;
margin: 0px;
}
<dl>
<dt>it is a good day to die</dt><dd> - Invulnerability except from Mages and Death Knights.</dd>
<dt>glittering prizes</dt><dd> - WOOHOO!</dd>
</dl>
<body style="padding: 0; margin: 0; font-size: 100%;">
<dl style="margin: 2em;"><dt style="float: left;">Term 1</dt>
<dd style="position: relative; left: 1em;">Definition 1</dd><dt style="float: left;">Term 2</dt>
<dd style="position: relative; left: 1em;">Definition 2</dd></dl>
</body>
<html>
<head>
<style>
dd {
background: #000;
color: #fff;
float: left;
margin: 0px 0px 0px 4px;
position: relative;
}
dt {
background: #000;
clear: left;
color: #fff;
float: left;
margin: 0px;
}
</style>
</head>
<body><dl>
<dt>it is a good day to die</dt><dd> - Invulnerability except from Mages and Death Knights.</dd>
<dt>glittering prizes</dt><dd> - Gives extra gold, wood, and oil.</dd>
<dt>3333333333333333</dt><dd> - 33333333333333</dd>
<dt>4444444444444444</dt><dd> - 44444444444444</dd>
</dl></body>
</html>
dt {
clear: left;
float: left;
margin: 0px;
}dd {
margin: 0px 0px 0px 4px;
}
