resultat requette en DIV float

Marsh Posté le 25-11-2013 à 12:26:58

Bonjour
C'est mon premier post sur votre forum. Je vais essayer d'être claire.

Je veux afficher des images dans des div , par rapport à une requete SQL.
exemple si j'ai 14 résultats j'aurai 14 images qui se suivent dans la fenêtre et passent à une nouvelle ligne selon la largeur de la fenêtre du navigateur

J'ai déjà fait des recherche mais n'arrive pas appliquer ce que je trouve à mon script.
Mon script est fait avec dreamweaver, mais justement je veux m'interrésser plus au codage et veux le modifier manuellement.
Vous remarquerez aussi que chaque image représenté dans chaque div générera un lien.

Tout fonctionne sauf que toutes mes images sont toutes sur une collonne à gauche et ne float pas de gauche à droite.

voici mon code source php :

Code :

<?php do { ?>
<div id="cont2">
<a href="page.php?groupeID=<?php echo $row_Rr_groupe['groupeID']; ?>"><img src="Images/portofolio/Thumbs/<?php echo $row_Rr_groupe['urlThumb']; ?>">
</a>
</div>
<?php } while ($row_Rr_groupe = mysql_fetch_assoc($Rr_groupe)); ?>

voila le code retour html : (les photos s'affiche et les liens fonctionnent.

Code :

<div id="cont2"><a href="page.php?groupeID=2"><img src="Images/portofolio/Thumbs/th_solu.jpg"></a></div>
<div id="cont2"><a href="page.php?groupeID=3"><img src="Images/portofolio/Thumbs/th_LGR.jpg"></a></div>

et mon css :

Code :

#cont2 {
clear: none;
float: left;
margin-left: 0%;
width: 150px;
display: block;
}

merci bien de m'eclairer et me faire avancer dans la compréhension du codage.

Salutation

Message édité par garamacha le 25-11-2013 à 12:36:16

Reply

Marsh Posté le 25-11-2013 à 12:26:58

Reply

Marsh Posté le 25-11-2013 à 12:40:02

Un div est unique, tu dois donc employer une classe.
Sinon, ton css est très mauvais.
Un div est en display block par défaut, pas besoin de l'ajouter.
Idem pour clear, c'est none la valeur par défaut
0 n'est jamais suivi d'une unité de valeur, en plus un div n'as pas de valeur left par défaut

Bref, ton css doit être

Code :

.cont2 {
float: left;
width: 150px;
}

et ton htlm

Code :

<div class="cont2">
<a href="page.php?groupeID=2">
<img src="Images/portofolio/Thumbs/th_solu.jpg">
</a>
</div>
<div class="cont2">
<a href="page.php?groupeID=3">
<img src="Images/portofolio/Thumbs/th_LGR.jpg">
</a>
</div>

Reply

Marsh Posté le 25-11-2013 à 13:30:56

[RESOLU] merci D.B. pour ces conseils et la solution.
j'ai effectivement un peu de nettoyage à faire dans mon code, j'en prend bonne note. J'ai bien corriger la balise div. et c'est impeccable.
Solution que j'avais essayé sans résultat , surement à cause d'une mauvaise sauvegarde des css.

Reply

Marsh Posté le 25-11-2013 à 14:34:40

La propriété css :

Code :

display: inline-block;

est plus simple à utiliser, elle permet de faire passer un block en tant qu'inline, cela évite de faire de clear.

Reply

resultat requette en DIV float

Sujets relatifs:

Leave a Replay