Problème menu css

kiki7 Messages postés 121 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 - 24 sept. 2009 à 01:24
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 -
Bonjour,
Bonsoir
J'ai un petit souci avec mon menu horizontal en particulier avec mes sous menu.
Je m'explique mon texte que je mets dans mes sous menu sont trop long et il ne s'affiche pas alors j'ai changé height (dd ul li a) : 36px la du coup ça marche je vois tout mais du tous mes sous menu sont agrandis. Comment puije faire afin que les sous menu d'adapte automatique à la longueur du texte.
J'espère que vous m'avez compris je ne suis pas très doué dans le css.
Cependnant je vous transmets le code du fichier style.css et du html

Lorsque je clic sur un des menus le sous menu passe en dessous du calque (layer) la je ne sais pas quoi faire
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 sais que je pose beaucoup de questions j'ai essayé de le faire moi même mais la je coince



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

CSS

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;
}


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>
<body>
<div id="Layer2">gjlkjlfgjlkmjklmdjlkjglkgjfdskljgflkjglfkjlfkgdjlkfgjlkfdgjslkjdfgkljlkfgdj,;:v,bc,lckvjbfgn,klfjkbn,klfjgt,lkjdflmjg,;cx,v;:</div>

<div id="menu">
<dl>
<dt>rrrfrfrfrfr</dt>
<dd>
<ul>
<li><a href="#">Pfgdgfdgfddgf</a></li>
<li><a href="#">fdfgdgdfddf</a></li>
<li><a href="#">fgdfgdS</a></li>
<li><a href="#">fdgdfgdffd</a></li>
<li><a href="#">Lfgdddfgdf</a></li>
<li><a href="#">MOfdgfd gdfgdfdf</a></li>

</ul>
</dd>
</dl> <dl>
<dt>fdsfsf fdsf fsdfsd</dt>
<dd>
<ul>
<li><a href="#">cxvxcvxcv vcxcvxcvcx cvcvcv</a></li>
<li><a href="#">gdfgfd gfdg gfdf df </a></li>
<li><a href="#">dfgdfgdf gfgdfg gfdgfdgE</a></li>
<li><a href="#">fgfdgdfgd gfdgfdgdf</a></li>
<li><a href="#">ttt fgfdgdfgd gfdgdfg</a></li>
</ul>
</dd>
</dl> <dl>
<dt>dteeree eee eeee</dt>
<dd>
<ul>
<li><a href="#">fgdfgdgdfgd</a></li>
<li><a href="#">ggdfgdfgdg gfdgdfgd gfdgdfgdfgd</a></li>
<li><a href="#">fdfdsffds fdsfsdfsdfsd</a></li>
</ul>
</dd>
</dl> <dl>
<dt>ddsq dsqsqd dsqdqdq</dt>
<dd>
<ul>
<li><a href="#">aaaaaaaaaaaaaaa</a></li>
<li><a href="#">aaaaaaaaaaaaaaaaaaaa</a></li>
</ul>
</dd>
</dl> <dl>
<dt>sssssssssssss</dt>
<dd>
<ul>
<li><a href="#">yyyyyyyyyyyyyyyyy yyyyyyyyyyyyyyyyyyy</a></li>
<li><a href="#">aaaaaa</a></li>
<li><a href="#">ssssssssss</a></li>
<li><a href="#">tttttttt</a></li>
<li><a href="#">kkkkkkkkkkkkkkkkk</a></li>
</ul>
</dd>
</dl>
<dl>
<dt>ssssssssssssssss</dt>
<dd>
<ul>
<li><a href="#">ydfdfsfdsfsdfsfdsf</a></li>
<li><a href="#">yyyyyyyyy</a></li>
</ul>
</dd>
</dl> <dl>
<dt>fsdfsdfsd</dt>
<dd>
<ul>
<li><a href="#">fdsfdsfssfsdsdssd</a></li>
<li><a href="#">sdfsdfsdfsdff</a></li>
</ul>
</dd>
</dl> <dl>
<dt>dfdfdssdfd</dt>
<dd>
<ul>
<li><a href="#">tfsdfsdfsdfsdfsfsd</a></li>
<li><a href="#">sdfsdfsfdsssfdssdsd</a></li>
</ul>
</dd>
</dl>
</div>




<div id="Layer1"></div>
</body>
A voir également:

14 réponses

M@dien Messages postés 437 Date d'inscription mercredi 29 juillet 2009 Statut Membre Dernière intervention 23 septembre 2010 74
24 sept. 2009 à 09:31
Bonjour,

Tu n'étais pas loin de la solution:
dd ul li{
display:block;
width:150px;
margin:0; padding:0;
}
dd ul li a{
color:#000000;
display:block;
text-decoration:none;
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;
}


Les changements: suppression de la hauteur fixe des liens.
limitation des <li> et non des <a>. les
2
kiki7 Messages postés 121 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 3
1 oct. 2009 à 01:15
Bonsoir
Finalement j'ai réussit à faire ce que je voulais pour mes sous menu et les problème de calque j'ai attribuer une couleur ( blanc) et z-index:1000 que j'ai rajouté.

Mais malheureusement d'autres problème surgissent
Mon menu est incompatible avec internet explorer j'ai surfer sur le net mais je ne sais pas comment procéder.

Ensuite j'ai mis dans ma feuille style pour mettre un background mais il le fait sur tous les boutons de mon menu et moi je voudrais mettre une couleur différentes a chaque bouton de mon menu il faut mettre une class ? mais comment procéder?

dl:hover dt{

}

