Submenu Css

Aligner horizontalement un submenu

19 septembre 2018 à 11:49:15

Hello !

J'essaie en vain d'aligner un submenu horizontalement, sans succès après plusieurs recherche.

J'essaie de copier et modifier le site suivant : http://www.stib-mivb.be/index.htm?l=fr

Le but aurait été d'aligner le submenu horizontalement et de recréer une liste pour chaque élément du submenu.

Quelqu'un aurait une piste svp ?

Merci d'avance

Voici le code html :

<!DOCTYPE html>
<html>
    <head>
	   <meta charset="utf-8" />
	   <link rel="stylesheet" type="text/css" href="assets/css/style.css">
	<title>Recap html/css</title>
    </head>
    <body>
                   

        <nav>
            
            <ul>
                <img src="assets/images/logo.png" class="logo">
                <li class="menu-voyage"><a href="http://www.stib-mivb.be/plan_your_trip.html?l=fr">Voyage</a>
                <ul class="submenu">
                        <li><a href="#">Planifier</a></li>
                        <li><a href="#">Temps réel</a></li>
                        <li><a href="#">Plus de service !</a></li>
                        <li><a href="#">Plus de mobilité !</a></li>
                    </ul>
                </li>
                <li class="menu-acheter"><a href="http://www.stib-mivb.be/abon_tickets.html?l=fr">Acheter</a>
                  <ul class="submenu">
                    <li><a href="#">Habitué</a></li>
                    <li><a href="#">Occasionels</a></li>
                </ul>  
                </li>
                <li class="menu-bruxelles"><a href="http://www.stib-mivb.be/visit.html?l=fr">Bruxelles</a>
                <ul class="submenu">
                    <li><a href="#">Habitué</a></li>
                    <li><a href="#">Occasionels</a></li>
                </ul>
                </li>
                <li class="menu-stib"><a href="http://www.stib-mivb.be/visit.html?l=fr">La Stib</a>
                <ul class="submenu">
                    <li><a href="#">Engagement</a></li>
                    <li><a href="#">Pour tout savoir</a></li>
                </ul>
                </li>
                <li class="search">
                    <input type="text" name="search" placeholder="Chercher">
                </li>
                <li>
                    <a href="http://www.stib-mivb.be/irj/go/km/docs/WEBSITE_RES/Webresources/Frontend/mystib/PRD/loginfr.html" data-modal-v="right" data-modal-v-offset="20" data-modal-h-offset="20" data-modal-h="bottom">
                    Login<span class="icon-person" aria-hidden="true"></span>
                    </a>
                </li>
            </ul>
        
        </nav>
    </body>
</html>

et le code css :

body{
    margin: 0px;
    padding: 0px;
}
.logo{
    margin-left: 25%;
    float: left;
    width: 5%;
}
.search{
    margin-top: 1%;
}
nav{
    width: 100%;
    
}
nav a{
    display: inline-block;
    text-decoration: none;
    
    
}
nav > ul{
    margin: 0px;
    padding: 0px;
    background-image: url(/assets/images/background1.png);
    background-size: 100%;  
}
nav > ul::after{
    content: "";
    display: block;
    clear: both;  
}
nav > ul > li{
 float: left;
position: relative;
}
nav > ul > li > a{
    padding: 20px 30px;
    color: white;   
}
nav > ul > li:hover a{
    padding: 15px 30px 20px 30px;  
}
nav li{
    list-style-type: none;
}
.submenu{
    display: none;
}
.submenu li{
    border-bottom: 1px solid #CCC;
}
.submenu li a{
    padding: 15px 30px;
    font-size: 13px;
    color: #222538;
    width: 800px;
}
nav li:hover .submenu{
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0px;
    padding: 0px;
    z-index: 100000;  
}

.menu-voyage:hover{
    border-top: 5px solid #e44d26;
    background-color: RGBa(228, 77, 38, 0.15);
}
.menu-acheter:hover{
    border-top: 5px solid #0070bb;
    background-color: RGBa(000, 112, 192, 0.15);
}
.menu-bruxelles:hover{
    border-top: 5px solid #f1dc4f;
    background-color: RGBa(241, 211, 79, 0.15);
}
.menu-stib:hover{
    border-top: 5px solid #BBB;
    background-color: RGBa(220, 220, 220, 0.15);
}


.menu-voyage .submenu{
    background-color: #5C71B2;
    background-image: url(/assets/images/background2.png);
    text-align: center;
    
}
.menu-acheter .submenu{
    background-color: #5C71B2;
    background-image: url(/assets/images/background2.png);
}
.menu-bruxelles .submenu{
    background-color: #5C71B2;
    background-image: url(/assets/images/background2.png);
}
.menu-stib .submenu{
    background-color: #5C71B2;
    background-image: url(/assets/images/background2.png);
}
.submenu li:hover a{
    color: #EEE;
    font-weight: bold;
    
}
.menu-voyage .submenu li:hover{
    background-color: red;

}
.menu-acheter .submenu li:hover{
    background-color: red;
}
.menu-bruxelles.submenu li:hover{
    background-color: red;
}
.menu-stib .submenu li:hover{
    background-color: red;
}

