28172 sujets

CSS et mise en forme, CSS3

Plusieurs noms de class dans une balise

Bonjour,

Je suis actuellement en train de réaliser un template pour drupal.
Il me génère un code bizarre pour le menu

<ul id="simplemenu" class="menu clear-block superfish">
Pourquoi il y a t-il 3 noms dans la classe? Fait-il appel à 3 classes.

Dans ce menu, il y a des sous rubriques que j'aimerais stylé différemment de mon menu principal.

Dans ma CSS, j'ai mis

#simplemenu li a:hover{
	background:url(../../../../themes/tmc/css/images/degrade_bouton_actif.gif) repeat-x;
}

#simplemenu lu ul li a:hover{
	background-color:#c8eafe;
	background-image:none;
}


Pourriez-vous me dire comment faire pour que mon

ul>li>ul>li soit différent de ul>li

car je ne comprends pas pourquoi le ul>li>ul>li hérite de ul>li alors que j'ai précisé un autre style pour ul>li>ul>li ?

or il m'affiche le même arrière-plan (degrade_bouton_actif.gif) quelque soit le niveau.

Ci-dessous mon code html que je ne peux pas modifier car il est généré par un javascript incompréhensible pour moi.

<div id="menu">
	<ul id="simplemenu" class="menu clear-block superfish">
		<li class="expanded first mat-riel_couture_industrielle root">
			<a href="/tmc/taxonomy/term/60%2067%2068%2070%2069">Matériel couture industrielle</a>
			<ul style="display: none; visibility: hidden;" class="menu">
				<li class="leaf first couture_vestimentaire"><a href="/tmc/taxonomy/term/67">Couture vestimentaire</a></li>
				<li class="leaf couture_lourde"><a href="/tmc/taxonomy/term/68">Couture lourde</a></li>
				<li class="leaf echantillon"><a href="/tmc/taxonomy/term/70">Echantillon</a></li>
				<li class="leaf last teinture_ennoblissement"><a href="/tmc/taxonomy/term/69">Teinture ennoblissement</a></li>
			</ul>
		</li>
		
		<li class="expanded accessoires_-_pi-ces_d-tach-es root">
			<a href="/tmc/taxonomy/term/61%2071%2072">Accessoires / Pièces détachées</a>
			<ul style="display: none; visibility: hidden;" class="menu">
				<li class="leaf first accessoires"><a href="/tmc/taxonomy/term/71">Accessoires</a></li>
				<li class="leaf last ciseaux"><a href="/tmc/taxonomy/term/72">Ciseaux</a></li>
			</ul>
		</li>
		
		<li class="expanded machines_familiales root">
			<a href="/tmc/taxonomy/term/62%2074%2076%2073%2075">Machines familiales</a>
			<ul style="display: none; visibility: hidden;" class="menu">
				<li class="leaf first piqueuse"><a href="/tmc/taxonomy/term/74">Piqueuse</a></li>
				<li class="leaf repassage"><a href="/tmc/taxonomy/term/76">Repassage</a></li>
				<li class="leaf surjeteuse"><a href="/tmc/taxonomy/term/73">Surjeteuse</a></li>
				<li class="leaf last brodeuse"><a href="/tmc/taxonomy/term/75">Brodeuse</a></li>
			</ul>
		</li>
		
		<li class="expanded fournitures root">
			<a href="/tmc/taxonomy/term/63%2077%2078">Fournitures</a>
			<ul style="display: none; visibility: hidden;" class="menu">
				<li class="leaf first ecoles"><a href="/tmc/taxonomy/term/77">Ecoles</a></li>
				<li class="leaf last sellier_-_tapissier_-_garnisseur"><a href="/tmc/taxonomy/term/78">Sellier - Tapissier - Garnisseur</a></li>
			</ul>
		</li>

		<li class="leaf r-vision_-_r-paration"><a href="/tmc/taxonomy/term/64">Révision / Réparation</a></li>
		
		<li class="leaf formation"><a href="/tmc/taxonomy/term/65">Formation</a></li>
		<li class="leaf last contact"><a href="/tmc/taxonomy/term/66">Contact</a></li>

	</ul>
