28172 sujets

CSS et mise en forme, CSS3

Règle background-color:inherit qui ne fonctionne pas

bonjour,

je travaille actuellement au portage d'un thème wordpress vers zenphoto.
j'ai un petit souci sur la valorisation d'une couleur de fond sur une pop-up.

explications :
j'ai différentes boites sur un "sidebar" qui ont une couleur de fond alternative (bleu ou marron).

dans la boite "recherche", j'ai une "pop-up" (ce n'est peut-être pas le terme approprié) qui peut s'afficher pour préciser les critères de recherche.

mon problème : je voudrais que la couleur de fond de ma pop-up soit celle de la boite "recherche".
je ne peux pas la fixer à priori (puisque cette couleur peut varier).
je pensais utiliser la notion d'héritage entre la couleur de fond de la boite recherche et la couleur de fond de la pop-up, mais je n'y arrive pas (actuellement, la couleur est transparente).

pouvez-vous m'aider ?
merci d'avance

le code :


<div class="bloque2">
	<h3>Chercher</h3>
	<script type="text/javascript" src="/zenphotoNB2/zp-core/js/admin.js"></script>
	<div id="search"><!-- search form -->
		<form method="post" action="/zenphotoNB2/index.php?p=search" id="search_form">
			<input type="text" name="words" value="" id="search_input" size="10" />
			<a href="javascript:toggle('searchextrashow');"><img src="/zenphotoNB2/themes/i-feel-dirty/images/search-drop.png" alt="sélectionner les champs de recherche" id="searchfields_icon" /></a>
			<input type="submit" value="Chercher" class="pushbutton" id="search_submit"  />
			<input type="hidden" name="inalbums" value="" />
			<br />
			<ul style="display:none;" id="searchextrashow">
				<li><label><input id="SEARCH_author" name="SEARCH_author" type="checkbox" checked="checked"  value="author"  /> Auteur</label></li>
				<li><label><input id="SEARCH_content" name="SEARCH_content" type="checkbox" checked="checked"  value="content"  /> Contenu</label></li>
				<li><label><input id="SEARCH_desc" name="SEARCH_desc" type="checkbox" checked="checked"  value="desc"  /> Description</label></li>
				<li><label><input id="SEARCH_state" name="SEARCH_state" type="checkbox" checked="checked"  value="state"  /> Etat</label></li>
			</ul>
		</form>
	</div><!-- end of search form -->
</div>


le css :


.sidebar {
	font-size: 12px;
	float: left;
	width: 254px;
	padding: 10px 0 0 0;
	line-height: 10px;
}
.sidebar p {
	line-height: 16px;
}
.sidebar ul {
	list-style-type: square;
	padding-left: 30px;
}
.sidebar ul li {
	margin-bottom: 10px;
}
.sidebar ul span {
	color: #000;
}
.sidebar ul a {
	color: #000;
	text-decoration: none;
}
.bloque1, .bloque2 {
	margin-bottom: 10px;
}
.bloque1 {
	background: #e8e6d9 url(../images/bloque1bg.jpg) no-repeat;
}
.bloque2 {
	background: #e2ebed url(../images/bloque2bg.jpg) no-repeat;
}
.bloque1 h3 {
	color: #6c644d;
}
.bloque2 h3 {
	color: #294A59;
}
.bloque1 h3, .bloque2 h3 {
	font-size: 19px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	letter-spacing: -1px;
	margin-bottom: 5px;
	padding: 15px 0 5px 15px;
	text-transform: lowercase;
}
.bloque1 ul {
	color: #968e77;
	padding-bottom: 12px;
}
.bloque2 ul {
	color: #668b9c;
	padding-bottom: 12px;
}
.bloque1 ul a {
	border-bottom: 1px dashed #968e77;
}
.bloque1 p a, .bloque2 p a {
	color: #000;
}
.bloque1 ul a:hover, .bloque1 p a:hover {
	background-color: #6c644d;
	color: #fff;
	border: 0px;
}
.bloque2 ul a {
	border-bottom: 1px dashed #668b9c;
}
.bloque2 ul a:hover, .bloque2 p a:hover {
	background-color: #294A59;
	color: #fff;
	border: 0px;
}
#search {
	padding: 0px 15px 15px;
}
#search_input {
	width: 120px;
	border: 1px solid #aaa;
}
#search ul{
	border:1px solid #4a4a4a;
	position:absolute; 
	text-align:left; 
	list-style:none; 
	overflow:visible; 
	padding:6px; 
	background-color:inherit
}
#search li {
	width: 150px;
	margin: 0 0 3px;
}

Modifié par vincent3569 (09 Dec 2010 - 12:59)
Bonsoir,
Les styles correspondants à ta liste d'options de recherche (#searchextrashow) ne sont pas mentionnés dans la feuille de style - Ils sont probablement perdus par défaut dans les méandres du javascript. Bon courage. Essaye d'ajouter dans ta feuille de style CSS une déclaration du genre :
#searchextrashow {
background: transparent url("chemin_image.jpg") no-repeat;
}
Peut-être que la css passera en priorité devant le javascript ? (j'en doute)
bonjour

en fait, il y a bien une déclaration :

#search ul{
     border:1px solid #4a4a4a;
     position:absolute;
      text-align:left;
      list-style:none;
      overflow:visible;
      padding:6px;
      background-color:inherit;
}
#search li {
     width: 150px;     margin: 0 0 3px;
}


cette déclaration permet bien de spécifier le comportement de la pseudo pop-up

rappel de ce que je cherche à faire :
je souhaite que la pop-up identifiée par <ul id="searchextrashow "> hérite de la couleur de fond de <div class=bloqueX> avec X=1 ou 2, en fonction des options choisies par l'utilisateur.

