CSS Creating a menu-div-box ?

Question

Hi

I am trying to create some simple menu links. I tried something like this:

<style type="text/css">
    div.menulinkboxaround
    {
        height: 25px;
    }

    a.menulinkbox
    {
        font-family: Verdana, Helvetica;
        padding-left: 50px;
        padding-left: 50px;
        padding-bottom: 5px;
        padding-top: 5px;
        background-color: Green;

    }
    a.menulinkbox:hover
    {
        background-color: Red;
    }
    a.menulinkbox:visited
    {
        background-color: Yellow;
    }
    </style>
<div class="menulinkboxaround"><a href="asdf.gif" class="menulinkbox">Link 1</a></div>
<div class="menulinkboxaround"><a href="asdf.gif" class="menulinkbox">Link 2</a></div>
<div class="menulinkboxaround"><a href="asdf.gif" class="menulinkbox">Link 3 Link 4</a></div>

What i am trying to accomplish is to create menu elements that has a touch of style to em, so each link should be inside a div box with a padding 50 px on each side. When i run this, they get clumped up on top of each other. I don't want to specify a width since the text inside the menu box should determine the size of it automatically.

Ex. (50px+text size+50px)

50px space (just green area) | Sample Text | 50px space (just green area)

Answer 1

Maybe this will help (since divs are block displayed elements by default):

div.menulinkboxaround { height: 25px; float: left; }

Answer 2

Try adding this:

a.menulinkbox
{
    display: block;
}

Depending on whether you want this menu vertical or horizontal you may also want to add float: left; to div.menulinkboxaround.

Answer 3

As the previous answers suggest, you could put float:left on the menulinkboxaround.

It is difficult to tell from your description the desired effect, I am assuming you want the menu to be horizontal with 50px either side of the links.

With the code you currently have, the hover state only stretches in one direction, also as you are only specifying :hover it is not really as keyboard friendly as it would be if you specified :focus as well.

Also because you are setting the height in px as you increase the font size the text becomes clipped at the bottom. Not specifying the pseudo selectors on the link may also cause you later problems in Internet Explorer.

You could also tidy up the code a little to reduce the unnecessary classes and improve the semantics of the menu.

For example:

<style type="text/css">

  ul.menu {
    /* removing the browser defaults for margin padding and bullets */
    margin: 0;
    padding: 0;
    list-style-type: none;
    /* Now you have a sensible parent it is a good idea to put the font 
      family here, I have also added a fallback of sans-serif in the rare 
      case Helvetica and Verdana are not available on the users computer, 
      it might be best to set this on the body if you are using this font 
      site-wide
    */
    font-family: Verdana, Helvetica, sans-serif;
    /* To create symetry I am adding 25px to the right and left of the menu, 
      this will stay green even if the items inside are not 
    */
    padding: 0 25px;
    background-color: green;
    /* increacing the lineheight so the background color of the links does 
      not overflow the green of the menu behind it, for a simple menu like 
      this it is fine, a more complex or longer links that need to wrap I 
      suggest changing the method of implementation from display inline to 
      floating which is a bit more complex
    */
    line-height:1.95;
  }

  /* because all the list items are inside this parent list you can use 
      the descendant selector to target them rather than adding a separate 
      class, you are saying all list items inside the unordered list that 
      has a class of menu
   */
  ul.menu li {
    /* telling the list items to behave like inline elements so they are 
      naturally on one line also removint the browser default margin and 
      padding
    */
    display: inline;
    margin: 0;
    padding: 0;
  }

  ul.menu a:link,
  ul.menu a:visited,
  ul.menu a:hover,
  ul.menu a:focus,
  ul.menu a:active {
    /* you can combine all your padding rules together in the order 
      Top Right Bottom Left, I remember this like it kinda spells TRouBLe :) 
    */
    padding: 5px 25px 5px 25px;
    background-color: green;
    /* setting the color to white because the default link color of blue 
      is not that visible against green
    */
    color: white;
  }

  /* adding the :focus selector to make this more keyboard accessible */
  ul.menu a:hover,
  ul.menu a:focus {
    background-color: red;
    color: black;
  }

  ul.menu a:visited {
    background-color: yellow;
    color: black;
  }

</style>
</pre>

<ul class="menu">
    <!-- Putting these all on one line because we are making 
      them display:inline so the spaces get counted and there will 
      be a gap otherwise -->
    <li><a href="asdf.gif">Link 1</a></li><li><a href="asdf.gif">Link 2</a></li><li><a href="asdf.gif">Link 3</a></li>
</ul>

I have tested this in recent versions of FF, Opera and Safari, and IE6 IE7 and IE8

<style type="text/css">

  ul.menu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: Verdana, Helvetica, sans-serif;
    padding: 0 25px;
    background-color: green;
    /* overflow hidden clears the internal floated links and zoom 1 
      kicks IE into doing the same, I suggest you move the zoom: 1 
      into an IE stylesheet using conditional comments 
    */
    overflow: hidden;
    zoom: 1;
  }

  ul.menu li {
    display: inline;
    margin: 0;
    padding: 0;
  }

  ul.menu a:link,
  ul.menu a:visited,
  ul.menu a:hover,
  ul.menu a:focus,
  ul.menu a:active {
    padding: 5px 25px 5px 25px;
    background-color: green;
    color: white;
    /* setting the links to float left and giving them display block as 
      well explicitly, this is so that the vertical padding of 5px gets 
      applied, inline elements can only have horizontal margin and padding, 
      and since we are floating them they now take up 0 vertical height in 
      the document which is why we needed to clear the float on the 
      surrounding menu 
    */
    display: block; 
    float: left;
  }

  ul.menu a:hover,
  ul.menu a:focus {
    background-color: red;
    color: black;
  }

  ul.menu a:visited {
    background-color: yellow;
    color: black;
  }

</style>

<ul class="menu">
    <li><a href="asdf.gif">Link 1</a></li><li><a href="asdf.gif">Link 2</a></li><li><a href="asdf.gif">Link 3</a></li>
</ul>

This second method is much more reliable, deals with wrapping links nicer and is generally a better solution but a bit harder to explain.

If you didn't want the menu to fill the full width of the screen just as long as the text takes up, regardless of which method you are using above, I suggest you put float: left and clear: both on the ul.menu which should shrink to the width it needs to take up

I hope this helps