Je suis en train de créer une page pour afficher des articles qui
seront rédiger par des webmasters pour mon futur annuaire.
Après avoir galérer pour positionner mon footer comme bon me semble
sur les pages du site que je construis, et ce pendant quelques jours.
Je découvre subitement que sur la page que je réalise actuellement,
le footer ne tient pas en place avec les navigateurs FF et Opéra.
Je résume, j'ai un bloc dans lequel j'affiche une image et le texte
de l'article, et juste dessous le footer.
Afin que le footer reste bien en place si l'article est un peu court,
j'ai un div parent dont j'ai fixé la hauteur à 400px.
Et à l'intérieur de ce div parent, un autre div qui contient l'image et l'article.
Mon problème est que le footer se colle a l'article lorsque celui-ci est court sous FF et Opéra,
alors qu'il devrait rester à sa place, et descendre si l'article est plus long
que la hauteur du div parent.
Code : Tout sélectionner
div#parent {*// pour fixer la hauteur du contenu de l'article au cas ou celui ci serait court //*
position: relative;
margin-top: 20px;
margin-left: 0;
width: 700px;
height: 400px;
z-index: 1;
}
div#article {*// recouvre le div parent et repousse le footer lorsque l'article est long //*
margin-top: -400px;
margin-left: 0;
width: 700px;
text-align: justify;
font-family: verdana;
font-size: 12px;
color: #000000;
z-index: 2;
}Premier cas, je place l'ouverture du div parent à l'intérieur d'un div.
Code : Tout sélectionner
<HTML>
<div>
<div id="parent"> *// ouverture du div parent //*
</div>
<div id="article"><img style="float: left;" alt="image" src="images/maison.gif" height="150" width="250" /><?php echo $article;?></div> *// contenu de l'article //*
</div> *// fermeture du div parent //*Code : Tout sélectionner
div#parent {*// pour fixer la hauteur du contenu de l'article au cas ou celui ci serait court //*
position: relative;
margin-top: 20px;
margin-left: 0;
width: 700px;
*// pour le deuxième cas je supprime juste la hauteur du div parent >> height: 400px; //*
z-index: 1;
}
div#article {*// recouvre le div parent et repousse le footer lorsque l'article est long //*
margin-top: -400px;
margin-left: 0;
width: 700px;
text-align: justify;
font-family: verdana;
font-size: 12px;
color: #000000;
z-index: 2;
}Code : Tout sélectionner
<HTML>
<div id="parent"> *// ouverture du div parent //*
<img src="images/image2.gif" height="400" width="700" /> *// j'ajoute une image destiné à fixer une bonne fois pour toute la hauteur du div parent //*
<div id="article"><img style="float: left;" alt="image" src="images/maison.gif" height="150" width="250" /><?php echo $article;?></div> *// contenu de l'article //*
</div> *// fermeture du div parent //*mais ça merde avec FF et Opéra.
En effet le footer vient chevaucher le div parent lorsque l'article est trop court
alors qu'il devrait rester bien calé en dessous.
Y a t'il quelque chose qui m'aurait echappée ? Merci pour votre aide, elle est la bienvenue.
Edit : Apres plusieurs essais j'ai fini par solutionné le problème,
en insérant le div article dans un tableau et toujours avec l'image transparente
dans le div parent.