Bandeau

Ici le contenu

Cette page a le menu gauche fixé.

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:-35px;                    /* marge négative en bas pour placer le menu dans le bandeau */
}
/* ========================================================================================================= */
/* ====== 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:18px 0 -110px 0;                 /* marge haute de 18px 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                   */
}			  
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><!-- Fin du bandeau -->

<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 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>

Pied de page