Sous menu horizontal
didoabdoo
Messages postés
3
Statut
Membre
-
didoabdoo Messages postés 3 Statut Membre -
didoabdoo Messages postés 3 Statut Membre -
Bonjour;
J'ai le code suivant du menu horizontal :
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
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:
- Sous menu horizontal
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
3 réponses
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"
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"
Bonjour;
Voila le code:
et voila le code CSS :
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>
