Pages :: 1
Rebonjour,
j'ai utilisé votre menu déroulant suivant:
http://www.tuto-fr.com/tutoriaux/menu-d … page_5.php
Après deux jours de tâtonnements, je crois enfin avoir réussi à atteindre le résultat visuel correct
sous firefox et IE
pouvez-vous me dire si cela vous pourrez correct techniquement dans les codes
pour décaler, adapter ou centrer la liste des UL j'ai rajouté un div à l'intérieur du div menu, et
pour me simplifier les choses, j'ai superposé deux Div différents pour mon menu en deux colonnes
horizontales
<div id="menu2">
<div class="adaptermenu2">
<?php
include("menu2.php");
?>
</div>
</div>
<div id="menu">
<div class="adaptermenu">
<?php
include("menu.php");
?>
</div>
</div>
LES DEUX CSS POUR CHAQUE COLONNE HORIZONTALE DE MES DEUX DIV MENU SONT PRESQUE IDENTIQUE
CSS
div#menu{width:67%; margin: auto;/*margin-bottom: 40px*/background: #CCCCCC; height: 29px;}
div#menu a {color:#000000;font-weight: bold; font-size: 13px; font-family: Times New Roman, Arial, serif, Georgia; font-style: normal;}
div#menu ul {padding: 0; margin:0; background: white; text-align:center;}
div#menu li {background:#CCCCCC}
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}
/* rajout couleure de fond */
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat; background-color:#CCCCCC}
/* rajout pr pour flèche direction bas et couleur de fond*/
div#menu li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;}
/* une petite bordure en top*/
div#menu ul li {position:relative; list-style: none; float:left; border-top:1px solid black}
div#menu ul ul {position: absolute; display:none; width:60px;}
div#menu li a {text-decoration: none; padding: 6px 0 6px; display:block;width:60px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu ul.niveau3 {top:-1px; left: 60px;}
/* rajout de couleures de fond et de survol */
div#menu ul.niveau3 li { background: #99CCCC}
div#menu ul.niveau3 li:hover { background: #99CC00}
/*LARGEUR DES SOUS-LISTES (2èmes case) DU MENU VERTICAL*/
div#menu ul.niveau2 ul {left: 8em;}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2 {width:8em; display:block;}
div#menu ul.niveau2 li a {width: 8em;}
/*LARGEUR DES SOUS-LISTES (3ème case) DU MENU VERTICAL*/
div#menu ul.niveau3 ul {left: 24em;}
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {width: 24em; display:block;}
div#menu ul.niveau3 li a {width: 24em;}
/*LARGEUR DES SOUS-LISTES (4ème case) DU MENU VERTICAL*/
div#menu ul.niveau4 ul {left: 24em;}
div#menu ul.niveau3 li.sousmenu:hover ul.niveau4 {width: 14em; display:block;}
div#menu ul.niveau4 li a {width: 14em;}
div#menu ul.niveau2 a {width: inherit;} /* width inherit empêche le texte du lien de la sous-liste (2ème case) de
dépasser la largeur définit des UL, ça veut dire que si l'on veut ralonger le texte sans qu'il aille à la ligne,
il est nécessaire d'augmenter la largeur de l'UL*/
div#menu ul.niveau1 a {width: inherit; margin-right: 0.98em;}
.adaptermenu2
{margin-left: 7%}
.adaptermenu
{margin-left: 15%}
div#menu2{width:67%; margin: auto;/*margin-bottom: 1px*/background: #CCCCCC; height: 29px;}
div#menu2 a {color:#000000;font-weight: bold; font-size: 13px; font-family: Times New Roman, Arial, serif, Georgia; font-style: normal;}
div#menu2 ul {padding: 0; margin:0; background: white; text-align:center;}
div#menu2 li {background:#CCCCCC}
div#menu2 li:hover {background: #EDD}
div#menu2 li.sousmenu:hover {background: #EBB;}
/* rajout couleure de fond */
div#menu2 li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat; background-color:#CCCCCC}
/* rajout pr pour flèche direction bas et couleur de fond*/
div#menu2 li.plop { background:url(fleche2.gif) 95% 50% no-repeat #CCCCCC;}
/* une petite bordure en top*/
div#menu2 ul li {position:relative; list-style: none; float:left;/*border-top:1px solid*/}
div#menu2 ul ul {position: absolute; display:none; width:60px;}
div#menu2 li a {text-decoration: none; padding: 6px 0 6px; display:block;width:60px; color: #26157E;}
div#menu2 ul.niveau1 li.sousmenu:hover ul.niveau2,
div#menu2 ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}
div#menu2 ul.niveau3 {top:-1px; left: 60px;}
/* rajout de couleures de fond et de survol */
div#menu2 ul.niveau3 li { background: #99CCCC}
div#menu2 ul.niveau3 li:hover { background: #99CC00}
/*LARGEUR DES SOUS-LISTES (2èmes case) DU MENU VERTICAL*/
div#menu2 ul.niveau2 ul {left: 8em;}
div#menu2 ul.niveau1 li.sousmenu:hover ul.niveau2 {width:8em; display:block;}
div#menu2 ul.niveau2 li a {width: 8em;}
/*LARGEUR DES SOUS-LISTES (3ème case) DU MENU VERTICAL*/
div#menu2 ul.niveau3 ul {left: 24em;}
div#menu2 ul.niveau2 li.sousmenu:hover ul.niveau3 {width: 24em; display:block;}
div#menu2 ul.niveau3 li a {width: 24em;}
/*LARGEUR DES SOUS-LISTES (4ème case) DU MENU VERTICAL*/
div#menu2 ul.niveau4 ul {left: 24em;}
div#menu2 ul.niveau3 li.sousmenu:hover ul.niveau4 {width: 14em; display:block;}
div#menu2 ul.niveau4 li a {width: 14em;}
div#menu2 ul.niveau2 a {width: inherit;} /* width inherit empêche le texte du lien de la sous-liste (2ème case) de
dépasser la largeur définit des UL, ça veut dire que si l'on veut ralonger le texte sans qu'il aille à la ligne,
il est nécessaire d'augmenter la largeur de l'UL*/
div#menu2 ul.niveau1 a {width: inherit; margin-right: 0.98em;}
Dernière modification par nonogemeaux (15-04-2011 13:04:40)
Hors Ligne
Bonjour à tous,
et meilleurs vœux !
Je suis en train de faire un site internet, je suis au tout début... et novice...
Donc je m'essaie à quelques exercices, notamment à celui de savoir créer un menu déroulant horizontal
J'utilise Kompozer et j'ai suivi votre "tutorial menu déroulant en css".
Je commence à entrevoir quelques principes entre html et css.
Mon soucis est qu'à partir du moment où l'on doit utiliser le fichier csshover.htc je bug !
Je n'arrive pas à l'intégrer, à savoir où et comment le mettre dans le css (vu que j'utilise un logiciel "intuitif")
Sauriez-vous me donnée un coup de pouce ?
Ririna.
Hors Ligne
Pages :: 1
Discussion | Réponses | Vues | Dernier message |
---|---|---|---|
besoin d'aide par ange
|
1 | 1769 | 26-03-2013 17:11:54 par ange |
1 | 1749 | 12-11-2012 02:41:30 par Azathoth | |
urgent besoin d un tuto plus explicite svp par lily41fr
|
0 | 2375 | 12-03-2011 20:24:36 par lily41fr |
Problème de plaçage de menu par koni41
|
0 | 4051 | 08-01-2011 05:59:59 par koni41 |
2 | 2907 | 11-06-2010 18:56:24 par metis15 |