css div wrap qui n'influence pas le contenu - Page 1

1

Le 06/07/2011 à 01:38

j'ai un div qui englobe du contenu, n'importe quel contenu
ce div doit être en position relative car dedans à coté du contenu je rajoute un div qui lui est en absolue (c'est un bouton calé dans un coin du div)

je voudrais que ce div n'influence en rien le contenu, faire en sorte que tout s'affiche et se positionne comme si celui ci n’étais pas présent, mis à part un petit pixel car je lui met une bordure colorée (histoire de justement voir ce que le div englobe)

mais bon, le css c'est pas trop mon truc :-D vous auriez qq pistes ?

); }

css div.blockzonecontent { display:inline; }
div.blockzonewrap { position:relative; border-style:dashed; border-color:#0000ff; }
div.blockzonebtn { position:absolute; left:-8px; top:-8px; width:16px; height:16px; background-image:url("/plugins/blockzone/edit.png"

/div>html <div class="blockzonewrap"><div class="blockzonebtn"></div><div class="blockzonecontent">contenu ici</div><

et la le mec il le pécho par le bras et il lui dit '

2

Le 06/07/2011 à 02:40

Je ne sais pas trop si ça résoudra ton problème, mais l'attribut position par défaut du div est static, pas relative. Ça influencerait sans doute moins le contenu et il me semble que c'est suffisant pour que le div en position absolute inclus à l'intérieur s'y réfère.

3

Le 06/07/2011 à 02:48

merci, je testerais demain matin

et la le mec il le pécho par le bras et il lui dit '

4

Le 06/07/2011 à 14:46

avec static, le bouton en absolue se positionnais par rapport au body (enfin le plus proche parent en relatif ou absolue)

et en fait j'avais une autre contrainte, que le contenu puisse contenir lui même du code équivalent

bref avec des display:inline-block ca fait ce que je veut

<!DOCTYPE html> 
<html lang="fr"> 
	<head>	<meta charset="UTF-8" /> 
		<style> div.content { background-color:#ff00ff; }
			div.wrap { position:relative; border-style:dashed; border-color:#0000ff; display: inline-block; }
			div.btn { position:absolute; z-index:100; left:-8px; top:-8px; width:16px; height:16px; background-image:url("/plugins/blockzone/edit.png") }

			div.content2 { background-color:#ffff00; display: inline-block; }
			div.wrap2 { position:relative; border-style:dashed; border-color:#00ff00;display: inline-block;  }
			div.btn2 { position:absolute; right:-8px; top:-8px; width:16px; height:16px; background-image:url("/plugins/blockzone/edit.png") }
		</style>
	</head> 
	<body>
		machin	<div class="wrap">
				<div class="btn"></div>
				<div class="content">

					<div class="toto-en-short">
						<div class="wrap2">
							<div class="btn2"></div>
							<div class="content2">
								<p>test!!</p>
								<p>bla!</p>
								<h2>zzz!</h2>
							</div>
						</div>

						<div class="wrap2">
							<div class="btn2"></div>
							<div class="content2">
								<p>test2!!</p>
								<p>bla2!</p>
								<h2>zzz2!</h2>
							</div>
						</div>
					</div>

				</div>
			</div>
		truc
	</body> 
</html>

il ne me reste qu'un seul soucis mais je ne pense pas que je pourrais l'éviter, en fait tout ces wrap etc.. se mette en mode admin, en mode normal il n'y à que les données sans rien d'autre, donc dans cet exemple, le contenu du premier et second div.wrap2 devrais être l'un en dessous de l'autre et ici j'ai choisi de caler les wrap l'un à coté de l'autre, donc je mettrais surement un wrap autour des données simple en mode normal pour simuler ce comportement ^^

et la le mec il le pécho par le bras et il lui dit '