[Résolu] Positionner un calque fixe dans un calque extensible

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
Modifié par jerkeve (17 Sep 2007 - 15:21)

Bonsoir,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.




La solution résiderait peut-être dans l'utilisation d'un tableau de mise en forme
non pénalisant pour l'accessibilité du contenu. Mais encore faudrait-il
savoir comment doivent se positionner exactement ces deux calques?
Modifié par Hermann (15 Sep 2007 - 22:16)

Bonjour Hermann

OK, OK
simplement... ce n'était pas a proprement parler du code, c'était juste une ébauche visuelle pour permettre de mieux comprendre ma question, je ne vois franchement pas ou est le pb !

J'avais été faire un tour au début sur le lien dont tu parles. Là non plus je ne vois pas où est le pb ... une crise de fachisme, peut être ? Ca se soigne très bien

Pour les tableaux de mise en forme ... c'est justement ce que je veux éviter. Sinon je ne chercherais pas sur un forum CSS. Merci quand même, j'ai trouvé la réponse ailleurs, sur des forums ou l'entr'aide est + simple...

Pour ceux qui auraient le même pb, il suffit d'utiliser l'attribut
display: table dans le calque relatif.

jerkeve a écrit :

simplement... ce n'était pas a proprement parler du code, c'était juste une ébauche visuelle pour permettre de mieux comprendre ma question, je ne vois franchement pas ou est le pb !

J'avais été faire un tour au début sur le lien dont tu parles. Là non plus je ne vois pas où est le pb ... une crise de fachisme, peut être ? Ca se soigne très bien

Merci de rester courtois et d'éviter d'employer des termes un peu trop violent pour un simple rappel des règles que tu es censé avoir lues et acceptées, et que tu enfreins en ne formatant pas ton code comme te l'a spécifié Hermann. Merci d'y remédier !

jerkeve a écrit :
ce n'était pas a proprement parler du code

Ah bon alors c'est quoi?

jerkeve a écrit :
Pour les tableaux de mise en forme ... c'est justement ce que je veux éviter. Sinon je ne chercherais pas sur un forum CSS.

C'est là que tu te trompes, l'un n'est pas incompatible avec l'autre...

jerkeve a écrit :
Pour ceux qui auraient le même pb, il suffit d'utiliser l'attribut
display: table dans le calque relatif.

Si c'était si simple... IE n'implémente pas la valeur table de la propriété display.

Hermann a écrit :

Si c'était si simple... IE n'implémente pas la valeur table de la propriété display.

j'avais lu ça. Pourtant je ne sais pas pourquoi, mais ça marche nickel sur les 2 navigateur ...?

Par contre le flux qui suit est complètement zarbi, pas du tout positionné en suite du calque "relative" conteneur. Bref... de la bidouille ... Une explication ?

Juste pour clarifier, ça donne ça :

<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 équivalent à celui qu'on a sur les 2 navigateurs) :


http://upimago.com/out.php/i48858_capt.gif
Modifié par jerkeve (16 Sep 2007 - 21:37)

jerkeve a écrit :
Une explication ?

Tu demandes à une div de se décaler visuellement de 100px vers le bas par rapport à sa position réelle. Et donc elle le fait. CQFD.

La partie où tu demandes à la div de se décaler visuellement de 100px vers le bas est la suivante (en gras et en rouge):

<div style="[#red][b]position:relative;[/b][/#] display: table; left:100px; [#red][b]top: 100px;[/b][/#] background-color:#000000; width: 300px;">

Le comportement observé est donc parfaitement normal.

Pour rappel:
- pour créer un espace de 100px en haut d'un bloc, espace qui influera réellement sur la position du bloc telle que prise en compte par les autres éléments de la page, il y a la propriété margin-top;
- le positionnement relatif sert à décaler un élément par rapport à sa position «normale»;
- lorsqu'on utilise le positionnement relatif sur un élément, les autres éléments ne réagissent que par rapport à la position «normale» de l'élément, et pas par rapport à sa position définitive;
- on utilise parfois position: relative sur un élément, afin de pouvoir se servir de cet élément comme référent pour le positionnement absolu de ses descendants... dans ce cas, on évitera d'utiliser également les propriétés top, right, bottom ou left.

