28172 sujets

CSS et mise en forme, CSS3

Background-color dessous un background-image

Pages :
Bonjour,

Dans mon site il y a un menu sur la gauche de la page. Il est composé d'un bloc supérieur de décoration, d'un centre où il y a les liens, puis d'un bloc inférieur de décoration. Le voici :

La partie haute comprend le bloc rouge et l'ombre dans une même image. Idem pour la partie basse. Ce sont des background-image. La voici : upload/38758-menugauche.jpg
La partie contrale comprend un backgorund-color rose.

Le soucis c'est que le background-color de la partie centrale passe par-dessus les ombres des background-image des partie supérieur et inférieur. Voici le code :

<div class="menu_gauche">
	<div class="partie_haute"></div>
	<div class="partie_centrale">
		<ul>
			<li>Page d'accueil</li>
			<li>Liste des membres</li>
			<li>Galerie photo</li>
			<li>Spectacles</li>
		</ul>
	</div>
	<div class="partie_basse"></div>
</div>


.menu_gauche {width:203px; height:100%;}
.menu_gauche .partie_haute {width:100%; height:44px; background-image:url(../images/partie_haute_menu_gauche.png); background-repeat:no-repeat;}
.menu_gauche .partie_centrale {height:100%; background-color:#FFC4C4; width:100%; }
.menu_gauche .partie_basse {width:100%; height:44px; background-image:url(../images/partie_basse_menu_gauche.png); background-repeat:no-repeat;}


Le soucis c'est que l'ombre de la partie haute se place en-dessous du background-color du bloc centrale et que l'ombre du bloc inférieur ne se place pas sur le bloc centrale.

Quelqu'un saurait-il comment placer tous ces blocs de façon à ce que cela ressemble au screen ?

Merci d'avance pour vos solutions !
Modifié par Minious (10 Jul 2011 - 20:37)
Bonjour à toutes et à tous,

si tu nous avais mis séparément tes trois images au lieu du résultat que tu désires obtenir, nous aurions pu faire des tests pour trouver la solution à ton problème.

Cela serait une bonne chose ! Non ?

@+
Non justement je ne veux pas faire ça car cela déborde sur le coin haut-droit et bas-droit qui sont transparents. Tu as une solution pour placer les background-image devant le background-color ?
Le background-color vient quand même se placer sur l'ombre. As-tu essayé chez toi pour voir si cela marchait ?
J'ai aussi pensé à ça mais j'aimerais pouvoir changer l'image de fond de temps en temps sans avoir à refaire les images. Désolé si je suis un peu embêtant. Smiley cligne
Bonsoir à toutes et à tous,

donc ton problème est que l'image centrale soit en dessous, et la partie haute et basse au-dessus. N'est-ce pas ?

Au fait, je n'ai pas l'image centrale !

Voici le code modifié :
<!doctype html>
<html>
<head>
<title>test</title>
<style type="text/css">
* {
		margin				: 0;
		border				: none;
		padding				: 0;
}

body {
		background-color	: grey;
}

/*---------------------*/
/*     Menu Gauche     */
/*---------------------*/

.menu_gauche {
		position			: absolute;
		top					: 200px;
		left				: 620px;

		width				: 203px;
}

.menu_gauche > ul {
		list-style-type		: none;

		background-color	: #FFC4C4;
		background-image	: url(ombre_menu_gauche_partie_basse.png);
		background-repeat	: no-repeat;
}
</style>
</head>

<body>
<div class="menu_gauche"> 
	<img src="partie_haute.png" alt="partie haute" />
	<ul> 
		<li>Page d'accueil</li> 
		<li>Liste des membres</li> 
		<li>Galerie photo</li> 
		<li>Spectacles</li> 
	</ul> 
	<img src="partie_basse.png" alt="partie basse" />
</div>
</body>
</html>


@+
Il n'y a pas 3 images. Il y a :

- Une image de la partie supérieur plus l'ombre en dessous
- Une image de la partie inférieur plus l'ombre au dessus
- Un background-color rose pour la partie centrale.

Le soucis c'est qu'avec le code que je vous ai donné, le background-color de la partie centrale se place par-dessus les ombre des 2 autres images.

avez-vous bien compris maintenant ? Smiley smile

Ce que je voudrais ce serais placer les background-image dessus le background-color.

Merci d'avance pour vos solutions.
Bonsoir à toutes et à tous,

avez-vous testé mon code HTML ?

Sinon, vous dites qu'il n'y a que deux images en "background". Alors qu'est-ce que c'est que cette image en "background" sur la partie centrale ?

Je reproduis votre CSS d'une manière éclatée et lisible !

.menu_gauche .partie_centrale {
height:100%;
background-color:#FFC4C4;
width:100%;
background-image:url(../images/ombre_menu_gauche_partie_basse.png);
background-repeat:no-repeat;
background-position:bottom;}
Vous faites bien référence à une image ! Non ?

@+
non excuse-moi je me suis trompé tu peut revoir le code que j'ai édité;

PS : Maintenant tu me vouvoie ? Smiley sweatdrop
On dirait que tes images sont rogner. As-tu testé avec firebug ? Pour voir si tes blocs haut et bas font bien la même grandeur que ton image de background ? C'est difficile de voir sans avoir une page en ligne pour pouvoir t'aider.

Tu peux aussi tester en mettant un background-position. Sur ton image du haut, tu la positionne center bottom et ton image du bas, center top, pour ne pas perdre ton ombre.
Bonsoir à toutes et à tous,

tes images font 203 X 50 pixels !

Tu désires qu'une partie de l'image soit à cheval sur le background-color de la partie centrale.

Est-ce bien cela ?

@+
Modifié par Artemus24 (11 Jul 2011 - 00:17)
Artemus24 a écrit :
tes images font 203 X 50 pixels !

Je n'ai pas vérifié les images que tu as présentées sur le forum.

Artemus24 a raison, si tes images font plus que le 44px par 203px que tu nous as dit, ton problème se trouve là, comme je te le disais plus haut, tes images sont rognées...
Bonsoir à toutes et à tous,

j'ai une solution mais elle ne me plait pas.
C'est à cause du HEIGHT que j'ai dû placer dans la classe CSS .menu_gauche.
Même avec ma solution précedente, les images sont au-dessus du background-color de la classe .menu_gauche.

Je suis d'accord avec MABELLE, les images ne sont pas correctes pour ce que tu désires faire. La couleur de l'image et la couleur du background-color devrait avoir la même teinte !
<!doctype html>
<html>
<head>
<title>test</title>
<style type="text/css">
* {
		margin				: 0;
		border				: none;
		padding				: 0;
}

body {
		background-color	: grey;
}

/*---------------------*/
/*     Menu Gauche     */
/*---------------------*/

.menu_gauche {
		position			: absolute;
		top					: 200px;
		left				: 600px;
		height				: 180px;

		background-color	: #FFC4C4;
		width				: 203px;
		border-radius		: 50px;
}

.menu_gauche > ul {
		list-style-type		: none;
}

</style>
</head>

<body>
<div class="menu_gauche"> 
	<img src="partie_haute.png" alt="partie haute" />

	<ul id="milieu"> 
		<li>Page d'accueil</li> 
		<li>Liste des membres</li> 
		<li>Galerie photo</li> 
		<li>Spectacles</li> 
	</ul> 

	<img src="partie_basse.png" alt="partie basse" />
</div>
</body>
</html>
@+
Modifié par Artemus24 (11 Jul 2011 - 00:38)
Ce n'est pas la solution car si quelqu'un a un navigateur qui ne comprend pas border-radius, la couleur débordera sur les coins.

J'ai posté le même sujet sur un autre forum et voici ce que j'y ai écrit, cela va peut-être vous donner des idées :

Ce que je voudrais c'est un bloc de la taille de la partie rouge de l'image et que l'ombre en bas de cette image déborde sur le bloc d'en dessous mais en se plaçant par-dessus celui-ci.

Si je met la couleur en background sur le bloc du haut, ce n'est pas possible car le coin haut-droit de l'image est transparent et il ne doit pas afficher la couleur du background.

Si je modifie l'image pour placer la couleur de la partie centrale sous l'ombre. Il faudrait alors modifier l'image à chaque fois que je voudrais changer la couleur de fond ce qui n'est pas pratique.

J'ai cherché sur Google et j'ai trouvé ceci :

.menu_gauche .partie_haute {position:relative; z-index:100; padding-top:6px; margin-top:-6px; width:100%; height:44px; background-image:url(../images/partie_haute_menu_gauche.png); background-repeat:no-repeat;}


En faisant ceci le background-image devrait se décaler vers le bas et donc déborder du bloc dans lequel il se trouve pour pouvoir faire dépasser l'ombre de l'image sur le fond du bloc centrale. Le soucis c'est que le background-image viens se placer sous le background-color. Comment pourrais-je faire pour passer le bloc du haut par dessus le bloc centrale ?

Auriez-vous une petite idée ?

Voilà le code complet :


<div class="menu_gauche">
	<div class="partie_haute"></div>
	<div class="fond_menu">
		<ul>
			<li>Page d'accueil</li>
			<li>Liste des membres</li>
			<li>Galerie photo</li>
			<li>Spectacles</li>
		</ul>
	</div>
	<div class="partie_basse"></div>
</div>




.menu_gauche {position:relative; width:203px; height:100%;}
.menu_gauche .fond_menu {position:relative; z-index:1; background-color:#FFC4C4; height:100%; width:100%;}
.menu_gauche .partie_haute {position:relative; z-index:100; padding-bottom:6px; margin-bottom:-6px; width:100%; height:44px; background-image:url(../images/partie_haute_menu_gauche.png); background-repeat:no-repeat;}
.menu_gauche .partie_basse {width:100%; height:44px; background-image:url(../images/partie_basse_menu_gauche.png); background-repeat:no-repeat;}
.menu_gauche .fond_menu li {font-family:serif; font-size:17px; color:#000000; text-align:center;}



Voilà !

J'ai une question : Est-ce que le z-index s'applique aussi aux background ?
Pages :
Sujet clos
Aller à