Salut je suis en train d'apprendre le CSS et j'ai un gros problème.
J'ai fais une interface à partir de toshop, et exporté en html avec Image ready , jusqu'ici tout va bien, j'ai mon interface, et ma feuille CSS.
J'aimerais que le zone de texte du site soit extensible en fonction de la
quantité de texte , de manière verticale. Et qu'un footer sois présent en bas, à la manière de ce site par exemple : http://pompage.net/articles
je me prend la tête depuis des plombes a essayer de faire des div dans des divs etc.. mais rien n'y fais des que mon texte depasse la hauteur de mon calque , il passe en dessous du footer au lieu de pousser le footer vers le bas.... et je ne veux pas utiliser la fonction overflow pour des raisons estéthiques....
voila le code de la page :
Et le code CSS :
merci de votre aide....
J'ai fais une interface à partir de toshop, et exporté en html avec Image ready , jusqu'ici tout va bien, j'ai mon interface, et ma feuille CSS.
J'aimerais que le zone de texte du site soit extensible en fonction de la
quantité de texte , de manière verticale. Et qu'un footer sois présent en bas, à la manière de ce site par exemple : http://pompage.net/articles
je me prend la tête depuis des plombes a essayer de faire des div dans des divs etc.. mais rien n'y fais des que mon texte depasse la hauteur de mon calque , il passe en dessous du footer au lieu de pousser le footer vers le bas.... et je ne veux pas utiliser la fonction overflow pour des raisons estéthiques....
voila le code de la page :
<html>
<head>
<title>INTERFACE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="test.css" rel="stylesheet" type="text/css">
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<div id="bigcontenu">
<div id="conteneurhaut">
<div id="flash">
<img src="images/flash.jpg" width="640" height="164" alt="">
</div>
<div id="menu">
<img src="images/menu.gif" width="640" height="56" alt="">
</div>
<div id="contenu-haut">
<img src="images/contenu_haut.gif" width="640" height="20" alt="">
</div>
</div>
<div id="conteneurtexte">
<div id="index-04">
</div>
<div id="index-06"></div>
<div id="contenu">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vestibulum tempor nibh. Cras sapien eros, aliquam vel, molestie nec, ultrices vel, dui. Nulla facilisi. Donec tempus fringilla massa. Cras congue mauris sed lectus. Aenean lorem urna, vestibulum in, imperdiet egestas, rutrum eu, nunc. Aenean mattis purus vitae justo. Ut pellentesque vulputate justo. Morbi et leo id arcu ornare fermentum. Phasellus iaculis elit quis arcu. Maecenas wisi. </p>
<p>Fusce enim. Sed ullamcorper tellus fermentum nisl. In eget nibh nec nisl accumsan sollicitudin. Quisque gravida enim sed quam. Proin eget turpis ac tellus sodales fermentum. Proin sodales lacus sit amet magna. Ut malesuada erat et pede. Pellentesque vitae elit. Aliquam massa erat, vestibulum et, facilisis varius, adipiscing eu, lacus. Nunc imperdiet lacus ac massa. Proin suscipit metus nec nunc. Curabitur et turpis. Aenean bibendum justo vitae quam. </p>
<p> </p>
<p> </p>
</div>
<div id="bas">
<div id="contenu-bas"><img src="images/contenu_bas.gif" width="640" height="20">
</div>
<div id="footer">
<img src="images/footer.gif" width="640" height="68" alt="">
</div>
</div>
</div>
</body>
</html>Et le code CSS :
/* CSS Document */
#bigcontenu {
position:relative;
height:auto;
}
#conteneurhaut {
position:absolute;
left:0px;
top:0px;
width:640px;
height:360px;
}
#flash {
position:absolute;
left:0px;
top:0px;
width:640px;
height:164px;
}
#menu {
position:absolute;
left:0px;
top:164px;
width:640px;
height:56px;
}
#contenu-haut {
position:absolute;
left:0px;
top:220px;
width:640px;
height:20px;
}
#index-04 {
position:absolute;
left:0px;
top:240px;
width:16px;
height:auto;
}
#contenu {
position:absolute;
left:16px;
top:240px;
width:608px;
height:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
margin-top:inherit;
margin-bottom:inherit;
}
#index-06 {
position:absolute;
left:624px;
top:240px;
width:16px;
height:auto;
}
#contenu-bas {
position:absolute;
left:0px;
top:272px;
width:640px;
height:20px;
}
#footer {
position:relative;
left:0px;
top:292px;
width:640px;
height:68px;
bottom:0px;
margin-bottom:0px;
}
#conteneurtexte {
position:relative;
}
#bas {
position:relative;
}
merci de votre aide....
