je suis désolé de relancer ce sujet mais je n'arrive pas à terminer mon menu, voici le resultat :
page test
et voici le CSS :
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: rgb(148,200,244);
}
/* On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
/* On utilise text-align: center ; pour Internet Explorer, c'est la seule façon de centrer les éléments de type block avec ce navigateur */
div#conteneur
{
width: 768px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid rgb(8,36,211);
background: rgb(250,250,250);
}
/* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */
/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
h1#header
{
height: 258px ;
background: url(banniere1.jpg) no-repeat left top ;
margin: 0 ;
}
/*________________________________________________________________________________________*/
/** MENU SMILIES **
* -------------- *
* Jeremie Patonnier <jep@ibilab.net>
* -------------- *
* Compatibilité : IE 5.5+
* Mozilla 1.6
* FireFox
* Opera 7
* Safari
*/
/* LA BALISE UL *
* ------------ *
* La balise UL va servir de conteneur global pour le menu
* NOTE : Dans le cadre de ce menu, les balises LI ne nous servent
* a rien, elle ne seront donc pas redefinie
*/
ul{
/* La balise est déclaré en position "relative" afin que les futurs balises A
* utilisent la balise UL comme point de repère de leurs propres coordonnés absolus
* NOTE : la position "relative" est preférer a la position "absolute" afin
* de conserver le menu dans le flux HTML
*/
position:relative;
/* On supprime les puces pour les elements LI de la balise */
list-style:none;
/* On s'assure qu'il n'y aura aucun décalage autour du menu
* NOTE : il faut définir le padding ET le margin car dans le cadre des listes à
* puces. Les différents navigateurs utilisent l'une ou l'autre des valeurs
* pour afficher les puces et assurer les retraits des elements.
*/
padding: 0px;
margin: 0px ;
/* On définie la largeur et la hauteur de la balise en fonction des dimensions de l'image de fond */
width:140px;
height:156px;
/* On definit le background de la balise */
background: url(menu3.gif) no-repeat left top;
}
/** LA BALISE A **
* ------------- *
* La balise A va nous permettre de définir les attributs communs à chaque element du menu
*/
a{
/* La balise est déclarée en position "absolute" afin de pouvoir positionner nos elements
* de menu au pixel près à l'interieur de la balise UL.
*/
position:absolute;
/* En temps normal, la balise A est une balise "inline". Pour les besoin de ce menu, nous
* la transformons en balise "block"
*/
display:block;
/* Quoi qu'il arrive par la suite, toutes les balises A seront accoler au bord gauche de
* leur conteneur : la balise UL
*/
/* De même, quoi qu'il arrive, les balise A auront toute une hauteur de base de 12px
* NOTE : Cette hauteur dépend de l'image de fond qui sera utilisée, ainsi que de la taille
* de la police typographique qui sera utilisée.
*/
height:12px;
/* On supprime le soulignement par défaut des liens */
text-decoration:none;
/* On definie les valeurs typographiques du texte de la balise */
font: bold 9px Verdana,Arial,Helvetica,sans-serif;
color:#000000;
/* Le Z-index nous permettra d'être sûr qu'une balise A sera toujour par dessus
* toute autre balise que l'on pourrais definir. Cette valeur est necessaire pour
* Assuré la compatibilité avec Mozilla/Firefox.
*/
z-index:2;
/* Pour eviter les problèmes de prechargement et d'eventuel scintillement, toutes les puces
* sont mises sur une seul image. Cette image est placé en background sur toutes les balises A.
*/
background: url(menu3.jpg) no-repeat right top;
}
/** LA PSEUDO-CLASS :hover **
* ------------------------ *
* La pseudo-class :hover va nous permettre de définir les attributs communs à chaque balise A
* survolée par la souris
* NOTE : IE comprend la pseudo-class :hover uniquement lorsqu'elle est appliquée a la balise A
*/
a:hover{
/* On redéfinie la couleur de la police typographique */
color:#A99D49;
/* On fixe la largeur de la balise
* NOTE : Cette largeur dépend de l'image de fond utilisée.
*/
width:174px;
/* Le Z-index nous permettra de nous assurer qu'une balise A survolée sera toujours en arrière plan
* par rapport à une balise A non survolée. En effet, nous verrons par la suite que certaines balises
* seront amenées à se chevaucher.
*/
z-index:1;
}
/** LE CAS PAR CAS **
* ---------------- *
* Les modifications globals de balises etant définies, nous allons maintenant nous attaquer
* aux cas particuliers grace à l'utilisation des identifiants uniques de classes
* NOTE : Tous les identifiants suivant sont appliqués à des balises A, ils héritent donc tous des
* comportements definis ci-dessus pour la balise A et pour la pseudo-classe associée :hover
*/
#menu1{
/* Cet element de menu sera placé à 35px du bord haut de son conteneur : la balise UL */
top: 0px;
/* Le texte sera décallé de 58px vers la droite tout en laissant apparaitre le background de la balise */
padding-left: 58px;
/* On redéfinie le positionnement du background de la balise pour afficher la portion de background
* necessaire pour cet element de menu spécifique
*/
background-position: 0% 0%;
}
#menu1:hover{
/* Lors du survol de la balise, la portion de background visible sera plus importante, on modifie donc
* la proriété top et on conserve la position du texte en jouant sur le padding-top
* NOTE : C'est ce petit truc qui nous contrains à utiliser un Z-index. En effet, dans ce cas, on risque
* de voir deux balises A se chevaucher. Donc, il faut toujours s'assurer que la balise qui est
* survolée sera bien en dessous des balises non-survolées afin que celles-ci ne soit pas cachées
* par la balise survolée.
*/
top: 0px;
padding-top: 0px;
/* On redéfinie le positionnement du background de la balise pour afficher la portion de background
* necessaire pour cet element de menu spécifique
*/
background-position: 0% 0px;
}
/* Il ne reste plus qu'à répéter ces opérations pour chaque element de menu individuel */
#menu2{
top: 18px;
padding-left: 57px;
background-position: 0% 0-12px;
}
#menu2:hover{
top: 0px;
padding-top: 18px;
background-position: 0% 0px;
}
#menu3{
top: 36px;
padding-left: 54px;
background-position: 0% -24px;
}
#menu3:hover{
top: 0px;
padding-top: 36px;
background-position: 0% 0px;
}
#menu4{
top: 54px;
padding-left: 50px;
background-position: 0% -36px;
}
#menu4:hover{
top: 0px;
padding-top: 54px;
background-position: 0% 0px;
}
#menu5{
top: 72px;
padding-left: 44px;
background-position: 0% -48px;
}
#menu5:hover{
top: 0px;
padding-top: 72px;
background-position: 0% 0px;
}
#menu6{
top: 90px;
padding-left: 37px;
background-position: 0% -60px;
}
#menu6:hover{
top: 0px;
padding-top: 90px;
background-position: 0% 0px;
}
/*_____________________________________________________________________________*/
div#contenu
{
padding: 0 30px 0 100px ;
background: url(menu1.gif) no-repeat 15px 15px ;
}
/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */
div#contenu h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(little_apple.gif) no-repeat left bottom ;
color: rgb(0,0,250) ;
border-bottom: 1px solid rgb(0,0,250) ;
}
/* Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse */
div#contenu h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
/* De même que pour le titre h3, à ceci près qu'on ne donne pas d'image décorative cette fois ci */
div#contenu p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
/* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
div#contenu a
{
color: #8a0 ;
}
div#contenu a:hover
{
color: #9b2;
}
/* On met en forme les liens contenu dans la page */
p#footer
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
/* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand */
/*une couleur de fond, une bordure, la taille de police et un léger espace entre le texte et les bords du pre */
* html pre
{
width: 636px ;
}
/* On dois donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'à Internet Explorer */
Auriez vous une idée pour m'éviter de passer la nuit à chercher ?
Edit : mis à jour.
Modifié par nossibe (01 Mar 2007 - 13:10)