Au sujet du display: table: il est tout simplement ignoré par Internet Explorer, qui garde donc le type d'affichage par défaut (display: block) pour ta div.

Si ça marche nickel sur les deux navigateurs (Firefox et IE, ou bien Safari et Opera?...), c'est parce que ce display:table est ici inutile. Sa prise en compte ou non ne changera rien dans le cadre de l'exemple que tu présentes (où une div en clear: both permet déjà d'éviter le dépassement des flottants, par exemple).

jerkeve a écrit :
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
???

Si «position fixe» signifie que les deux éléments en question («calques»?) doivent rester fixes à l'écran même en cas de défilement du contenu, j'ai bien peur que ça ne soit pas possible. position: fixed retire l'élément ainsi positionné du flux, ce qui est incompatible avec la prise en compte de l'élément pour le dimensionnement d'un quelconque conteneur.

S'il s'agit juste de placer deux éléments côte-à-côte en «colonnes», les solutions sont multiples:
- tableau de mise en page (non, ça n'est pas le mal, et on peut utiliser les CSS de manière extensive tout en gardant un ou deux tableaux de mise en page, à titre de transition ou pour répondre à diverses contraintes techniques);
- utilisation de display: table-cell (non supporté par IE);
- utilisation d'un flottant (pour deux éléments côte-à-côte: un flottant; pour trois éléments: deux flottants; etc.).

La troisième solution est la plus largement utilisée dans le cadre d'une mise en page à l'aide des propriétés de positionnement CSS. La première, bien utilisée, reste pertinente. La seconde est utilisable mais demandera des aménagements pour IE (basculement sur l'utilisation de flottants via des commentaires conditionnels).

oops... merci Florent, je n'avais pas vu cet oubli des "margin-xxx" dans mon calque en relative... a force de changer cet attribut.

Du coup tout rentre dans l'ordre, le calque "ble - bla" se positionne bien sous les autres normalement dans le flux,
Et tu as raison aussi , sans le display: table qui est effectivement inutile du coup...

Ce qui donne (et ca marche) :

<body>
<div style="position:relative; margin-left:100px; margin-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; color:grey"> bla bla </div>
 

</body>

À priori, les deux position: relative sont inutiles également. À moins que tu ne penses avoir, comme enfants ou descendants des éléments positionnés en relatif, des éléments positionnés en absolu.

oui, oui, ce code est partiel sur la page, il y a d'autres éléments en relative dessous et dessus dans le flux.

Si je ne mettais pas d'attribut position:relative nulle part pour ces calques en position relative, par défaut, le navigateur interprèterait-il la position de ces calques par défaut en relative ???
Si c'est le cas, à quoi cela sert-il de le mettre ???

jerkeve a écrit :
Si je ne mettais pas d'attribut position:relative nulle part pour ces calques en position relative, par défaut, le navigateur interprèterait-il la position de ces calques par défaut en relative ???

Non, la valeur par défaut de la propriété position est "static". Le positionnement relatif est différent. On l'utilise essentiellement pour créer un nouveau référent pour le positionnement absolu des descendants de l'élément, et/ou pour décaler visuellement un élément par rapport à sa position normale (celle qu'il aurait eu en position: static).

Si on n'a pas précisément besoin de position: relative pour un élément donné, il est conseillé de ne pas l'utiliser pour cet élément, notamment pour éviter certains bugs ou comportements pas toujours évidents d'Internet Explorer.

Merci de tes réponses claires !

je ne connaissais pas cet attribut static par défaut... j'utiliserai donc relative à bon escient désormais (j'espère...)

Bravo
Tu considères que ce sujet est [Résolu] ?

oui... mais [résolu] ne tient pas en entier dans le champ du titre, vous avez limité le nombre de caractères et j'explose mon forfait !

++ et merci encore

jerkeve a écrit :
oui... mais [résolu] ne tient pas en entier dans le champ du titre, vous avez limité le nombre de caractères et j'explose mon forfait !

++ et merci encore

Euh ouais mais alors autant éviter "[Rés]" qui est inutile : personne n'ira faire une recherche sur des sujets [Rés]
Et pour le titre de ton sujet, disons que "qui se conçoit bien s'énonce brièvement"

ben... justement ça se conçoit pas bien sinon je on pose pas de questions

Hop, ai modifié le titre en faisant usage de mes pouvoirs magiques de modérateur.