Voici un exemple de gabarit, avec un menu fixe en haut de page.

Un menu est fixe en haut de fenêtre, ainsi qu'un pied de page en bas de fenêtre.
D'autres exemples de gabarits se trouvent sous : alsacreations

Un avantage de définir le style de page dans un fichier externe, est de pouvoir l'utiliser dans plusieurs pages Web différentes.

Voici le contenu du fichier définissant le style de la page.

/* Ceci est un commentaire. <style>  est la balise indiquant que ce qui suit est du code CSS */ 
#menu {
 background-color:#103060;
 color:yellow;
 position:fixed; left:0px; top:0px;
 height:25px; width:100%;
 z-index:3;
 padding-top:5px;
 padding-left:8px;
}

#menu1:hover #menu1_ouvert{
display:inline-block;    /*  inline; block; inline-block; */
/* Fait apparaître le block contenant le texte */ 
}

#menu1_ouvert:hover{
display:inline-block;    /*  inline; block; inline-block; */
/* Fait apparaître le block contenant le texte */ 
}

#menu1_ouvert { 
 display:none; /* c.f. http://www.w3schools.com/cssref/pr_class_display.asp */
 position:absolute; /* absolute; fixed; relative; static; */ 
 left:0px;
 top:20px; 
 padding:5px 8px 5px 8px;  
 /* width:170px;
 height:65px; */
 font-size:12pt;
 font-weight:normal;
 font-style:normal;
 color:yellow;
 background-color:#103060;
}

#menu1_ouvert a {color:yellow;}
/*=========================================*/

#menu2:hover #menu2_ouvert{
display:inline-block;    /*  inline; block; inline-block; */
/* Fait apparaître le block contenant le texte */ 
}

#menu2_ouvert:hover{
display:inline-block;    /*  inline; block; inline-block; */
/* Fait apparaître le block contenant le texte */ 
}

#menu2_ouvert { 
 display:none; /* c.f. http://www.w3schools.com/cssref/pr_class_display.asp */
 position:absolute; /* absolute; fixed; relative; static; */ 
 left:76px;
 top:20px; 
 padding:5px 8px 5px 8px;  
 /* width:170px;
 height:65px; */
 font-size:12pt;
 font-weight:normal;
 font-style:normal;
 color:yellow;
 background-color:#103060;
}

#menu2_ouvert a {color:yellow;}
/*=========================================*/

#menu3:hover #menu3_ouvert{
display:inline-block;    /*  inline; block; inline-block; */
/* Fait apparaître le block contenant le texte */ 
}

#menu3_ouvert:hover{
display:inline-block;    /*  inline; block; inline-block; */
/* Fait apparaître le block contenant le texte */ 
}

#menu3_ouvert { 
 display:none; /* c.f. http://www.w3schools.com/cssref/pr_class_display.asp */
 position:absolute; /* absolute; fixed; relative; static; */ 
 left:150px;
 top:20px; 
 padding:5px 8px 5px 8px;  
 /* width:170px;
 height:65px; */
 font-size:12pt;
 font-weight:normal;
 font-style:normal;
 color:yellow;
 background-color:#103060;
}

#menu3_ouvert a {color:yellow;}
/*=========================================*/

#corps {
 background-color:#ffffff;
 position:relative;
 top:30px;
 z-index:1;
}

#pied {
 background-color:#603010;
 color:#ffff80;
 position:fixed; left:0px; bottom:0px;
 height:25px; width:100%; 
 z-index:2;
 padding-top:5px;
 padding-left:8px;
}


Plan du Site : Home   arrow   page120_gabarit01.html


Page mise à jour le 13 janvier 2016 par Bernard Gisin
Hébergement par : www.infomaniak.ch



Ceci est le pied de la page : "page120_gabarit01.html". Il n'est constitué que d'une seule ligne ici.