Hem... si j'ai bien compris ce que tu veux faire c'est avoir le DIV #centre toujours centré verticalement quelle que soit la hauteur de la page... sauf si ça passe au dessus du DIV #logo
.
Ben je ne vois pas trop comment faire puisque du coup il faut sortir #logo du flux (typiquement en le positionnant en absolu) et qu'alors il ne pourra plus repousser #centre... ce qui oblige à mettre un margin-top à #centre de 250px (la hauteur que tu as fixée à #logo) mais alors il ne sera plus centré verticalement... ce qui oblige à mettre également un margin-bottom à #centre de 250px... ce qui va faire un décalage en bas de page dès que le contenu de #centre sera un peu plus conséquent : en gros quelque chose comme ça :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#page-table {
height: 100%;
width: 100%;
border-collapse: collapse;
text-align: center;
}
#page-td {
height: 100%;
padding: 0;
vertical-align: middle;
}
div#global {
width: 900px;
margin: 0 auto;
text-align: left;
}
#logo {
position: absolute;
top: 0;
height:250px;
width: 900px;
background:#aaa;
}
#centre {
background: #ccc;
margin: 250px 0;
}
</style>
</head>
<body>
<table id="page-table"><tr><td id="page-td">
<div id="global">
<div id="logo"></div>
<div id="centre">
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--#centre-->
</div><!--#global-->
</td></tr></table><!--#page-table-->
</body>
</html>
Donc je te déconseille fortement cette mise en page (à moins d'avoir également un DIV #footer de 250px de haut) puisque même avec
la fonction calc de CSS3 je ne suis pas sûr qu'on s'en sorte.
D'ailleurs je trouve ça bien compliqué pour un résultat "tangible" seulement pour des contenus très petits de #centre et sur des hautes résolutions... Alors qu'il suffirait de tout laisser dans le flux et de faire tout simplement :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div#global {
width: 900px;
margin: 0 auto;
}
#logo {
height:250px;
background:#aaa;
}
#centre {
background: #ccc;
padding: 1px 0;
}
</style>
</head>
<body>
<div id="global">
<div id="logo"></div>
<div id="centre">
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--#centre-->
</div><!--#global-->
</body>
</html>
Edit: à noter tout de même qu'avec la version simplifiée du code il suffirait d'un peu de JavaScript pour vérifier la hauteur du viewport et de #centre et de décider ensuite si on peut ou non (en fonction d'un éventuel chevauchement de #logo) modifier le margin-top de #centre.
Modifié par Heyoan (02 Sep 2010 - 13:22)
