Bonjour à toutes et tous,
Je suis novice et je viens vers vous parce que je me casse la tête sur un menu de navigation.
Les premiers sont gentillement alignées horizontalement l'un à côté de l'autre, impecc.
Le dernier niveau de navigation pour chaque onglet doit être aligné verticalement.
Et là je m'emmêle les pinceaux. Dois-je utiliser clear? À force de chercher, je ne sais plus du tout quelle propriété display, je dois utiliser. Quelqu'un peut-il m'aider?
Voici le code de ce menu que j'intègre dans mes pages grâce à un "include "en php.
Partie HTML
Parie CSS
D'avance, je vous remercie de votre réponse qui, j'en suis certaine va me permettre de progresser! Yesssss!
Je suis novice et je viens vers vous parce que je me casse la tête sur un menu de navigation.
Les premiers sont gentillement alignées horizontalement l'un à côté de l'autre, impecc.
Le dernier niveau de navigation pour chaque onglet doit être aligné verticalement.
Et là je m'emmêle les pinceaux. Dois-je utiliser clear? À force de chercher, je ne sais plus du tout quelle propriété display, je dois utiliser. Quelqu'un peut-il m'aider?
Voici le code de ce menu que j'intègre dans mes pages grâce à un "include "en php.
Partie HTML
<nav class="navbar" id="topmenu">
<ul><!--menu principal-->
<li><a href="index.php">Accueil</a></li><p class="slash"> / </p><!--niveau 1/Acceuil-->
<li><a href="actualites.php">Actualité</a></li><p class="slash"> / </p><!--niveau 1/Actualités--->
<li><a href="#">Atelier</a><!--niveau 1/Atelier-->
<ul><!--niveau 2/Atelier-->
<li><a href="atelier.php" id="">L'atelier</a></li>
<p class="slash"> / </p>
<li><a href="pourquoi.php" id="">Cairn ?</a></li>
<p class="slash"> / </p>
<li><a href="equipe.php" id="">L'équipe</a></li>
<p class="slash"> / </p>
<li><a href="profils.php" id="">Profils</a></li>
<p class="slash"> / </p>
<li><a href="contact.php" id="">Contact</a></li>
<p class="slash"> / </p>
<li><a href="publications.php" id="">Publications</a></li>
</ul><!--/atelier-->
</li>
<p class="slash"> / </p>
<li><a href="projets.php">Projets</a><!--Projets/niveau 1-->
<ul><!--Projets/niveau 2-->
<li><a href="culte.php" id="">Cultes</a>
<ul><!--niveau 3/liste cultes / à mettre en liste verticale-->
<li><a href="#" class="nivo">Cathédrale St Cyr et Ste Juliette / Nevers</a></li>
<li><a href="#" class="nivo">Chapelle ND Libératrice / Salins-les-Bains</a></li>
<li><a href="#" class="nivo">Cathédrale St Pierre / Saint-Claude</a></li>
<li><a href="#" class="nivo">Église coparoissiale / Saint -Hymethière</a></li>
<li><a href="#" class="nivo">Église St-Valère / Goux-les-Usiers</a></li>
<li><a href="#" class="nivo">Église Ste-Bernadette du Banlay / Nevers</a></li>
</ul><!--/liste culte-->
</li>
<p class="slash"> / </p>
<li><a href="culturel.php" id="">Culturel</a><!--Projets/niveau 2-->
<ul><!--Projets/niveau 3-->
<li><a href="archeo.php" id="">Archéologie</a>
<ul><!--niveau 4/liste archéologie/ à mettre en liste verticale-->
<li><a href="#" class="nivo">Site archéologique de Bibcrate / Mont-Beuvray</a></li>
<li><a href="#" class="nivo">Ancien palais abbatial / Saint-Claude</a></li>
<li><a href="#" class="nivo">La Porte Noire / Besançon</a></li>
<li><a href="#" class="nivo">Ancien prieuré / La Charité-sur-Loire</a></li>
</ul><!--/liste archeo-->
</li><!--/archéologie-->
<p class="slash"> / </p>
<li><a href="sceno.php" id="">Scénographies</a>
<ul><!--niveau 4/liste sceno/à mettre en liste verticale-->
<li><a href="#" class="nivo">Musée National du Moyen-Âge / Paris </a></li>
<li><a href="#" class="nivo">Musée National du Moyen-Âge </a></li>
<li><a href="#" class="nivo">Château de Maulnes / Cruzy-le-Chatel</a></li>
<li><a href="#" class="nivo">Musée municipal / Montauban</a></li>
<li><a href="#" class="nivo">Musée national / Meudon</a></li>
<li><a href="#" class="nivo">Musée départemental / Chambéry</a></li>
</ul><!--/liste sceno-->
</li><!--/scénographie-->
<p class="slash"> / </p>
<li><a href="theatre.php" id="">Théâtres</a>
<ul><!--niveau 4/liste théâtre/à mettre en liste verticale-->
<li><a href="#" class="nivo">Ancien prieuré / La Charité-sur-Loire</a></li>
<li><a href="#" class="nivo">Théâtre municipal / Gray</a></li>
<li><a href="#" class="nivo">Forge royale de la Chaussade / Guérigny</a></li>
<li><a href="#" class="nivo">Théâtre municipal / Le Puy-en-Velay</a></li>
</ul><!--/liste théâtre-->
</li><!--/théâtres-->
<p class="slash"> / </p>
<li><a href="fortif.php" id="">Fortifications</a>
<ul><!--niveau 4/liste fortif/à mettre en liste verticale-->
<li><a href="#" class="nivo">Fort de Joux, fortifications / La Cluse-et-Mijoux</a></li>
<li><a href="#" class="nivo">Fort de Joux, fortifications 2 / La Cluse-et-Mijoux</a></li>
<li><a href="#" class="nivo">Fort de Joux, musée / La Cluse-et-Mijoux</a></li>
<li><a href="#" class="nivo">Citadelle / Besançon</a></li>
<li><a href="#" class="nivo">Quai de la gare d'eau / Besançon</a></li>
</ul><!--/liste fortif-->
</li><!--/fortifications-->
</ul><!-- / niveau 3/Projets-->
</li>
<p class="slash"> / </p>
<li><a href="contemporain.php" id="">Contemporain</a>
</li><!--niveau 2-->
<p class="slash"> / </p>
<li><a href="institutionnel.php" id="">Institutionnels</a>
</li><!--niveau 2-->
<p class="slash"> / </p>
<li><a href="habitat.php" id="">Demeures</a>
</li><!--niveau 2-->
<p class="slash"> / </p>
<li><a href="public.php" id="">Extérieurs</a>
<ul><!--niveau 3/liste public/à mettre en liste verticale-->
<li><a href="#" class="nivo">Pont sur la Loire / La-Charité-sur-Loire</a></li>
<li><a href="#" class="nivo">Site classé de Brancion / Martailly-les-Brancion</a></li>
<li><a href="#" class="nivo">Site classé des cascades du Ray-Pic / Péreyres</a></li>
<li><a href="#" class="nivo">Ancien prieuré / La Charité-sur-Loire</a></li>
<li><a href="#" class="nivo">Pont de Noirfonds / Saint-Pierre d'Entremont</a></li>
</ul><!--/liste public-->
</li><!--niveau 2-->
</ul><!-- / niveau 2/Projets-->
</li><!-- / niveau 1/Projets-->
<p class="slash"> / </p>
<li><a href="faire.php">Savoir-faire</a></li><!--niveau 1-->
<p class="slash"> / </p>
<li><a href="abcdaire.php">Abécédaire</a></li><!--niveau 1-->
<p class="slash"> / </p>
<li><a href="extranet.php">Extranet</a></li><!--niveau 1-->
</ul><!--/menu principal-->
</nav>
Parie CSS
.navbar ul {
position:relative;
float:right;
width:73%;
list-style:none outside none;
display:table;
font-family:verdana;
font-size:1.0em;
}
.navbar ul > li {
display:table-cell;
}
.navbar ul:before, .navbar ul:after {
display:table; content:''; clear:both;
/* permet de remettre les li float:left dans le flux */
}
.navbar > ul li ul {
display:none; /* sous-menu masqués */
position:absolute;
top:100%;
left:0;
}
.navbar li:hover > ul {
display:block; /* sous-menu affiché */
display:table;
}
.navbar ul li a {
display:block;
padding:10px 15px;
color:#C29165;
text-decoration:none;
}
.navbar ul li:hover > a {
color:#0E0E18;
}
.navbar ul li a {
/*border-right:1px solid #C29165;*/
}
.navbar > ul > li:hover:after,
.navbar > ul > li > ul > li:hover:after {
position:absolute;
display:block; content:'';
}
.nivo{clear:both;
}
D'avance, je vous remercie de votre réponse qui, j'en suis certaine va me permettre de progresser! Yesssss!