Positionnement div superposant une image

**thenaoh** · 31/01/2014, 14h10

Bonjour,

Je cherche depuis hier comment placer un div par-dessus une image, mais selon des critères bien particuliers :
- l'image fait la largeur de la page web (width: 100%), et elle n'est pas déformée (la hauteur reste proportionnelle à la largeur)
- le div que je souhaite placer est à 23% de la hauteur de l'image (top: 23%), et est aligné à gauche dans un div parent, superposé à l'image, centré, de largeur fixe (1000px).

Ici un visuel pour illustrer mon propos :

Comment, donc, placer mon div jaune ?

Merci par avance pour votre aide !

**Torgar** · 31/01/2014, 15h17

Salut,

Montre nous le code que tu as fait déjà, ça nous donnera une base de travail.

**thenaoh** · 31/01/2014, 15h28

Voici le code actuel :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<body>
<div style="width: 100%; position: relative;">
	<img src="imagefond.jpg" style="width: 100%; position: relative; z-index: 0; display: block;" />
	<div style="width: auto; max-width: 1000px; margin: 0 auto; height: 100%; position: relative; background-color: #FF0000; z-index: 1;">
		<div style="position: absolute; top: 23%; left: 0; width: 600px; height: 200px; background-color: #FFFF00;">
			div jaune
		</div>
	</div>
</div>
</body>

Merci !

**JefReb** · 31/01/2014, 17h22

La boite jaune en relative fonctionne bien, mais il faut une hauteur pour la boite rouge.
Voici un essai: http://codepen.io/anon/pen/guJeA

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
#fond        { width:900px; height:auto; background-color:green;; }
.rouge       { width:800px; height:500px; margin:0 auto; background-color:red; }
.jaune       { width:600px; height:200px; background-color:yellow; position: relative; top:23%; left:0; }

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div id="fond">
	<div class="rouge">
		<div class="jaune">
			div jaune
		</div>
	</div>
</div>

**thenaoh** · 31/01/2014, 17h34

Merci, mais ça ne répond pas à mon problème...

Le fond comporte une image, dont la largeur est celle de la page (pas de background-image, donc), et le div rouge doit avoir la même hauteur que l'image, afin que le div jaune se positionne à 23% de la hauteur de l'image ...

Une idée ?

**Candygirl** · 31/01/2014, 18h04

Hello,

C'est quelque chose comme ça que tu veux obtenir ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div style="position: relative;">
	<img src="imagefond.jpg" style="width: 100%; display: block;" />
	<div style="max-width: 1000px; margin:auto; left:0; right:0; top:0; height: 100%; position: absolute; background-color: #FF0000;">
		<div style="position: relative; top: 23%; width: 600px; height: 200px; background-color: #FFFF00;">
			div jaune
		</div>
	</div>
</div>

**thenaoh** · 31/01/2014, 18h09

YES ! Merci beaucoup, c'est exactement ça que je voulais !!

Cependant, ça ne marche pas bien sous IE et Safari...
Je vais essayer de trouver pourquoi, mais si quelqu'un a une idée, je suis preneur

**Candygirl** · 31/01/2014, 19h25

Ah oui tiens IE a un problème avec le centrage du max-width... Tu peux le remplacer par un width vu que tu disais vouloir une largeur fixe. En principe ça devrait être centré sur IE8+ mais pas en dessous. Si tu veux le centrer sur les vieux IE, il faut passer par la technique de la marge négative.

J'ai du changer d'image pour constater le problème sur Safari. Tu peux mettre un position:absolute au lieu de relative sur ton div jaune pour le corriger. Par défaut je préfère laisser dans le flux si possible mais bon là, ça change pas grand chose, tout dépend du contexte après...

**JefReb** · 01/02/2014, 08h50

Bravo Candygirl, j'avais pas trop creusé.
Mais pourquoi ne pas mettre l'image en background-image de la div de fond?
Et pourquoi hardcoder le style dans le code html au lieu de le mettre dans un style interne ou externe?

Juste une question comme ça ...

**thenaoh** · 02/02/2014, 12h30

1000 mercis Candygirl, ça marche impec !

Il faudra juste que je règle à grands renforts de media queries le cas où la largeur de ma page est inférieure à 1000px, mais ça n'est pas un problème.

JefReb : si l'image est en background, ça marche pas des masses, la hauteur du div principal n'est donc plus proportionnel à la largeur de l'image... Et le style est hardcodé juste pour illustrer mon propos, j'utilise un vrai style externe dans la vraie vie

Positionnement div superposant une image

Positionnement en CSS

Discussions similaires

Partager

Partager