Aller au contenu

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

jerkoo

Par jerkoo
dans (X)HTML et CSS

 Partager

Sujets conseillés

jerkoo

jerkoo

Posté
Posté (modifié)

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 style="position:relative; ......">

<div style="position:absolu; ......"> bla bla </div>

<div style="position:absolu; ......"> bla bla </div>

</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é par jerkoo
Lien vers le commentaire
Partager sur d’autres sites
Skyll

Skyll

Posté
Posté (modifié)

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é par Skyll
Lien vers le commentaire
Partager sur d’autres sites
Perrine

Perrine

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
jerkoo

jerkoo

Posté
  • Auteur
Posté (modifié)

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) :

i48858_capt.gif

Modifié par jerkoo
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...