CSS - Le menu de gauche
Suite des articles sur les modifications de la feuille de style.
CSS - Menu gauche
Son nom menu_gauche précédé d'un diese # indique qu'il sera unique dans toute la page, c'est son ID (identifiant).
#menu_gauche{
float: left;
margin: 10px 0 0 0;
padding: 0 0 0 0;
width: 170px;
}
Voir les explications en fin de page pour la présence du signe >
Le menu dans ce cas précis, flottera à gauche et les marges suivantes :
html > body #menu_gauche {
float: left;
margin: 35px 0 10px 10px;
}#menu_gauche ul{
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style-type : none;
} régle les éléments du menus
#menu_gauche ul li{
margin: -1px 0 0 0;
padding: 0 0 0 0;
border: 1px solid #6DC183;
background: #000000;
width: 170px;
} régle les liens contenus dans les éléments
#menu_gauche ul li a{
background: #000000;
padding: 3px 0 3px 0;
margin: 0 0 0 0;
width: 170px;
line-height: 25px;
text-decoration: none;
font: 10pt Trebuchet MS;
} voir les explications en fin de page pour la présence du signe les liens dans ce cas précis auront la largeur indiquée dessous
html > body #menu_gauche ul li a{
display: block;
width: 170px;
} régle les liens survolés contenus dans les éléments
#menu_gauche ul li a:hover{
background: #01280B;
margin: 0 0 0 0;
line-height: 25px;
padding: 3px 0 3px 0;
font: 10pt Trebuchet MS;
} régle les textes titres des modules : Articles, Photos, Forum, etc...
#menu_gauche h2{
margin: 0 0 0 0;
backgroun: #000000;
border: 1px solid #6DC183;
color: #FFF;
width: 170px;
text-align: center;
font: bold 11pt Trebuchet MS;
padding: 5px 0 5px 0;
} l'astérisque avant html indique que h2 placé dans html et #menu_gauche aura, dans ce cas là uniqement la largeur spécifiée
* html #menu_gauche h2{
width: 172px;
} 
J'indique ici l'adresse de la page d'un site très intéressant mais réservé je pense à des avertis ayant déjà une connaissance informatique car il contient des détails utilisés rarement.
Par contre je le recommande comme bréviaire à ceux qui aime la perfection.
Lien d'une page de ce site SELFHTML où est expliqué avec exemple, les particularités engendrées par la présence des signes suivants dans le CSS : > * + dans le paragraphe suivant
Articles sur le même sujet :
