[CSS] Comment rendre un calque "relatif" extensible en fonction du contenu ?

jerkoo · 15 Septembre 2007

Bonjour,

j'ai un soucis récurrent qui a surement une solution simple... mais que je ne trouve pas !

je veux positionner des calques de façon fixe dans un calque relatif au reste du flux de la page : jusque là pas de soucis; je mets des calques en position absolus dans un calque en position relative :

</div>

Mon problème vient du fait que mon calque conteneur (le "relative") a une couleur de fond, et doit s'allonger en fonction du contenu des 2 autres, qui est variable (extraction d'une base) : je ne peux donc pas lui fixer d'attribut height.

mais en pratique il ne s'allonge pas si les 2 autres sont en absolu ...

Quelle est la solution SVP pour garder ces 2 objectifs :

- position fixe des 2 calques dans un conteneur mobile

- auto-allongement du conteneur en fonction du contenu des 2 calques contenus

???

Merci de votre aide :smartass:

Modifié 15 Septembre 2007 par jerkoo

Capybara · 15 Septembre 2007

Bonjour.

As tu tenté d'utiliser les marges et les padding?

Enfin je dis probablement des bétises :whistling:

Modifié 15 Septembre 2007 par Capybara

Skyll · 15 Septembre 2007

Il y a un truc qui consiste à donner à ton div en "relative" un comportement de tableau. Les blocs en absolu sont sortis du flux, c'est pour cela qu'il ne sont pas toujours considéré part FF notamment (et les flottant aussi) .

Donc un truc c'est de mettre display:table dans la règle pour ton div en relative, cela forcera le div à s'adapter au contenu mais ensuite il faut bien regarder de quelle manière cela influe sur le reste de ta page.

Modifié 15 Septembre 2007 par Skyll

**Perrine** · 15 Septembre 2007

Salut jerkoo,

Par définition, un bloc positionné en absolute (et non absolu), sort du flux... c'est à dire qu'il devient complètement indépendant du reste des blocs et donc n'intervient plus dans le calcul des dimensions de son bloc parent.

C'est pour cela que ton bloc parent, même en relative, ne prend pas la hauteur de tes 2 blocs en absolute.

Ne peux-tu pas utiliser les float au lieu des absolute ? Si tu ajoutes un clear:both à la suite des 2 blocs, ton bloc parent en relative prendra alors la hauteur de tes 2 div.

jerkoo · 15 Septembre 2007

Merci de vos réponses.

Alors c'est presque ça (je n'avais effectivement pas pensé au display table qui est efficace sur IE + Firefox.

le pb, comme dit Perrine, c'est le positionnement de la suite qui est complètement farfelu : je n'arrive pas à comprendre pourquoi le calque suivant ne se réinsère pas normalement dans la flux ...

Une idée pour expliquer ça et placer le code qui suit :?: ?

Voilà le code approximatif :

<body>
<div style="position:relative; display: table; left:100px; top: 100px; background-color:#000000; width: 300px;">

	<div style="float: left; margin-left:10px; margin-top: 10px; background-color:white; width: 100px">	

		Beatus vir qui non abiit in consilio impiorum et in via peccatorum non stetit et in cathedra pestilentiae non sedit
	Sed in lege Domini voluntas eius et in lege eius meditabitur die ac nocte

	</div>


	<div style="float: right;  margin-right:10px; margin-top: 10px; background-color:yellow; width: 100px">	

		Non sic impii non sic sed tamquam pulvis quem proicit ventus a facie terrae, 
	Ideo non resurgent impii in iudicio neque peccatores in consilio iustorum 
	Quoniam novit Dominus viam iustorum et iter impiorum peribit 

	</div>

	<div style="clear:both; color:#CCCCCC"> nettoit-tout </div>

</div>


<div style="position:relative; margin-top: 20px"> bla bla bla </div>


</body>

et ça donne ça (capture Dream pour mettre en évidence les marges, mais l'affichage est equivalent à celui qu'on a sur les 2 navigateurs) :

Modifié 15 Septembre 2007 par jerkoo

Connexion

[CSS] Comment rendre un calque "relatif" extensible en fonction du contenu ?

Sujets conseillés

jerkoo

Capybara

Skyll

Perrine

jerkoo

Veuillez vous connecter pour commenter

Parcourir

Activité