Salut à toutes et tous, voila mon probleme :
je voudrais tout simplement faire imprimer une image avec du texte dynamique dessus (vu que les arriere-plans ne sont pas imprimés par défaut). j'ai donc pensé à faire une div avec l'image dedans et une autre par dessus avec mon texte dynamique ! seulement j'y arrive pas !!!
j'utilise bien le z-index mais il doit me manquer une info ^^
d'autre part, j'ai pensé à cette solution mais peut être en existe-t-il une plus simple !?
Merci pour votre aide

Il faut que l'une des div ait pour propriété "position :relative".

voila mon code actuel qui ne marche pas :
 
<div style="visibility:visible; width:231px; height:27; position:absolute; left:0px; top:0px;"><img src="images/billet_open_03.jpg" width="231" height="27" /></div>
<div style="z-index:2; visibility:visible; width:231px; height:27; position:relative; left:0px; top:0px;">
<?php
$dateNow = date( "d/m/Y" );
echo $dateNow;
?>
</div>
 
j'ai essayé toutes les combinaisons de absolute/relative !!!!

J'ai essayé, ça fonctionne chez moi
 
J'ai le texte par dessus mon image, tu peux faire une capture?

t'as essayé avec mon code ?
 
chez moi, la date s'affiche bien comme il faut mais l'image qui est censée venir en dessous se trouve completement en haut à gauche !

 
J'ai testé avec ça, ça marche meme avec IE

oui mais là ça marche tres bien parce que tu as l'image et le texte en haut à gauche (chez moi aussi ça marche bien ça !) .... mais moi je voudrais placer tout ça dans une case de tableau vers le milieu de la page (ou n'importe où ailleurs)
avec le code que j'ai donné, ma date s'affiche dans la case comme il faut mais pas l'image, qui s'affiche tout en haut à gauche !
ça semble logique vu qu'elle est en absolute avec left=0 et top=0 ... mais alors comment lui dire de s'afficher avec les mêmes coordonnées que l'autre ?
n'y a-t-il pas un moyen de l'afficher en relative par rapport à la cellule de tableau, tout comme l'autre div qui est en relative ?

Je ne sais pas si la valeur position est de type inherit (donc qu'elle se base sur son contenant pour trouver sa position)
 
Tu peux essayer relative pour les deux, et ainsi voir ce que ça donne.
 
En absolute, ça variera selon la taille de la page.

avec relative pour les 2, elles se mettent l'une au dessus de l'autre et impossible de les superposer ....
je crois qu'il faut une div relative et à l'intérieur, 2 div en absolute !!!!
parce qu'avec ça :
 
<div style="width:231; height:27; position:relative; left:0px; top:0px;">
<div style="width:231; height:27; position:absolute; left:0px; top:0px;"><img src="images/billet_open_03.jpg" width="231" height="27" border="0" /></div>
<div style="z-index:2; width:231; height:27; position:absolute; left:0px; top:0px;"><?php echo date("d/m/Y" ); ?></div>
</div>
 
... j'arrive à afficher comme je veux ^^
bon faut galérer un peu pour que ce soit nickel chrome mais au moins j'ai bien mes 2 div l'une sur l'autre dans ma cellule de tableau
 
Merci pour ton aide

euh .... c'est pour moi le "merci" ????

Tout à fait, pour le absolute/relative. Je l avais déjà utilisé il y a longtemps, mais je ne m en rappelais plus du tout.

bah de rien ... moi je l'avais jamais tenté avant ^^

 
Hello,
 
Il me semble que tu peux simplifier ton code:
- pas besoin de donner de hauteur à ton div conteneur, il prendra celle de l'image
- pas besoin de div autour de l'image, elle se place normalement dans le conteneur
- pourquoi donner la même taille à ton div contenant la date ? ta date pourrait plutôt être dans une balise de formattage de texte (ou celle correspondant au style de ton texte de date) plutôt qu'un div.
- pas besoin de définir le z-index puisque ton texte est placé après ton image dans ton code; il vient automatiquement par-dessus.
 
Exemple pour positionner la date en haut à droite de l'image à 5px du bord:
 

comment ça se fait que le texte va se placer automatiquement par dessus l'images parce qu'il est après dans le code ?
est-ce que c'est le fait de les mettre dans une div qui fait ça ?
effectivement ça fonctionne bien mais ya un petit décalage ... rien de méchant ^^
merci pour le conseil en tout cas

 
oui, parce qu'il est après dans le code
 
A quel niveau observes-tu ce "petit décalage" ? Si c'est une mesure au pixel raport à ton texte et le bord de l'image, cela provient probablement du line-height, à fixer en fonction de la taille de la police de ta date et pour éviter tout décalage éventuels dû aux marges et padding par défaut des navigateurs, les mettre à 0. Ensuite je ne sais pas dans quelle mesure le bord du texte est pris au pixel près ou pas. Par contre avec 2 images positionnées l'une par raport à l'autre de cette manière, tu arrives très facilement à positionner au pixel près.

ok mais d'habitude quand tu mets 2 elements l'un apres l'autre ds du code, ils sont l'un apres l'autre sur ta page !!!
en l'occurence, tu mets un eimage et du texte, ils vont bien être l'un apres l'autre !!!???
est-ce juste le fait de les mettre dans une div (disons un conteneur) qui les fait se superposer ?
pour le décalage, oui ça vient des tailles qui n'était pas exactement adaptées mais c'est rien de grave

 
ah ok sorry, je n'avais pas compris ta question
 
Alors la position dans le code à la suite influence sur le z-index.
 
Pour ce qui est de la superposition elle intervient parce que tu as sorti la date du flux normal en lui donnant un positionnement absolu.
Il va alors la positionner d'après les coordonnées que tu lui as données en fonction du conteneur-référence.
En donnant la position relative au div qui contient l'image et la date, on l'a choisi comme référence pour les coordonnées des blocs positionnés en absolu et se trouvant à l'intérieur.
 
euh, j'espère que c'est à peu près clair
 
Un peu de théorie ici: Le modèle de mise en forme visuel ça sera peut-être plus clair que mes explications découlant de ma prore compréhension imparfaite

aaaaaaaaaaaaaaaaaah okkkkkkkkkkkkkkkkkkkkk
donc, quand on dis qu'une div est positionnée en relatif, ça veut dire que c'est ce qui sera dedans qui sera relatif à cette div alors ?
ça veut dire qu'on peut par exemple prendre une cellule de tableau, la positionner en relative, et tout ce qui sera dedans, positionné en absolute, sera relatif à cette cellule ?
je sais pas si j'ai bien compris là ^^

 
euh... théoriquement peut-être bien que oui, mais je n'ai jamais testé...
Après un test, ça fonctionne sur IE, mais tu dois rajouter un display:block pour que cela fonctionne sur ff, opera
 
Perso, j'éviterais...

oui c'est clair, j'éviterai aussi mais c'était pour être sûr d'avoir compris le principe .... je suis en train de parcourir ton lien avec les explications
Je comprends mieux maintenant, merci beaucoup
Euh .. c'est pas évident quand même je trouve ... peut être avec de l'entrainement ^^

 
Clair ça m'a même paru pas loin de totalement obscure au début. Mais comme tu le dis, avec la pratique, ça commence à prendre un peu de sens et on comprends mieux le fonctionnement. Perso je suis loin d'avoir tout capté mais ce que j'en ai compris me permet déjà de faire pas mal de trucs

bah c'est le but
merci pour le coup de main en tout cas