Forum d'entraide PHPFrance

Bonjour,
Je veux mettre une image par dessus une autre (PHP) et ce dans un tableau.
Je vous montre mon code PHP

<?php
$image=$_GET['image'];

$photo =mysql_query('SELECT DISTINCT ... FROM ... WHERE photo.image="'.$image.'"');

while ($gd_photo = mysql_fetch_array($photo) )     
{    
	echo '<div id="gd_photo">';
	echo $gd_photo['ville'];
	echo '<br />';
	echo '<a href="javascript:history.go(-1);"><img src="../upload/'.$gd_photo['image'].'" width="600" border="0"></a>';
	echo '<br />';
	echo $gd_photo['titre_image'];
	echo '<br />';
	echo "</div>";
}
?>

Juste avant j'ai mis mon image <img class="x" src="images/transparent_01.png" />

Et voci mon cde CCS :

Code : Tout sélectionner

img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}

Mon problème c'es que l'image ne se met pas dans le tableau mais dans la "page" en haut à gauche !
Si quelqu'un à une idée...
Merci d'avance de votre aide

Un élément positionné en absolu se positionnant par rapport au plus proche ancêtre positionné, il faut qu'il y ait un élément ancêtre positionné. Essaie en ajoutant le code CSS suivant :

Code : Tout sélectionner

#gd_photo {
  position: relative;
}

