Soucis de CSS, chevauchement ?

Par marrtin, il y a 15 ans

Les bases HTML/CSS

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,

18 réponses

MrGuillou, il y a 15 ans

adresse du site ?

alexis, il y a 15 ans

Tu Utilise 2 div en position absolute, mais je pense que la hauteur de ta div news n'est pas fixe, du coupe normale que le Footer sois par dessus, je te conseillerai d'utiliser des float:left; pour les deux div et mettre un une div clear entre les news et le footer, enfin c'est ce que j'ai compris, car pas très clair ta question...

marrtin, il y a 15 ans

Nan sa fonctionne pas non plu ^^

ArtNowCreation, il y a 15 ans

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;
}
marrtin, il y a 15 ans

Ok je revois ça alors. Merci !
Par contre, on m'a dit le contraire sur les absolutes pour les différentes résolutions ? ^^"

ArtNowCreation, il y a 15 ans

Derien. Cela dépend de se que tu en fait ;)

marrtin, il y a 15 ans

Bah le problème est toujours présent... mais j'ai enfin hébergé mon site voilà l'adresse : http://www.eretik.fr/beta1

De plus en enlevant l'absolute tout est décalé en fonction de la résolution =(

ArtNowCreation, il y a 15 ans

Pourrais tu me donnez ton code ?

marrtin, il y a 15 ans

Hum... le CSS tout entier ?

ArtNowCreation, il y a 15 ans

Oui.

ArtNowCreation, il y a 15 ans

Ouille ton site est vraiment pas organisé xS
Tu as oublié de fermer la div #site

alexis, il y a 15 ans

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, il y a 15 ans

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>
ArtNowCreation, il y a 15 ans

Pas besoin du div en plus ;) par contre oui tu à mal fermé la div #site, elle doit se fermer après la div #footer.

marrtin, il y a 15 ans

Bah écouter merci beaucoup sa fonctionne à nouveau. Maintenant j'ai plus qu'a centrer le reste ^^

ArtNowCreation, il y a 15 ans

Derien, bonne continuation ;)