Menu

Bonjour, depuis quelques jours je m'arrache les cheveux sur un problème de menu.

C'est un menu que je voudrais en au milieu de ma page à l'horizontale et qui change d'image au survol comme celui la : http://www.journaldugeek.com/ .

J'ai donc cherché sur le net et bidouillié mon menu. Pour mettre mon menu au milieu j'ai utilisé des marges gauches avec une position absolute pour chaque boutons en reportant à chaque fois pour les boutons les marges. En effet, avec cette méthode je crois qu'en fonction de la résolution d'écran des personnes qui visitent mon site vois mon menu avec la bonne marge mais peuvent voir aussi les autres éléments de ma page centrés en (margin: 0 auto;) & cela peut créer un décalage. Je voudrais savoir comment optimiser le code de mon menu pour qu'il soit correctement centré au milieu de page en accord avec tous les autres éléments en margin: 0 auto;.

voici mon code html et css:

<div id="main">
	<a href="#"><div class="menu"></div></a>
	<a href="#"><div class="menu2"></div></a>
	<a href="#"><div class="menu3"></div></a>
	<a href="#"><div class="menu4"></div></a>
	<a><div class="menu5"></div></a>
	</div>

#main {
	width: 840px;
	height: 180px;
	display:inline;
}

 a div {
	display:inline;
}

#main a div.menu {
	background-image: url('../img/b1.png');
	width:  145px;
	height: 180px;
	position: absolute;
	margin-left: 214px;
}

#main a div.menu:hover {
	background-image: url('../img/b1_h.png');
	width:  145px;
	height: 180px;
	position: absolute;
	margin-left: 214px;
}

#main a div.menu2 {
	background-image: url('../img/b2.png');
	width:  150px;
	height: 180px;
	position: absolute;
	margin-left: 359px;
}

#main a div.menu2:hover {
	background-image: url('../img/b2_h.png');
	width:  150px;
	height: 180px;
	position: absolute;
	margin-left: 359px;
}

#main a div.menu3 {
	background-image: url('../img/b3.png');
	width:  150px;
	height: 180px;
	margin-left:509px;
	position: absolute;

}

#main a div.menu3:hover {
	background-image: url('../img/b3_h.png');
	width:  150px;
	height: 180px;
	margin-left:509px;
	position: absolute;

}

#main a div.menu4 {
	background-image: url('../img/b4.png');
	width:  180px;
	height: 180px;
	margin-left:659px;
	position: absolute;
}

#main a div.menu4:hover {
	background-image: url('../img/b4_h.png');
	width:  180px;
	height: 180px;
	margin-left:659px;
	position: absolute;
}

#main a div.menu5 {
	background-image: url('../img/b5.png');
	width:  215px;
	height: 180px;
	margin-left:839px;
	position: absolute;
}

Merci pour vos réponses .
Modifié par pete (08 Nov 2009 - 14:02)

Bon j'ai finalement reussi à centrer mon menu en faite tout seul , veulliez m' excuser mais je fais un double post pour afficher la solution, on sait jamais .

#main a div.menu {
	background-image: url('../img/b1.png');
	width:  145px;
	height: 180px;
	position: absolute;
}

#main a div.menu:hover {
	background-image: url('../img/b1_h.png');
	width:  145px;
	height: 180px;
	position: absolute;
}

#main a div.menu2 {
	background-image: url('../img/b2.png');
	width:  150px;
	height: 180px;
	position: absolute;
	margin-left: 145px;
}

#main a div.menu2:hover {
	background-image: url('../img/b2_h.png');
	width:  150px;
	height: 180px;
	position: absolute;
	margin-left: 145px;
}

#main a div.menu3 {
	background-image: url('../img/b3.png');
	width:  150px;
	height: 180px;
	margin-left:295px;
	position: absolute;

}

#main a div.menu3:hover {
	background-image: url('../img/b3_h.png');
	width:  150px;
	height: 180px;
	margin-left:295px;
	position: absolute;

}

#main a div.menu4 {
	background-image: url('../img/b4.png');
	width:  180px;
	height: 180px;
	margin-left:445px;
	position: absolute;
}

#main a div.menu4:hover {
	background-image: url('../img/b4_h.png');
	width:  180px;
	height: 180px;
	margin-left:445px;
	position: absolute;
}

#main a div.menu5 {
	background-image: url('../img/b5.png');
	width:  215px;
	height: 180px;
	margin-left:625px;
	position: absolute;
}

#main {
width: 840px;
margin: 0 auto;
}

Modifié par pete (10 Nov 2009 - 19:31)

À mon avis tu n'utilise pas la bonne méthode pour ton menu. Premièrement il y a un abus de div... Pas bien du tout.

Le système de liste fonctionne beaucoup mieux et du coup le positionnement absolut n'est plus nécessaire. On utilise les float à la place.

Oui, mais le problème c'est que quand j'enléve les balises div de mon code html et css et que je j'insère la class avec la balise a, mes images ne s'affichent plus .

J'ai pas trop compris comment tu procèdais, mais moi pour mon menu, j'ai mis ma liste à l'intérieur d'un div.

Comme ça:

<div id="menu"> 
    <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
        <li><a href="#">menu4</a></li> 
    </ul> 
</div>

Bon en fais mon menu à moi est beaucoup plus compliqué que ça, mais c'est la base.

Tu place ton div comme tu veux, ensuite les li en float:left avec un display:block...

Après moi je n'ais eu aucun problème pour appliquer les images.

Salut,

pete a écrit :
Oui, mais le problème c'est que quand j'enléve les balises div de mon code html et css et que je j'insère la class avec la balise a, mes images ne s'affichent plus .

La tu pense dans le mauvais sens, tu adapte ton code html pour qu'il te permette d'avoir l'affichage que tu veux. Il faut d'abord faire ton code html, sur lequel tu structure ton design et ta mise en forme. Mais pas l'inverse.
A toi de faire en sorte d'utiliser les bons sélecteurs en CSS, auxquels tu attribue tes images en background.
Modifié par Mikachu (11 Nov 2009 - 15:00)

merci pour vos réponses je vais tacher d'améliorer mon code .