Sous menu horizontal

Fermé
didoabdoo Messages postés 3 Date d'inscription dimanche 6 février 2022 Statut Membre Dernière intervention 9 février 2022 - Modifié le 7 févr. 2022 à 00:18
didoabdoo Messages postés 3 Date d'inscription dimanche 6 février 2022 Statut Membre Dernière intervention 9 février 2022 - 9 févr. 2022 à 17:31
Bonjour;

J'ai le code suivant du menu horizontal :

<div class="list">
 
        <input type="radio" name="menu" id="close">
        
  
        <div class="menu">
                 
            <label for="menu1" style="color: #ffffff; font-family:Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, 'serif';   font-size:17px; "><u>G</u>estion Stock</label>
 
            <input id="menu1" type="radio" name="menu" checked>
 
            <ul style="padding-top: 10px;">
    <li><img src="images/icon-stock.png" width="45" height="45"><br><u>S</u>tock</li>
                <li><img src="images/icon-unite.png" width="45" height="45"><br><u>G</u>estion Unités</li>
    <li><img src="images/icon-alerte.png" width="45" height="45"><br><u>S</u>tock en Alerte</li>
            </ul>
 
        </div>
 
  
  
  
        <div class="menu">
                 
            <label for="menu2" style="color: #ffffff; font-family:Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, 'serif';   font-size:17px; "><u>G</u>estion des Ventes</label>
 
            <input id="menu2" type="radio" name="menu">
 
            <ul style="padding-top: 10px;">
    <li><u>V</u>ente Comptoir</li>
                <li><img src="images/icon-bon-livraison.png" width="45" height="45"><br><u>B</u>on livraison</li>
    <li><img src="images/icon-facture.png" width="45" height="45"><br><u>F</u>acture</li>
                <li><img src="images/icon-facture-proforma.png" width="45" height="45"><br> <u>F</u>acture Proforma</li>
    <li><img src="images/icon-benefice.png" width="45" height="45"><br><u>B</u>énéfice</li>
    <li><a href="administrateur.php?nav=2" ><img src="images/icon-clients.png" width="45" height="45"><br><u>C</u>lients</a></li>  
            </ul>
 
        </div>


l'affichage de menu est comme suit :




moi je cherche que le sous menu (vente comptoir , bon de livraison , facture ...) commence de début c'est pas juste en dessous de "Gestion des ventes"
Merci d'avance.

Edit: correction des balises de code
A voir également:

3 réponses

jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
7 févr. 2022 à 00:38
Bonjour,

Déjà, à l'avenir, merci de préciser le langage dans les balises de code ( là, j'ai édité ton message pour le faire)
Explications ( à lire entièrement ! ) disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, il manque une balise fermante pour ta première DIV

Et enfin .. ton code n'est pas complet. Je pense que tu as un fichier CSS qui contient un certain nombre de mises en formes pour ton code html..
Et dedans.. il y a certainement du code css qui génère ce "décalage"
0
didoabdoo Messages postés 3 Date d'inscription dimanche 6 février 2022 Statut Membre Dernière intervention 9 février 2022
7 févr. 2022 à 14:17
Bonjour;

Voila le code:

<div class="list">
 
        <input type="radio" name="menu" id="close">
        
		
        <div class="menu">
                 
            <label for="menu1" style="color: #ffffff; font-family:Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, 'serif';   font-size:17px; "><u>G</u>estion Stock</label>
 
            <input id="menu1" type="radio" name="menu" checked>
 
            <ul style="padding-top: 10px;">
				<li><img src="images/icon-stock.png" width="45" height="45"><br><u>s</u>tock</li>
                <li><img src="images/icon-unite.png" width="45" height="45"><br><u>g</u>estion Unités</li>
				<li><img src="images/icon-alerte.png" width="45" height="45"><br><u>s</u>tock en Alerte</li>
            </ul>
 
        </div>
 
		
		
		
        <div class="menu">
                 
            <label for="menu2" style="color: #ffffff; font-family:Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, 'serif';   font-size:17px; "><u>G</u>estion des Ventes</label>
 
            <input id="menu2" type="radio" name="menu">
 
            <ul style="padding-top: 10px;">
				<li><u>V</u>ente Comptoir</li>
                <li><img src="images/icon-bon-livraison.png" width="45" height="45"><br><u>B</u>on livraison</li>
				<li><img src="images/icon-facture.png" width="45" height="45"><br><u>F</u>acture</li>
                <li><img src="images/icon-facture-proforma.png" width="45" height="45"><br> <u>F</u>acture Proforma</li>
				<li><img src="images/icon-benefice.png" width="45" height="45"><br><u>B</u>énéfice</li>
				<li><a href="administrateur.php?nav=2" ><img src="images/icon-clients.png" width="45" height="45"><br><u>C</u>lients</a></li>		
            </ul>
 
        </div>



et voila le code CSS :

<style>
 
        .list
        {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            column-gap: 30px;
        }
 
        .list input[type=radio]
        {
            display: none;
        }
	 

 
        .list .menu ul
        {
			border-top: 1px dotted #ffffff;
            display: none;
            list-style: none;
            padding: 0;
		
			
            
        }
 
        .list input[type=radio]:checked ~ ul
        {
            display: block;
        }
 
	 
	 ul li {
		 display:inline-block;
		 
	list-style-type: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	padding-right: 10px;
	padding-left: 10px;
}

	 ul li {
	text-align: center;
		 color: #ffffff;
		 text-transform: capitalize;

	 }
	 
	 
	li+li {
	border-left-style: dotted;
	border-left-color: #ffffff;
	border-left-width: 1px;
}
	 
	 
    </style>
0
didoabdoo Messages postés 3 Date d'inscription dimanche 6 février 2022 Statut Membre Dernière intervention 9 février 2022
9 févr. 2022 à 17:31
Bonjour;

SVP y'a quelqu’un peut m'aider à trouver une solution pour résoudre le problème

Merci d'avance.
0