Superpositions d'images, et texte à côté...

Bonjour à tous,

Voilà je ne suis pas un grand spécialiste en CSS mais j'ai essayé de me débrouiller pour un projet actuel. Je cherche à créer une page qui contiendrait deux blocs disposés horizontalement, qui prennent toute la largeur de la page.

Dans le bloc de gauche (moitié gauche de la page), il y a une image, et d'autres placées en opacité 0 qui n'attendent que de passer en opacité 1 grâce à un script jQuery.

Dans le bloc de droite, il y a des paragraphes (du texte, donc). Chaque paragraphe provoque lorsqu'on le survole le changement d'opacité d'une image sur la gauche, afin qu'elle devienne visible sur l'image de base.

Mon problème actuel est qu'à cause des modifs que j'ai dû faire en CSS sur les éléments de gauche afin de permettre la superposition, je n'arrive pas du tout à placer mes paragraphes sur la droite. Ceux-ci passent "sous" l'image de droite.

Pouvez-vous me donner un coup de main ? Voici les codes :

	<article>
		<div class="image">
			<img id="img" src="01betel/betel.jpg">
			<img id="img1" class="superp" src="01betel/betel1.png">
			<img id="img2" class="superp" src="01betel/betel2.png">
			<img id="img3" class="superp" src="01betel/betel3.png">
		</div>
		<div class="explication">
			<p id="paraph1">IMG 1</p>
			<p id="paraph2">IMG 2</p>
			<p id="paraph3">IMG 3</p>
		</div>
	</article>

img{
	width:600px;
	float:left;
	margin-right:10px;
}

/* SECTION IMAGE */
.image{
	position:relative;
}
.superp{
	position:absolute;
	opacity:0;
}
#img{
	position:absolute;
}

/* SECTION EXPLICATION */
.explication{
	position:relative;
}
div{
	display:inline-block;
}

Merci bien !
Tan

Salut,
au lieu de jouer avec la propriété position:absolute pour les sortir et remettre dans le flux, tu devrais modifier la propriété display, en none et block.
Hop petit exemple :
http://jsfiddle.net/b8np6/3/

Edit : j'ai pris 3 images d'alsacreations car je n'avais pas les tiennes, mais j'ai garder le principe d'une par défaut puis 3 ensuite ( même si la par défaut et la 1ere sont identique ..)
Ah et pour le code jquery, c'est plus à titre d'illustration qu'autre chose, ça doit pouvoir s'optimiser sans trop de difficulté je pense.

Edit2: par contre je suis pas convaincu, c'est pour le coté accessibilité ..
Modifié par mathieu1004 (27 Jan 2014 - 10:42)

Oui bonne solution, ça règle le problème mais du coup je perds un effet élégant : je gérais jusque-là l'apparition des images superposées avec l'opacité, et non en changeant le display, ce qui me permettait du coup d'utiliser l'effet jQuery 'fadeTo', et donc d'avoir un fondu. Enfin je vais peut-être devoir m'en passer.

Merci pour ta réponse.

Je passe pas le sujet en résolu, des fois qu'on trouverait une solution pour garder le fade...

Tan

Et hop re avec des positions absolute :
Du coup on positionne toutes les images qui sont dans la div de classe image en position absolute (du coup au même endroit), puis on cache avec .superp les images qui sont après la 1ere. On oublie pas de donner une taille aux divs pour le décalage sur le coté (on aurait aussi bien pu donner un margin-left:200px; au 2e div à la place)

.image img{
    position:absolute;
    top :10px;
    left:10px;
}
.superp{
  opacity:0; 
}

div{
    display:inline-block;
    width:200px;
}

Mais au final je saisi pas bien qu'elle est le problème, ça marche "tout seul" :

http://jsfiddle.net/b8np6/5/

Ps : encore une fois le javascript est plus à titre d'exemple qu'autre chose, ça doit pouvoir s'optimiser.