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
page120_gabarit01.html
Page mise à jour le 13 janvier 2016 par Bernard Gisin
Hébergement par : www.infomaniak.ch