28172 sujets

CSS et mise en forme, CSS3

[Résolu] Blocs flottants et superposition d'images

Bonjour,

J'ai cherché, mais...les divers sujets qui s'approchent du mien ne m'ont pas permis de résoudre mon problème.
Alors je le soumets à la sagesse générale Smiley cligne ...
La page finale est plus complexe, mais la difficulté se résume ainsi:
je souhaite afficher 3 blocs flottants l'un à côté de l'autre, ce qui est simple, mais le bloc central doit contenir 2 images superposées, et là est le problème: je n'arrive pas à effectuer cette superposition.

Voici schématiquement ce que j'obtiens:
upload/1002-2016-12-172.jpg

On peut mieux voir ici : http://www.vivons-la-vie.net/essai_mike/carte/carte2_800.php

Comme on le voit, la 2eme image centrale (qui est un gif à fond transparent) ne se superpose pas, mais s'affiche sous "le fond". Smiley ohwell

Voici mon code:

<style>
.gauche	{
	float:left;
	height: 	300px;
	width:		70px;
	padding:	50px;
	background-color:#FF9;
}
.centre	{
	float:	left;
	height: 300px;
	width:	800px;
}
.droite	{
	float:	left;
	height: 300px;
	width:	70px;
	padding:	50px;
	background-color:#9C6;
}
.image	{
	position:	relative;
	width:		800px;
	top:		0px;
	left:		0px;
	border-style:dotted;
	border-color:#009;
	border-width:thin;
}
</style>
<body>
<div id="gauche" class="gauche">GAUCHE</div>

<div id="centre" class="centre">
    <img src="route_canobio_fond_800.gif"  class="image" />
    <img src="trajet3_800.gif?time=<?php echo time(); ?>"  class="image" />
</div>
<div id="droite" class="droite">DROIT</div>


Voilà. Si quelqu'un a une suggestion qui m'aiderait, j'achète Smiley biggrin

Merci d'avance pour tout bonne idée!
Mike
mikeduff a écrit :
Bonjour,

J'ai cherché, mais...les divers sujets qui s'approchent du mien ne m'ont pas permis de résoudre mon problème.
Alors je le soumets à la sagesse générale Smiley cligne ...
La page finale est plus complexe, mais la difficulté se résume ainsi:
je souhaite afficher 3 blocs flottants l'un à côté de l'autre, ce qui est simple, mais le bloc central doit contenir 2 images superposées, et là est le problème: je n'arrive pas à effectuer cette superposition.

Voici schématiquement ce que j'obtiens:
upload/1002-2016-12-172.jpg

On peut mieux voir ici : http://www.vivons-la-vie.net/essai_mike/carte/carte2_800.php

Comme on le voit, la 2eme image centrale (qui est un gif à fond transparent) ne se superpose pas, mais s'affiche sous "le fond". Smiley ohwell

Voici mon code:

&lt;style&gt;
.gauche	{
	float:left;
	height: 	300px;
	width:		70px;
	padding:	50px;
	background-color:#FF9;
}
.centre	{
	float:	left;
	height: 300px;
	width:	800px;
}
.droite	{
	float:	left;
	height: 300px;
	width:	70px;
	padding:	50px;
	background-color:#9C6;
}
.image	{
	position:	relative;
	width:		800px;
	top:		0px;
	left:		0px;
	border-style:dotted;
	border-color:#009;
	border-width:thin;
}
&lt;/style&gt;
&lt;body&gt;
&lt;div id="gauche" class="gauche"&gt;GAUCHE&lt;/div&gt;

&lt;div id="centre" class="centre"&gt;
    &lt;img src="route_canobio_fond_800.gif"  class="image" /&gt;
    &lt;img src="trajet3_800.gif?time=&lt;?php echo time(); ?&gt;"  class="image" /&gt;
&lt;/div&gt;
&lt;div id="droite" class="droite"&gt;DROIT&lt;/div&gt;


Voilà. Si quelqu'un a une suggestion qui m'aiderait, j'achète Smiley biggrin

Merci d'avance pour tout bonne idée!
Mike

