Using CSS to align horizontally the legend of keys and values

I'm currently working on designing a horizontal legend using html/css. The design consists of colored boxes with text beside them, followed by some spacing, then another colored box with more text, and repeating in this pattern.

[blue] - LabelA    [green] - LabelB    [red] - LabelC

However, I'm facing challenges in making this layout cross-browser compatible. Despite experimenting with various combinations of floating divs/spans, I'm unable to achieve the desired result. Either the text overlaps with the colored box or I struggle with adding padding to separate each key within the legend.

How would you approach solving this issue?

htmlcss

Answer №1

Let's take a look at this straightforward 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>

Answer №2

If you're looking to structure a list of pairs, floats are not necessary. Instead, consider using a definition list:

<dl>
    <dt>[blue]</dt>
    <dd> - LabelA </dd>

    <dt>[green]</dt>
    <dd> - LabelB </dd>

    <dt>[red]</dt>
    <dd> - LabelC </dd>
</dl>

By default, these elements are inline block. You can then style them like this:

<style>
     dl
     {
         width: 200px;
         background: #fff;
         border: 1px solid #000;
         padding: 5px 15px;
      }

      dt, dd
      {
         display: inline;
      }       
</style>

Answer №3

According to the response from Rob Allen, here is a straightforward and efficient way to create a legend using definition lists:

In default settings, dl, dt, and dd elements are displayed as block. To have dt and dd elements on the same line, we use display: inline-block. This allows us 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: View the outcome here

Answer №4

Avoid using floating divs. Give this a shot

DIV.LegendItem
{
   display:inline-block;
   margin-right:20px;
}

(include width and height if DIV is empty)

If your text isn't contained in a box, also try this...

SPAN.LegendText
{
   display:inline-block;
   margin-right:20px;
}

Check out an example here

Answer №5

Seems like this should do the trick...

I avoided using floats as you mentioned cross-browser compatibility, indicating support for at least IE7. Floats in IE7 can cause issues with wrapping, which is why I suggested using inline divs instead.

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">&nbsp;</div>
    Blue
    <div class="Green">&nbsp;</div>
    Green
    <div class="Red">&nbsp;</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;}

Answer №6

Consider incorporating a compact table with vibrant background tones.

<table>
  <tr>
    <td style="bgcolor:blue; width:8px">&nbsp;</td>
    <td>- Blue</td>
  </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with jquery .height(value) function not functioning properly on Internet Explorer

I have come across a challenge with the following code snippet: var winheight = $(window).height(); var headerHt = (0.11 * winheight); $(".header").height(headerHt) The purpose of this code is to dynamically adjust the size of .header and other elements ...

cssevent-handlingjquery

What is the correct syntax for implementing scrollTop and transform CSS effects in jQuery?

I find myself in a bit of a quandary, as this question may seem rather simple but it's causing me some confusion. I'm trying to navigate the CSS transform syntax within a jQuery script that calculates window height. Here is the code in question: ...

javascriptjquerycssjquery-ui

Show only child elements of a specific type within the parent div

Looking to identify divs with the class 'test' that contain only buttons in their child nodes. This is the HTML code that needs to be filtered. <div class="test"> <div> <button> <span>Button 1</span></butto ...

javascriptjqueryhtmljquery-selectors

Is there a way to incorporate text fields and input in BootstrapDialog?

