2) Menu fixe et bandeau en bas de page
Comment ajouter un encadré contenant un menu ou un bandeau en position fixe dans votre page web. C'est un cadre que vous placez à un endroit particulier de votre page et qui reste visible pendant la navigation et la consultation d'une page.
Je présente dans ce tuto quatre exemples de menus mais cela pourrait aussi bien être utilisé pour être affiché comme un cadre ou un bandeau d'information fixe.
1) Demo d'un menu fixe en haut de page
2) Demo d'un menu fixe en bas de page
3) Demo d'un menu fixe à gauche
4) Demo d'un menu fixe à droite
Site Web de tutoriels en informatique - Webinfotuto.free.fr
Code HTML et CSS pour le menu fixe en bas de page
<!DOCTYPE html">
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Menu bandeau fixe en bas en CSS et HTML</title>
<style>
/******************************Code CSS*******************************/
html {
margin: 0px;
padding: 0px;
width: 100%;
}
body {
margin: 0px;
padding: 0px;
}
/********************************************************/
#PageCentrale {
margin-left: auto;
margin-right: auto;
}
/********************************************************/
#Bande-BasPage {
display: block;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 32px;
/* z-index: 999;*/
padding-top: 10px; /*décalage du texte vers le bas*/
text-align: center;
text-indent: 0px; /*décalage du texte vers la droite*/
font-size: 18px;
color: #FFFFFF;
background-color: #111111;
}
/********************************************************/
/******************************Fin Code CSS****************************/
</style>
</head>
<body>
<div id="PageCentrale">
<div id="Bande-BasPage" class="ParamOpaciteBas" >Site Web de tutoriels en informatique - Webinfotuto.free.fr</div>
<div>
</body>
</html>
|