[resolu] Casse tête : imbrication de plusieurs boites

salut,
je vais essaye d'être clair...

j'ai une première boite "1" qui contiendra toutes les autres. définit comme
Dans cette boite j'en ai deux l'une à coté de l'autre :
* la boite "2" qui se trouve sur le coté gauche.
* la boite "3" qui se trouve sur le coté droit.

jusque là tout va bien. Mon souci c'est que je voudrais placer une quatrième boite dans l'angle haut droit de la boite "2". Si je lui indique une position absolute la boite bouge selon la résolution de l'écran... Si le lui indique relative ou float ça fout le reste en l'air !

Comment faire pour que ma boite 4 reste collée à ma boite 2?

merci pour vos conseils.

Julien

le code :

#boite_1 {
 float: left;
 clear:both;
 margin: 0;
 padding: 10px 10px 100px 10px;
 height:100%;
}

#boite_2{
	float: left;
	width: 590px;
	z-index:0;
}

#boite_3{
	background-color: white ;
	float:right;
	width:180px;
	border:solid 1px black;
	text-align: center;
	font-size: 12px;
	font-family: arial;
}
#boite_4{
	position: ??????;
	z-index:20;
	top:135px;
	left:115px;
}

Modifié par julien.63 (27 Jun 2006 - 00:20)

Bonjour et bienvenue sur Alsacréations julien.63,

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.

Bonne continuation

Hello Julien,

Je te conseille de suivre les recommandations d'Igor, c'est toujours plus sympa un forum bien lisible comme il faut, et généralement ça incite les gens à te filer un coup de main.

Pour ton problème, le positionnement absolu semble effectivement être indiqué. Mais il faut que tu précises que ton bloc2 est le référent pour le positionnement absolu. Sinon, le référent sera la fenêtre du navigateur.

Pour cela, on utilise la propriété position: relative; à appliquer sur le bloc conteneur que tu veux utiliser comme référent (parent direct ou ancêtre du bloc à positionner en absolu).

Voir un exemple visuel ici (note : faire bien attention à la petite note en début de page).

A peine arrivé, qu'il se fait déjà remarqué !!
désolé.
Quoiqu'il en soit merci, j'ai trouvé la solution grace au lien de mpop.
voici la solution si ça peut aider un jour quelqu'un.
J'ai pas encore mis tous les styles dans une feuille css mais promis je vais le faire.
code html

<div id="container" style="width:950px">
	<? include('functions/heading.htm'); ?>
	<div id="content">
	
		<div id="box_left" style="position:relative;"  >
			<p style="position:relative; width:700px; height:400px; border:solid; ">map</p>
			<p style="position:absolute; top:15px; left:15px; border:solid; background-color:#99CC99;">ref</p>
			<p style="position:absolute; top:200px; left:350px; border:solid; background-color:#99CC99;">LOAD</p>
			<p style="width:700px; border:solid;">map extent</p>
			<p style="width:700px; height:400px; border:solid;">infos supp</p>
		</div>
		
		<div id="box_right">
			<div style="position:relative; width:150px; height:600px; background-color:#9999FF"></div>
		</div>
	</div>	
</div><!--end of container-->

code css

#content {
 float: left;
 clear:both;
 margin: 0;
 padding: 10px 10px 100px 10px;
 height:100%;
}
#box_left{
	float: left;
	border:solid 1px black;
	z-index:0;
}

#box_right{
	background-color: white ;
	float:right;
	width:180px;
	border:solid 1px black;
	text-align: center;
	font-size: 12px;
	font-family: arial;
}

@+
Julien
Modifié par julien.63 (27 Jun 2006 - 00:18)

Salut, ca serait pas mal d'utiliser une liste pour ton menu, au lieu de la balise <p>.
Modifié par Mikachu (27 Jun 2006 - 00:32)

mpop a écrit :
Pour cela, on utilise la propriété position: relative; à appliquer sur le bloc conteneur que tu veux utiliser comme référent (parent direct ou ancêtre du bloc à positionner en absolu).

Voir un exemple visuel ici (note : faire bien attention à la petite note en début de page).

Histoire de pinailler : je ne pense pas qu'on puisse parler de bloc conteneur référent ou non référent, mais simplement de bloc conteneur ou non.

Le bloc conteneur de l'élément en position absolue est l'ancêtre le plus proche qui sera positionné (donc position: autre que "static"). Si l'ancêtre le plus proche n'est pas positionné, ce n'est pas un « bloc conteneur non référent », mais simplement un ancêtre.

Alan a écrit :
Histoire de pinailler : je ne pense pas qu'on puisse parler de bloc conteneur référent ou non référent, mais simplement de bloc conteneur ou non.

Le bloc conteneur de l'élément en position absolue est l'ancêtre le plus proche qui sera positionné (donc position: autre que "static"). Si l'ancêtre le plus proche n'est pas positionné, ce n'est pas un « bloc conteneur non référent », mais simplement un ancêtre.

Ça dépend de la notion prise comme référence pour savoir quel bloc on va appeler « conteneur ». Je parlais du point de vue du code (un élément parent ou ancêtre de l'éménent à positionner) plutôt que du point de vue du positonnement visuel.

Mais bon, la remarque est intéressante.

Oui mais dans ce cas il me semble justement qu'on ne peut parler que de parent/ancêtres, et non de conteneur.

Prendre les choses de ce point de vue ne me semble pas compatible avec la la définition du bloc conteneur dans la recommandation CSS2.

Parler d'un bloc conteneur d'un élément quand ce BC ne lui servirait pas de référence est à mon avis assez illogique puisque le propre du bloc conteneur est de servir de référence (pour le calcul de la taille ou la position).
Modifié par Alan (27 Jun 2006 - 23:33)

Alan a écrit :
Prendre les choses de ce point de vue ne me semble pas compatible avec la la définition du bloc conteneur dans la recommandation CSS2.

Ah d'accord, je ne savais pas que le terme « bloc conteneur » était clairement défini en CSS. Pour ma part je l'utilisais juste avec un sens général, pour donner des explications, mais sans faire référence à un terme technique particulier.

Autant pour moi.
Et pis merci pour le lien.