Texte par dessus image et boucle

Résolu
Utilisateur anonyme -  
 Utilisateur anonyme -
Bonjour,
je voudrais savoir si il est possible, sans faire de tableau, de positionner un texte en bas à droite d'une image qui sera affiché plusieurs fois grâce à une boucle while() :

<?php
while( $files = mysql_fetch_array($req_files) ){   
?>
	<a href="#" class="text_float">Supprimer</a><img src="monimage.png" class="img_float"></a>
<?php
}
?>


CSS :

.img_float{
width: 120px;
z-index: 1;
position: relative;
top: 0px;
left: 0px;
}

.text_float{
z-index: 2;
position: relative;
top: 0px;
left: 100px;
}


Je réussi à positionner le texte par-dessus l'image, mais de 1), j'ai un décalage, l'image faisait comme si le texte était placé avant (donc comme si le texte n'était pas superposé à l'image), et de 2, le texte n'est pas du tout placé en bas à droite de l'image... et avec le décalage, le positionnement du texte n'est jamais le même.

Si quelqu'un sait comment faire... merci de m'aider ;)

--
JuZa.e3b.org || No man's land, People are strange, & Jesus was a punk ## The Blood's Flowers
#Engraved February#             Sleepwalking Past Hope
Configuration: Microsoft Windows XP / Mandriva
Pentium Dual Core 2.50GHz
2GO ram

4 réponses

  1. M@dien Messages postés 439 Date d'inscription   Statut Membre Dernière intervention   74
     
    Bonjour,

    C'est possible oui:
    <?php
    while( $files = mysql_fetch_array($req_files) ){   
    ?>
    	<div class="float"><img src="monimage.png" class="img_float"><br/><a href="#" class="text_float">Supprimer</a>
    <?php
    }
    ?>

    Et le CSS correspondant:
    		div.float {
    			width:120px;
    			text-align:right;}
    		div .text_float {
    			position:relative;
    			bottom:20px;}
    0
  2. Utilisateur anonyme
     
    Merci de ta réponse M@dien :)
    Le problème est que maintenant mes images s'affichent les unes en dessous des autres...
    N'y aurait t'il pas moyens de faire pour qu'elles s'affichent en ligne ?

    (je me fiche totalement de la méthode utilisé, CSS, Javascript, ... mais pas de tableau par contre...)

    Merci d'avance pour vos réponses :)
    0
  3. M@dien Messages postés 439 Date d'inscription   Statut Membre Dernière intervention   74
     
    Modifie le CSS comme ça, et joue avec les marges pour les aligner =)

    div.float {
    float:left;
    width:120px;
    text-align:right;}
    div .text_float {
    position:relative;
    bottom:20px;}
    0
  4. Utilisateur anonyme
     
    ok merci M@dien, je vais essayer de me débrouiller avec ça ;)
    0