css : taille horizontale d'un div

pinch · 1 Mai 2005

Bonjour, j'ai quelques difficultés à garder une taille de 90% en hauteur pour un div lorsqu'il y a du texte dedans.

comment puis-je faire?

voici un exemple de code :

<!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" xml:lang="fr" lang="fr">
<head>
<title>Test cadre 90% de haut</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
</head>
<body>
<div id="test" style="position:absolute; z-index:1" class="test">
<p>Comment faire</p>
<p>pour que le cadre bleu</p>
<p>ne s'arrête pas après la dernière ligne</p>
<p>mais fasse 90% de haut comme il est indiqué en css</p>
<p>bien sûre en restant conforme aux normes du xhtml</p>
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" border="0" /></a></p>
</div>
</body>
</html>

Valhala · 2 Mai 2005

Ben heu déja tu utilise class="test" et div="test" alors que vu le css s'est class="test" que tu dois utiliser.

Essaye avec ceci:

Code:

<!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" xml:lang="fr" lang="fr">
<head>
<title>Test cadre 90% de haut</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
body{
background-color:#f0f0f0;
margin: auto;
padding:5% 5% 5% 5%;
height:80%; }
.test { margin: 0 auto;
height: 90%;
width: 90%;
overflow:auto;
background-color: #000066;
}
-->
</style>
</head>
<body>
<div class="test">
<p>Comment faire</p>
<p>pour que le cadre bleu</p>
<p>ne s'arrête pas après la dernière ligne</p>
<p>mais fasse 90% de haut comme il est indiqué en css</p>
<p>bien sûre en restant conforme aux normes du xhtml</p>
<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" border="0" /></a></p>
</div>
</body>
</html>

Voila ça te donne idée de comment faire, le reste est à toi de jouer.

Vince100 · 2 Mai 2005

Dans l'exemple de code que tu donnes, il me semble que le style est en commentaire (entre ), c'est voulu ou pas ?
[edit: je viens de voir que c'est normal, désolé, je n'ai pasl'habitude d'intégrer le style dans la page elle-même]
Ensuite si tu veux utiliser div id= il faut que tu définisses to style par #test et non .test, sinon c'est div class=

yannouk · 2 Mai 2005

juste une idée comme ca je me suis pas plongé dedans: au lieu de specifier une hauteur (ce qui est souvent mal géré) pourquoi ne pas mettre un truc du genre: top: 0px; bottom: 10%
a voir...

Si non, tu devrais corriger le sujet...C'est la taille VERTICALE d'un div qui t'interesse et non horizontale.
A+!