Soit dit en passant, comme tu appliques une boucle while, il vaut mieux remplacer l'attribut id par un attribut class (auquel cas il faudra remplacer le # par un . dans le code CSS ci-dessus) : en effet, si plusieurs résultats sont retournés, ton code HTML sera invalide, la valeur d'un attribut id devant être unique dans la page Web (en revanche, une classe peut se répéter à l'infini).

Merci pour ta réponse.
1- ma page est en PHP
2- lorsque je mets "relative", mon image transparente se positionne au-dessus, d'ou un décalage de mon image (exemple : http://www.video-on-line.fr/aff_gd_phot ... 202140.jpg
Peut-être qu'il faut que je mette l'image dans un tableau ?
Est-ce que ça peut se mettredans le while ?

1- ma page est en PHP

Qu'elle soit en PHP, en ASP.Net, en ColdFusion ou en Ruby, le problème n'est pas là.

2- lorsque je mets "relative", mon image transparente se positionne au-dessus, d'ou un décalage de mon image (exemple : http://www.video-on-line.fr/aff_gd_phot ... 202140.jpg
Peut-être qu'il faut que je mette l'image dans un tableau ?
Est-ce que ça peut se mettredans le while ?

Pas de tableau de mise en forme : c'est du détournement de balises.

Après analyse avec Firebug, tu peux déjà virer les br, ce qui donne le code suivant :

Code : Tout sélectionner

<div class="gd_photo">
  <img width="600" border="0" src="../upload/090320-202140.jpg" style=""/>
  Dom auf der Spreeinsel
</div>

Quant au CSS, il est, finalement, inutile de positionner en absolu ; en revanche, il vaut mieux virer la propriété height de la classe .gd_photo : en effet, la propriété height permet de déclarer une hauteur fixe (or, la photo de ton exemple est plus haute que 400 pixels).

Soit dit en passant, je te conseille de revoir la structure de ton code XHTML, car elle est invalide :

il n'y a pas de doctype déclaré (son absence a des conséquences sur, entre autres, le traitement du modèle de boîte sous IE, de par un basculement du navigateur en mode Quirks),
il y a deux éléments head, dont le premier n'est pas à sa place (même remarque pour les éléments title),
il y a un élément li qui se promène tout seul, sans être encadré par un ul (ou un ol).

Car, pour bien positionner en CSS, autant avoir une structure (X)HTML correcte.

Bonjour,
Si je vire comme tu dis les <br/>, mon image transparente est placée au-dessus et non pas dessus.
J'ai bien regardé, et je ne vois pas plusieurs <head>...

Le code qi est sur ma page fonctionne uniquement pour IE, mais pas pour Firefox !

J'ai bien regardé, et je ne vois pas plusieurs <head>...

Le code qi est sur ma page fonctionne uniquement pour IE, mais pas pour Firefox !

Tu cliques simplement sur le lien que tu as donné un peu plus haut, et tu fais "afficher la source".

Code : Tout sélectionner

<head>
<title>Video-on-line.fr : Vidéos - Webcams - Photos</title>
<link rel="stylesheet" media="screen" type="text/css" href="styles/style_photo.css" />
<link rel="stylesheet" media="screen" type="text/css" href="styles/style_lien.css" />
</head>
<body>
<html>

<head>
<title>Video-on-line.fr : Inscription</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
...

Quand tu développes, il vaut mieux tester ton code sous firefox en premier, et sous IE après.

Enfin, pour pouvoir travailler sereinement en CSS, il faut d'abord avoir du HTML valide sur la page considérée. L'adresse du validateur du w3c : http://validator.w3.org/

Bien...
J'ai supprimé les balises inutiles.
Mais je viens de m'apercevoir que on site sous IE fonctionne comme je le souhaite, aors que sous Firefox j'ai des difféences de comportements...

Je viens de valider mon style CSS, et j'ai corrigé mes erreurs

Si je vire comme tu dis les <br/>, mon image transparente est placée au-dessus et non pas dessus.

Peux-tu reformuler ta phrase ? Elle n'est pas claire.

C'est pas fini : http://validator.w3.org/

et tu y insères l'adresse que tu as donnée : http://www.video-on-line.fr/aff_gd_phot ... 202140.jpg

et n'oublie pas d'ajouter un doctype à ta page (première erreur signalée par le validateur...), c'est important.

et n'oublie pas d'ajouter un doctype à ta page (première erreur signalée par le validateur...), c'est important.

Remarque que j'ai déjà faite, soit dit en passant.

Si, par image transparente, tu entends le logo de ton site. Tu peux procéder comme suit :

code XHTML

Code : Tout sélectionner

<div class="gd_photo">
  <span class="transparent"></span>
  <img width="600" border="0" src="../upload/090320-202140.jpg" />
  Dom auf der Spreeinsel
</div>

CSS à ajouter

Code : Tout sélectionner

.gd_photo {
  position: relative;
}
.gd_photo span.transparent {
  background: url(../images/transparent_01.png);
  display: inline-block;
  width: 100%;
  height: 400px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

J'ai rien qui apparat à l'écran !!
J'ai fait ça pour le code PHP

<?php
$image=$_GET['image'];

$photo =mysql_query('SELECT DISTINCT image,ville,titre_image,auteur,copyright,site_web FROM photo WHERE photo.image="'.$image.'"');

while ($gd_photo = mysql_fetch_array($photo) )     
{    
	echo '<li class="pays"><img src="images/pt_logo_photo_01.png" /> Vous êtes ici <img src="images/fleche_01.png" /> Photos <img src="images/fleche_01.png"> '.$gd_photo['ville'].'</li>';
	echo "<br/>";
	echo "<br/>";
	echo '<div class="gd_photo">';
	echo '<span class="transparent">';
	echo '<img src="../upload/'.$gd_photo['image'].'" width="600" border="0">';
	echo '</span>';
	echo '<br />';
	echo $gd_photo['titre_image'];
	echo '<br />';
	echo "</div>";
}
?>

Et ça pour le CSS

Code : Tout sélectionner

.gd_photo
{
	position: relative;
	text-align: center;
	border: 1px solid #000000;
	width: 600px;
	height: 400px;
	background: #333333;
	font-family: "Trebuchet MS";
	color: #FFFFFF;
	font-size: 14px;
	margin-left: 90px;
}

.gd_photo span.transparent { 
  background: url(../images/transparent_01.png); 
  display: inline-block; 
  width: 100%; 
  height: 400px;
  position: absolute; 
  top: 0; 
  left: 0; 
  z-index: 1; 
}

Tu continues toujours à générer du code XHTML invalide : un élément LI doit être contenu dans un élément UL (ou OL).

Corrige ton bout de code PHP comme suit :

<?php 
$image=$_GET['image']; 

$photo =mysql_query('SELECT DISTINCT image,ville,titre_image,auteur,copyright,site_web FROM photo WHERE photo.image="'.$image.'"'); 

while ($gd_photo = mysql_fetch_array($photo) )      
{     
    echo '<p class="pays"><img src="images/pt_logo_photo_01.png" alt="" /> Vous êtes ici <img src="images/fleche_01.png" alt="" /> Photos <img src="images/fleche_01.png" alt="" /> '.$gd_photo['ville'].'</p>'; 
    echo '<div class="gd_photo">'; 
    echo '<span class="transparent"></span>'; 
    echo '<img src="../upload/'.$gd_photo['image'].'" width="600" border="0" />';
    echo $gd_photo['titre_image'];
    echo "</div>"; 
} 
?>

L'image ne doit pas être comprise dans le span de classe transparent, mais le suivre ; or, dans ton code, tu as mis l'image dans le span en question.

De plus, tu as oublié de mettre height: 400px au sélecteur .gd_photo span.transparent.

OK!!!
Ca marche, sous Firefox et IE, merci beaucoup de ton aide

Forum d'entraide PHPFrance

Positioning

Positioning