Problème positionnement image

nonozelmar Messages postés 12 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour, j'aimerais afficher une annonce avec les images correspondantes à droite de celle-ci mais je n'y arrive pas. 
<?php
include 'config.php';
    $retour = mysql_query('SELECT * FROM annonce');
    while ($donnees = mysql_fetch_array($retour))
    {
	$req = mysql_query('SELECT * FROM annonce WHERE pseudo = "'.$donnees['pseudo'].'" AND titre = "'.$donnees['titre'].'"')or die(mysql_error());
	$donnees2 = mysql_fetch_array($req) or die(mysql_error());
	if ($donnees2['telephone'] != 0)
	{
		$telephone = $donnees2['telephone'];	
	}
	else
	{
		$telephone = 'non communiqué';	
	}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accueil</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<br>
<div class="annonce2">
auteur : <?php echo $donnees['pseudo']?>
<br>
titre : <?php echo $donnees['titre']?>
<br>
description courte : <?php echo $donnees['description_courte']?>
<br>
prix : <?php echo $donnees['prix']?> €
<br />
telephone : <?php echo $telephone?>
<br />
<a href="http://battlefigter.franceserv.fr/envoyer_mail.php">Le contactez</a>
<br />
<br />
<a href="<?php echo $donnees['image1'] ?>"><img src="<?php echo $donnees['image1'] ?>" alt="" /></a>
<a href="<?php echo $donnees['image2'] ?>"><img src="<?php echo $donnees['image2'] ?>" alt="" /></a>
<a href="<?php echo $donnees['image3'] ?>"><img src="<?php echo $donnees['image3'] ?>" alt="" /></a>
</div>
</body>
</html>
<?php
}
?>

et le css : 
@charset "utf-8";
body
{
	width: 100%;
	background-color: #E6E2AF;	
}
.header
{
	width: 100%;
	font-size: 72px;
	text-align: center;
	border : 3px black solid;
	border-radius: 6px;
}
.annonce
{
	margin-left: 1%;
	margin-top: 4%;
	width: 60%;
	float:left;
	height: 100%;
	border: 2px black solid;
}
.profil
{
	border: 2px black solid;
	margin-right: 1%;
	margin-top: 4%;
	float: right;
	height: 100%;
	
}
.annonce2
{
	border-bottom: 2px black dashed;
	padding-left: 5%;
	padding-bottom: 2%;
}

.ajouter
{
 border: 2px black solid;
 text-align: center;
 width: 50%;	
}
img
{
	width: 10%;
	height: auto;
}

Merci d'avance pour votre aide. :)
A voir également:

2 réponses

Réponse 1 / 2
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Bonjour

en gros voila

<div class="annonce">
<div class="annonce2"> code de l'annonce</div>
<div class="imageannonce">code de l'image</div>
</div>


dans le CSS

.annonce2 {
width: 60%;
/**etc (margin padding ...)**/
}

.imageannonce {
float:right;
width: 10%;
/**etc (margin padding ...)**/
}
0
nonozelmar Messages postés 12 Date d'inscription   Statut Membre Dernière intervention  
 
Ton aide a un peu améliorer les choses mais un aperçu t'indiquera mieux le problème qu'un long discours
http://battlefighter.franceserv.fr/
0
Réponse 2 / 2
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
re bonjour

voila fais exactement ceci

rajoute la balise <p>

<div class="description">
<p>auteur : <?php echo $donnees['pseudo']?>
<br>
titre : <?php echo $donnees['titre']?>
<br>
description courte : <?php echo $donnees['description_courte']?>
<br>
prix : <?php echo $donnees['prix']?> €
<br />
telephone : <?php echo $telephone?>
<br />
<a href="http://battlefigter.franceserv.fr/envoyer_mail.php">Le contactez</a>
</p>

ensuite le css

efface

img
{
width: 300%;
height: auto;
}

et mets

.annonce
{
margin-left: 1%;
margin-top: 4%;
width: 60%;
float:left;
height: auto;
border: 2px black solid;
}
.description p {
padding:5%;
margin:0;
}

.description {
width:70%;
float:left;
}

.imageannonce {
float:right;
width:20%;
height:auto;
padding:5%;
margin:0;
}

.imageannonce img
{
width: 100%;
height: auto;
}

enfin tu as plusieurs fois dans la page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accueil</title>
<link rel="stylesheet" href="style.css" />
</head>

ainsi que <html><body></body></html>

je pense que tu as fais des includes mais tu as oublier d'effacer ces balises
quand on fait un include on ne met que le code a inclure et pas les balises citée plus haut
voir la fin de cette page (avant les commentaires)
https://www.alsacreations.com/actu/lire/254-le-point-sur-la-fonction-include-php.html

dernier conseil apprend le html / css
http://css.mammouthland.net/premiers-pas-en-css.php
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3


Un petit merci vaut mieux qu'une grande ignorance
0
nonozelmar Messages postés 12 Date d'inscription   Statut Membre Dernière intervention  
 
je voudrais mettre les images les unes a coté des autres je fais vertical-align:middle; mais sa ne fonctionne pas. comment je fais ?
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
un truc du genre

.annonce
{
margin-left: 1%;
margin-top: 4%;
width: 60%;
float:left;
height: auto;
border: 2px black solid;
}

.description p {
padding:2%;
margin:0;
}

.description {
width:50%;
float:left;
}

.imageannonce {
float:right;
width:40%;
height:auto;
padding:5%;
margin:0;
}

.imageannonce img
{
width: 30%;
height: auto;
}

mais je le répète déjà tes balises <div class="annonce"> sont imbriquées dans une div class="annonce" ce qui réduit la place pour les images l'erreur est due je pense a l'include php

donc include mal codée ---> ne mets dedans que le code a afficher dans le body et pas le reste

va voir ta page et affiche le code source (en général afficher/source) et tu verra de quoi je parle des doctypes, html head et body a répétition au milieu du code donc ca ne peux générer que des erreurs
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
re bonjour

je vois que le probleme est résolu sauf
ton header dépasse et provoque une barre de scroll horizontal parce que tu as mis un width:100% et un border de 3 px et autres problèmes de marges et de look pas super

donc comme je suis gentil voici le css complet mais un petit merci et un résolu serait de bon aloi

body
{
width: 96%;
margin:2%;
background-color: #B7CA79;
}
.header
{
width: 100%;
font-size: 72px;
text-align: center;
border : 3px black solid;
border-radius: 6px;
background-color: #E6E2AF;
}
.annonce
{
margin-left: 1%;
margin-top: 4%;
width: 60%;
float:left;
height: 100%;

}
.profil
{
border: 2px #556627 solid;
margin-right: 1%;
margin-top: 4%;
float: right;
height: 100%;
background-color: #E6E2AF;
border-radius: 6px;
}

.ajouter
{
border: 2px black solid;
text-align: center;
width: 50%;
}

.cadre
{
width: 100%;
float:left;
height: auto;
border: 2px #556627 solid;
background-color: #E6E2AF;
margin-bottom: 10px;
border-radius: 6px;
}

.description p {
padding:2%;
margin:0;
}

.description {
width:50%;
float:left;
}

.imageannonce {
float:right;
width:40%;
height:auto;
margin:0;
}

.imageannonce img
{
width: 26%;
margin: 20px 2%;
height: auto;
border-radius: 4px;
}

#login {
margin: 0 10px;
}

#login h2 {
font-size:14px;
}
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse
Comment recadrer une image avec Inkscape
infofeet -
TELLIEZ -

13 réponses
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
Xiaomi/Redmi - problème de réseau et SMS de positionnement
Bashiok -
Bashiok -

1 réponse