placer un menu

22 mars 2009, 01:05

Bonsoir,
je cherche à mettre tous les liens au centre des images :
http://www.6tnline.com/jquery/menu.php

<ul id="menu">
	<li>
		<a href="#" title="lien1">
			<img src="img/bouton1.png" alt="image absente" class="boutonImage" />

			<span class="lienTexte">sdfsffdsfdsfds</span>
		</a>
	</li>
	<li>
		<a href="#" title="lien1">
			<img src="img/bouton1.png" alt="image absente" class="boutonImage" />
			<span class="lienTexte">sdfsffdsfdsfds</span>
		</a>

	</li>
	<li>
		<a href="#" title="lien1">
			<img src="img/bouton1.png" alt="image absente" class="boutonImage" />
			<span class="lienTexte">sdfsffdsfdsfds</span>
		</a>
	</li>
	<li>

		<a href="#" title="lien1">
			<img src="img/bouton1.png" alt="image absente" class="boutonImage" />
			<span class="lienTexte">sdfsffdsfdsfds</span>
		</a>
	</li>
</ul>

Code : Tout sélectionner

		#menu {margin:0; padding: 0; position: absolute; left: 10px; top: 10px;}
		#menu li {float:left; margin: 0 10px; }
		#menu li a{text-decoration: none; }
		.lienTexte {position: absolute; margin-left: -160px; margin-top: 40px; text-transform: uppercase;}

Merci

22 mars 2009, 11:53

Pour positionner plus finement le texte par rapport aux images, le mieux est de positionner également les images.

Code : Tout sélectionner

#menu img {
  position: relative;
}

Cela dit, si tes images sont des images purement décoratives, le mieux est de les mettre en arrière-plan et de les gérer en CSS. Tu pourras ainsi beaucoup plus facilement centrer le texte, tout en allégeant le code.
Code XHTML

Code : Tout sélectionner

<ul id="menu"> 
   <li><a href="#" title="lien1">sdfsffdsfdsfds</a></li> 
   <li><a href="#" title="lien1">sdfsffdsfdsfds</a></li> 
   <li><a href="#" title="lien1">sdfsffdsfdsfds</a></li> 
   <li><a href="#" title="lien1">sdfsffdsfdsfds</a></li>
</ul>

CSS

Code : Tout sélectionner

#menu li {
  background: url(img/bouton1.png) no-repeat;
  text-align: center;
}

On se casse moins la tête ainsi.

22 mars 2009, 14:27

il n'y a pas d'img dans ton code

Code : Tout sélectionner

#menu img {
  position: relative;
}

22 mars 2009, 16:36

il n'y a pas d'img dans ton code
Code : Tout sélectionner
#menu img { position: relative; }

Relis attentivement mon message...

Si tu tiens à avoir tes images dans le code HTML, cette règle CSS ne sera pas de trop. Bien entendu, si tu mets tes images en arrière-plan, il est normal qu'on n'ait pas besoin du sélecteur #menu img.

placer un menu

Qui est en ligne