[résolu] Menu graphique sans image survolé ....

Bonjour,
Mon probleme est que je veux créer un menu à partir d'une image et d'une liste.

voilà le code de la page :

  <div id="header_nav">
				<ul>
				<li><a id="menu1" accesskey="1" title="accueil" href="#">accueil</a></li>
				<li><a id="menu2" accesskey="2" title="forums" href="#">forums</a></li>
				<li><a id="menu3" accesskey="3" title="livre d'or" href="#">livre d'or</a></li>
				<li><a id="menu4" accesskey="4" title="contact" href="#">contact</a></li>
				</ul>
  </div>

et voilà mon code actuel pour la partie Css :

#header_nav {
	position: relative;
	width: 960px;	
	height: 63px;
  margin: 0px;
	clear: both;
	background-image: url(images/header_nav.jpg);
	display:block;
}

#header_nav ul, #header_nav li {
	margin:0;
	padding: 0;
	list-style-type: none;
	}
#header_nav ul {
	padding-top:20px;
	position: absolute;
	height: 63px;
	width: 960px;
	left: -68px;
}

#header_nav li {
	float: right;
}

#header_nav li a {
	display: block;  
	height: 30px;
	width: 140px;
	color: #769712;
	font: 17px/30px "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	text-decoration: none;
	border-left: 0px solid #fff;
	text-align: center;
}

Mon premier onglet fait 140px, le second 60, le troisieme 70 et le dernier 65. Voilà ça doit pas être dur mais j'arive pas à le faire.
Merci de votre aide d'avance
Modifié par SB4M (24 Dec 2005 - 14:18)

bah ils ont des id donc mets ton css concernant la taille sur l'id de chacun, sinon ils reagiront tous pareil
Modifié par LunaticPandora (22 Dec 2005 - 09:51)

merci mais je dois nommer mes id comment, je suis désolé je débute en xhtml
Ca doit ressembler à un truc comme ça mais je n'y arrive pas.
#header_nav li a menu2{

ah oui pardon tu as nommé les <a> toi... tu devrais alors nommer les <li> (les onglets si tu preferes) , meme si ça commence a faire pas mal d' id. je pense que tu devrais te pencher sur les bases css pour commencer parce que là tu cours vers le ravin. Pour indication, pour ton premier onglet tu aurais quelque chose comme :

#1er_li {
height: 140px;
}

ensuite tu fais pareil pour les autres, en changeant la taille a chaque fois.
en français ça donne : pour l'onglet 1 , mettre une hauteur de...

personnellement je trouve difficile de reprendre un code existant pour le modifier quand on y connait absolument rien, peut être qu'en reprenant les bases et en faisant ton propre menu tu y verrais plus clair (peut etre?? surement! ) mais je sais bien que parfois on n'a pas le temps!

ok merci, non j'avais déja utiliser ce menuque j'avais fait moi même dans un autre site mais la je bloquer pour les tailles différentes. merci beaucoup.

c'est bon j'ai reussi avec ça

#header_nav  li a{
	display: block; 
	height: 30px;
	border-left: 0px solid #fff;
	text-align: center;
}

li#menu1 a {
	width: 140px;
}
li#menu2 a {
	width: 80px;
}
li#menu3 a {
	width: 60px;
}
li#menu4 a {
	width: 60px;
}

  <div id="header_nav">
				<ul>
				<li id="menu1"><a  accesskey="1" title="accueil" href="#">accueil</a></li>
				<li id="menu2"><a accesskey="2" title="forums" href="#">forums</a></li>
				<li id="menu3"><a accesskey="3" title="livre d'or" href="#">livre d'or</a></li>
				<li id="menu4"><a accesskey="4" title="contact" href="#">contact</a></li>
				</ul>
  </div>

Voila, c'est peut-etre pas la meilleur façon mais ca marche bien

l'essentiel c'est de voir comment les differents elements reagissent, il y a souvent plusieurs façons de faire une meme chose un petit [résolu] devant le titre de ton post et c'est parfait ^^