Bonjour à tous,
Nouveau venu dans le CSS, je m'essaie sur un site entièrement en CSS.
J'ai un problème sous IE avec mon menu deroulant. il se rectracte lorque je le survole (je pense que c'est du au fait qu'il est déroulé par dessus du texte). J'ai essayé en mettant un z-index supérieur sur le menu mais rien n'y fait.
Je pense que c'est du à un problème de positionnement absolu (?)
En espérant être dans la bonne rubrique, je remercie d'avance tous ceux qui consacreront un peu de temps pour m'aider
le code HTML:
et le CSS qui va avec :
MERCI[/i][/i]
Nouveau venu dans le CSS, je m'essaie sur un site entièrement en CSS.
J'ai un problème sous IE avec mon menu deroulant. il se rectracte lorque je le survole (je pense que c'est du au fait qu'il est déroulé par dessus du texte). J'ai essayé en mettant un z-index supérieur sur le menu mais rien n'y fait.
Je pense que c'est du à un problème de positionnement absolu (?)
En espérant être dans la bonne rubrique, je remercie d'avance tous ceux qui consacreront un peu de temps pour m'aider
le code HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Essai CSS</title>
<link href="style.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.getElementById('menu').getElementsByTagName('li');
nLI = LI.length;
for(i=0; i < nLI; i++){
LI[i].onmouseover = function(){
hover(this);
}
LI[i].onmouseout = function(){
hover(this);
}
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onLoad="javascript:setHover()">
<div id="global">
<div class="entete">
Banniere
</div>
<div class="contenu">
<div class="gauche">
Gauche
<hr/>
</div>
<div class="centre">
<div style="float:right">
<ul id="menu" >
<li class="first"><a href="#">Menu 1</a>
<ul>
<li class="first"><a href="#"><span>item 11</span></a></li>
<li><a href="#"><span>item 12</span></a></li>
<li class="last"><a href="#"><span>item 13</span></a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li class="first"><a href="#"><span>item 21</span></a></li>
<li><a href="#"><span>item 22</span></a></li>
<li class="last"><a href="#" class="next"><span>item 23</span></a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li class="first"><a href="#"><span>item 31</span></a></li>
<li><a href="#"><span>item 32</span></a></li>
<li class="last"><a href="#" class="next"><span>item 33</span></a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul>
<li class="first"><a class="next" href="#"><span>item 41</span></a></li>
<li><a class="next" href="#"><span>item 42</span></a></li>
<li class="last"><a class="next" href="#"><span>item 43</span></a></li>
</ul>
</li>
<li><a href="#">Menu 5</a>
<ul>
<li class="first"><a class="next" href="#"><span>item 51</span></a></li>
<li><a class="next" href="#"><span>item 52</span></a></li>
<li class="last"><a class="next" href="#"><span>item 53</span></a></li>
</ul>
</li>
</ul>
<p>CENTRE eqrhgierhgoeqjrcolgsroreu<br/>
zerficeorfjcoieufiejudisu
qzerkfjhqosvqjuhjebrvbeurfeufjhfjuhj<br/>
relgfjherfhuehfrfheirouferifjeriujf
</p>
</div>
</div>
</div>
</div>
</body>
</html>
et le CSS qui va avec :
/* CSS Document */
body {
margin: 0; /* sans marges, la page sera collée aux bords */
font-family: verdana, arial, sans-serif; /* on définit la police de base dans la page*/
font-size: 12px; /* on définit la taille de police de base dans la page */
}
#global {
position:absolute;
left: 50%;
top: 50%;
width: 770px;
height: 550px;
margin-left: -385px;
margin-top: -275px;
border: 1px solid #CCF ;
}
.entete {
background-color: #336699;
width: 770px;
height: 125px;
-moz-border-radius:12px;
border-radius:12px;
}
.menu{
float:right;
background-color: #FFFF66;
width: 620px;
height: 25px;
margin-top: 0px;
}*/
.contenu {
background-color: #FFF;
width: 770px;
height: 425px;
}
.gauche {
background-color: #6699FF;
float: left;
width: 150px;
height: 425px;
color: #FFF;
}
.centre {
margin-left: 150px;
}
.pied {
background-color: #CCF;
width: 770px;
height: 50px;
}
.logo {
float: left; /* alignement du logo à gauche */
margin-right: 10px; /* placement du logo dans son conteneur, head1 */
margin-top: 3px;
border: 0;
}
hr {
margin-left:5px;
margin-right:5px;
}
/********************* Menu CSS *************************/
ul#menu li ul{
display:none;
}
ul#menu li:hover>ul{
display:block;
}
ul#menu{ /* Conteneur du menu */
margin:0px;
padding:0px;
list-style:none;
width:100%;
background:#FFFF00;
float:right;
font-family: verdana, arial, sans-serif;
font-size: 12px;
}
ul#menu li{ /* Conteneur de chaque rubrique principale */
float:left;
display:block;
padding:2px 2px; /* Remplissage des bords (haut/bas et gauche/droite) */
width:120px;
_width:120px; /* spécification pour IE*/
background:#FFFF00;
}
ul#menu li.first{
padding-left:2px;
}
ul#menu li.last{
padding-right:2px;
}
ul#menu li a{ /* Texte de la rubrique ppale */
display:block;
padding:2px 6px; /* Remplissage des bords (haut/bas et gauche/droite) */
border:1px outset #FFFFFF; /* largeur style couleur des 4 cotés */
color:#003366;
text-align:center;
text-decoration:none;
}
ul#menu li a:hover{ /* Survol de la rubrique ppale */
/*border-top-color:#F0F0F0;
border-left-color:#F0F0F0;
border-right-color:#999999;
border-bottom-color:#999999;*/
background:#6699FF;
/*border:1px outset #999966; largeur style couleur des 4 cotés */
}
ul#menu ul{ /* Rubrique secondaire*/
position:absolute;
/*background: url(Images/m1.gif) repeat-y -160px 0%;*/
list-style:none;
margin:0px;
padding:0px;
width:110px;
z-index:10;
}
ul#menu ul li{
position:relative;
float:none;
margin:0px;
padding:0px;
_display:inline;
}
ul#menu ul li a{ /* Texte de la rubrique secondaire */
display:block;
margin:0px;
padding:0px;
width:110px;
border:none;
text-align:left;
}
ul#menu ul li a:hover{
background-color:#6699FF;
}
ul#menu ul li a span{
display:block;
/* width:144px;*/
width:96px;
/* _width:156px;*/
_width:110px;
padding:2px 6px;
border:none;
cursor:hand;
}
ul#menu ul li a:hover span{
/*background-color:#003366;*/
color:#FFFF00;
border:1px outset #999966; /* largeur style couleur des 4 cotés */
}
ul#menu ul li.first{
padding-left:0px;
}
ul#menu ul li.first a{
padding-top:2px;
/*background: url(../MenuJava/imgmenuencascade/m1.gif) no-repeat -320px 0%;*/
/*background: url(Images/m1.gif) no-repeat -320px 0%;*/
}
ul#menu ul li.last{
padding-right:0px;
}
ul#menu ul li.last a{
padding-bottom:2px;
/*background: url(../MenuJava/imgmenuencascade/m1.gif) no-repeat left bottom;*/
/*background: url(Images/m1.gif) no-repeat left bottom;*/
}
.spacer {clear:both; visibility:hidden;}MERCI[/i][/i]