CSS: создание меню с вкладками. Нужны идеи

Question

Я хочу создать меню в CSS в бальзамическом стиле (см .: http://img.skitch.com/20100130-pr6qp63amd1nkwy4xar2ds3xex.png) как это выглядит. Я только начал работать над этим, но уже получил блокировку ... Не знаю, как это сделать вCSS.

Так что в основном есть следующие пробелы:

1. Как сделать немного грубые границы на нем? Я думал использовать фоновое изображение, но потом понял, что в этом случае это будеттрудно, чтобы он выглядел аналогичным образом, например, для немного более длинного текста меню
2. Как я могу выровнять меню с контейнером? Я имею в виду выбранный пункт меню, не имеет границы насправа (и контент не имеет границы рядом с ним). В течение минуты я думал, что могу определить меню без рамки справа ... и затем переместить его ближе к граничному контенту (чтобы он скрывалсяграница возле предмета) ... но я думаю, что это путь в никуда

Заранее спасибо!

Answer 1

1. Ваша граница в значительной степени должна быть сделана с фоновыми изображениями. Вам понадобится одно изображение длиннее самого длинного элемента.

2. Выбранный класс вкладок должен иметь белую рамку вправо, а невыбранную вкладку - черную рамку справа.

Код:

<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>