Problème de css

Bonjour,

Désolé pour le titre mais je ne savais pas quoi mettre..
En fait mon problème est le suivant, j'affiche un menu par ce code :

  <ul class="menu">
              <li><a
 href=""><b>Menu
1</b></a></li>
              <li><a
 href=""><b>Menu
2</b></a></li>
              <li><a
 href=""><b>Menu 3</b></a></li>
              <li><a
 href=""><b>Menu 4</b></a></li>
            </ul>

et le css relatif ressemble à ca :

.menu a{
display: block;
height: 20px;
width: 150px;
position: relative;
bottom: -5px;


font-size: 10px;
font-family: Arial, Helvetica, sans-serif ;
color: #2a679b;
text-decoration: none;
text-indent: 20px;
background-image:url(http://localhost/spip/imageprojet1/puce0.gif);
background-position: left center;
background-repeat: no-repeat;
}
.menu a:hover{
background-image:url(http://localhost/spip/imageprojet1/puce1.gif);
background-position: left center;
background-repeat: no-repeat;
}

Et mon problème est le suivant, l'image est un rectangle et le texte ce trouve à sa droite seulement il s'affiche au dessus (le texte par du haut du rectangle mais comme il est grand ca fait moche j'aimerai voir le texte au milieu )
je sais pas trop si vous voyez ce que je veux dire..

Sinon en css afin de placer mon texte au milieu j'ai essayer en rajoutant :

margin-top: value; 

ou encore :

position: relative;
  bottom: -3px;

mais seulement ca me décalle à chaque fois l'image et le texte au lieu du texte seulement...

Merci de votre aide

deja plutot que de mettre un b sur chaque item, fait plutot une regle du genre

 
ul#menu li a {font-weight:bold;}

ensuite pourquoi tu met un position:relative sur tes a ?

et comme t'as l'air d'avoir envie de mettre des puces, pourquoi ne pas utiliser cette fonctionnalité sur les li ?

ul#menu li{list-style-image:url(puce.gif);}

CyrilCS: Parcequ'un background permet de positionner la "puce" (l'image de fond en fait) comme on veux et précisement, alors qu'avec list-style-image c'est le navigateur qui décide.

misfu:

a écrit :

Désolé pour le titre mais je ne savais pas quoi mettre..

Fais un effort s'il te plait, je suis sûr que tu peux trouver mieux!

Tu peux utiliser au choix line-height ou padding-top pour modifier la position de ton texte.
Modifié par jb_gfx (17 Jun 2005 - 18:33)

jb_gfx : ok, mais dans ce cas, le backgroud-position est left center, et il me semble que la position par défaut des puces sur les navigateurs, et bien a gauche et au milieu, je suis pas sur à 100% mais il me semble bien

donc dans ce cas précis la list-type-image devrait suffire

Non par défaut la position est aligné à gauche + padding/margin par defaut du navigateur pour la position horizontale. Aligné au centre de la PREMIERE ligne de texte, tandis qu'avec background center on se retrouve avec la "puce" alignée au centre de TOUTES les lignes.