Menu
I am creating a horizontal legend in html/css. I have a colored box with some text next to it, then some space, then another colored box with some text, a space, etc.
[blue] - LabelA [green] - LabelB [red] - LabelC
I can't figure out how to do this cross browser. I have tried all combinations of floating divs/spans I can think of, but either the label ends up going underneath the colored box or I can't get padding to work to separate each key in the legend.
How would you do this?
986
HTML <legend> Tag.
HTML <legend> tag is used to insert a title or caption to its parent element such as <fieldset>. The <legend> element must be the first child of <fieldset > element. By using <legend> tag with <form> elements, it is easy to understand the purpose of grouped form elements.
The <legend> tag defines a caption for the <fieldset> element.
Here's a simple example:
/* basic positioning */
.legend { list-style: none; }
.legend li { float: left; margin-right: 10px; }
.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
/* your colors */
.legend .superawesome { background-color: #ff00ff; }
.legend .awesome { background-color: #00ffff; }
.legend .kindaawesome { background-color: #0000ff; }
.legend .notawesome { background-color: #000000; }<ul class="legend">
<li><span class="superawesome"></span> Super Awesome</li>
<li><span class="awesome"></span> Awesome</li>
<li><span class="kindaawesome"></span> Kinda Awesome</li>
<li><span class="notawesome"></span> Not Awesome</li>
</ul>You don't need floats for this sort of thing. Really what you have is a list of pairs. There is a tag set for that called a definition list:
<dl>
<dt>[blue]</dt>
<dd> - LabelA </dd>
<dt>[green]</dt>
<dd> - LabelB </dd>
<dt>[red]</dt>
<dd> - LabelC </dd>
</dl>
These are inlineblock by default. From there you can style the pairs of elements like so:
<style>
dl
{
width: 200px;
background: #fff;
border: 1px solid #000;
padding: 5px 15px;
}
dt, dd
{
display: inline;
}
</style>
No need to use floating divs. Try this
DIV.LegendItem
{
display:inline-block;
margin-right:20px;
}
(add width and height if DIV has no content)
Sorry if your text is not in the box also add this...
SPAN.LegendText
{
display:inline-block;
margin-right:20px;
}
Example here
27
This should work...
Avoided floats as you specifically mentioned cross browser, so I assume you are at least supporting IE7. IE7 wraps floats in kind of a nasty way which is why I suggested inline divs.
DOCTYPE HTML
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
HTML
<div class="Legend">
<div class="Blue"> </div>
Blue
<div class="Green"> </div>
Green
<div class="Red"> </div>
Red
</div>
CSS
.Legend div{
margin-left:15px;
width:16px;
border:1px solid #808080;
display:inline-block;
}
.ie7 .Legend div{
display:inline;
zoom:1;
}
.Red {background-color:red;}
.Green {background-color:green;}
.Blue {background-color:blue;}
Based on Rob Allen answer, this is a quick and simple legend using definition lists:
dl, dt and dd are display block by default. Since we want the dt and dd to be on the same line, we use display: inline-block. (Inline block is important for us to be able to control the width and height of the colored square)
HTML
<dl>
<dt class="red"></dt>
<dd>Existing clients</dd>
<dt class="yellow"></dt>
<dd>New clients</dd>
</dl>
CSS
dl dt{
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
}
dl dd{
display: inline-block;
margin: 0px 10px;
padding-bottom: 0;
vertical-align: middle;
}
dl dt.red{
background: #f8d7da;
}
dl dt.yellow{
background: #f2c715;
}
Result: See the result here
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
