Mise en page d'un liste d'annonces

Version imprimable

Bonjour j'essaye de mettre en page la sortie d'annonce mais elle ce chevauche ? je comprends pas pourquoi?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
<head>
<style>
.contenu_ano{
        margin:0 auto;
}
.image{
width:160px;
height:110px;
margin-top:10px;
background-color:#ff0000;
}
.annonce{
width:100%;
height:110px;
margin-left:170px;
margin-top:-110px;
background-color:#00ff00;
}
</style>
</head>
<body>
<div class="contenu_ano">
<div class="image"> image</div>
<div class="annonce">
<table width="100%">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</div>
</div>
</body>
</html>

03/01/2017, 16h46
Invité
Bonjour,

Si tu veux des réponses, il va vraiment falloir que tu fasses un EFFORT !

Ton code n'est pas exploitable :
- il n'y a pas de données (même fictives) qui permettent de le TESTER
- il ne montre pas le problème, donc pas de solution à proposer
DONC :
- montre du code EXPLOITABLE = qu'on peut TESTER
- donne suffisamment d'EXPLICATIONS CLAIRES ! (et pas juste "ça marche pas...")
Merci.

N.B. Quoi qu'il en soit il manque :

Code:

<!DOCTYPE html>
03/01/2017, 18h39
friendofweb

Bonjour,

En outre, pour info : encoder-son-site-en-utf8

Bonjour voilà le code complet et dans le header il encodé en utf8 et le css et dans le header

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<?PHP
require_once'header.php';
?>
<ul id="nav">
<li><a href="annonce.php?token=<?php echo $_SESSION['login']; ?>">Ajouté une annonce</a></li>
<li><a href="voir_annonce.php?token=<?php echo $_SESSION['login']; ?>">Voir les annonces</a></li>
<li><a href="contact.php?token=<?php echo $_SESSION['login']; ?>">Contact</a></li>
</ul>
<?PHP
$connection->exec('DELETE FROM annonce WHERE timestamp< DATE_SUB(NOW(), INTERVAL jours DAY)');
$connection->exec('DELETE FROM choix_annonce WHERE timestamp< DATE_SUB(NOW(), INTERVAL jours DAY)'); 		 
/*}*/
include'function_mini.php';		  
$annonce_sortie  = $connection->prepare('SELECT `idA`,`pseudo`,`ID`,`sexe`,`jours`,`annonce` FROM annonce'); 
$annonce_sortie->execute(array());
while($result = $annonce_sortie->fetch(PDO::FETCH_OBJ)){
	$profil  = $connection->prepare("SELECT * FROM photo_profil WHERE id_gal=:id_gal");
        $profil->execute(array(':id_gal'=>$result->ID)); 
	while($results = $profil->fetch(PDO::FETCH_OBJ)){
       $results->gal;		
	miniature('image_profil/'.$results->gal.'', 150, 100);
 
        if(!empty($results->gal) == TRUE){
	echo'<img src="MINI11image_profil/'.$results->gal.'" border="0" />';
			 }else{
    echo'<img src="imdesign/no_photo.png" width="150" height="100" border="0" />';				
		} 
 
		}
$tab_choix = array();
$annonce_sortie_choix  = $connection->prepare('SELECT * FROM choix_annonce WHERE ID=:ID AND jours=:jours');
$annonce_sortie_choix->execute(array('ID'=>$result->ID,'jours'=>$result->jours));
while($result_choix = $annonce_sortie_choix->fetch(PDO::FETCH_OBJ)){
$tab_choix[] = $result_choix->choix;	
$list_choix = (!empty($tab_choix))? implode(', ',$tab_choix) : '';
}
?>
 
  </td>
  <td style="width:90%;text-align:left;">
    <table style="width:100%">
      <tr>
        <td style="text-align:left;"><b><u><span style="color:#660099">Pseudo</span></u>&nbsp;:&nbsp;</b>
<?PHP 
switch($result->sexe){
case"Femme":
echo '<img src="imdesign/f.png" width="20" height="20" title="Femme" /><a href="http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/profil_membre.php.php?nom='.$result->pseudo.'" style="color:#0000FF;">'.$_SESSION['anp_p'].'</a>';
break;
case"Couple":
echo '<img src="imdesign/cpl.png" width="20" height="20" title="Homme"/><a href="http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/profil_membre.php?nom='.$result->pseudo.'" style="color:#0000FF;">'.$result->pseudo.'</a>';
break;
case"Homme":
echo '<img src="imdesign/h.png" width="20" height="20" title="Homme"/><a href="http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/profil_membre.php?nom='.$result->pseudo.'" style="color:#0000FF;">'.$result->pseudo.'</a>';
break;
}
?>    
</td>
 </tr>
      <tr>
        <td style="text-align:left;"><b><u><span style="color:#660099">Recherche</span></u>&nbsp;:&nbsp;</b><?PHP echo '<b>'.$list_choix.'</b>'; ?></td>
      </tr>
      <tr>
        <td style="text-align:left;"><b><u><span style="color:#660099">N°:&nbsp;<?PHP echo ''.$result->idA.''; ?>&nbsp;Annonce</span></u>&nbsp;:&nbsp;</b><?PHP echo ''.$result->annonce.''; ?></td>
      </tr>
      <tr>
        <td style="text-align:left;">    <input type="button" class="button_mauve" value="Répondre" id ="valider"  onclick="window.location.href='<?PHP echo'http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['PHP_SELF']).'/annonce_message.php?destin='.$result->pseudo.'&nume='.$result->idA.''; ?>'" /></td>
      </tr>
    </table>
   </td>
  </tr>
</table>
<?PHP
}
?>
 
</div>
<div id="colonne-droite"></div>
</div>
</div>
</body>
</html>

04/01/2017, 08h56
Invité

Bonjour,

ici, tu es dans le forum CSS.
Donc, PAS de code PHP !

-> Montre le code HTML généré ("Ctrl"+"U").

N.B. Et remplace les <?PHP par des <?php en minuscules.

bonjour voilà j'ai le div annonce n'est pas a la même hauteur seriez vous m'aidez svp?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<meta charset="UTF-8"> 
<html>
    <head>
       <title>CSS Test</title>
<style>
#container_ano
{
    height:100%;
    width:70%;
    margin:auto;
}
#image
{
    float:left;
    background-color:#00ff00;
    width:20%;
    height:100%;
    border:1px solid #9FC6FF;
    -moz-border-radius:10px 0;
    -webkit-border-radius:10px 0;
    border-radius:10px 0;
}
#annonce
{
    float:left;
	margin-left:21%;
	top:-10PX;
    background-color:#0000ff;
    width:79%;
    height:100%;
    border:1px solid #9FC6FF;
    -moz-border-radius:10px 0;
    -webkit-border-radius:10px 0;
    border-radius:10px 0;	
}
</style>
 
    </head>
    <body>
        <div id = "container_ano">
            <div id="image">image</div>
            <div id="annonce"> text</div>
        </div>
    </body>
</html>

04/01/2017, 21h15
Invité
Bonjour,

margin-left:21%; ??? :koi:

Tu devrais t'intéresser de plus près à :
- display:table / display:table-cell
- display:flex
Ca remplace avantageusement les float:(left/right).
04/01/2017, 21h38
speedylol

je suis pas un as en feuille de style
04/01/2017, 21h52
Invité
:recherch: :google:
- "css display"
- "css display table"
- "css display flex" / "mise en page flexbox"
Tu trouveras de nombreux exemples d'utilisation.

Entre autres :
- Utilisation des flexbox en CSS
- Redécouvrez la mise en page avec Flexbox