18041 sujets

Questions générales et questions de débutants

Suis incapable d'intégrer mon menu à ma page principale.[résolu]

Voilà. J'ai fait un menu http://largowin.com/menu/menu.html que je voulais intégrer à cette page http://largowin.com/menu dont voici l'adresse de la css http://largowin.com/menu/css/base.css

Je n'arrive pas à positionner mon menu au bon endroit et de plus, la largeur des éléments ne fonctionne plus du tout.

Voici le code pour la css du menu:
/* NAV.CSS */

ul#nav {
height: 73px;
width: 445px;
background-color:#0B0B0B;
}
ul#nav li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: absolute;
	display: block;
	height: 80px;

}
ul#nav li a {
text-decoration: none;
text-indent: -9999px;
height: 73px;
display: block; 
font-size: 1%
}

/* Set item locations */
#nav_accueil	{ left: 0px; width:75px;  }
#nav_executif	{ left: 75px; width: 87px; }
#nav_gouvernance{ left: 160px; width: 89px; }
#nav_journal	{ left: 248px; width: 79px; }
#nav_liens		{ left: 327px; width: 61px; }
#nav_documents		{ left: 387px; width: 97px; }

/* Set hover postion */
ul#nav li a:hover 		{ background-position: 0px -73px; }

/* Set background images */
#nav_accueil a		{ background-image: url(../images/menu/accueil.png); }
#nav_executif a		{ background-image: url(../images/menu/executif.png); }
#nav_gouvernance a	{ background-image: url(../images/menu/gouvernance.png); }
#nav_journal a		{ background-image: url(../images/menu/journal.png); }
#nav_liens a		{ background-image: url(../images/menu/liens.png); }
#nav_documents a	{ background-image: url(../images/menu/documents.png); }

/* Set "you are here" position */
#nav_accueil a, #nav_executif a, #nav_gouvernance a, #nav_journal a, #nav_liens a, #nav_documents a	{ background-position: 0px -146px; }


J'ai seulement ajouté #nav {margin-top:0px;
margin-left:262px;
}


Merci de votre aide.
Modifié par largowin (02 Oct 2007 - 20:11)
Les liens du menu sont en display: block, mais:
- ils sont positionnés en absolu (à priori, c'est une erreur);
- comme ils sont positionnés en absolu, ils prennent la largeur de leur contenu (il faudrait soit leur appliquer un width: 100%, soit supprimer le positionnement absolu);
- ils sont trop haut (73px au lieu d'une hauteur attendue de 53px).

Corriger ça ne corrige pas tous les problèmes, mais c'est déjà un premier pas.

Ceci dit, j'aurais tendance à penser qu'il faudrait modifier complètement le menu lui-même. On pourrait par exemple passer par des images en dur dans le code HTML, et soit faire l'effet de rollover en Javascript (solution «canonique» pour des menus graphiques accessibles avec rollover), soit utiliser des PNG-8 ou GIF pour dessiner le texte + la hauteur et largeur de chaque bloc (donc quelques pixels blancs et une grande zone transparente pour chaque lien), et faire le fond en CSS (couleur de fond #0b0b0b et image de fond lors du :hover).

Ce sera par ailleurs beaucoup plus simple à intégrer côté CSS. Smiley smile
Florent V. a écrit :
Les liens du menu sont en display: block, mais:
- ils sont positionnés en absolu (à priori, c'est une erreur);
- comme ils sont positionnés en absolu, ils prennent la largeur de leur contenu (il faudrait soit leur appliquer un width: 100%, soit supprimer le positionnement absolu);


Est-ce vraiment nécessaire, puisque je donne une largeur à chaque élément du menu. J'ai un utilisé rigoureusement ce même menu pour un autre site et ça fonctionne au poil.

a écrit :

- ils sont trop haut (73px au lieu d'une hauteur attendue de 53px).


Mon image qui permet le rollover fait 146px de haut. Je sais bien qu'intégré dans ma page, cette hauteur ne fonctionne pas, mais dans mon menu seul ( http://largowin.com/menu/menu.html ), il n'y a pas de problème.

Il me semble que le problème se situe ailleurs comme tu le signales. Je vais fouillé les liens que tu m'as donné concernant le positionnement absolu (j'ai remarqué au travail que sous IE, ça ne fonctionnait pas du tout). Je retourne donc plancher...et vous reviens là-dessus si je trouve ce qui ne va pas. Merci de ton aide.

<edit>C'est réglé! Et cela, grâce à tes pistes de solution. Merci. J'ai positionné mon menu en absolu et tout est impec. Me reste plus qu'à régler un léger problème avec mon footer sous IE (et tenter de régler un problème d'affichage de couleur de photoshop au web, car le look n'est pas pareil d'une machine à une autre) et changer la hauteur fixe du contenu que j'ai placée en attendant, et le tour sera joué.

Merci encore!
Modifié par largowin (02 Oct 2007 - 05:04)
Sujet clos
Aller à