</div>


Merci de votre aide

Cordialement
Modifié par selinav2 (02 Jul 2009 - 14:27)
Bonjour,

Pour répondre à ta premier question, oui, il est possible de donner plusieurs classes à un élément, et même de faire des combos.

Pour la seconde, essaye de remplacer 
#simplemenu lu ul li a:hover{
par
#simplemenu [b]li[/b] ul li a:hover{
.
Merci pour ta réponse,

Tu as l'oeil, j'ai bien mis un li, mais dans mon message il s'agit d'une faute de frappe.

Quelle est la syntaxe pour dire je veux que cet ul contenant les 3 classes ai des propriété css qui ne s'applique qu'à celui ci et non pas à son enfant ul class="menu"?


<ul id="simplemenu" class="menu clear-block superfish">
    <li>
       <ul class="menu">
         <li>mon li</li>
         <li>mon li2</li>
     </ul>
   </li>
</ul>


Merci
En définissant les ul enfants différemments.
J'espère na pas avoir mal li la question. Smiley confused
Modifié par loicbcn (02 Jul 2009 - 17:51)
mon menu est généré à partir d'un javascript, je ne sais pas où intervenir, si quelqu'un s'y connait. Smiley biggol car pour moi c'est du chinois.


// $Id: simplemenu.js,v 1.9.2.12.2.3 2008/12/06 18:04:45 rz Exp $

$(document).ready(function() {
  // If detect pop-ups setting is enabled and we are in a pop-up window
  if (Drupal.settings.simplemenu.detectPopup && window.opener) {
  	return;
 	}
 	
  // get the element to add the menu to
  var element = Drupal.settings.simplemenu.element;
  var menu = $(simplemenu).attr("id", "simplemenu").addClass('clear-block');

  switch (Drupal.settings.simplemenu.placement) {
    case 'prepend':
      $(menu).prependTo(element);
      break;
    case 'append':
      $(menu).appendTo(element);
      break;
    case 'replace':
      $(element).html(menu);
      break;
  }

  $('body').addClass('simplemenu-enabled');
  
  var animation = {};
  animation[Drupal.settings.simplemenu.effect] = 'toggle';
  
  // Build menu
  $(menu)
    .superfish( { 
      animation: animation,
      delay: Drupal.settings.simplemenu.hideDelay,
      speed: Drupal.settings.simplemenu.effectSpeed
    } )
  	.find(">li:has(ul)")
  		.mouseover(function(){
  			$("ul", this).bgIframe({opacity:false});
  		})
  		.find("a")
  			.focus(function(){
  				$("ul", $(".nav>li:has(ul)")).bgIframe({opacity:false});
  			})
  	  .end()
  	.end()
  	.find("a")
  	  .removeAttr('title');

	 $('#simplemenu').children('li.expanded').addClass('root');
});


/* Copyright (c) 2006 Brandon Aaron (http://brandonaaron.net)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * $LastChangedDate: 2007-07-21 18:45:56 -0500 (Sat, 21 Jul 2007) $
 * $Rev: 2447 $
 *
 * Version 2.1.1
 */
(function($){$.fn.bgIframe=$.fn.bgiframe=function(s){if($.browser.msie&&/6.0/.test(navigator.userAgent)){s=$.extend({top:'auto',left:'auto',width:'auto',height:'auto',opacity:true,src:'javascript:false;'},s||{});var prop=function(n){return n&&n.constructor==Number?n+'px':n;},html='<iframe class="bgiframe"frameborder="0"tabindex="-1"src="'+s.src+'"'+'style="display:block;position:absolute;z-index:-1;'+(s.opacity!==false?'filter:Alpha(Opacity=\'0\');':'')+'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+'"/>';return this.each(function(){if($('> iframe.bgiframe',this).length==0)this.insertBefore(document.createElement(html),this.firstChild);});}return this;};})(jQuery);
Sujet clos
Aller à