4) Onglets, partie 1 : bords arrondis
Il existe une méthode pour définir des onglets, c'est la méthode des portes coulissantes, ce n'est pas celle que j'ai utilisée mais celle-là (Exemple 2, Horizontal).
Il s'agit d'une astuce css tout à fait fabuleuse. cela vous génére des formes d'onglets sans avoir besoin d'images. Une fois le principe bien compris, vous pourrez créer autant d'onglets de couleurs différentes de vous souhaitez, en une seule ligne css. Quand vous avez maitrisez ces quelques lignes de css, libre à vous de définir des types d'onglets avec les paramètres suivants : - couleur, - grandeur de l'onglet - onglet sombre ou clair
Tentative d'explication :
<div id="navigation">
<ul>
<li>
<a class="menumini" href="http://monsite.fr/lien1.html" title="Mon lien 1">
<b class="BoxOnglet"><span class="BoxContenu couleur4">Lien 1</span><b class="b4 couleur4"></b><b class="b3 couleur4"></b><b class="b2 couleur4"></b></b>
</a>
</li>
</ul>
</div>
avec comme css (que j'ai commenté):
// placement des onglets sur la page
#navigation {
padding-left: 300px;
background: transparent no-repeat;
margin: 0px;
height: 4em; /* cache overflow:hidden de IE5/Mac */
overflow: hidden; /* */
background-image: url(images/fonds_blocnote_top.png);
height: 45px;
}
#navigation ul {
margin:0px;
padding:0;
list-style-type:none;
background:transparent;
}
#navigation li {
display:block;
float:left;
margin:15px 2px 0px 0px;
}
.BoxOnglet, .BoxOngletFonce {
background:transparent;
}
// Onglet pour texte sombre
.BoxOnglet span {
text-align: center;
color: #FFCC33;
margin: 0px;
font-family: verdana;
font-size: 80%;
font-weight: normal;
}
// Onglet pour texte clair
.BoxOngletFonce span {
text-align: center;
color: #093F7D;
margin: 0;
font-family: verdana;
font-size: 80%;
font-weight: normal;
}
// Astuces pour faire des bords arrondis
// b1 étant la base la plus large et b4 la plus petite
.b1, .b2, .b3, .b4 {
display:block;
font-size:xx-small;
/* cache overflow:hidden de IE5/Mac */
/* */
overflow: hidden;
/* */
}
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}
.b1 {margin:0px 5px; background:#FFFFFF;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
// contour des onglets
.BoxContenu {
display:block;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}
// onglets taille normale
a.menu {
display:block;
text-decoration:none;
width:6.5em;
}
// petits onglets
a.menumini {
display:block;
text-decoration:none;
width:3.5em;
}
// onglets grande taille
a.menugrand {
display:block;
text-decoration:none;
width:9.5em;
}
a.menu:hover, a.menumini:hover, a.menugrand:hover {
background:transparent;
cursor:pointer;
text-decoration: none;
}
a.menu:hover span, a.menumini:hover span, a.menugrand:hover span {
padding-top:8px;
}
// définition des couleurs des onglets
.rouge {background:#cc3333;}
.bleu {background:#093F7D;}
.jaune {background:#FFCC33;}
.comite{background:#3662a2;}
|