Sujet Précédent Sujet Suivant

Problème positionnement image

Fermé
nonozelmar Messages postés 12 Date d'inscription mercredi 24 juillet 2013 Statut Membre Dernière intervention 12 février 2014 - 27 nov. 2013 à 20:22
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 30 nov. 2013 à 02:38
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
27 nov. 2013 à 20:47
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 mercredi 24 juillet 2013 Statut Membre Dernière intervention 12 février 2014
27 nov. 2013 à 21:25
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 28/11/2013 à 13:03
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 mercredi 24 juillet 2013 Statut Membre Dernière intervention 12 février 2014
28 nov. 2013 à 19:39
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
28 nov. 2013 à 22:46
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
30 nov. 2013 à 02:38
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

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Comment enlever le rouge sur la photo svp ?
lucas0909 -
Benji -

20 réponses