28173 sujets

CSS et mise en forme, CSS3

Scroll absent dans explorer

bonsoir à tous,
Je suis entrain de mettre au point un menu horizontal déroulant à la position fixe.
Je suis assez content du résultat car je débute complètement en xhtml.
Mais j'ai toutefois un souçis avec des scrolls qui n'apparaissent pas dans explorer.

J'ai déjà bien farfouillé dans les faq et le forum, mais je ne vois pas.
si qqn a une piste voire une solution . . .merci

voici le code xhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AssociationLausanneCapoeira</title>
<link href="css/lignegraph.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
function hover(obj){
  if(document.all){
    UL = obj.getElementsByTagName('ul');
    if(UL.length > 0){
      sousMenu = UL[0].style;
      if(sousMenu .display == 'none' || sousMenu.display == ''){
        sousMenu.display = 'block';
      }else{
        sousMenu.display = 'none';
      }
    }
  }
}
function setHover(){
  LI = document.getElementsByTagName('li');
  nLI = LI.length;
  for(i=0; i < nLI; i++){
    LI[i].onmouseover = function(){
      hover(this);
    }
    LI[i].onmouseout = function(){
      hover(this);
    }
  }
}
</script>
</head>

<body onload="setHover()">
   <div id="menuMobile">
      <ul id="menu">
         <li class="textnav">
         <a class="rubrique" href="#">accueil</a>
         </li>
         <li class="textnav">
         <a class="rubrique" href="#">info pratiques</a>
             <ul>
                <li><a href="#"><span>académie</span></a>
		        </li>
			    <li><a href="#"><span>horaires et tarifs</span></a>
		        </li>
             </ul>
        </li>
          <li class="textnav">
          <a class="rubrique" href="#">capoeira</a>
            <ul>
                <li><a href="#"><span>historique</span></a>
			    </li>
                <li><a href="#"><span>diffusion</span></a>
				</li>
                <li><a href="#"><span>graduation</span></a>
				</li>
                <li><a href="#"><span>uniforme</span></a>
				</li>
                <li><a href="#"><span>travaux d'élèves</span></a>
				</li>
            </ul>
          </li>
		  <li class="textnav">
          <a class="rubrique" href="#">sport et santé</a>
             <ul>
                <li><a href="#"><span>l'apport physique</span></a>
				</li>
                <li><a href="#"><span>sport sans fumée</span></a>
				</li>
                <li><a href="#"><span>satistiques</span></a>
				</li>
			 </ul>
          </li>
		  <li class="textnav">
          <a class="rubrique" href="#">audiovisuel</a>
             <ul>
                <li><a href="#"><span>musiques</span></a>
				</li>
                <li><a href="#"><span>vidéos</span></a>
				</li>
                <li><a href="#"><span>photos</span></a>
				</li>
				<li><a href="#"><span>artwork</span></a>
				</li>
			 </ul>
          </li>
		  <li class="symbols">
          <a href="#" id="francais"><img src="images/bl1.jpg" width="15" height="15" /></a>
	      </li>
		  <li class="symbols">
          <a href="#" id="francais"><img src="images/bl2.jpg" width="15" height="15" /></a>
		  </li>
		  <li class="symbols">
          <a href="#" id="francais"><img src="images/bl3.jpg" width="15" height="15" /></a>
		  </li>
		  <li class="textnav">
          <a href="#" id="francais">admin</a>
		  </li>
      </ul>
   </div>
	
   <div id="contenuPrincipal">
      <div><img src="images/bandesup_01.png" />
	  <div class="contenuTexte">
	  
	  </div>
      </div>
	
   </div>
</body>
</html>


et voici le css:




/* conteneurs généraux*/

html{
  height:100%
}

body{
  background-color:#fef1a3;
  margin:0px;
  padding:0px;
  overflow:hidden;
  height:100%;
}

#menuMobile{
  position:absolute;
  top:165px;
  left:20px;
  height:20px;
  width:700px;
  z-index:3;
}

#contenuPrincipal{
  height:100%;
  overflow:scroll;
}


/*comportement du menu*/

ul#menu li ul{
  display:none;
}

ul#menu li:hover>ul{
  display:block;
}


/*apparence du menu*/

ul#menu{
  height:30px;
  margin:0px;
  padding-left:0px;
  list-style:none;
  background:#F0FC33;
 /* float:left;
  display:inline;*/
  font:12px Verdana;
}




/*apparence des sous-menu*/
a{
  display:block;
  padding:0px 0px;
  color:#000000;
  text-decoration:none;
  text-align:left
}

ul#menu li a.rubrique{
  display:block;
  padding:0px 0px;
  color:#000000;
  text-decoration:none;
  text-align:center;
  
}

ul#menu li{
  background-color:#FFFF00;

  /*float:left;
  display:inline;*/
  display:block;
}

ul#menu li.textnav{
  padding:0px 0px;
  width:13%;
  float:left;
  display:inline;
}

ul#menu li.symbols{
  width:3%;
  padding:0px 0px;
  float:left;
  display:inline;
}



ul#menu li a:hover{
  color:#00FFFF;
}

/*définition blocs au survol*/


ul#menu ul{
  position:absolute;
  top:14px;
  background-color:#F0FC33;
  list-style:none;
  margin:0px;
  padding:0px;
  width:120px;
  z-index:5;
}

ul#menu ul li{
  position:relative;
  float:none;
  margin:0px;
  padding:0px;
  _display:inline;
}

ul#menu ul li a{
  display:block;
  margin:0px;
  padding:0px;
  border:none;
}
ul#menu ul li a span{
  display:block;
  padding:2px 6px;
  margin:0px 2px;
  border:none;
  cursor:hand;
}

/*couleur au survol*/

ul#menu ul li a:hover span{
  background-color:#00FF00;
  color:#FFFFFF;
  border:none;
}

ul#menu ul li.textnav{
  padding-left:0px;
}


/*contenus*/

div.contenuTexte{
  background-color:#e7ce35;
}
[/i][/i]
Sujet clos
Aller à