28173 sujets

CSS et mise en forme, CSS3

[Résolu] Div fixe au centre de la page(top-bottom ajustable)

Toujours pas de réponses...svp, quelqu'un peut m'aider?

CSS:

body{margin:0; padding:0; height:100%;}
#container1{margin:0 auto; width:765px; background-color:#CCCCCC; height:565px;}
#top, #bottom{ background-color:#003366; height:33%;}
#center{background-color:#666666; height:565px;}


Contenu:
<div id="top">Content for  id "top" Goes Here</div>
<div id="center">
  <div id="container1">Content for  id "top" Goes Here</div>
</div>
<div id="bottom">Content for  id "top" Goes Here</div>


http://demo.suitevox.com/testcss/index1.html
TheMonkeySan a écrit :
Il faudra utiliser du javascript pour ça, juste avec du css tu ne pourras pas y arriver d'après moi.


Ah oui vraiment?
Oui, je pense.
Si tu es prêt à en utiliser ça devient assez simple : tu calcules la hauteur de la zone de travail, tu soustrait la hauteur du centre, et tu divises le résultat par deux, ça te donne la hauteur à donner au top et bottom.

Après y'a surement quelques petits détails à régler (par exemple refaire le calcule à chaque fois que la hauteur de la zone de travail change), mais ça devrait marcher.

Voici un petit exemple rapide, pas propre du tout, testé que sur firefox, etc, etc :

<html>
<head>
<script>
function resize_div_haut_bas() {
	test = (window.innerHeight!=undefined) ? window.innerHeight : document.documentElement.offsetHeight;
	test = (test - 300) / 2;
	document.getElementById('haut').style.height = test+'px';
	document.getElementById('bas').style.height = test+'px';
}
function init() {
	resize_div_haut_bas();
	window.onresize = resize_div_haut_bas;
}
</script>
</head>
<body onload="init()" style="margin: 0; padding: 0; overflow: hidden">
<div id="haut" style="border: 1px solid red"></div>
<div id="milieu" style="border: 1px solid blue; height: 294px"></div>
<div id="bas" style="border: 1px solid green"></div>
</body>
</html>

Modifié par TheMonkeySan (17 Nov 2007 - 14:24)
Bonjour,

Il y a toutes sortes d'autre solutions plus rationelles: faire du WAP1.0 ou revenir au Minitel par exemple.

C'est tout de même curieux, cette incompréhension sur le fond de ce qu'est une interface Web, qui conduit à ce type de demande. Mais vu leur fréquence, on finit par se demander si, sur le fond également, HTML CSS répond vraiment aux besoins et s'il ne faudrait pas envisager autre chose...
Modifié par Laurent Denis (17 Nov 2007 - 15:00)
Merci TheMonkeySan Smiley biggrin

Laurent Denis a écrit :
Bonjour,

Il y a toutes sortes d'autre solutions plus rationelles: faire du WAP1.0 ou revenir au Minitel par exemple.

C'est tout de même curieux, cette incompréhension sur le fond de ce qu'est une interface Web, qui conduit à ce type de demande. Mais vu leur fréquence, on finit par se demander si, sur le fond également, HTML CSS répond vraiment aux besoins et s'il ne faudrait pas envisager autre chose...

Personnellement je n'utiliserais pas ça et je suis d'accord avec toi, mais une connaissance qui trip sur les framesets tient absolument à faire ca de cette façon, sans frameset Smiley eek

Je crois que j'ai trouvé la solution. Ça semble fonctionner sur firefox et IE 6-7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simulation frameset</title>
<style type="text/css">
<!--
html{background:#003366 url(bg.gif) 0 560px repeat-x;}
body{margin:0; padding:0; height:100%;}
#container1{margin:0 auto; width:765px; background-color:#CCC; height:545px; padding:10px; overflow:auto; }
#vertalign {position:absolute; top:50%; width:100%; height:565px; margin-top: -283px; background-color:#666;}
div{margin:0; padding:0;}
p{margin:10px 10px;}
	 
-->
</style>
</head>

<body>
<div id="vertalign">
  <div id="container1"> 
    <p>dfgsd sdfg sdf ds gsdf gds g dsf g Ça fonctionne dans firefox et IE 6-7</p>
    <p>fsdfgds dsfsdfgdsfg sdfgdfgdsfgdsg df g </p>
    <p>Pour une raison que j'ignore, si je mets un padding de 10 px au paragraphe,  le container1 descend de 10px dans firefox.. </p>
    <p>J'ai donc dû  mettre un padding dans le div container1 et mettre un margin au lieu d'un padding au paragraph </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
  </div>
</div>
</body>
</html>

Modifié par webberte (17 Nov 2007 - 21:41)
Sujet clos
Aller à