I have got a menu in my html document like this:

    <ul id="menu">
        <li><a href="#">Unactive item</a></li>
        <li><a href="#">Unactive item</a></li>
        <li id="active"><a href="#">Active item</a></li>
    </ul>

And I want to get this:

mockup

By using this image:

image

Every item should be resized acording to name size. CSS is new for me and I don't have any idea how to do this :(

4 answers

2
points
This was chosen as the best answer

If you float the list-items to the left they will utilize the wonderous shrink-wrapping. That's one of the few methods that makes an block-lvl element shrink to fit it's content.

You will also need to use a sliding door technique to make the tabs resizable.

With you're HTML the CSS would look something like so:

* {
    padding: 0;
    margin: 0;
}

body {
    width: 500px;
    margin: 100px auto;
}

ul {
    overflow: hidden; /* float collapse fix (ask) */
    padding: 50px 50px 0 50px;
    background: url(bg.gif) 0 0 repeat-x;
}

li {
    float: left;
    list-style: none;
    background: transparent url(buttonsn.png) 0 0 no-repeat;
    padding: 0 0 0 10px;
    margin: 0 3px 0 0;
    height: 30px;

}

li a {
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px 0 0;
    color: #fff;
    font: 12px/30px Arial, Helvetica, sans-serif;
    background: transparent url(buttonsn.png) right 0 no-repeat;
    text-decoration: none;
}

li#active {background-position: 0 -36px;}

li#active a {background-position: right -36px;}

Some IE6-fixes:

<!--[if lt ie 7]>

<style type="text/css">

ul, 
li a {float: left;}


</style>

<![endif]-->

I've added some design stuff in there as well but kept it to a bare minimum. A working example can be found here.

If you need wider tabs you can expand the width of the tabs in the image sprite you have there.

Ask away in comments to this answer if you have any quiestions! :)

Answered about 7 years ago by Jens Hedqvist
2
points

This will walk you through everything you need to know:

http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites

here's the demo: http://www.fiftyfoureleven.com/sandbox/sliding-doors-one-image/

Answered about 7 years ago by Tony Crockford
0
points

Try going to Listamatic:

http://css.maxdesign.com.au/listamatic/

Use one of the horizontal menus there that uses a background image. You want to use your image as a background-image for your list item in CSS.

Answered about 7 years ago by tahdhaze09
  • There aren't any image-based menus, that items in it have got differend width according to its content. mercury about 7 years ago
  • http://css.maxdesign.com.au/listamatic/horizontal26.htm - Uses background images for the gradients, along with text. CSS and HTML with allow varying text size. tahdhaze09 about 7 years ago
0
points

You might want to re-think having a variable width menu item.... you would have to split the image into 3 parts.... and have 2 states for each

  1. background image left (static width) + hover
  2. background image text (variable width) + hover
  3. background image right (static width) + hover
Answered about 7 years ago by Ryan Baillargeon
  • But how to add left and right image before and after text image? mercury about 7 years ago