images survolée avec texte "centré"

[alinaroset]

bonjour, j'ai déjà posté ce message ailleurs dans le forum mais on m'a conseillé de faire un tour par ici. je suis donc à la recherche de quelqu'un qui s'y connait en css et html car je sais pas comment faire pour que le texte survolé soit contenu dans l'image mais avec une marge par rapport à l'image..
donc voilà j'ai déjà essayé de rajouter des margin mais ça marche pas...un indice s'il vous plait...
merci!!!!!!

[YoyoS]

Et t'as essayé padding ?

[alinaroset]

bonjour euh oui aussi...
et je me demande si c'est pas la balise li qui pose problème...

[bproductiv]

je mettrai l'image dans le code source dans le a (et non dans le css),
puis un span dans le a avec ton texte.
dans le css
a:hover span{display:block;margin:1em;visibly:visible}
a:link span{display:none;}

[alinaroset]

j'essaie tout de suite

[alinaroset]

hmm je dois louper quelque chose... où est mon texte? oui je suis nulle je sais...

[serval2a]

Code: Tout sélectionner

<a href="/montagne.html"><img src="images/montagne.jpg"  title="la montagne c'est super, on s'éclate y'a du soleil et de la neige et parfois du vent et patati et patata" /></a>

[alinaroset]

oui mais le but c'était de faire ça: http://www.eric-roset.ch/galerie.html en centré....???

[bproductiv]

essaye ca:
laisse l'image en background de ton lien (css) et met ce mm lien en position:relative;
ensuite ->
a span{display:none}
a:hover span{color:#ccc;display:block;visibly:visible;width:150px;position:absolute;top:1em;left:1em;}

[alinaroset]

on voit la puce de la liste se déplacer...

[serval2a]

oui mais le but c'était de faire ça: http://www.eric-roset.ch/galeriesfr.html en centré....???

Ok, comme je voyais pas trop ce que tu voualis j'ai tenté.

Perso j'ai ça
A mettre en remplacement dans la feuille de style

Code: Tout sélectionner

#menu li {
   float:left;
   list-style-type:none;
   text-align: center;
   line-height: normal;
   padding: 10px;
   }

et après modifier chaque #menuquelquechose comme cela

Code: Tout sélectionner

#menuequateur a:hover {background:url(http://www.eric-roset.ch/images/equateur.jpg) no-repeat 0 -150px ;font-size:11px; display: table-cell; vertical-align: middle; border:#FFFFFF 10px solid;}

Ceci dit ça ne marchera correctement que sous FF, IE centrera uniquement le texte à l'horizontal.

[bproductiv]

menu li{list-style:none;}
je ne vois pas de span dans ton a??

[alinaroset]

youpii youpii youpii oui les span...forcément....(je plaisante vu mon niveau je découvre à peine) et oui ça marche!!!! merci merci meric!!!!
je vais chercher le gamin à l'école et je viens essayer le truc de serval2a pour voir ce que ça donne!!!
suis contente contente....
à plus!

[alinaroset]

tout marche vous zetes trop forts! merci encore!