28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'aimerais superposer 2 div et jouer sur l'opacité (ce que j'ai partiellement réussi). Le but étant d'avoir du texte ou une image (#graphique) et une autre div à droite qui se superpose qui correspond à un menu.

Si quelqu'un pouvait examiner mon code car, là, mon problème c'est que le texte ne passe pas en dessous de la div mais au contraire, dès qu'il arrive sur le bord gauche de la div du menu, il revient à la ligne.

Merci de votre aide.


Voici le code :

--> HTML
	<div id="graphique">
		<div id="sousmenu"></div>
		texte texte texte texte texte texte texte texte 	
	</div>


--> CSS

#graphique { height:279px; background:#009900; }
#sousmenu { position:relative; width:176px; height:279px; float:right; background:white;
				z-index:100;
				filter:alpha(opacity=75); /* opacite pour FF */ 
				-moz-opacity:0.75; /* opacite pour FF */ 
				opacity: 0.75; /* opacite pour IE */ }


Et voici le résultat souhaité :
upload/5619-superpositi.gif
Modifié par statvg (28 Jul 2006 - 10:04)
Bonjour,

Je passe en coup de vent, mais tu es dans une impasse avec les flottants, qui ne te permettront jamais de superposer deux contenus.

Tu peux obtenir ce résultat uniquement via les positionnements absolus, qui autorisent les chevauchements. C'est ce que tu as cherché intuitivement en tentant d'appliquer une position relative et un z-index (qui ne peuvent pas aboutir à ce que tu veux tant que les flottants sont là).

Cela dit, c'est assez surprenant du point de vue ergonomie, comme effet. Par curiosité: qu'est-ce qui t'amène à vouloir l'obtenir ?
Salut Laurent,

Je comprends que tu sois surpris par un tel effet. La raison pour laquelle je fais une telle interface est simple, je dois reproduire une interface qui est à origine en flash.

Et il faut savoir que la div la plus "basse" ne serait quasiment voire jamais du texte. Ce qui veut dire que ce sera donc une image avec à droite du texte... Pas très génant donc.

Voilà Smiley smile
Dans ce cas, développer plutôt avec l'image, et pas avec du texte. Parce que ça change tout, ça.

(dans les cas rares où ce serait du texte, un texte mis en image doit être possible côté éditoriale, je suppose).

<edit>quoique... A la réflexion, la mise en image n'est peut-être pas le plus simple, en effet. Intéressant, ça.</>
Modifié par Laurent Denis (28 Jul 2006 - 10:34)