Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1480 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1699631
Fused
Posté le 09-03-2008 à 21:55:22  profilanswer
 

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
mood
Publicité
Posté le 09-03-2008 à 21:55:22  profilanswer
 

n°1700279
Fused
Posté le 11-03-2008 à 01:57:24  profilanswer
 

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

n°1702952
Ekuryua
Posté le 15-03-2008 à 21:52:08  profilanswer
 

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).

n°1703401
vanish
Ce qui brûle, brûle !
Posté le 17-03-2008 à 13:55:11  profilanswer
 

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
n°1703577
mIRROR
Chevreuillobolchévik
Posté le 17-03-2008 à 17:28:22  profilanswer
 

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
n°1704312
Fused
Posté le 18-03-2008 à 23:15:28  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Supprimer ligne si cellule un 0 [RESOLU]Rendre mes galeries d'image à PICLENS [RESOLU]
[resolu] CSS - Appel d'un div codé ailleurs[resolu] htaccess et sous-domaine vers dossier..
[Resolu] Excel VBA Regrouper des valeurs depuis des classeurs/feuilles[Résolu] file_exists et erreurs 404 serveur.
[Résolu][Oracle 10g] Quels paramètres pour EXP ?[Résolu] Import de données brutes Excel avec ADO.net
Plus de sujets relatifs à : [CSS] résolu ! soucis de superposition de div


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR