28123 sujets

CSS et mise en forme, CSS3

Pb héritage hauteur parent

Bonjour,

je réalise actuellement une arborescence sur 6 niveaux.

Les niveaux s'imbriquent les uns aux autres via un float right
(width niv1> niv 2> niv 3, ...).
Chacun contient une div "box" de 140px float left.

Je souhaite que chaque box hérite de la hauteur du niv auquel elle appartient (le dernier) et c précisément là que ca va pas. Est ce possible ?

Merci d avance
Lod

HTML

<body>
<div id="container">

<div class="niv2">
<div class="box">
<h2>Box niv2</h2>
<p>in quis, ponatur cum vel quiddam nostrum ille quibus, de ut, dignitatis non quidem id de ut, dignitatis nndicaverunt in, tamveri qui oratio, praete</p>
</div>


<div  class="niv3">
<div class="box">
<h3>Box niv3</h3>
<p>in quis, ponatur cum vel quiddam nostrum ille quibus, de ut, dignitatis non quidems, de ut, dignitatis non quidem im vel quiddam nostrum ille quibus, de ut, dignitatis non quidem id in veri qui oratio, praete</p></div>
</div><!--  fin  niv3       -->

<div  class="niv3">
<div class="box">
<h3>Box niv3</h3>
<p>in quis, ponatur cum vel quiddam nostrum ille quibus, de ut, dignitatis non quidem id in veri qui aete</p>
</div>
</div><!--  fin  niv3       -->
</div><!--  fin  niv2       -->


</div><!--  fin  contenant       -->


</body>

CSS

*{margin:0;padding:0;
}


#container{
width:800px;
margin:0 auto; 
}

.niv2, .niv3{
float:right;
margin-bottom:5px;
padding:5px;
height:100%;
}

.niv2{width:800px; background:#CCCCCC;}
.niv3{width:625px;background:#CC99CC;}

.box{
width:140px;float:left;background:#999999;
padding:5px;height:100%;
}

Modifié par lod (19 Nov 2007 - 17:37)
lod a écrit :
Est ce possible ?

Non, pas à ma connaissance.

Il y a peut-être moyen de faire autrement. Quel est le design à réaliser exactement?
Alors le design:

-box avec angle arrondi et "branche "sur la gauche pour les relié entre elles sur un fond blanc (couleur change selon le niv)
-design fluide (je vais tenter les pourcentages pour que ca s adapte à l'écran)

je pense je vais supprimer la box pour avoir une couleur de background qui occupe toute la hauteur du niveau. Je voulais eviter ça car c pas super flexible et ca m oblige a bidouiller pas mal.

Merci quand même. si vous avez des idées c welcome !
(Je me dde a quoi sert height:inherit, je l'utilise pas bcoup et ici c pas du tout efficace ..).
lod a écrit :
(Je me dde a quoi sert height:inherit, je l'utilise pas bcoup et ici c pas du tout efficace ..).

Ça ne peut pas être efficace car height: inherit n'existe pas. Je ne sais pas si le validateur CSS le laisse passer, mais c'est une erreur. La valeur de la propriété height ne peut pas être héritée, comme indiqué dans la spécification:
http://www.w3.org/TR/CSS21/visudet.html#propdef-height

La seule chose que l'on peut faire, c'est donner à un bloc une hauteur en pourcentage par rapport à la hauteur de son bloc parent. Lequel bloc parent doit lui aussi avoir une hauteur déterminée (soit fixée en pixels ou autre unité fixe, soit indiquée en pourcentages de la hauteur de son propre parent, lequel parent... et ainsi de suite).
Modifié par Florent V. (20 Nov 2007 - 00:33)
Florent V. a écrit :

La seule chose que l'on peut faire, c'est donner à un bloc une hauteur en pourcentage par rapport à la hauteur de son bloc parent. Lequel bloc parent doit lui aussi avoir une largeur déterminée (soit fixée en pixels ou autre unité fixe, soit indiquée en pourcentages de la hauteur de son propre parent, lequel parent... et ainsi de suite).

Bon, partant de l'hypothèse que tu voulais bien dire hauteur et non largeur, je me permets juste un petit complément dans le cas de blocs positionnés: si c'est un bloc du flux qui détermine la hauteur maximale de son parent (et que la hauteur n'est donc pas déterminée), un bloc frère positionné pourra s'ajuster à une hauteur de 100% sur base de la hauteur calculée du bloc non positionné. Pour exemple:

[#black][b]XHTML[/b][/#]

<div>
	<p>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.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>



[#black][b]CSS[/b][/#]

div {background:green; position:relative; width:760px;}
p {background:fuchsia; width:370px; margin:0;}
p+p {background:yellow; position:absolute; height:100%; right:0; top:0;}
Effectivement, la donne change un peu pour un bloc positionné.

Et d'ailleurs, on pourrait même ne pas donner de hauteur, mais utiliser à la fois une valeur pour top et une valeur pour bottom pour l'élément positionné.
(Pas compatible IE6, mais sympa.)
Merci pour vos reponses benjamin et florent, ca va m aider. Dès que j ai une solution je vous en fais part.
Modifié par lod (20 Nov 2007 - 09:58)
Sujet clos
Aller à