Menu aves css
Fermé
minoula2006
-
12 déc. 2009 à 10:51
toto1983 Messages postés 205 Date d'inscription samedi 16 mai 2009 Statut Membre Dernière intervention 25 mars 2010 - 14 déc. 2009 à 15:37
toto1983 Messages postés 205 Date d'inscription samedi 16 mai 2009 Statut Membre Dernière intervention 25 mars 2010 - 14 déc. 2009 à 15:37
A voir également:
- Menu aves css
- Menu déroulant excel - Guide
- Windows 11 menu démarrer classique - Guide
- Canon quick menu - Télécharger - Utilitaires
- Réinitialiser menu démarrer windows 10 - Guide
- Menu demarrer windows 10 - Guide
6 réponses
notobe
Messages postés
1952
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
213
12 déc. 2009 à 17:04
12 déc. 2009 à 17:04
Il y a une fermeture de <ul> en trop dans ton code
Sinon, tu peux aller voir par ici : http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
<li> La ville en chiffres</li> </ul> </li> </ul>
Sinon, tu peux aller voir par ici : http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
toto1983
Messages postés
205
Date d'inscription
samedi 16 mai 2009
Statut
Membre
Dernière intervention
25 mars 2010
13
14 déc. 2009 à 13:13
14 déc. 2009 à 13:13
Justement c dans le code html que tout se joue. Le css : feuille de style permet uniquement la mise en forme de tes éventuels menus et sous menus
Voici un exemple :
<div id="menu">
<ul class="niveau1">
<li><a href="menu 1">menu 1</a></li>
<li class="sousmenu"><a href="menu 2">menu 2</a>
<ul class="niveau2">
<li><a href="Sous menu 2.1">Sous menu 2.1</a></li>
<li><a href="Sous menu 2.2/">Sous menu 2.2</a></li>
</ul>
</li>
<li><a href="menu 3">menu 3</a></li>
<li class="sousmenu"><a href="menu 4">menu 4</a>
<ul class="niveau2">
<li class="sousmenu"><a href="Sous menu 4.1">Sous menu 4.1</a>
<ul class="niveau3">
<li><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li>
<li><a href="Sous sous menu 4.1.2">Sous sous menu 4.1.2</a></li>
<li><a href="Sous sous menu 4.1.3">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="Sous menu 4.2">Sous menu 4.2</a></li>
</ul>
</li>
<li><a href="menu 5">menu 5</a></li>
</ul>
</div>
En CSS ça donne ça :
div#menu {
width: 100px;
}
div#menu ul {
padding: 0;
width: 100px;
border:1px solid;
margin:0px;
}
/*On positionne les elements du menu */
div#menu ul li {
position:relative;
list-style: none; /*on enleve les icones de liste */
border-bottom:1px solid; /*ajout d'une bordure de separation d'element:*/
}
div#menu ul ul {
position: absolute;
top: 0;
left: 100px; /*100px correspond au décalage a droite, on décale de la taille du ul de base*/
}
div#menu li a {
text-decoration: none; /* plus de soulignement pour les liens */
}
Voilà ça c un menu.
Par contre comme les autres, si vous y arrivez pas, faudrait voir à nous payer c la crise XD
Concrètement, on veut bien vous aider toussa toussa ... mais bon on a une vie sà mener également avec les responsabilités qui vont bien. Donc vous nous sollicitez c bien ? mais on a pas le beurre et l'argent du beurre.
Faut savoir se fouler de temps en temps : donc une petite recherche sur le Web n'a jamais fait de mal à quiconque.
En + c pas compliqué le html et le css : même un collégien s'en sortirais, je ne connais pas perso ton âge, mais tu es mal barrée pour faire de l'informatique si c que tu veux.
Voilà j'espère que j'ai été clair, je suis pas admin ni modo, mais on est pas à votre place.
Merci
Voici un exemple :
<div id="menu">
<ul class="niveau1">
<li><a href="menu 1">menu 1</a></li>
<li class="sousmenu"><a href="menu 2">menu 2</a>
<ul class="niveau2">
<li><a href="Sous menu 2.1">Sous menu 2.1</a></li>
<li><a href="Sous menu 2.2/">Sous menu 2.2</a></li>
</ul>
</li>
<li><a href="menu 3">menu 3</a></li>
<li class="sousmenu"><a href="menu 4">menu 4</a>
<ul class="niveau2">
<li class="sousmenu"><a href="Sous menu 4.1">Sous menu 4.1</a>
<ul class="niveau3">
<li><a href="Sous sous menu 4.1.1">Sous sous menu 4.1.1</a></li>
<li><a href="Sous sous menu 4.1.2">Sous sous menu 4.1.2</a></li>
<li><a href="Sous sous menu 4.1.3">Sous sous menu 4.1.3</a></li>
</ul>
</li>
<li><a href="Sous menu 4.2">Sous menu 4.2</a></li>
</ul>
</li>
<li><a href="menu 5">menu 5</a></li>
</ul>
</div>
En CSS ça donne ça :
div#menu {
width: 100px;
}
div#menu ul {
padding: 0;
width: 100px;
border:1px solid;
margin:0px;
}
/*On positionne les elements du menu */
div#menu ul li {
position:relative;
list-style: none; /*on enleve les icones de liste */
border-bottom:1px solid; /*ajout d'une bordure de separation d'element:*/
}
div#menu ul ul {
position: absolute;
top: 0;
left: 100px; /*100px correspond au décalage a droite, on décale de la taille du ul de base*/
}
div#menu li a {
text-decoration: none; /* plus de soulignement pour les liens */
}
Voilà ça c un menu.
Par contre comme les autres, si vous y arrivez pas, faudrait voir à nous payer c la crise XD
Concrètement, on veut bien vous aider toussa toussa ... mais bon on a une vie sà mener également avec les responsabilités qui vont bien. Donc vous nous sollicitez c bien ? mais on a pas le beurre et l'argent du beurre.
Faut savoir se fouler de temps en temps : donc une petite recherche sur le Web n'a jamais fait de mal à quiconque.
En + c pas compliqué le html et le css : même un collégien s'en sortirais, je ne connais pas perso ton âge, mais tu es mal barrée pour faire de l'informatique si c que tu veux.
Voilà j'espère que j'ai été clair, je suis pas admin ni modo, mais on est pas à votre place.
Merci
merci de votre aide,en faite je suis pas nulllllll a ce point, et j'ai étudier 2 ans et demis(2003-2006) aprés mon bac de l'informatique a l 'ISETet après j'étais un peu déphasé car j'ai travail dans un domaine qui n'a aucun relation avec le web et tous ce la ,et maintenant je travail dans une municipalité ou je doit refaire leur site web :( alors j'étais obliger de chercher et se rappeler le html et le css et les BD donc l'été un peut perturbé voilaaaa Et en plus si je me suis redresser au forum c parce que j'ai déjà passer des jours et des jours a faire des recherches sur le net et franchement j'ai trouver beaucoup de sites très intéressantes mais malgré ça quand je devait appliquer je me trouve pas dans le bon chemin.
Bon j'ai fait un menu et un sous menu mais mon pb c que le sous menu s'affiche horizontalement au lieu de du verticale c quoi ma faute???
html:
css:
Bon j'ai fait un menu et un sous menu mais mon pb c que le sous menu s'affiche horizontalement au lieu de du verticale c quoi ma faute???
html:
<div id="menu"> <ul> <li><a href="# ">Presentation de la ville </a> <ul> <li>Situation Géographique</li> <li>Histoire de la ville</li> <li>Sites touristique </li> <li> La ville en chiffres</li> </ul> </li> <li><a href="# "> Presentation de la mairie </a> <ul> <li>Date de création</li> <li>Arrandissement Municipaux</li> <li>Conseil municipal </li> <li>Conseil municipal des enfants</li> <li>Services</li> </ul> </li> <li><a href="# ">Réalisations </a></li> <li><a href="# "> Relations entre les citoyens</a></li> <li><a href="# "> Coopération internationnal</a></li> </ul> </div>
css:
#menu { height:50px; } #menu ul { width: 1024px ; padding: 0px ; margin: 0 auto ; list-style-type: none ; /*poue les points de chaque titre (.presentation...) il faut pas qu'elle s'affiche */ text-align:center;} #menu li { margin: auto ; padding: 0 ;/* affichage horizontal */ float: left ; /*pour ne pas qu'ils (li) s'empilent les uns sur les autres, on déclare les différents élément flottants à gauche ,ce qui va permettre aux li suivants d'aller se mettre... à droite*/ background: #3399CC;/*bleu comme l'arriere plan*/ border: 1px solid #006699 ; } #menu li a /*premier vu*/ { float: left ; display:block; /*va permettre de donner une largeur fixe et identique à chaque li*/ width: 200px ; color: #FFFFFF ; padding: 4px 0 ; text-decoration: none ; /* non souligné*/ /* float: left ;*/ } #menu li a:hover /* au clik*/ { color: #030676 ; background: #E1C75B ; } #menu ul li ul { display:none;/*Pour faire disparaître les sous-items, on rajoute un display:none à la sous-liste (on lit en remontant : le ul inclus dans le li du ul du cadre id="menu") */ width: 200px; } #menu ul li:hover ul { display:block; } #menu li:hover ul li { float:none; } #menu li ul { position:absolute; }
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
toto1983
Messages postés
205
Date d'inscription
samedi 16 mai 2009
Statut
Membre
Dernière intervention
25 mars 2010
13
14 déc. 2009 à 15:37
14 déc. 2009 à 15:37
Pas de quoi , tu vois quand on cherche un peu ^^