Se connecter / S'enregistrer

Résolu Espace vide sous un div float

Solutions (8)
Tags :
  • Php
  • Thumbnail
  • CSS
  • Programmation
|
Bonjour,

J'ai une liste d'actualité où j'utilise des div et un "float: left" pour l'image. Pour passer à l'actu suivante, j'utilise un clear: both... C'est une boucle php qui me fait la liste via une base de données..

Le seul soucis c'est que pour la première actualité il y a un gros espace entre la fin de la première actu et la deuxième alors qu'entre les deuxième et la troisième actu, il n'y en a pas.

Pourquoi ???? :cry: 

Aidez moi s'il vous plait. Surement dû au "float" et à son "clear: both"...

Merci d'avance à tous pour votre aide. :hello: 

Le code css

  1. .Actu
  2. {
  3. margin: 0 auto 0 auto;
  4. width: 780px;
  5. color: #008000;
  6. border-style: solid;
  7. border-color: #000000;
  8. border-width: 2px;
  9. }
  10. .PhotoActu
  11. {
  12. float: left;
  13. width: 175px;
  14. height: 134px;
  15. margin-right: 5px;
  16. }
  17. .LibelActu
  18. {
  19. text-align: justify;
  20. }
  21. .DateActu
  22. {
  23. text-align: right;
  24. }
  25. .StopActu
  26. {
  27. clear: both;
  28. }


Voir message ci dessous pour voir le code html généré...

Et une image pour illuster tout ça :D 

Contenus similaires
Meilleure solution
partage
, Modérateur |
Salut,

Ajoute un overflow:auto (CSS) à ton style de la classe Actu et ça devrait le faire.
  • Commenter cette solution |
Score
0
òh
òi
|
Ok, merci à toi...
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Euh, je t'avoue que je n'ai pas trop compris pourquoi il y avait un espace en dessous pour celle-ci et pas pour les autres.
L'overflow est généralement nécessaire quand tu mets des éléments en float, pour être sûr que la div qui contient le ou les éléments de type float puisse s'agrandir à la bonne hauteur.
Mais généralement, le faire de mettre un clear suffit, comme tu l'avais déjà mis, j'ai essayé overflow qui a l'air d'avoir résolu le problème ;) 
  • Commenter cette réponse |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par funcinema5.
  • Commenter cette réponse |
Score
0
òh
òi
|
ça marche nickel... Un grand merci à toi OmaR.
Mais dis moi, tu peux m'expliquer un peu ce qu'il s'est passé enfin que je ne fasse pas la même erreur. Pourquoi la première div Actu possédait un espace en bas par rapport à ses consoeurs ?... Et comment l'overflow: auto a réparé le problème ?

Merci encore à toi.
  • Commenter cette réponse |
Score
0
òh
òi
|
Désolé... Et merci encore pour ton aide... :) 

Voici le lien direct : Cliquez ici pour le lien direct

Voici le code html généré (je n'ai pas tout mis sinon ça fait trop...) :

  1. <div class='Actu'>
  2. <div class='PhotoActu'>
  3. <a href='Pages/Parties/Images/actu/images/actu1.jpg' class='nyroModal'><img src='Pages/Parties/Images/actu/thumbnail/actu1.jpg' border=1 alt=''></a>
  4. </div>
  5. <div class='LibelActu'><big>Actualité n°3</big><br />La troisième actualité est ici. Il s'agit juste d'un test c'est tout bla bla bla bla bla gkegh ekjg hekg jogijgojegeigjelgj glg
  6. </div>
  7. <div class='DateActu'>21 Mai 2010</div>
  8. <div class='StopActu'></div>
  9. </div>
  10. <div class='Actu'>
  11. <div class='PhotoActu'><a href='Pages/Parties/Images/actu/images/actu1.jpg' class='nyroModal'><img src='Pages/Parties/Images/actu/thumbnail/actu1.jpg' border=1 alt=''></a>
  12. </div>
  13. <div class='LibelActu'><big>Actualité n°2</big><br />Bienvenue sur la page d'actualité. Ici vous pouvez mettre et lire un grand nombre d'informations liés à nos partenaires, nos fournisseurs ou même notre entreprise... N'hésites pas à nous contacter pour plus d'infos. Je sais pas trop quoi mettre
  14. </div>
  15. <div class='DateActu'>21 Mai 2010</div>
  16. <div class='StopActu'></div>
  17. </div>
  18. <div class='Actu'>
  19. <div class='PhotoActu'><a href='Pages/Parties/Images/actu/images/actu1.jpg' class='nyroModal'><img src='Pages/Parties/Images/actu/thumbnail/actu1.jpg' border=1 alt=''></a></div>
  20. <div class='LibelActu'><big>Page actualité</big><br />Bienvenue sur la page d'actualité. Ici vous pouvez mettre et lire un grand nombre d'informations liés à nos partenaires, nos fournisseurs ou même notre entreprise... N'hésites pas à nous contacter pour plus d'infos.</div>
  21. <div class='DateActu'>19 Mai 2010</div>
  22. <div class='StopActu'></div>
  23. </div>
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Est-ce que tu as un lien vers la page en question ? Ou le contenu entier de la page, parce que ça va être compliqué de t'aider sinon. Et pas de code PHP s'il te plait, on a juste besoin du HTML généré (clic droit et afficher la source si besoin).
  • Commenter cette réponse |
Score
0
òh
òi
|
Je crois que je commence à comprendre cela vient de mon menu à gauche qui est lui aussi en float: left

Voyez par vous même :



Lorsque je met mon div avec clear: both; à la suite de ma première actu, il prends en compte le menu floattant à gauche et va à la base de celui ci. Mouai....
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS