Menu css probleme

Bonsoir,

Voilà mon problème est celui là;

J'ai fait un simple menu css, il faut qu'il soit en position relative. Mais bizarrement il ne s'aligne pas...

Voici le xhtml;

		<div id="menu">	

			<a id="menu1" href="http://antoinezone.net/today/">Today</a>

			<a id="menu2" href="http://antoinezone.net/mes_creations/">Mes Creation</a>

			<a id="menu3_current" href="http://antoinezone.net/contact/">Contact</a>
				
			<a id="menu4" href="http://antoinezone.net/a_propos">A propos</a>		  
		   	  
      </div>

et voici le css...;

#menu{
        position: relative;
		width: 1255px;
		top:119px;
		height: 40px;
        margin: auto;


}

#menu1 {
  position: relative;
  width: 80px;
  height: 0px;

  left:0px;
  color: #bdbdbd;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-family:"Tahoma";
  font-variant:small-caps;
  font-size:1.40em;
  text-align: center;
  line-height:34px;
  z-index: 10; letter-spacing: 0;
  display: block;
  margin: 0 auto;

}
#menu1:hover {
  color: white;
  background-color: #3f6a2e;
}


#menu1_current {
  position: relative;
  background-color: #48ff00;
  width: 80px;
  height: 0px;
  left:0px;
  color: #bdbdbd;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-family:"Tahoma";
  font-variant:small-caps;
  font-size:1.40em;
  text-align: center;
  line-height:34px;
  z-index: 10; letter-spacing: 0;
  display: block;
  margin: 0 auto;

}
#menu1_current:hover {
  color: white;
  background-color: #48ff00;
}

#menu2 {
  position: relative;
  width: 140px;
  height: 0px;
  left: 120px;
  color: #bdbdbd;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-family:"Tahoma";
  font-variant:small-caps;
  font-size:1.40em;
  text-align: center;
  line-height:34px;
  z-index: 10; letter-spacing: 0;
  display: block;
  margin: auto;
}
#menu2:hover {
  color: white;
  background-color: #3f6a2e;
}


#menu2_current {
  position: relative;
  background-color: #48ff00;
  width: 140px;
  height: 0px;
  left: 120px;
  color: #bdbdbd;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  text-decoration: none;
  font-family:"Tahoma";
  font-variant:small-caps;
  font-size:1.40em;
  text-align: center;
  line-height:34px;
  z-index: 10; letter-spacing: 0;
  display: block;
  margin: auto;
}
#menu2_current:hover {
  color: white;
  background-color: #48ff00;
}

tata jusqu'à menu4...

avez-vous une idée pour les aligner sans avoir recours au position:absolute; ?

Merci..

EDIT; J'ai planché un peu, et je ne sais pas si c'est la bonne solution, mais j'ai fait des margin-top négatives.. mais ça fonctionne!
Modifié par Docxell (05 Sep 2009 - 02:11)

Bonjour,

Tes styles sont horriblement répétitifs, il faut absolument factoriser tout ça! Tu peux sans doute réduire tes styles pour ce menu à une quinzaine ou une vingtaine de lignes.

Tu dois bien savoir utiliser d'autres sélecteurs en CSS que le sélecteur d'identifiant?

Si tu commences par améliorer ton code en le rendant plus digeste, je pense que tu pourras obtenir de l'aide. En l'état, ça découragera quiconque de tenter de comprendre ce code.