Cette page n'a pas de menu ni de bandeau fixe.
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 { margin-top:68px; /* ===> placer le menu à 68px du haut de #page */ } 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>