Frogweb

19 septembre 2018 à 11:54:33

Salut,

tu veux aligner horizontalement les liens des sous-menus ?

si c'est ça, ce qui aligne les liens du menu c'est :

nav > ul > li{
 float: left;
}

donc applique la même chose aux li du sous menu.

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Samy ad

19 septembre 2018 à 12:30:18

Tout d'abord merci de ta réponse rapide,

Oui, c'est ça, j'aimerais effectivement essayer d'aligner les liens des sous-menu horizontalement.

Comme sur le lien du site que j'essaie de "copier", j'essaie de comprendre comment ils ont fait ..
J'avais déjà essayé avec float, ou display mais sans succès ..

Frogweb

19 septembre 2018 à 12:42:50

Déjà mets display:block plutôt que inline-block à submenu.

Ensuite si tes liens ne s'aligne pas c'est parce qu'il y a un width:800px sur les <a>. Donc pas la place. Enlève le.

Mais ça ne suffira pas.

Voilà ce que je te propose :

- mets white-space: nowrap à submenu
- mets display:inline-block aux li de submenu (et pas float:left)

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Samy ad

19 septembre 2018 à 16:05:28

ça m'affiche les sous-menu tout en bas de la page ..

Il n'y a que float : left qui les garde en place

-
Edité par Samy ad 19 septembre 2018 à 16:06:15

Frogweb

19 septembre 2018 à 17:32:16

Et pourtant ça fonctionne pour moi :

http://www.frogweb.fr/demos/index-flex.html

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Samy ad

19 septembre 2018 à 20:50:27

Waow, effectivement, ça a l'air de marcher !

J'ai bossé sur d'autre truc entre temps, je t'envoie la mise à jour et mon repos git, ce sera plus simple
Pourrais-tu regarder s'il te plait ?

(il y a quelque passage qui ne sont là que pour tester les positionnements html/css mais si tu vois une erreur, j'accepte toute critique !)

Merci pour ce que tu as déjà fait !

<!DOCTYPE html>
<html>
    <head>
	   <meta charset="utf-8" />
	   <link rel="stylesheet" type="text/css" href="assets/css/style.css">
	<title>Recap html/css</title>
    </head>
    <body>
         
        <!-- header -->  
        <section id="header">        
        <!-- nav -->
        <nav>
            
            <ul>
                <!-- logo -->
                <img src="assets/images/logo.png" class="logo">
                
                <li class="menu-voyage"><a href="http://www.stib-mivb.be/plan_your_trip.html?l=fr">Voyage</a>
                <ul class="submenu">
                        <li><a href="#">Planifier</a></li>
                        <li><a href="#">Temps réel</a></li>
                        <li><a href="#">Plus de service !</a></li>
                        <li><a href="#">Plus de mobilité !</a></li>
                    </ul>
                </li>
                <li class="menu-acheter"><a href="http://www.stib-mivb.be/abon_tickets.html?l=fr">Acheter</a>
                  <ul class="submenu">
                    <li><a href="#">Habitué</a></li>
                    <li><a href="#">Occasionels</a></li>
                </ul>  
                </li>
                <li class="menu-bruxelles"><a href="http://www.stib-mivb.be/visit.html?l=fr">Bruxelles</a>
                <ul class="submenu">
                    <li><a href="#">Habitué</a></li>
                    <li><a href="#">Occasionels</a></li>
                </ul>
                </li>
                <li class="menu-stib"><a href="http://www.stib-mivb.be/visit.html?l=fr">La Stib</a>
                <ul class="submenu">
                    <li><a href="#">Engagement</a></li>
                    <li><a href="#">Pour tout savoir</a></li>
                </ul>
                </li>
                <li class="search">
                    <input type="text" name="search" placeholder="Chercher">
                </li>
                <li>
                    <a href="http://www.stib-mivb.be/irj/go/km/docs/WEBSITE_RES/Webresources/Frontend/mystib/PRD/loginfr.html" data-modal-v="right" data-modal-v-offset="20" data-modal-h-offset="20" data-modal-h="bottom">
                    Login<span class="icon-person" aria-hidden="true"></span>
                    </a>
                </li>
            </ul>
                </nav>
            </section>
        <!-- Main -->
        <main class="main">
            
            
            <article class="article">
                <div id="searchBarre">
                <br />
                    De 
                    <input type="text" name="search" placeholder="Position">
                    <br />
                    <br />
                    Vers
                    <input type="text" name="search" placeholder="Destination">
                    <p>Itineraire</p>
                </div>
                <section id="headerinfo">
                
                <section id="section" class="info1">
                    
                    <p>
                    kmlln
                    </p>
                </section>
                    
                </section>
                <aside id="rss">
                    <p> 
                        <iframe src="https://feed.mikle.com/widget/v2/91519/" height="401px" width="60%" class="fw-iframe" scrolling="no" frameborder="0"></iframe>
                        
                    </p>
                    </aside>
                </article>
            <footer>
                <nav id="contact">
                job contact, etc
                </nav>
                <nav id="follow"
                follow us, copyrigth etc
                </nav>
            </footer>
        </main>
            </body>
</html>

et le code css

body{
    margin: 0px;
    padding: 0px;
    color: white;
}
.logo{
    margin-left: 25%;
    float: left;
    width: 5%;
}
.intro{
    width: 100%;
}
#main{
    
    color: white;
}
.article{
    
    background-image: url(/assets/images/banner.jpg);
}
#rss{
    margin-right: -15%;
    width: 40%;
    padding-left: .5rem;
    margin-left: .5rem;
    float: right;
    box-shadow: inset 5px 0 5px -5px #29627e;
    font-style: italic;
    color: #29627e;
}
#rss > p {
    margin: .5rem;
}

