Problème menu horizontal

kiki117 Messages postés 12 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 9 octobre 2009 - 22 sept. 2009 à 09:19
kiki117 Messages postés 12 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 9 octobre 2009 - 5 oct. 2009 à 01:49
Bonsoir

J'ai un petit souci avec mon menu horizontal


Lorsque je clic sur un des menus le sous menu passe en dessous du calque (layer) et j'aimerai qu'il passe dessus j'ai cherché via google pas de solution.

Une autre question je veux que lorsque je clic sur chaque menu je veux une couleur différente de chaque menu .est ce que ça avoir avec dt dans la feuille style.css?

Je pose beaucoup de questions j'ai essayé de le faire moi même mais la je coince.

Je vous remercie d'avance
A bientôt

Je vous remercie d'avance
Aurevoir et à bientôt


je vous transmets le code du fichier style.css et html

Code C/C++ :


body{
background:#FFFFFF;
}
#menu{
background:#FFFFFF;
height:20px;
position:relative;
font-family:verdana,ms sans serif,georgia,helvetica,arial;
font-size:10px;

}
#menu{
position:absolute;

}
dl{
height:20px;
margin:0; padding:1px;
display:block;
float:left;
font-family:verdana,ms sans serif,georgia,helvetica,arial;
font-size:10px;
}
dt{
width:150px;
display:block;
height:20px;
color:#000000;
line-height:20px;
text-align:center;
BORDER-TOP:#CCCCCC 1px solid;
BORDER-RIGHT:#CCCCCC 1px solid;
BORDER-BOTTOM:#CCCCCC 1px solid;
BORDER-LEFT:#CCCCCC 1px solid;
cursor:hand;
color:#000000;
}
dd{
display:block;
margin:auto;padding:auto;
background:#FFFFFF;
}
dd ul{
margin:0; padding:0 ;
text-align:center;
list-style:none;
}
dd ul li{
display:block;
margin:0; padding:0;
}
dd ul li a{
color:#000000;
display:block;
width:100%;
text-decoration:none;
width:150px;
height:36px;
list-style-type:none;
line-height:20px;
BORDER-TOP:#C0C0C0 1px solid;
BORDER-RIGHT:#C0C0C0 1px solid;
BORDER-BOTTOM:#C0C0C0 1px solid;
BORDER-LEFT:#C0C0C0 1px solid;
}
dd ul li a:hover{
background:#FFFFFF;
}
dl dd{
display:none;
}
dl:hover dd{
display:block;
}


Fichier html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:1px;
top:0px;
width:1275px;
height:64px;
z-index:1;
border: thin solid #CCCCCC;
}
#Layer2 {
position:absolute;
left:71px;
top:152px;
width:1179px;
height:189px;
z-index:2;
border: medium solid #CCCCCC;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>


gjlkjlfgjlkmjklmdjlkjglkgjfdskljgflkjglfkjlfkgdjlkfgjlkfdgjslkjdfgkljlkfgdj,;:v,bc,lckvjbfgn,klfjkbn,klfjgt,lkjdflmjg,;cx,v;:




* rrrfrfrfrfr :

<li>Pfgdgfdgfddgf</li>
<li>fdfgdgdfddf</li>
<li>fgdfgdS</li>
<li>fdgdfgdffd</li>
<li>Lfgdddfgdf</li>
<li>MOfdgfd gdfgdfdf</li>

* fdsfsf fdsf fsdfsd :

<li>cxvxcvxcv vcxcvxcvcx cvcvcv</li>
<li>gdfgfd gfdg gfdf df </li>
<li>dfgdfgdf gfgdfg gfdgfdgE</li>
<li>fgfdgdfgd gfdgfdgdf</li>
<li>ttt fgfdgdfgd gfdgdfg</li>

* dteeree eee eeee :

<li>fgdfgdgdfgd</li>
<li>ggdfgdfgdg gfdgdfgd gfdgdfgdfgd</li>
<li>fdfdsffds fdsfsdfsdfsd</li>

* ddsq dsqsqd dsqdqdq :

<li>aaaaaaaaaaaaaaa</li>
<li>aaaaaaaaaaaaaaaaaaaa</li>

* sssssssssssss :

<li>yyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyyy</li>
<li>aaaaaa</li>
<li>ssssssssss</li>
<li>tttttttt</li>
<li>kkkkkkkkkkkkkkkkk</li>


* ssssssssssssssss :

<li>ydfdfsfdsfsdfsfdsf</li>
<li>yyyyyyyyy</li>

* fsdfsdfsd :

<li>fdsfdsfssfsdsdssd</li>
<li>sdfsdfsdfsdff</li>

* dfdfdssdfd :

<li>tfsdfsdfsdfsdfsfsd</li>
<li>sdfsdfsfdsssfdssdsd</li>

3 réponses

BunoCS Messages postés 15476 Date d'inscription lundi 11 juillet 2005 Statut Modérateur Dernière intervention 3 mai 2024 103
22 sept. 2009 à 09:25
Hello,
Déjà, cela n'a rien a voir avec un Bug de Codes Sources: attention à la rubrique dans laquelle tu postes. De plus, le "code" que tu donnes n'est pas du C/C++ mais c'est une feuille de style CSS.
Je pense que pour faire ce que tu veux, un coup de javascript est nécessaire.

Si un admin passes par là: topic à déplacer dans la partie javascript


@+
Buno
----------------------------------------
L'urgent est fait, l'impossible est en cours. Pour les miracles, prévoir un délai...
0
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
22 sept. 2009 à 10:16
Bonjour,
une histoire de z-index ?

#Layer1 {
position:absolute;
left:1px;
top:0px;
width:1275px;
height:64px;
border: thin solid #CCCCCC;
}
#Layer2 {
position:absolute;
left:71px;
top:152px;
width:1179px;
height:189px;
border: medium solid #CCCCCC;
}
...
dd ul li{
display:block;
margin:0; padding:0;
background-color:#FFFF00;
z-index:5;
}

Cordialement [mon Site] [M'écrire] Bul
0
kiki117 Messages postés 12 Date d'inscription vendredi 24 octobre 2008 Statut Membre Dernière intervention 9 octobre 2009
5 oct. 2009 à 01:49
Bonsoir,
J'ai trouvé la solution j'ai rajouté z-index 1000 dans ma feuille style j'ai rajouté le code doc type et le lien avec ma feuille style n'était pas le bon.
et cerise sur le gâteau ça marche avec ie cool !!!!!
Au niveau des couleurs sur chaque bouton menu lors du survol de la souris j'ai rajouté:
[code=html]
dt.couleur1:hover { background:#F6E8B1; }
<dt class="couleur1" href="#">truc
</dt>/code 


Merci de votre aide !!!!
Cependant j'enchaine avec autre chose j'aimerai faire une chose que j'ai vu sur ce site http://television.telerama.fr/tele/grillefree.php

C'est à dire dès que je clic sur un lien il y a fenêtre ou tableau qui descend vers le bas est ce possible en css ou javascsript ?
Comment procéder


Merci Merci beaucoup
0
Rejoignez-nous