28172 sujets

CSS et mise en forme, CSS3

Background-color dessous un background-image

Pages :
(reprise du message précédent)

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 ?
version modifiée d'artemus : on joue sur les marges 
<!DOCTYPE html>
<html>
	<head><style type="text/css">
.menu_gauche {width:203px; height:100%;} 
.menu_gauche .partie_haute {} 
.menu_gauche .partie_centrale {margin: -10px 0; padding: 10px 0; height:100%; background-color:#FFC4C4; width:100%; } 
.menu_gauche .partie_basse {} 	
	</style></head>
	<body>
	<div class="menu_gauche"> 
    <img class="partie_haute" src="partiehaute.png" alt="" /> 
    <div class="partie_centrale"> 
        <ul> 
            <li>Page d'accueil</li> 
            <li>Liste des membres</li> 
            <li>Galerie photo</li> 
            <li>Spectacles</li> 
        </ul> 
    </div> 
    <img class="partie_basse" src="partiebasse.png" alt="" />
</div>
	</body>
</html>


Version tout se passe en css avec before et after : ma préférée compatible ie7, ie8 :
<!DOCTYPE html>
<html>
	<head><style type="text/css">
.menu_gauche {width:203px; height:100%;} 
.menu_gauche .partie_centrale:before { 
	content:""; 
	width: 100%; 
	height:50px;
	background-image:url(partiehaute.png); 
	background-repeat:no-repeat; 
	background-position:bottom;
	position: absolute;
	top: -43px;
	} 
.menu_gauche .partie_centrale { 
	position: relative; 
	margin: 50px 0; 
	padding: 1em 0; 
	height:100%; 
	background-color:#FFC4C4; 
	width:100%; } 
.menu_gauche .partie_centrale:after { 
	content:""; 
	width: 100%; 
	height:50px;
	background-image:url(partiebasse.png); 
	background-repeat:no-repeat; 
	background-position:top;
	position: absolute;
	bottom: -43px;
	}	
	</style></head>
	<body>
	<div class="menu_gauche"> 
    <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>
	</body>
</html>


Ps : je viens de voir ton post Minious, le z-index est vicieux avec les backgrounds ... pas encore tout compris
oups je crois que j'ai dit une bêtise pour le support des pseudo éléments :before et :after

mais tu peux le simuler en créant les div de décoration à l'intérieur de la div partie_centrale après le ul

Smiley edit 
<!DOCTYPE html>
<html>
	<head><style type="text/css">
.menu_gauche {width:203px; height:100%;} 
.menu_gauche .partie_haute { 
	
	width: 100%; 
	height:50px;
	background-image:url(partiehaute.png); 
	background-repeat:no-repeat; 
	background-position:bottom;
	position: absolute;
	top: -43px;
	} 
.menu_gauche .partie_centrale { 
	position: relative; 
	margin: 50px 0; 
	padding: 1em 0; 
	height:100%; 
	background-color:#FFC4C4; 
	width:100%; } 
.menu_gauche .partie_basse { 
	
	width: 100%; 
	height:50px;
	background-image:url(partiebasse.png); 
	background-repeat:no-repeat; 
	background-position:top;
	position: absolute;
	bottom: -43px;
	}	
	</style></head>
	<body>
	<div class="menu_gauche"> 
    <div class="partie_centrale"> 
        <ul> 
            <li>Page d'accueil</li> 
            <li>Liste des membres</li> 
            <li>Galerie photo</li> 
            <li>Spectacles</li> 
        </ul> 
        <div class="partie_haute"></div>
        <div class="partie_basse"></div>
    </div> 
</div>
	</body>
</html>

Modifié par Arialia (11 Jul 2011 - 09:24)
Pages :
Sujet clos
Aller à