[CSS] résolu ! soucis de superposition de div

résolu ! soucis de superposition de div [CSS] - HTML/CSS - Programmation

Marsh Posté le 09-03-2008 à 21:55:22    

Bonjour !
 
Le problème : cette page de site.
 
Réduisez la taille verticalement de la fenêtre de votre explorateur, vous constaterez que le pied de page vient se mettre sur les div du dessus, chose qui n'apparait pas sur les autres pages.
 
La structure du site :

Code :
  1. <div id="center">
  2.    <div id="menu">
  3.    </div>
  4.    <div id="content">
  5.       <div id="galerie">
  6.          <table width="280" border="0" align="center" cellspacing="0">
  7.          </table>
  8.       </div>
  9.       <div id="tab">
  10.          <img src ... />
  11.       </div>
  12.       <div id="prix">
  13.       </div>
  14.    </div>
  15. </div>
  16. <div id="footer">
  17. ici le footer qui foire
  18. </div>


 
Voilà les CSS des div concernées :

Code :
  1. #footer {
  2. background: url(images/bas.png) no-repeat;
  3. text-align: center;
  4. position: absolute;
  5. bottom: 0px;
  6. float: center;
  7. height: 30px;
  8. width: 780px;
  9. }
  10. #center {
  11. overflow: auto;
  12. width: 780px;
  13. font-size: 90%;
  14. padding: 15px;
  15. }
  16. #content {
  17. padding: 10px;
  18. width: 730px;
  19. padding-bottom: 15px;
  20. }
  21. #galerie {
  22. height: 400px;
  23. overflow: auto;
  24. float: left;
  25. position: absolute;
  26. width: 300px;
  27. }
  28. #tab {
  29. float: right;
  30. width: 450px;
  31. text-align: center;
  32. }
  33. #prix {
  34. float: center;
  35. position: absolute;
  36. top: 730px;
  37. }


Voilou, si vous trouvez où est le problème merci beaucoup !

Message cité 1 fois
Message édité par Fused le 18-03-2008 à 23:15:41
Reply

Marsh Posté le 09-03-2008 à 21:55:22   

Reply

Marsh Posté le 11-03-2008 à 01:57:24    

Toujours pas trouvé, quelques lectures mais pas de réponses... des idées les pro du CSS ? :)

Reply

Marsh Posté le 15-03-2008 à 21:52:08    

Fused a écrit :


Voilà les CSS des div concernées :

Code :
  1. #footer {
  2. background: url(images/bas.png) no-repeat;
  3. text-align: center;
  4. position: absolute;
  5. bottom: 0px;
  6. float: center;
  7. height: 30px;
  8. width: 780px;
  9. }
  10. #center {
  11. overflow: auto;
  12. width: 780px;
  13. font-size: 90%;
  14. padding: 15px;
  15. }
  16. #content {
  17. padding: 10px;
  18. width: 730px;
  19. padding-bottom: 15px;
  20. }
  21. #galerie {
  22. height: 400px;
  23. overflow: auto;
  24. float: left;
  25. position: absolute;
  26. width: 300px;
  27. }
  28. #tab {
  29. float: right;
  30. width: 450px;
  31. text-align: center;
  32. }
  33. #prix {
  34. float: center;
  35. position: absolute;
  36. top: 730px;
  37. }




 
C'est quoi ces float: center;...? :) Enfin ils sont pas sur ta feuille de style en ligne, donc je suppose que t'as corrigé :)
 
Pour ton problème, si tu réduis ta page jusqu'à "Galeries >>", tu te rendras compte que ta footer finit par s'arrêter. Je suppose que sur tes autres pages tu as pas les mêmes éléments en float (là, t'as #prix), donc que la footer rencontre des éléments du flux normal, avant. Les éléments en float ne font plus partie du flux normal.
 
Si t'as des éléments en float, il faut que ta footer ait clear: both;, pour qu'elle prenne en compte ces éléments... mais ça a pas l'air de marcher avec cette page, et j'ai la flemme de lire ton code en détails :p (t'as trop de dimensions fixes et absolues, c'est pas super, pour la souplesse globale de la page... et y'a plein de float, qui sont pas forcément faciles à gérer, en général).

Reply

Marsh Posté le 17-03-2008 à 13:55:11    

Le footer est en absolute et fixé sur le bas de la zone de visualisation (bottom:0), son comportement me semble donc logique. (j'ai pas regarder le code en ligne alors désoler si c'est différent)

 

Remet ton footer dans le flux et met lui un clear:both et ça devrait être ok.

 

Evidemment il ne sera plus a bottom:0, arrange toi pour avoir toujours un element qui est la hauteur nécessaire pour que ça te fasse pas un site tout riquiqui quand il n'y a pas d'éléments affichés. (C'est le plus simple mais y a aussi moyen de bidouiller avect min-height et heightpour rendre compatible IE. A quand la gestion du min-height par IE ? :'(  ^^ )


Message édité par vanish le 17-03-2008 à 13:57:11
Reply

Marsh Posté le 17-03-2008 à 17:28:22    

ie6 considere height comme un min-height hein et accessoirement il n est plus développé
pour ie7 et 8 ca marche plutot bien


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 18-03-2008 à 23:15:28    

Merci, j'avais fini par trouver ma bêtise avec les float.
Désolé de ne pas avoir mis à jour le topic !

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed