28173 sujets

CSS et mise en forme, CSS3

Problème de superposition de DIV ?

Bonjour,

J'ai un problème de positionnement, j'ai un div conteneur centré dans la fenêtre du navigateur et je souhaite afficher au dessus toujours centré dans la fenêtre un second div plus petit.

Voici mon code actuel :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Titre</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="content-language" content="fr"/>
		<style type="text/css" media="all">
		body
		{
			background-color	: #C5D7ED;
			color				: #000000;
			font-family			: Verdana, sans-serif;
			font-size			: 11px;
			margin				: 0;
			padding				: 0;
		}
		img
		{
			border				: none;
		}
		#conteneur
		{
			background-color	: #00FF00;
			height				: 800px;
			margin-left			: auto;
			margin-right		: auto;
			position			: relative;
			width				: 800px;
		}
		#photos
		{
			background-color	: #FF0000;
			height				: 600px;
			margin-left			: auto;
			margin-right		: auto;			
			position			: relative;
			width				: 600px;
		}
		</style>
	</head>
	<body>

		<div id="conteneur"></div>
		<div id="photos"></div>
	</body>
</html>


J'ai essayé plusieurs combinaisons avec position, float mais sans succès.

Merci pour votre aide,
ZiP
ZiP a écrit :
je souhaite afficher au dessus

Que signifie "au-dessus"? Il s'agit d'inverser l'ordre d'apparition des 2 blocs ou de placer la deuxième division sur ton conteneur au niveau de la profondeur?

Dans ce genre de cas, il peut être utile de fournir un schéma de résultat attendu… Smiley cligne
Modifié par Benjamin D.C. (21 Dec 2007 - 11:41)
Voici le résultat en image que je souhaite avoir :
http://img84.imageshack.us/img84/9162/sanstitre1ad1.jpg

Le fond de ma page est bleu, en vert le conteneur et en rouge le div que je souhaite afficher au dessus.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Titre</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="content-language" content="fr"/>
		<style type="text/css" media="all">
		body
		{
			background-color	: #C5D7ED;
			color				: #000000;
			font-family			: Verdana, sans-serif;
			font-size			: 11px;
			margin				: 0;
			padding				: 0;
		}
		img
		{
			border				: none;
		}
		#conteneur
		{
			background-color	: #FFFFFF;
			height				: 800px;
			margin-left			: auto;
			margin-right		: auto;
			position			: relative;
			width				: 800px;
		}
		#photos
		{			
			background-color	: #FF0000;
			height				: 600px;
			left				: 50%;
			margin-left			: -300px;
			margin-top			: -300px;
			position			: absolute;
			top					: 50%;
			width				: 600px;			
		}
		</style>
	</head>
	<body>

		<div id="conteneur"></div>
		<div id="photos"></div>
	</body>
</html>


Mon code comme ceci semble marcher...

Lorsque je le place dans mon site, les images restent en haut...

Je vais chercher mon erreur.

Merci,
ZiP
Question bête avant de chercher une solution adéquate: pourquoi n'insères-tu pas simplement ta division photos dans ton conteneur? Smiley sweatdrop
En fait, la page est assez longue et l'image reste placée sur le début du conteneur même si on se trouve en bas de page.

ZiP
Hello,

ZiP a écrit :
En fait, la page est assez longue et l'image reste placée sur le début du conteneur même si on se trouve en bas de page.

Pas bien compris le rapport...

Et +1 pour ce que dit Benjamin: si on veut un résultat visuel qui dit «bloc1 est à l'intérieur de bloc2», mieux vaut placer bloc1 dans bloc2 au niveau du code HTML. Ça me semble relever de la logique élémentaire. Smiley cligne
En fait, j'ai une liste d'images et quand je clique dessus, j'ai l'image qui se charge dans le div et je souhaite l'afficher au centre de l'écran et non au centre du conteneur.

Est-ce que mon explication est claire ?

ZiP
Ça s'éclaircit. Smiley smile

Par contre, pour réaliser ça, c'est un peu coton. La notion de «centre de l'écran» (ou même la dimension du viewport et le positionnement du canvas par rapport au viewport... ou l'inverse, je ne sais plus trop...) n'existe pas vraiment en CSS. Tu pourrais tenter quelque chose avec le positionnement fixe, à la rigueur, mais ça ne sera pas compatible IE6 (il faudra alors envisager une solution de repli de type dégradation gracieuse).

Par contre, c'est sans doute plus faisable en passant par Javascript (là aussi, penser à la dégradation gracieuse). Il y a des scripts qui font ce genre de chose: ouvrir une image au «centre du viewport», dans une sorte de fausse pop-up. Voir par exemple le célèbre Lightbox.

http://www.huddletogether.com/projects/lightbox/
(Il y a aussi un Lightbox v2)

Mais ces solutions ne sont pas dénuées d'inconvénients ergonomiques (en particulier si l'image est trop grande pour la fenêtre du navigateur). Ce sont donc des solutions intéressantes, mais pas des solutions miracle.
Sujet clos
Aller à