28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Pb de positionnement de div

Bonjour,

J'ai un soucis de positionnement. j'ai besoin de placer une div (celle en rouge sur l'image) par dessus le texte. Mais évidemment, je n'y arrive pas.
J'ai tenté d'utiliser un position:relative; mais sans succès puisque le contenu de la balise centre (qui contient la div rouge) se décale en passe en dessous.

Merci de votre aide.

Voici mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<style type="text/css">
	<!--
	#centregauche {height:300px; float:left; width:113px; background:red; margin:0; padding:0; }
	/* centre */
	#centre { height:300px; background:yellow; width:677px; float:left; margin:0; padding:0; }
	#centre p {margin:0; padding:0;}
	#description_menu1{ position:relative; background:#E5E5E5; width:100px; top:46px; left:0px; z-index:100;}
	-->
	</style>
</head>
<body>
<div id="centregauche">
	<dl id="menu"></dl>
</div><!-- /centregauche -->
<div id="centre">
	<div id="description_menu1">Lorum ipsum bloretes luite labamara quotia blas buitues</div>
	<p>fs qsdfqsd fqsdj qsdjlsd fs qsdfqsd fqsdj qsdjlsd fs qsdfqsd fqsdj qsdjlsd fs qsdfqsd fqsdj qsdjlsd fs qsdfqsd fqsdj qsdjlsd fs qsdfqsd fqsdj qsdjlsd fs qsdfqsd fqsdj d fs qsdfqsd fqsdj qsdjlsd fs qsdfqsd fqsdj qsdjlsd fs qsdfqsd fqsdj qsdjlsd fs qsdfqsd fqsdj qsdjlsd fs qsdfqsd fqsdj </p>
</div><!-- /centre -->
</body>
</html>


Et voici ce qui j'aimerais (donc superposé la div rouge sur le texte du div="centre")
upload/5619-rollover.gif
Modifié par statvg (07 Jul 2006 - 09:52)
Tu te trouves dans, ce que mpop spécifie comme étant, le cas n°2.

En donnant une position relative à ton "centre" ainsi qu'un layout, et ensuite en donnant une position absolute à ton "div rouge" et en le placant par rapport à "centre", ca devrait marcher pourtant Smiley sweatdrop
Le bloc rouge doit-il cacher le texte, se placer en dessous du texte, ou bien repousser le texte ? Je n'ai pas bien compris l'effet voulu.
Dans l'image que tu montre, tu as juste un bloc rouge qui dessine un habillage graphique. Si c'est ce que tu souhaites, placer une image de fond sur ton paragraphe ou ton bloc conteneur serait tout aussi efficace.
À la rigueur, un positionnement absolu avec un z-index. Dans ce cas, le paragraphe (p) devra avoir un z-index supérieur, et devra être positionné pour que ce z-index prenne, par exemple positionné en relatif.

Si le bloc doit se superposer au texte… alors le positionnement absolu est tout à fait indiqué, même si l'intérêt de masquer le texte ainsi m'échappe (note importante : s'il s'agit de faire un effet de masque via une transparence graduelle en PNG, il faut savoir que ce type de transparence n'est pas supporté nativment par IE6).

Si le bloc doit se placer à gauche en repoussant le texte, alors on utilisera plutôt un bloc flottant à gauche.
Le bloc rouge doit passer en dessous (j'ai mis de la transparence pour vous montrer que le texte était en dessous)
J'ai apparemment réussi grâce à vos conseils (merci bcp) mais maintenant que j'ai mis mon centre en position:relative, j'ai un décalage entre le div gauche et le div centre sous IE. J'ai tout viré et je n'arrive toujours pas à détecter l'erreur. Voici le code, si vous avez une idée :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
* { margin:0px; margin:0px;}
body{ font-size:62.5%; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; background:black; }
#container { margin:0 auto; width:790px; padding:0; }

#header { height:61px; background:green; }

#centregauche {margin:0px; padding:0px; float:left; width:113px; background:red; height:300px; }
#centre {  background:orange; position:relative; margin-left:113px; margin:0px; padding:0px;  height:300px; }

-->
</style>
</head>
<body>
<div id="container">
	<div id="header">qsdfqs</div>
	
	<div id="centregauche">
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec vel libero eget nisl tempus cons<span class="Style1">eq</span>uat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec a diam at odio consequat luctus. Ut sem libero, blandit quis, tempus sit amet, posuere sit amet, nulla.
	</div>
	
	<div id="centre"></div>
</div><!-- /container -->
</body>
</html>
Ce décalage pourraît être provoqué par le Three Pixel Jog (si le décallage fait trois pixel, tu as ton coupable). Le problème viendrait alors du fait de donner une dimmension (height ou width) au bloc qui jouxte le bloc flottant.

Plus d'infos sur le Three Pixel Jog sur le forum (cf la recherche) et sur le web.
Sujet clos
Aller à