Forum : Soucis de CSS, chevauchement ?

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

Réponse acceptée

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

Réponse acceptée

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

Réponse acceptée

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>

MrGuillou

adresse du site ?

marrtin

Auteur

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

alexis

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

Auteur

Nan sa fonctionne pas non plu ^^

marrtin

Auteur

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

ArtNowCreation

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

marrtin

Auteur

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