Soucis de CSS, chevauchement ?

Ce sujet est résolu
210
,

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éponse

Default
,

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;
}
45
,

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

45
,

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>
Default
,

adresse du site ?

210
,

Je suis en local pour le moment mais voici un screen : http://www.e-loader.net/image:4kYgwIMnKy.jpg

45
,

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

210
,

Nan sa fonctionne pas non plu ^^

210
,

Ok je revois ça alors. Merci !

Par contre, on m'a dit le contraire sur les absolutes pour les différentes résolutions ? ^^"

Default
,

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

210
,

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 =(

Default
,

Pourrais tu me donnez ton code ?

210
,

Hum... le CSS tout entier ?

Default
,

Oui.

210
,

Il est là =) : http://www.eretik.fr/beta1/style.css

Default
,

Ouille ton site est vraiment pas organisé xS

Tu as oublié de fermer la div #site

Default
,

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

210
,

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

Default
,

Derien, bonne continuation ;)