Is it possible to include text fields and inputs within this modal using BootstrapDialog without modifying the library? Additionally, can I use $.ajax() inside? <button class="btn btn-primary" id="add_item">New item</button> jquery $('# ...

jqueryhtmlajaxbootstrap-dialog

Tips on fetching the ID of the selected option using JavaScript without relying on jQuery

Looking to print the selected option ID using pure Javascript (not JQuery) for multiple select tags. If we have more than one select tag, how do we achieve this? <select onchange="showOptions(this)" id="my_select1"> <option value="a1" id="ida ...

javascripthtmlselect

What is the best way to have a form open upwards when hovered over or clicked on?

Attempting to create a button in the bottom right corner that will reveal a form when clicked or hovered over. The form should slide open slowly and close after clicking on login, but currently the button is moving down as the form opens. The button also ...

javascriptjqueryhtmlcss

Can a callout or indicator be created when a table breaks across columns or pages?

As we develop HTML pages for printing purposes, one specific requirement for tables is to include an indicator like "Continues..." below the table whenever a page or column break occurs. Additionally, in the header of the continuation of the table, we need ...

javascripthtmlcsscss-selectors

Alignment of a div at the bottom inside a jumbotron using Bootstrap 4

Searching for answers on how to vertically align a div within a jumbotron, I have come across plenty of solutions for middle alignment but none for bottom alignment. <section id="profileHero"> <div class="container"> <d ...

csstwitter-bootstrapbootstrap-4

The behavior of Material-UI Drawer varies when used on tablets

Encountering some strange issues with the Material-UI drawer component. It's scrolling horizontally on my iPad, while it scrolls vertically on my MacBook and Android Phone. Expected Result on MacBook: https://i.sstatic.net/txBDf.png On my MacBook, it ...

javascriptcssreactjsmaterial-ui

CSS: Achieving vertical centering without specifying a fixed height using line-height. Is it possible?

Using line-height to vertically center text within an inline-element is a technique I often employ. Here's a demo I created: body, section { width: 100%; } section { background-color: lightGrey; } #wrap { margin: 30px auto; width: 100%; ...

htmlcss

Challenges encountered with Material-UI elements

Attempting to implement the http://www.material-ui.com/#/components/drawer (Docked Example) component from Material-UI in conjunction with ReactJS. An error is encountered with the "=" sign in this line: handleToggle = () => this.setState({open: !this ...

javascripthtmlreactjsecmascript-6material-ui

Iterating through elements within a Div will retrieve the initial element exclusively

Is there a way to loop through all elements within the MainDiv Div in order to retrieve their values? Currently, I am only able to retrieve the value of the first element. <div id="MainDiv"> <input type="text" id="MyText"value="Text1" /> ...

javascriptjqueryhtmlcss

Improper height of MathJax in the div element

I'm currently investigating why the MathJax render block is giving me an incorrect height for the div. Here's the code snippet: <div class="text-field" id='inner-text'>\(\sqrt{b^{a}\frac{\partial y}{& ...

javascripthtmlcssheightmathjax

applying different styles to various elements

As a newcomer to the world of jQuery, I am attempting to achieve the following goal: I have several instances of a div, and for each instance, I randomly assign a class from a predefined list in order to modify certain attributes. While this process is su ...

jqueryhtmlcssrandom

The mystery of the unassigned value in $(this).data(value) when using the jQuery click() method

In my Rails 5 application, I am working on creating a dynamic menu that will guide users to different parts of the site based on their location. The idea is that when they click on a specific menu item from the home page, a modal will appear allowing them ...

javascriptjqueryhtml

Animating the fixed location with CSS and JQuery

I'm attempting to create a seamless transition from one form field type to another. However, when I add another <input> element, the following elements do not animate into their static positions. $("#switchlogin").click(function() { //Creat ...

javascriptjqueryhtmlcss

The Bootstrap navigation bar is experiencing functionality issues when viewed on Chrome mobile browsers

I'm currently testing out the bootstrap 3 navbar feature on my meteor application, but I'm encountering some issues specifically on mobile devices. The problem seems to be that the toggle button is not showing up as expected. Interestingly, it wo ...

javascripthtmlcsstwitter-bootstrapmeteor

Is there an easy method for customizing scrollbars?

I'm looking to include an "overflow:scroll" in a navigation div, but the default scrollbar on windows is unattractive. Is there a simple way to customize the scrollbar without having to download extra JavaScript libraries, APIs, and so on? ...

javascriptjqueryhtmlcss

Identify a duplicate class name element using Selenium

<ul class="k9GMp "> <li class="Y8-fY "><span class="-nal3 "><span class="g47SY ">2</span> posts</span> </li> <li class="Y8-fY "><a class="-nal3 " href="/username/followers/" tabindex="0"><span ...

pythonhtmlseleniumclasshref

Issue with jQuery centering in IE browsers with jquery-ui-1.10.3.custom.js and jquery-ui-1.9.2.custom.js not working as expected

Are there any other alternatives you can recommend? Here is the dialog structure: <div id="dialogbox" title="message box"> <p>example content</P> </div> ...

javascriptjqueryhtmlcss