Cette page a le menu gauche et le bandeau fixés.
Voici le code CSS:
/* ========================================================================================================= */
/* ====== Mettons nos défauts ====== */
/* ========================================================================================================= */
html, body { margin:0; padding:0; font-size:1em; font-weight:normal; }
body { font-family:"Times New Roman", Times, verdana, arial,sans-serif; }
h1 { margin-top:0; text-align:center;}
/* ========================================================================================================= */
/* ========================= Classe pour la largeur de la page ============================================ */
/* ========================================================================================================= */
.largeur {
width:960px; /* largeur de la classe pour les éléments */
margin:0 auto; /* pour centrer la classe dans la fenêtre du navigateur */
}
/* ========================================================================================================= */
/* ====== Définition du bandeau ====== */
/* ========================================================================================================= */
#bandeau {
height:120px; /* hauteur du bandeau (la largeur sera défini par la classe .largeur */
margin:0; padding:0; /* marges internes et externes à zéro */
margin-bottom:-30px; /* marge négative en bas pour placer le menu dans le bandeau */
}
#bandeau {
position:absolute; /* pour IE on ne peut déclarer en fixe */
top:0; /* en haut de la fenêtre */
left:auto; /* position gauche automatiqie */
}
html>body #bandeau {
position:fixed; /* sauf pour IE qui ne sait pas interpréter la position est fixe*/
}
/* ========================================================================================================= */
/* ====== Définition de la page (menu gauche + contenu) ====== */
/* ========================================================================================================= */
#page {
height:auto; /* hauteur de la page en fonction du texte du contenu */
min-height:500px; /* on impose une hauteur mini de 500px */
margin:132px 0 -110px 0; /* marge haute de 132px pour décoler la page du bandeau */
/* margin-bottom:-110px pour remonter le pied de page */
}
/* ========================================================================================================= */
/* ====== Définition du contenu à droite ====== */
/* ========================================================================================================= */
#contenu {
width:750px; /* largeur du contenu */
min-height:390px; /* on impose une hauteur mini au contenu (390+110 de page) */
margin:10px 10px 130px 19%; /* la marge externe de 10px (haut-droite-bas-gauche) */
/* margin-bottom:130px en bas pour le pied de page */
/* margin-left:19% de la page à gauche pour le menu */
padding:10px; /* petite marge intérieure de 10px */
}
/* ========================================================================================================= */
/* ====== Définition du menu horizontal ====== */
/* ========================================================================================================= */
#hornav {
height:25px; /* définition de la hauteur du menu */
margin:2px 0 0; padding:0; /* les marges à 0 et externe décolé de 2px en haut */
text-align:center; /* Tous les textes seront centrés horizontalement */
vertical-align:middle; /* Tous les textes seront centrés verticalement */
font-weight:bold; /* tous les caractères du menu seront engras */
}
#hornav {
margin-top:50px; /* pour placer le menu en bas du bandeau */
}
ul#hormenu {
margin:0; padding:0; /* les marges internes et externes à 0 */
list-style-type:none; /* la puce des lists est supprimée */
float:right; /* Le float:right est pour centrer le menu dans la div #hornav */
position:relative; /* toujours pour centrer, une position relative */
right:50%; /* une position relative à droite de 50% */
}
ul#hormenu li {
float:left; /* le float:left est obligatoire pour un menu horizontal */
position:relative; /* Mais pour centrer, il faut une position relative */
left:50%; /* avec cette fois une position relative à gauche de 50% */
border-right:3px solid transparent; /* Pour écarter les éléments, une bordure transparente de 3px */
}
ul#hormenu a {
display:block; /* Pour les liens afin de définir la hauteur et largeur */
width:100px; /* Largeur de la boite de l'item */
height:25px; /* hauteur de la boite de l'item */
background-color:rgba(78,135,191,0.7);;/* La couleur de fond (#4e87bf) avec une opacité de 70% */
text-decoration:none; /* suppression du souligné pour le lien */
color:white; /* couleur blanche pour le lien */
}
ul#hormenu a {
-moz-border-radius:7px; /* les coins arrondis d'un radius de 7px */
-webkit-border-radius:7px; /* les coins arrondis d'un radius de 7px */
border-radius:7px; /* les coins arrondis d'un radius de 7px */
}
ul#hormenu li:hover a {
text-decoration:underline; /* lors du survol du ciurseur de souris le lien est souligné */
color:blue; /* et la couleur devient bleue */
}
/* ========================================================================================================= */
/* ====== Définition du menu de gauche en position fixe ====== */
/* ========================================================================================================= */
#vernav {
float:left; /* Float:left pour le menu à gauche */
width:180px; /* d'une largeur de 17% de #page */
height:auto; /* la hauteur sera fonction du nombre d'item */
margin:0; padding:0; /* mise à zéro des marges */
text-align:left; /* Tous les textes seront aligné à gauche */
vertical-align:middle; /* Tous les textes seront centrés verticalement */
font-weight:bold; /* la police de caractère sera en gras */
}
#vernav {
position:absolute; /* pour IE on ne peut déclarer en fixe */
top:200px; /* 200px par rapport au haut de la fenêtre */
left:auto; /* position gauche automatiqie */
}
html>body #vernav {
position:fixed; /* sauf pour IE qui ne sait pas interpréter la position est fixe*/
}
ul#vermenu {
width:100%; /* Largeur de ul est 100% des 17% de #vernav */
margin:0; padding:0; /* toujours mettre les marges de ul à zéro */
list-style-type:none; /* la puce des lists est supprimée */
}
ul#vermenu li {
white-space:nowrap; /* Si un blanc, ne fait pas de retour à la ligne */
margin:1px; margin-bottom:5px; /* Pour écarter les items 1px et 5px en bas */
}
ul#vermenu a {
display:block; /* Pour les liens afin de définir la hauteur et largeur */
margin:0; padding:5px; /* Avec une marge intérieure de 5px */
text-decoration:none; /* suppression du souligné pour le lien */
background-color:rgba(78,135,191,0.7); /* La couleur de fond (#4e87bf) avec une opacité de 70% */
color:#fff;
}
ul#vermenu a {
-moz-border-radius:7px; /* les coins arrondis d'un radius de 7px */
-webkit-border-radius:7px; /* les coins arrondis d'un radius de 7px */
border-radius:7px; /* les coins arrondis d'un radius de 7px */
}
ul#vermenu li:hover>a {
text-decoration:underline; /* lors du survol du ciurseur de souris le lien est souligné */
color:blue; /* et la couleur devient bleue */
}
/* ========================================================================================================= */
/* ===== Pour donner un peu de couleur au survol de la souris sur les 2 menus ====== */
/* ========================================================================================================= */
ul#vermenu li:hover>a, ul#hormenu li:hover>a {
background: #7db9e8; /* Old browsers */
background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 47%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(47%,#2989d8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 47%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7db9e8 0%,#2989d8 47%,#1e5799 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7db9e8 0%,#2989d8 47%,#1e5799 100%); /* IE10+ */
background: linear-gradient(to bottom, #7db9e8 0%,#2989d8 47%,#1e5799 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}
/* ========================================================================================================= */
/* ===== Ceci est une couleur différente pour le survol de la souris ====== */
/* ========================================================================================================== */
ul#vermenu2 li:hover>a {
background: #ffa84c; /* Old browsers */
background: -moz-linear-gradient(top, #ffa84c 16%, #ff7b0d 48%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#ffa84c), color-stop(48%,#ff7b0d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffa84c 16%,#ff7b0d 48%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffa84c 16%,#ff7b0d 48%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffa84c 16%,#ff7b0d 48%); /* IE10+ */
background: linear-gradient(to bottom, #ffa84c 16%,#ff7b0d 48%); /* W3C */
}
/* ========================================================================================================= */
/* ====== Définition du pied de page ====== */
/* ========================================================================================================= */
#pied {
width:200px; /* largeur du pied de page */
height:100px; /* hauteur du pied de page */
margin:0 auto; /* pour centrer le pied de page */
}
/* ========================================================================================================= */
/* ====== Définition diverse image de fond etc. ====== */
/* ========================================================================================================= */
.bordure { border:1px solid black; } /* définition d'une borduure noire de 1px */
.imagefond1 {
background-image: url(/old/images/fond/papier.gif); /* définition d'une image de fond */
background-repeat:repeat; /* répéter le motif en axe x et y */
}
.imagefond2 {
background-image: url(/old/images/fond/fond.jpg); /* définition d'une image de fond */
background-repeat:repeat; /* répéter le motif en axe x et y */
}
.coinrond30 {
-moz-border-radius:30px; /* les coins arrondis d'un radius de 30px */
-webkit-border-radius:30px; /* les coins arrondis d'un radius de 30px */
border-radius:30px; /* les coins arrondis d'un radius de 30px */
}
.ombre {
-moz-box-shadow:7px 7px 7px #333; /* définition des ombres pour Firefox */
-webkit-box-shadow:7px 7px 7px #333; /* définition des ombres pour Chrome safari */
box-shadow:7px 7px 7px #333; /* définition des ombres pour navigateurs modernes */
}
Voici le code html:
<body class="largeur">
<div id="bandeau" class="largeur bordure coinrond30 ombre imagefond2 " >
<h1>Bandeau</h1>
<div id="hornav">
<ul id="hormenu">
<li><a href="#" title="item1" target="_parent">item1</a></li>
<li><a href="#" title="item2" target="_parent">item2</a></li>
<li><a href="#" title="item3" target="_parent">item3</a></li>
<li><a href="#" title="item4" target="_parent">item4</a></li>
</ul>
</div><!-- Fin du menu horizontal hornav -->
</div><!-- Fin du bandeau -->
<div id="page" class="largeur bordure coinrond30 imagefond1" >
<div id="vernav">
<ul id="vermenu">
<li><a href="#" title="item1" target="_parent">item1</a></li>
<li><a href="#" title="item2" target="_parent">item2</a></li>
<li><a href="#" title="item3" target="_parent">item3</a></li>
<li><a href="#" title="item4" target="_parent">item4</a></li>
<li><a href="#" title="item5" target="_parent">item5</a></li>
</ul>
</div><!-- Fin du menu vertical Vernav -->
<div id="contenu" class="bordure coinrond30 ombre imagefond2">
<h1>Ici le contenu</h1>
<p> etc. etc. </p>
</div><!-- Fin de contenu -->
</div><!-- fin de page -->
<div id="pied" class="bordure coinrond30 ombre imagefond2">
<h1>Pied de page</h1>
</div><!-- Fin de pied -->
</body>