CSS: Making tabbed menu. Ideas needed.

Question

Hi!

I want to create a menu in CSS in balsamic style (see: http://img.skitch.com/20100130-pr6qp63amd1nkwy4xar2ds3xex.png) how it looks like. I just started working on it, but already got to lock... No idea how to do it in CSS.

So mainly have following gaps:

1. How to make slightly rough borders on it? I thought to use an background image, but then realized that in this case it would be hard, to make it look in the similar way for e.g. a little bit longer menu text
2. How can I align menu with the container? I mean the the selected item of the menu, don't have a border on the right (and content don't have a border near it as well). For a minute I thought that I can define menu with no border on the right... and then to move it closer to bordered content (so it will hide the border near the item)...but I think it's a path to nowhere

Thanks in advance!

Answer 1

1. Your border will pretty much have to be done with background images. You will want one image longer than your longest item.

2. The selected tab class should have a white border-right, and the deselected tab a black border-right.

Code:

<style type="text/css">
.menu {
    margin: 0;
    padding: 0;
    float: left;
    width: 10%;
    position: relative;
    left: 2px;
}

.menu li {
    /* Use a background image with your lines on all four sides */
    border: 2px solid black;
    background-color: green;

    list-style: none;
    margin: 0;
    padding: 0;
}

.menu .selected {
    /* Use a background image with your lines and a white background inside the tab */
    border-right: none;
    background-color: white;
}

.body {
    border: 2px solid black;
    margin-left: 10%;
}
</style>

<div>
    <ul class="menu">
        <li class="selected">Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
    </ul>
    <div class="body">
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
        Main content here Main content here Main content here Main content here Main content here Main content here Main content here Main content here
    </div>
</div>