28172 sujets

CSS et mise en forme, CSS3

[Résolu] Superposition d'images

Bonjour à tous Smiley cligne ,

Je bloque sur un petit soucis CSS :

Imaginons la page suivante (réalisé pour avoir un cas simple) :


<!DOCTYPE html>
<html lang="fr">
	<head>
		[...] <!-- inutile -->
	</head>
	<body>
		<div id="conteneur">
			<header>
				<div id="banniere">
					<img id="banniere_logo" src="./images/logo.png" alt="Logo" />
					<img id="banniere_droite" src="./images/banniere.png" alt="Banniere" />
				</div>
			</header>
			[...] <!-- inutile -->
		</div>
	</body>
</html>


Et le code CSS associé :


div#conteneur {
	width: 1024px;
	margin: 10px auto;
}

div#conteneur header {
	width: 950px;
	margin: 10px auto;
}

div#conteneur header div#banniere {
	width: 100%;
}


Le logo.png fait du 200x200
L'image banniere.png fait du 850*200

Comme vous l'avez compris, 850+200 = 1050 > 950px (largeur de la balise banniere) donc l'image va se mettre à la ligne.
Je souhaite que mon logo soit au dessus de l'autre image sur 100px, le logo est à gauche et l'image est à droite, et que le total fasse donc 950px x 200px, le tout en CSS, mais je ne sais pas comment procéder. Je sais qu'il y a le z-index, mais pour le positionnement ? Et la compatibilité ?

Merci par avance et bonne fin de journée !
Modifié par kal747 (11 Dec 2012 - 21:44)
Bonjour,

Je ne sais pas si j'ai tout compris mais bon, je vais essayer de te donner quelque chose:
Tu places la banniere en position:relative et le logo en position:absolute.

Ensuite tu règles la position du logo avec right, top, left, ou bottom.

J'espère que ça t'aidera. Smiley smile
Salut,

J'ai fait des tests, et voilà ce qui fonctionne:

div#conteneur {
	width: 1024px;
	margin: 10px auto;
}

div#conteneur header {
	width: 950px;
	margin: 10px auto;
}

div#banniere {
	width: 100%;
	position:relative;
}

#banniere_logo { 
	position:relative; 
	z-index:1;
}
#banniere_droite { 
	position:absolute; 
	left:100px; 
	z-index:0;
}

Principaux points importants:
- Le z-index pour que le logo soit au dessus de la bannière
- Position:relative sur la div#banniere pour créer un contexte de positionnement
- ... ce qui permet de positionner les deux images: le logo en relative (sans le déplacer, mais le positionnement est obligatoire pour que le z-index soit pris en compte), et la bannière en absolu (décalé de 100 pixels vers la droite).
- J'ai simplifié la règle sur la div#banniere, car IE < 9 ne comprend pas 'header' et n'interprétais du coup pas la règle. De toute façon, comme c'est un id, aucun besoin d'autre chose dans la règle.

J'espère que ça t'aidera. J'ai testé vite fait et ça à l'air de marcher sous IE7+, FF et Chrome dernières versions.
jiber2fr a écrit :
Salut,

J'ai fait des tests, et voilà ce qui fonctionne:

div#conteneur {
	width: 1024px;
	margin: 10px auto;
}

div#conteneur header {
	width: 950px;
	margin: 10px auto;
}

div#banniere {
	width: 100%;
	position:relative;
}

#banniere_logo { 
	position:relative; 
	z-index:1;
}
#banniere_droite { 
	position:absolute; 
	left:100px; 
	z-index:0;
}

Principaux points importants:
- Le z-index pour que le logo soit au dessus de la bannière
- Position:relative sur la div#banniere pour créer un contexte de positionnement
- ... ce qui permet de positionner les deux images: le logo en relative (sans le déplacer, mais le positionnement est obligatoire pour que le z-index soit pris en compte), et la bannière en absolu (décalé de 100 pixels vers la droite).
- J'ai simplifié la règle sur la div#banniere, car IE &lt; 9 ne comprend pas 'header' et n'interprétais du coup pas la règle. De toute façon, comme c'est un id, aucun besoin d'autre chose dans la règle.

J'espère que ça t'aidera. J'ai testé vite fait et ça à l'air de marcher sous IE7+, FF et Chrome dernières versions.


Une réponse parfaite comme je les aimes Smiley biggrin

Merci beaucoup c'est niquel ça fonctionne.

rodolpheb a écrit :
Je peux te conseiller ce tuto : http://www.alsacreations.com/article/lire/53-guide-de-survie-du-positionnement-css.html


Merci pour le lien Smiley cligne
Sujet clos
Aller à