Il te suffit de positionner la seconde image à "moins" X pixels verticaux par rapport à sa position normale dans le flux pour qu'elle remonte et vienne se positionner au-dessus de l'image précédente.
<!DOCTYPE html>
<head>
<style>
.gauche	{
	float:left;
	height: 	300px;
	width:		70px;
	padding:	50px;
	background-color:#FF9;
}
.centre	{
	float:	left;
	height: 300px;
	width:	800px;
}
.droite	{
	float:	left;
	height: 300px;
	width:	70px;
	padding:	50px;
	background-color:#9C6;
}
.image	{
	position:	relative;
	width:		800px;
	top:		0px;
	left:		0px;
	border-style:dotted;
	border-color:#009;
	border-width:thin;
}
.image2	{
	position:	relative;
	width:		800px;
	top:		-438px; /* Doit être égal à la hauteur de l'image précédente */
	left:		0px;
	z-index:    2;
}
</style>
</head>
<body>
<div id="gauche" class="gauche">GAUCHE</div>

<div id="centre" class="centre">
    <img src="http://www.vivons-la-vie.net/essai_mike/carte/route_canobio_fond_800.gif"  class="image" />
    <img src="http://www.vivons-la-vie.net/essai_mike/carte/trajet3_800.gif?time=1482044721"  class="image2" />
</div>
<div id="droite" class="droite">DROIT</div>
</body>
</html>

Testé OK sous Firefox.
Afin d'éviter que le code dépende de la taille de l'image du moment, vous pouvez mettre les éléments enfants de .centre en position:relative avec un top 0. Ça marchera quelque soit la hauteur de l'élément. Plus facile à maintenir par la suite.

PS :
.image	{
	top:		0px;
	left:		0px;
}

Évitez de mettre des unités aux valeurs 0, ça fonctionne mais ce n'est pas la norme en CSS.
Bonjour,

Merci pour vos réponses !
Merci Sepecat, ça marche effectivement très bien, mais, comme le soulève Olivier, petit problème avec les images dont les dimensions ne sont pas constantes.

J'étais en train de chercher une solution pour résoudre cette sous-question;
pas encore implémenté la proposition d'Olivier, mais je vais le faire.

Merci encore et je marque ce sujet comme "Résolu"

Mike
mikeduff a écrit :
Bonjour,

Merci pour vos réponses !
Merci Sepecat, ça marche effectivement très bien, mais, comme le soulève Olivier, petit problème avec les images dont les dimensions ne sont pas constantes.

J'étais en train de chercher une solution pour résoudre cette sous-question;
pas encore implémenté la proposition d'Olivier, mais je vais le faire.

Merci encore et je marque ce sujet comme "Résolu"

Mike

Pour ne pas avoir à indiquer une taille d'image, le plus simple est de :
- déclarer le conteneur en position relative
- placer la première image en position absolute : 0,0 (haut / gauche)
- placer la seconde image de la même manière avec un Z-Index supérieur
Nouveau code :
<!DOCTYPE html>
<head>
<style>
.gauche	{
	float:left;
	height: 	300px;
	width:		70px;
	padding:	50px;
	background-color:#FF9;
}
.centre	{
	position:relative; /* Permet de positionner les objets qui y sont contenus */
	float:	left;
	height: 300px;
	width:	800px;
}
.droite	{
	float:	left;
	height: 300px;
	width:	70px;
	padding:	50px;
	background-color:#9C6;
}
.image	{
	position:	absolute; /* Positionné en haut à gauche du conteneur */
	width:		800px;
	top:		0px;
	left:		0px;
	border-style:dotted;
	border-color:#009;
	border-width:thin;
}
.image2	{
	position:	absolute; /* Positionné en haut à gauche du conteneur + Z-Index pour le mettre en avant */
	width:		800px;
	top:		0px;
	left:		0px;
	width:		800px;
	z-index:    2;
}
</style>
</head>
<body>
<div id="gauche" class="gauche">GAUCHE</div>

<div id="centre" class="centre">
    <img src="http://www.vivons-la-vie.net/essai_mike/carte/route_canobio_fond_800.gif"  class="image" />
    <img src="http://www.vivons-la-vie.net/essai_mike/carte/trajet3_800.gif?time=1482044721"  class="image2" />
</div>
<div id="droite" class="droite">DROIT</div>
</body>
</html>

Testé OK sous Firefox...
Bonne fin de week end.
Sujet clos
Aller à