je pensais que la déclaration "background-color:inherit;" suffirait, mais ce n'est pas le cas.

merci d'avance pour toute l'aide que vous pourrez m'apporter
Modifié par vincent3569 (07 Dec 2010 - 13:49)
bonjour

le code qui me pose soucis est celui-ci :

<div class="bloque1">
	<h3>Chercher</h3>
	<script type="text/javascript" src="/zenphotoNB2/zp-core/js/admin.js"></script>
	<div id="search"><!-- search form -->
		<form method="post" action="/zenphotoNB2/index.php?p=search" id="search_form">
			<input type="text" name="words" value="" id="search_input" size="10" />
			<a href="javascript:toggle('searchextrashow');"><img src="/zenphotoNB2/themes/i-feel-dirty/images/search-drop.png" alt="sélectionner les champs de recherche" id="searchfields_icon" /></a>
			<input type="submit" value="Chercher" class="pushbutton" id="search_submit"  />
			<input type="hidden" name="inalbums" value="" />
			<br />
			<ul style="display:none;" id="searchextrashow">
				<li><label><input id="SEARCH_author" name="SEARCH_author" type="checkbox" checked="checked"  value="author"  /> Auteur</label></li>
				<li><label><input id="SEARCH_content" name="SEARCH_content" type="checkbox" checked="checked"  value="content"  /> Contenu</label></li>
				<li><label><input id="SEARCH_desc" name="SEARCH_desc" type="checkbox" checked="checked"  value="desc"  /> Description</label></li>
			</ul>
		</form>
	</div><!-- end of search form -->
</div>


j'ai essayé de préciser la règle background-color: inherit; sur toutes les balises en cascade, mais rien n'y fait, cela ne marche pas


.bloque1{
	background: url(../images/bloque1bg.jpg) no-repeat;
	background-color: #e8e6d9; 
}
.bloque1 ul{
	color: #968e77;
#search{
	padding: 0px 15px 15px;
	background-color: inherit;
}
#search_form{
	background-color: inherit;
}
ul#searchextrashow{
	background-color: inherit;
	border: 1px solid #294A59;
	position: absolute; 
	text-align: left; 
	list-style: none; 
	overflow: visible; 
	padding: 6px; 
}
ul#searchextrashow li{
	background-color: inherit;
	width: 150px;
	margin: 0 0 3px;
	color: #fff;
}


si quelqu'un à un conseil à me suggérer, je suis preneur, car là, je sèche complètement.

voir le résultat ici : http://vincent.bourganel.free.fr/zenphotoNB2/, sur la combo-box de la zone recherche
Modifié par vincent3569 (09 Dec 2010 - 13:21)
Hello,

Juste une piste, tu utilises background pour ta classe .bloque1 et ensuite background-color:inherit sur les éléments enfants. Essaye d'utiliser plutôt background:inherit sur ceux-ci pour reprendre exactement le meme intitulé de la propriété.
Modifié par guizm0w (13 Dec 2010 - 19:10)
guizm0w a écrit :
Hello,

Juste une piste, tu utilises background pour ta classe .bloque1 et ensuite background-color:inherit sur les éléments enfants. Essaye d'utiliser plutôt background:inherit sur ceux-ci pour reprendre exactement le meme intitulé de la propriété.


bonjour

la déclaration exacte du CSS est la suivante :

.bloque1{
	background: url(../images/bloque1bg.jpg) no-repeat;
	background-color: #e8e6d9; 
}
.bloque1 ul{
	color: #968e77;
#search{
	padding: 0px 15px 15px;
	background-color: inherit;
}
#search_form{
	background-color: inherit;
}
ul#searchextrashow{
	background-color: inherit;
	border: 1px solid #294A59;
	position: absolute; 
	text-align: left; 
	list-style: none; 
	overflow: visible; 
	padding: 6px; 
}
ul#searchextrashow li{
	background-color: inherit;
	width: 150px;
	margin: 0 0 3px;
	color: #fff;
}


j'ai bien background-color: #e8e6d9 et background-color: inherit sur tous les enfants.

nouveauté du jour : ça marche sur IE8 et FF3.6 sous Windows 7 Smiley ravi
mais toujours pas sur IE7 sous XP, et je n'ai plus accès à Vista pour dire si ça marche avec IE7/8 et FF3.6...

si quelqu'un a une solution "cross browser" et "cross OS", ce serait super sympa Smiley cligne
Modifié par vincent3569 (14 Dec 2010 - 10:00)
vincent3569 a écrit :


bonjour

la déclaration exacte du CSS est la suivante :

.bloque1{
	background: url(../images/bloque1bg.jpg) no-repeat;
	background-color: #e8e6d9; 
}
.bloque1 ul{
	color: #968e77;
}
#search{
	padding: 0px 15px 15px;
	background-color: inherit;
}
#search_form{
	background-color: inherit;
}
ul#searchextrashow{
	background-color: inherit;
	border: 1px solid #294A59;
	position: absolute; 
	text-align: left; 
	list-style: none; 
	overflow: visible; 
	padding: 6px; 
}
ul#searchextrashow li{
	background-color: inherit;
	width: 150px;
	margin: 0 0 3px;
	color: #fff;
}


j'ai bien background-color: #e8e6d9 et background-color: inherit sur tous les enfants.

nouveauté du jour : ça marche sur IE8 et FF3.6 sous Windows 7 Smiley ravi
mais toujours pas sur IE7 sous XP, et je n'ai plus accès à Vista pour dire si ça marche avec IE7/8 et FF3.6...

si quelqu'un a une solution &quot;cross browser&quot; et &quot;cross OS&quot;, ce serait super sympa Smiley cligne
Sujet clos
Aller à