CSS : Création d'un menu à onglets. Idées nécessaires

Question

Je veux créer un menu en CSS dans le style balsamique (voir : http://img.skitch.com/20100130-pr6qp63amd1nkwy4xar2ds3xex.png ) comment ça se présente. Je viens de commencer à travailler dessus, mais j'en suis déjà au blocage... Aucune idée de comment le faire en CSS.

Nous avons donc principalement les lacunes suivantes :

1. Comment y faire des bordures légèrement rugueuses ? J'ai pensé à utiliser une image de fond, mais j'ai réalisé que dans ce cas, il serait difficile de faire en sorte que cela ressemble à un texte de menu un peu plus long, par exemple.
2. Comment aligner le menu avec le conteneur ? Je veux dire que l'élément sélectionné du menu n'a pas de bordure sur la droite (et que le contenu n'a pas de bordure près de lui non plus). Pendant une minute, j'ai pensé que je pouvais définir un menu sans bordure sur la droite... et ensuite le rapprocher du contenu bordé (afin de cacher la bordure près de l'élément)... mais je pense que c'est un chemin vers nulle part.

Merci d'avance !

Answer 1

1. Votre bordure devra être réalisée à l'aide d'images de fond. Il vous faudra une image plus longue que votre élément le plus long.

2. La classe d'onglet sélectionnée doit avoir un bord droit blanc, et l'onglet désélectionné un bord droit noir.

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>