voici mon code actuel :
J'aimerais avoir une taille fixe pour mon header et ma colonne sidebar et contenu qui prenne bien tout le reste de la hauteur sans avoir de scroll .
Y a t'il une bidouille ?
merci
Modifié par garthos (13 Nov 2008 - 15:29)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Wel'Com</title>
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
height: 100%;
}
p {
margin:0 0 1em 0;
}
h1 {
height: 50px;
background-color: #4c4e00;
color: white;
margin:0;
}
#global {
background-color: #666600;
height: 100%;
}
#header {
height: 10%;
}
#sidebar {
float: left;
width: 150px;
background-color: #666600;
color: white;
height: 90%;
}
#sidebar p {
margin-left: 1em;
}
#sidebar ul {
margin: 0 0 1em 0;
}
#sidebar li {
list-style-type: none
margin: 0 0 0 1em;
}
#sidebar li a{
color: white;
text-decoration: none;
}
#sidebar li a:hover {
text-decoration: underline;
}
#contenu {
margin-left: 150px;
background-color: #eaeae9;
height: 90%;
}
#contenu p{
margin: 0 0 0 1em;
}
#footer {
clear: both;
background-color: #cccc00;
margin:0;
}
-->
</style>
</head>
<body>
<div id="global">
<div id="header">
<h1>en-tête de page</h1>
</div>
<div id="sidebar">
<p>Ma sidebar</p>
<ul id="menu">
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
</ul>
</div>
<div id="contenu">
<p>Bloc contenu</p>
<p>on y affichera les fiches</p> <p>ksdjcfljsqdlkjfnlkdnfqsdljnknnfknf;qdkqnfjqfndjkdisdknsiufhidhfosduhdifhiufhsdufhisdhf</p>
</div>
</div>
</body>
</html>
J'aimerais avoir une taille fixe pour mon header et ma colonne sidebar et contenu qui prenne bien tout le reste de la hauteur sans avoir de scroll .
Y a t'il une bidouille ?
merci
Modifié par garthos (13 Nov 2008 - 15:29)