p {
    font-family: 'Fira Sans', sans-serif;
}

#headerinfo{
}
section{
    display: block;
}
.search{
    margin-top: 1%;
}
#searchBarre{
    margin-left: 3%;
}
#contact{
    color: black;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: left;
}
#follow{
    color: black;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: right;
}
nav{
    width: 100%;
    
}
nav a{
    display: inline-block;
    text-decoration: none;
    
    
}
nav > ul{
    margin: 0px;
    padding: 0px;
    background-image: url(/assets/images/background1.png);
    background-size: 100%;  
}
nav > ul::after{
    content: "";
    display: block;
    clear: both;  
}
nav > ul > li{
 float: left;
position: relative;
}
nav > ul > li > a{
    padding: 20px 30px;
    color: white;   
}
nav > ul > li:hover a{
    padding: 15px 30px 20px 30px;  
}
nav li{
    list-style-type: none;
}
.submenu{
    display: none;
    
}
.submenu li{
    border-bottom: 1px solid #CCC;
    
}
.submenu li a{
    padding: 15px 30px;
    font-size: 13px;
    color: #222538;    
}
nav li:hover .submenu{
    display: block;
    position: absolute;
    top: 100%;
    left: 0px;
    padding: 0px;
    z-index: 100000; 
    white-space: nowrap;
}

.menu-voyage:hover{
    border-top: 5px solid #e44d26;
    background-color: RGBa(228, 77, 38, 0.15);
    
}
.menu-acheter:hover{
    border-top: 5px solid #0070bb;
    background-color: RGBa(000, 112, 192, 0.15);
}
.menu-bruxelles:hover{
    border-top: 5px solid #f1dc4f;
    background-color: RGBa(241, 211, 79, 0.15);
}
.menu-stib:hover{
    border-top: 5px solid #BBB;
    background-color: RGBa(220, 220, 220, 0.15);
}
.menu-voyage {
    
}


.menu-voyage .submenu{
    
    background-color: #5C71B2;
    background-image: url(/assets/images/background2.png);
    text-align: center;
    
    
}
.menu-acheter .submenu{
    background-color: #5C71B2;
    background-image: url(/assets/images/background2.png);
}
.menu-bruxelles .submenu{
    background-color: #5C71B2;
    background-image: url(/assets/images/background2.png);
}
.menu-stib .submenu{
    background-color: #5C71B2;
    background-image: url(/assets/images/background2.png);
}
.submenu li:hover a{
    color: #EEE;
    font-weight: bold;
    
}
.menu-voyage .submenu li:hover{
    background-color: red;

}
.menu-acheter .submenu li:hover{
    background-color: red;
}
.menu-bruxelles.submenu li:hover{
    background-color: red;
}
.menu-stib .submenu li:hover{
    background-color: red;
}

Voici également mon repos git du projet : https://github.com/aggads/recap-html-css

(ne fait pas attention au reste, ce sont surtout des testes, je dois encore meubler et modifier avec mes nouvelles connaissances acquises)

Frogweb

20 septembre 2018 à 10:59:05

Salut,

il manque toujours le display:inline-block sur #submenu li

Quelques trucs en html ne vont pas.

- ton footer ne devrait pas être dans main.
- évite les <br> entre les éléments. Utilise margin en CSS.

Pour la CSS

-ne mets pas width:100% n'importe comment.
Il n'y a que quelques rares pour lesquels ont à besoin de le mettre.
Par exemple sur une image ou sur une table.
Le reste du temps c'est inutile voir problématique et tu peux t'en passer en utilisant autre chose.
Par exemple pour #contact et #follow tu as juste à mettre left:0 et right:0 puisqu'ils sont en fixed.
Le reste des width:100% tu peux les supprimer (nav, intro,...)

- Evite à tout pris les margin en %

- tu as un margin-right : -15%. ça c'est un signe de mauvaise construction html. Essai de voir pourquoi tu es obligé de faire ça.

- lignes 155 à 165 tu répète trois fois la même chose. Une seul suffit en ne laissant que .submenu

- pour la propreté de ton code supprime les px qui sont après une valeur 0.

Quelques liens qui utiles pour expliquer un peu mes remarques :

https://blog.goetter.fr/2011/11/30/width-100-tu-es-le-mal/

https://www.emmanuelbeziat.com/blog/les-unites-css#les-pourcentages

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Submenu Css

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Submenu Css

Aligner horizontalement un submenu

Submenu Css

Supprimer

Modérer

Signaler le message aux modérateurs