28173 sujets

CSS et mise en forme, CSS3

[résolu] Comment superposer deux blocs

Bonjour,
je souhaiterais superposer un bloc par dessus un autre. Pour ce faire je n'ai trouvé que la solution du position:absolute que j'ai appliqué au deuxième bloc.

Mais je n'arrive pas à positionner mon bloc au centre de ma page et qu'il reste au centre. Bref je n'ai que des ennuis, surtout sous IE.

Est-ce que quelqu'un peu m'aider ?

Merci
Modifié par Alore (04 Dec 2006 - 16:05)
Positionner un bloc par dessus un autre, puis centrer le tout, ça risque d'être difficile (même si sans doute pas impossible).
Avant d'en dire plus, il faudrait que l'on sache ce que tu veux réaliser exactement. Un petit schéma/descriptif/montage, voire une maquette ?
Yep, j'pensais bien que ça n'allait pas être d'la tarte Smiley smile

En faite, j'ai une image avec dessus un calque. C'est avant tout pour le cms,
qu'il soit possible de changer l'image sans se préoccuper du calque.

Voici la partie du code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#container {
	width: 812px;
	margin: 0 auto;
	}
.fondu {
	position: absolute;
	left: 0;
	width: auto;
	top: 25px;
	}
.image {
	float: left;
	padding: 7px 0 7px 8px;
	}
</style>
</head>

<body>
<div id="container">
	<div class="fondu">
		<img src="fondu.png" />
	</div>
	<img src="HeaderImage01.jpg" class="image"/>
</div>
</body>
</html>
Salut,
Je ne suis pas sur de très bien saisir c que tu veux faire :
a écrit :
qu'il soit possible de changer l'image sans se préoccuper du calque
est-ce que tu veux superposer HeaderImage01.jpg et fondu.png, de façon à ce que cette dernière soit centrée par rapport à la première?

Pourquoi ne pas exploiter les niveaux de profondeur avec z-index?
euh oui alors je veux que l'une soit sur l'autre, tout simplement. Mais étant donné que mon fondu.png est donc un png transparent, j'ai en plus un problème avec IE que je viens de résoudre.

Ce que tu me propose avec les z-index est intéressant mais comment faire epour que les 2 images soit l'une sur l'autre ?
Bon ben à force de chercher j'ai fini par trouver une "magouille",
je vous en fait part :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#container {
	width: 812px;
	margin: 0 auto;
	}
.fondu {
	position: relative;
	height:0;
	width: 0;
	}
.fondu {
	position: relative;
	height:0;
	width: 0;
	}
.fondu img {
	position: absolute;
	}
.image {
	float: left;
	padding: 7px 0 7px 8px;
	}
</style>
</head>

<body>
<div id="container">
	<div class="fondu">
		<img src="fondu.png" />
	</div>
	<img src="HeaderImage01.jpg" class="image"/>
	
</div>
</body>
</html>


Voilà, merci
Alore a écrit :
Bon ben à force de chercher j'ai fini par trouver une "magouille",
je vous en fait part :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#container {
	width: 812px;
	margin: 0 auto;
	}
.fondu {
	position: relative;
	height:0;
	width: 0;
	}
.fondu {
	position: relative;
	height:0;
	width: 0;
	}
.fondu img {
	position: absolute;
	}
.image {
	float: left;
	padding: 7px 0 7px 8px;
	}
</style>
</head>

<body>
<div id="container">
	<div class="fondu">
		<img src="fondu.png" />
	</div>
	<img src="HeaderImage01.jpg" class="image"/>
	
</div>
</body>
</html>


Voilà, merci
Au passage, n'oublie pas le contenu alternatif (alt) de ton image Smiley cligne
à propos de la propriété z-index...

a écrit :
comment faire epour que les 2 images soit l'une sur l'autre ?


tu procéderais de cette façon : 

#premier img {
position: absolute;
top: 0; left: 0;
z-index: 10;}
#second img {
position: absolute;
top: 0; left: 0;
z-index: 10;}


L'image possédant la valeur de z-index la plus élevée passant dessous.

Mais il ne faut parait-il pas abuser de ces changements de profondeur (rarement nécessaire, ai-je lu, dans un document bien construit), ta solution est donc sûrement la meilleure... mais pourquoi ne places-tu pas directement ta div container en position: relative? Le résultat serait alors identique et tu allégerais le code...
Hello,
sympa pour la solution, le problème avec la position absolue est qu'il prend en compte le bord de la fenêtre de l'explorateur, alors que mon site est centré dans ma page.

Alors pour arriver à mes fins, j'ai du faire un bloc en position:relative, lui hoter la hauteur et la longeur et placer à l'intérieur l'image en position:absolute.

Mais ca ne fonctionne pas avec le reste de mon site en mettant le positionnement relatif au container. L'idée était bonne ! Merci
Sujet clos
Aller à