S'il vous plait aidez moi
Je vous remercie d'avance
Mes code html et css sont dans le premier message
Merci
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 131
1 oct. 2009 à 09:36
Attention, z-index foireux sous IE6... et pas terrible sous IE7 !

Et pour les couleurs, oui il te faut des classes, 1 classe par couleur...
0
kiki7 Messages postés 121 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 3
1 oct. 2009 à 14:30
Bonjour
Merci de votre réponse
Mais comment ajouter une class dans mon css et dans mon html ( voir la première réponse il y les codes css et html) je ne fais pas exprès je ne sais pas ou placer.
aidez moi s' vous plait.

Merci de votre compréhension
A bientôt
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 131
1 oct. 2009 à 15:21
En dessous de <style type="text/css">, tu places ceci : (il s'agit d'un exemple !)
a.couleur1 { background:#123456; }
a.couleur2 { background:#234567; }

etc pour les autres couleurs !

Attention, mettre ta/tes couleurs au format RGB (ex blanc=FFFFFF).

Ensuite, dans l'html de tes liens tu rajoutes class="couleur1" etc...
Ex:
<li><a class="couleur1" href="#">cxvxcvxcv vcxcvxcvcx cvcvcv</a></li>
<li><a class="couleur2" href="#">gdfgfd gfdg gfdf df </a></li>

Compris ? ;)
0
kiki7 Messages postés 121 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 3
2 oct. 2009 à 00:28
Bonsoir
Merci de ta réponse
J'ai bien fait ce que tu m'as dit et ça ne marche .
Merci beaucoup
En fait je voulais la couleur juste quand la souris passe dessus il me semble que c'est l'option onmouseover
Comment l'appliquer?
J'ai un autre problème sous ie il y a juste les bouton menu mais pas les sous menus je pense que c'est à cause du z-index Existe il un code pour contrer le z-index?

Je vous remercie beaucoup beaucoup de votre aide précieuse
A bientôt
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 131
2 oct. 2009 à 10:11
Pour ce qui est du z-index c'est un peu compliqué... en général soit on fait tout pour ne pas s'en servir ou alors on le passe par le javascript... ça ne règle pas tout mais c'est déjà plus "passable". Celà sous-entend aussi que le site est prévu pour fonctionner sans !

Pour ce qui est du roll-over, tu peux le faire via le css et la balise a et la pseudo-classe css :hover (car IE ne l'accepte que sur la balise a).
Donc tu dois juste faire un "état" over comme ceci : a.couleur1:hover {[...]}

Bon boulot ! :D
0
kiki7 Messages postés 121 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 3
4 oct. 2009 à 17:09
Bonjour
j'ai fait une superbe boulette dans ma page html
J'ai oublié de mettre ceci au début de ma page

<!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">

et du coup mon menu horizontal bouge elle n'est pas fixe juste quand la souris passe dessus elle prend la taille normal et en sur sur ie c'est pareille et cerise sur le gâteau j'ai vu mes sous menu
Que faire ? je vais essayé pleins de choses si quelqu'un peux m'aider vous êtes le bienvenu je suis presque au bout de mes problèmes
Merci
0
kiki7 Messages postés 121 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 3
5 oct. 2009 à 01:33
Bonsoir,
J'ai trouvé la solution j'ai mal copié le code doctype et le lien avec ma feuille style n'était pas le bon
et cerise sur le gâteau ça marche avec ie cool !!!!!
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
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 131
5 oct. 2009 à 15:41
J'ai été voir sur ton lien... mais je ne vois pas du tout ce que tu veux dire... quel effet souhaites-tu ?

0
kiki7 Messages postés 121 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 3
5 oct. 2009 à 20:28
Bonsoir
En fait lorsque l'on clic sur l'une des séries, divertissements...... il y a un tableau qui descend et j'aimerai faire la même chose
j'ai cherché sur le net j'ai pas trouvé
Merci de votre réponse et votre aide
A bientôt
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 131
5 oct. 2009 à 20:43
Ah ok, tu peux facilement créer cet effet avec jquery... un exemple sur ce site : http://www.destress.be/page/home-new

exemple rapide:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // On cache les contenus :
  $('div.box').hide();
  // Curseur main sur les h4
  $('h4').css('cursor','pointer');
  
  $('h4.more').click(function(){
    //si ouvert -> referme
    if($(this).next('div.box:visible').length!=0){
      $(this).next('div.box').slideUp('normal');
    }
    //si caché, on ferme les autres et on affiche
    else {
      //cache
      $('div.box').slideUp('normal');
      //montre
      $(this).next('div.box').slideDown('normal');
    }
    return false;
  });
</script>
</head>

<body>
<h4>ici, titre, mais peut être n'importe quoi !(span, a, h1, strong, em, img, div, ...)</h4>
<div class="box">
 contenu dans "l'accordéon"
</div>


Voilà, bien sur il faut avoir télécharger la librairie jquery sur le site : www.jquery.com, ensuite le placer dans un répertoire et l'inclure dans la page.

Bon boulot ! :D
0
kiki7 Messages postés 121 Date d'inscription mardi 12 octobre 2004 Statut Membre Dernière intervention 8 juillet 2012 3
9 oct. 2009 à 02:18
Bonsoir
Merci pour votre réponse
Mais je ne suis pas arrivé à faire ce que vous m'avez demandé.
C'est compliqué pour moi
J'ai encore besoin de votre aide
S'il vous plait
Merci d'avance
A bientôt
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 131
15 oct. 2009 à 11:42
Qu'est-ce que tu ne comprends pas ? Qu'as-tu comme résultat ?

J'attends tes questions.
0