Problème de placement d'une image de fond au-dessus du reste
Bonjour,
J'ai un problème avec la maquette de mon site, c'est-à-dire j'ai une image que je veux faire répéter en haut sur toute la largeur avec ombre portée, le problème est avec l'ombre portée, car juste en-dessous j'ai la barre du menu à travers de l'ombre portée de l'image de fond, mais je sais que les images de fond sont en-dessous des éléments du contenu, comment je peux faire ?
Je ne peux pas joindre une capture d'écran apparemment, sinon je vous l'aurais montré.
Merci d'avance
14 réponses
Sache que tout ce qu'il y a sur la maquette peut-être fait en css. Voici le code que j ai test et qui a l aire de marcher ^^'
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="superposition-style.css" />
<title>superposition Div</title>
<style>
html, body {margin: 0; padding: 0;
background-color: orange;}/*permet de ne plus avoir d'espace entre les éléments html et body*/
.barre {
background-color:white ;
position: absolute;
top:0px;
width:100%;
height: 276px;
z-index: 0;
-moz-box-shadow: 0px 6px 4px 0px #656565;
-webkit-box-shadow: 0px 6px 4px 0px #656565;
-o-box-shadow: 0px 6px 4px 0px #656565;
box-shadow: 0px 6px 4px 0px #656565;
}
.barremenu {background-color:yellow;
position: absolute;
width: 850px;
height: 71px;
padding-top: 40px;
z-index: 2;
top:250px;
left: 50%;
opacity:0.7;
margin-left: -425px;}
#container {
margin-top:380px;
}
.bloc1 {
margin:auto;
float :left;
width: 40%;
border: solid red;
color: red;}
.bloc2 {
width: 40%;
margin:auto;
float :left;
border: solid;}
#clear {
clear: both;
}
</style>
</head>
<body>
<div class="barre"></div>
<div class="barremenu"></div>
<div id="container">
<p class="bloc1">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. </p>
<p class="bloc2">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p>
</div>
<div id="clear"></div>
</body>
</html>Bonne continuations.
Bonjour,
Si tu pouvez héberger ta capture sur eloader ou stabland ou imageshak, car je t’avouerais que j'ai rien compris.
Bon, si j'ai bien compris, tu veux mettre le fond de ton menu au dessus de l'ombre portée du bloc header.
La première solution qui me viens est la propriété z-index qui te permet de travailler sur l'axe de profondeur de ton site. Un bloc avec un z-index:1; sera plus haut qu'un autre bloc avec un z-index:-1;.
/!\ Le z-index peut-être utilisé que sur des blocs ayant une position( absolut etc..).
Bonne continuation.
Salut,
Oui, t'as bien compris. Mais comme tu dis, Le z-index peut-être utilisé que sur des blocs ayant une position( absolut etc..) mais là je parle du background. L'image que tu vois ici, je l'ai recadré, mais la barre noire en haut est une image qui se répète sur toute la largeur de la page, j'ai peur qu'un bloc ne puisse être répétée à l'infini avec "repeat-x" car il est dans le body de toute façon, ou sinon, il ne faut pas que je définisse de largeur au body.
Je pense qu'au bout d'un moment, les tests seront plus probant qu'une philosophie du faisable et de l'infaisable =). Tu peux aussi héberger un format rar sur stabland. Si j ai le temps et que j'ai les fichiers/images je ferais un test plus tard (dans une heure acceptable, on va dire).
++
Le mieux serait que tu mettes tous cela sous forme de div et ensuite, comme la souligné coloo, tu joues avec la propriété z-index.
Bonsoir,
Ca ne marche pas "tous cela sous forme de div et ensuite jouer avec la propriété z-index." voici le code :
HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="superposition-style.css" />
<title>superposition Div</title>
</head>
<body>
<div class="barre"></div>
<div class="barremenu"></div>
<div id="container">
<p class="bloc1">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. </p>
<p class="bloc2">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. </p>
</div>
</body>
</html>CSS
html, body {margin: 0; padding: 0; background-color: orange;}/*permet de ne plus avoir d'espace entre les éléments html et body*/
.barre {background: url(banner-shadow.png) repeat-x; position: relative; height: 276px; z-index: 0;}
.barremenu {background: url(barre-menu.png); position: relative; width: 850px; height: 71px; padding-top: 40px; z-index: 2;}
#container {position: relative;}
.bloc1 {position: absolute; top: 4px; left: 3px; z-index: 2; border: solid red; color: red;}
.bloc2 {position: absolute; top: 12px; left: 18px; z-index: 1; border: solid;}Les 2 paragraphes marchent avec la propriété "z-index" mais pas mes div pour les 2 images superposées. C'est peut-être parce que les paragraphes sont dans le même div, j'ai déjà essayé mettre les 2 images dans un même div, ça ne marche pas, l'une des 2 images disparait.
Salut coloo,
J'ai pris ton code et l'ai testé sur ma machine, ça a marché aussi, bizarrre que les images ne marchent pas, ou il y a un truc.
"Sache que tout ce qu'il y a sur la maquette peut-être fait en css." pour la barre jaune en transparence oui, tout à fait on peut la faire entièrement en CSS, l'ombre de la barre noire aussi, sauf que la barre noire, en réalité, c'est une texture et non une couleur noire pure. Mais je vais creuser un peu moi-même, avec ton code, je vais changer la couleur noire par une texture, normalement ça va marcher.
Merci beaucoup ^^
"J'ai pris ton code et l'ai testé sur ma machine, ça a marché aussi, bizarrre que les images ne marchent pas, ou il y a un truc."
Non mais c'étais juste pour te dire que j ai testé sans aucune image ^^', donc il ne faut pas s'étonné si tes image ne s'affiche pas.
Bonne continuation.