Forum : Soucis de CSS, chevauchement ?

marrtin, 11-12-2010 19:57:00

Bonjour à tous !

J'avais déjà posez la question il y a longtemps de ça et le problème avait été résolu. Je m'explique ; quand mes news sur mon site devenaient nombreuses, elles s'ajoutés donc une par une, l'une sur l'autre (de la plus récente à la moins récente). Le soucis c'est donc qu'elles chevauchaient le footer. On m'avait donc dit de faire un "clear:both" ce qui avait fonctionner et donc le footer "descendait" et on pouvait scroller la page normalement. Hier, j'ai eu un soucis avec mon site et quand je changer de résolution comme par exemple d'un écran 19" à un écran 20" les div étaient complètement hors champs. J'ai donc re-coder mon code pour que les div soit correctement aligné avec le reste du site. Cela fonctionne désormais, sauf que comme je les expliqué plus haut ma DIV news chevauche à nouveau mon footer.

Voici le code CSS de mes div news et footer :

#news{
    position:absolute;
    left:50%;
    margin-left:-250px;
}
#footer {
    position:absolute;
    left:215px;
    bottom:-640px;
    background:url(images/footer.png) no-repeat bottom center;
    width:981px;
    height:60px;
    font:12px "Verdana", Arial, Helvetica, sans-serif;
}

J'ai essayer moult solution pour trouver d'où venez le problème, mais la je sèche complet.

Merci par avance de votre aide,

ArtNowCreation, 12-12-2010 16:56:19

Evite les absolute comme ça, sa ne sera pas terrible pour les gens qui ont une résolution différente. Pour ton footer, mets tout ta page dans un div :

HTML :

<div id="page">
Ta page.
<div id="footer">
Ton pied de page.
</div>
</div>

CSS:

body, html {
    height:100%;
}
#page {
    width:981px;
    min-height:100%;
    position:relative;
}
#footer {
    background:url(images/footer.png) no-repeat bottom center;  
    width:981px;  
    height:60px;  
    font:12px "Verdana", Arial, Helvetica, sans-serif; 
    position:absolute;
    bottom:0;
}

alexis, 12-12-2010 21:45:01

Alors je viens de résoudre le problème, alors Pour cela il faut que tu rajoute juste avant ton footer un div comme ceci :

<!-- Footer --> 
<div class="clear"></div>
<div id="footer">
...

en Css tu met :

.clear{
clear:both;
}

et enfin au lieux de fermer ta balise site après les news tu la ferme après le footer et la sa marche. :)

alexis, 12-12-2010 21:48:12

la structure de la div id="site" doit être comme ceci :

<div id="site"> 
...
<!-- Bandeau blanc haut --> 
...
<!--Menu horizontale --> 
 ...
<!-- Menu de gauche/verticale --> 
...
<!-- Conteneur --> 
<!-- Carrousel --> 
...
<!-- Conteneur news --> 
...
<!-- Footer --> 
            <div class="clear"></div>
            <div id="footer">  
            </div> 
</div>

Soucis de CSS, chevauchement ?

18 Réponse