Bonjour à tous !
Cela fait plusieurs problèmes que j'arrive a resoudre grace aux tuto et a ce precieux forum, mais la je coince.
J'ai un site dont la structure est composee d'une colonne #container, decoupee en 4 barres horizontales : #header, #menu, #content et #footer.
Typiquement, le comportement que j'aimerais obtenir est une page qui occupe au minimum 100% de la hauteur avec le footer tout en bas, avec l'agrandissement de la hauteur de #content si besoin (un peu comme dans l'excellent tuto ici).
Ca fonctionne presque... ma page a bien la taille minimum voulue, mais mon footer colle a la div precedente (#content).
Mais si je regenere la page en cliquant sur le lien " Home " du footer, celui-ci prends la place que je voulais :
Si vous avez une idée ...
Voici la partie de mon .css concernée :
Je vous remercie par avance !
Shanmao.
Modifié par Shanmao (07 Jul 2007 - 16:57)
Cela fait plusieurs problèmes que j'arrive a resoudre grace aux tuto et a ce precieux forum, mais la je coince.
J'ai un site dont la structure est composee d'une colonne #container, decoupee en 4 barres horizontales : #header, #menu, #content et #footer.
<body>
<div id="container">
<div id="header">
</div>
<div id="menu">
<?php include './menu.php'; ?>
</div>
<br/><br/><hr/>
<div id="content">
<?php
//Menu dynamique affichant dans le corps du site la page sélectionnée
?>
</div>
<div id="footer">
<ul>
<li><a href="./index.php?menu=home">Home</a></li>|
<li><a href="./index.php?menu=category">Products</a></li>|
<li><a href="./index.php?menu=aboutus">About us</a></li>|
<li><a href="./index.php?menu=join">Join</a></li>|
<li><a href="./index.php?menu=contact">Contact</a></li>
</ul>
<span></span>
</div>
</div>
</body>Typiquement, le comportement que j'aimerais obtenir est une page qui occupe au minimum 100% de la hauteur avec le footer tout en bas, avec l'agrandissement de la hauteur de #content si besoin (un peu comme dans l'excellent tuto ici).
Ca fonctionne presque... ma page a bien la taille minimum voulue, mais mon footer colle a la div precedente (#content).
Mais si je regenere la page en cliquant sur le lien " Home " du footer, celui-ci prends la place que je voulais :
Si vous avez une idée ...
Voici la partie de mon .css concernée :
html {
background: #ddd url(../pictures/html.png);
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
}
html, body{
height:100%
}
#container {
width: 750px;
margin: 0px auto;
padding-top:5px;
overflow:auto;
clear:both;
min-height:99%;
background: url(../pictures/global.png) center repeat-y;
position:relative;
}
/******************** header ********************/
#header {
width:720px;
height:150px;
margin:auto;
margin-bottom:10px;
background-image:url(../pictures/header3.png);
background-repeat: no-repeat;
background-position:center;
}
/*****************Rolling Menu*******************/
#menu {
text-align:center;
width:700px;
height:22px;
margin: 2px 2px 2px 35px;
padding: 3px 3px 3px 3px;
z-index:10;
position:absolute;
}
/* j'abrege le menu deroulant horizontal de alsacreation */
/******************** Content ********************/
p, h1, a, span{font-family: Arial, Helvetica, sans-serif;}
#content {
/*width:750px;*/
margin-left:25px;
margin-right:25px;
background-color:#ffffff;
z-index:5;
padding-bottom:40px;
overflow:visible;
height:1%;
float:left;
}
/******************** Footer ********************/
#footer {
width:750px;
text-align:center;
position:absolute;
bottom:5px;
z-index:10;
height:30px;
}
#footer li {
display:inline;
float:none;
text-align:center;
}
#footer a {
font-weight:900;
text-decoration:none;
}
#footer a:hover {
text-decoration:underline;
}
#footer span {
display:block;
clear:both;
}Je vous remercie par avance !
Shanmao.
Modifié par Shanmao (07 Jul 2007 - 16:57)
) :
pourtant j'ai bien verifie la syntaxe).
).