[RESOLU] Adaptation de texte sur une image de dimensions variables

Bonjour à tous !

Cela fait bien 3 ans que je n'ai pas touché à css et le retour est un peu laborieux...

Voilà : j'ai une page (générée par php & mysql) qui répertorie une liste de projets architecturaux sous forme d'icônes. Chaque icône est cliquable et renvoie vers la fiche du projet en question. Chaque icône a une taille différente qui dépend du fichier chargé dans la base de données (le but étant d'utiliser Jquery Masonry pour les assembler en un "mur" homogène).

Je voudrais qu'au passage de la souris (a:hover), l'intitulé du projet passe devant l'icône (ex : construction d'une école primaire").

A priori rien de compliqué, il suffit de jouer sur le z-index... Mais je n'arrive pas à placer correctement le petit texte (span) par rapport aux limites de l'image (<img>), il est constamment repoussé en dehors de l'image.

Comment faire ?

(je joindrais bien un bout de code mais je l'ai tellement martyrisé qu'il ne ressemble plus à rien de cohérent ^^)

Merci d'avance !
JC
Modifié par zanzan (11 Aug 2012 - 16:16)

Je dois avouer que sans bout de code c'est dur de comprendre parfaitement.

J'ose répondre en répondant ceci malgré que je n'ai pas compris, je crois, tout à la perfection :

T'es éléments restent t'ils en position relatif? Si oui c'est normal, non?, que ton texte va après ton image malgré leurs z-index. Il faut donc mettre ton span en position absolute, attention de mettre l'élément qui l'entoure en position aussi (si rien n'est attribué, position relative va faire l'affaire).

position:absolute;

Bien sur avec un peu de code j'aurais pu plus cerner, et aussi donner du code concret

Zut j'ai fait n'importe quoi...
CF message ci-dessous :s
Modifié par zanzan (11 Aug 2012 - 14:40)

zanzan a écrit :
Merci Flink pour ta réponse !
Désolé je ne l'avais pas vue.

Voilà le bout de code en question, sans les balises php encombrantes dans ce post.

<div id="item">
     <a href="<?php echo JRoute::_(FlexicontentHelperRoute::getItemRoute($item->slug, $item->categoryslug)); ?>" class="topbloc">
          <?php echo $field->display; ?>
     </a>

     <div id=legende>
          <h2 class="value">
               echo $item->title;
          </h2>

          <span class="value"><?php echo $field->display; ?></span>

     </div>
</div>

Et les lignes CSS correspondantes :

div#item {
	display:block;
}

div#legende{
	background-color: white;
	position: relative;
	z-index: 1;
	top:0px;
	}

div.topbloc a {
z-index: 2;
}

div.topbloc a:hover {
z-index: 0;
}

Modifié par zanzan (11 Aug 2012 - 14:39)

En fait j'aurais ces 3 solutions :

1/ placer la légende dans le conteneur de l'image (en position absolue), auquel cas l'image serait en background du conteneur, mais alors comment garantir que le conteneur ait la taille de l'image ?

2/ placer la légende à l'extérieur de l'image (auquel cas l'image est correctement ajustée) et définir des marges négatives pour la légende, mais dans ce cas j'ai besoin d'une image aux dimensions fixes...

3/ placer, comme ici, le tout dans un conteneur global (div id=item) mais dans ce cas il faut que j'arrive à dire à ce conteneur "prends les dimensions de l'image)... Mais va-donc lui expliquer ça

EDIT : je continue de m'autorépondre au fil de mes essais... Disons qu'ils pourront servir à d'autres ^^

En affectant une position relative au conteneur global (div id=item) et une position absolue à la légende, il y a du mieux... Décidément je ne comprendrai jamais l'attribut position


EDIT 2 :

Wouhouhou ! Bon allez dernier edit et je ferme le sujet, voilà les modifs apportées :

Sur le HTML aucune modification, j'ai juste remplacé les class par des id pour plus de clarté...

#item {
	position: relative;
	display : inline-block;
}

#topbloc {
z-index: 3;
position : relative;
}

#topbloc:hover {
z-index: 1;
position : relative;
}

div#legende{
	background-color: white;
	opacity : 0.5;
	position: absolute;
	z-index: 2;
	top:0px;
	display : block;
	}

Bon c'était vraiment du tâtonnement mais... ça marche

Merci encore Flink, ciao !
Modifié par zanzan (11 Aug 2012 - 16:15)