• Dans la deuxième partie, nous allons créer l'espace CSS pour changer l'apparence de vos onglets. Collez ce code à la suite de celui donner plus haut.
- Code:
-
<style type="text/css">
.onglet
{
display:inline-block;
margin-left:XXpx;
margin-right:XXpx;
padding:XXpx;
border:XXpx solid #CDOE COULEUR;
cursor:pointer;
}
.onglet_0
{
background:#CODE COULEUR ou url('URL IMAGE');
border-bottom: XXpx solid #CODE COULEUR;
border-top:XXpx solid #CODE COULEUR;
border-left:XXpx solid #CODE COULEUR;
border-right:XXpx solid #CODE COULEUR;
-moz-border-radius-topright : XXpx solid #CODE COULEUR;
-moz-border-radius-topleft : XXpx solid #CODE COULEUR;
}
.onglet_0:before
{
content : "signe ";
}
.onglet_1
{
background:#CODE COULEUR ou url('URL IMAGE');
border-bottom:XXpx solid #CODE COULEUR;
border-top:XXpx solid #CODE COULEUR;
border-left:XXpx solid #CODE COULEUR;
border-right:XXpx solid #CODE COULEUR;
padding-bottom:XXpx;
-moz-border-radius-topright : XXpx;
-moz-border-radius-topleft : XXpx;
}
.onglet_1:before
{
content : "signe ";
}
.contenu_onglet
{
background:#CODE COULEUR ou url('URL IMAGE');
color:#CODE COULEUR;
text-shadow:XXpx XXpx XXpx #CODE COULEUR;
-moz-border-radius : XXpx;
border-left: XXpx solid #CODE COULEUR;
border-right: XXpx solid #CODE COULEUR;
border-top: XXpx solid #CODE COULEUR;
border-bottom: XXpx solid #CODE COULEUR;
margin-top:-1px;
padding:5px;
display:none;
height : XXXpx;
width : XXXpx;
font-size:XXpx;
}
</style>
</head>
Expliquons un peu tout ce CSS. La class
.onglet signifie les onglets en général. La class
onglet_0 est pour l'apparence, le positionnement etc pour les onglets fermés.
onglet_0:before sert à mettre un signe devant le nom de l'onglet lorsque qu'il est fermé.
onglet_1 est pareil que pour
onglet_0 sauf que c'est lorsque les onglets sont ouverts. Ce qui veux dire que
onglet_1:before est pour mettre un signe devant le nom de l'onglet à l'ouverture. Et pour finir, la class
contenu_onglet est pour l'apparence du contenu des onglets. Si vous ne voyez pas vraiment, je passerai un "schéma" après la décortication des caractéristiques du CSS.
Alors pour commencer facilement, je vais vous expliquer tout ce qui touche l'apparence. (Couleur, texte, etc.)
Background : Sert à mettre un fond à l'emplacement voulu. Vous pouvez mettre une image comme une simple couleur. Il suffit de mettre
background : #code de la couleur ou
backgrond : url(URL de l'image voulue). Et puis voilà vous avez votre fond.
Border-left/right/top/bottom : Sert à mettre un contour autour de la cellule. Pour ceux qui ne connaissent rien à l'anglais, left veut gauche, right=droit, top=haut et bottom=bas. N'oubliez pas le "-" entre border et le côté. Vous devrez ajoute deux autre petites choses pour voir les contours. Le nombre de pixels et le style. Pour les pixels, c'est simple, vous avez juste à mettre
un nombrepx. J'ai mis des XX à la place des nombres. Pour le style, vous avez le choix entre :
solid qui fera
un contour continu,
dotted qui lui, fera un contour en
pointillés,
dashed pour faire un contour en
tirets et enfin
double qui fera des doubles lignes.
Color : Ceci sert pour la couleur du texte. Vous avez juste à mettre
#code de la couleur.Text-shadow : Avec ce code, vous pourrez mettre une ombre à votre texte et de n'importe quelle couleur, à n'importe quelle portée et peu n'importe quelle taille. Pour ceci vous allez devoir remplir avec un nombre de pixel et le code de la couleur voulue. (Sachez que pour mettre les couleur par défaut comme celle que vous avez en disponibilité pour un post, il vous suffit de mettre, darkred, red, blue, darkblue, white, blacl, green etc.). Pour la distance et la taille, vous allez devoir mettre sous cette forme : 0px 1px 2px (en remplaçant par vos chiffres)/
0px : Distance sur la droite. Pour la mettre à gauche, il suffit de mettre
-. (Exemple : -3px. L'ombre sera déplacée de 3px sur la gauche.)
1px : Distance en bas du texte. Pour le mettre en haut, même système que pour la gauche.
2px : Taille de l'ombre. Si vous mettez à 0, ça sera sans flou.
Exemple, si je mets : 1px 1px 0px black, cela va me donner
ceci.
-moz-border-radius : Les coins seront arrondis sous firefox. Je ne me rappelle plus du code pour IE et Google Chrome. ._.. Vous devrez alors mettre : 0px 1px 2px 3px. Ou si vous avez peur d'oublier quel chiffre correspond à quel côté, vous pouvez ajouter
-left/right/top ou bottom.0px : Coin en haut en gauche.
1px : Coin en haut à droite.
2px : Coin en bas à droite.
3px : Coin en bas à gauche.
Font-size : Taille du texte.
Padding : Marge intérieur de la cellule. Pareil que pour les arrondis, vous pouvez mettre les 4 côté en même. Si vous vous la même marche pour les 4 côtés, vous pouvez mettre simple XXpx.
Margin : Marge extérieur de la cellule. Idem que paddindg.
Height : Hauteur maximal du champs de texte ou de la cellule entière.
Width : Largeur maximal.
Voilà je crois avoir tout dit. XD