[CSS] Menu à onglet
Résolu
jimelfou
Messages postés
133
Date d'inscription
Statut
Membre
Dernière intervention
-
jimelfou Messages postés 133 Date d'inscription Statut Membre Dernière intervention -
jimelfou Messages postés 133 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un menu à onglet dont les onglets sont une image. Les titres de mes onglets ne sont pas de longueur constantes, alors je ne peux pas utiliser la propriété padding et les propriétés width et height ne semblent pas fonctionner.
voici le contenu du css :
et le code html :
la fonction clicktab ne fait que changer la classe tab pour tab-active.
Alors avez-vous une idée de comment faire pour que mes 3 onglets soient de la même dimension?
Merci beaucoup de votre aide!
J'ai un menu à onglet dont les onglets sont une image. Les titres de mes onglets ne sont pas de longueur constantes, alors je ne peux pas utiliser la propriété padding et les propriétés width et height ne semblent pas fonctionner.
voici le contenu du css :
a.tab { background-image:url(images/inactive-tab.gif); background-repeat:no-repeat; height:100%; width:33%; text-decoration: none; text-align:center; vertical-align:middle; font-size:14px; height:34; width:294; } a.tab:hover { background-image:url(images/active-tab.gif); background-repeat:no-repeat; color: #0099FF; } a.tab-active { background-image:url(images/active-tab.gif); background-repeat:no-repeat; color: #0099FF; text-decoration: none; text-align:center; vertical-align:middle; font-size:14px; height:34; width:294; }
et le code html :
<div class="tabs" style="width: 891px; height: 44px;margin: 0px; margin-top: 20px;margin-left: 35px;float: left;display:inline;"> <a href="javascript:void(0);" id="automisation-tab" onclick="clickTab('automisation');" class="tab-active" style="margin-left: 0px;">Automatisation</a> <a id="securite-tab" href="javascript:void(0);" onclick="clickTab('securite');" class="tab" style="margin-left: 0px;">Sécurité des machines</a> <a id="viscosite-tab" href="javascript:void(0);" onclick="clickTab('viscosite');" class="tab" style="margin-left: 0px;">Viscosité en ligne</a> </div>
la fonction clicktab ne fait que changer la classe tab pour tab-active.
Alors avez-vous une idée de comment faire pour que mes 3 onglets soient de la même dimension?
Merci beaucoup de votre aide!
A voir également:
- [CSS] Menu à onglet
- Menu déroulant excel - Guide
- Raccourci rouvrir onglet fermé - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
23 réponses
dans ce cas le il faut un bout de code de javascript
Hélas ça fait un moment que j'ai pas fait de javascript et j'ai pas de code tout pret cette fois ci.
il faudrait seulement rajouter une condition en javascript
si on click, l'élément s'affiche et l'image du bouton est active et les autres inactives
Hélas ça fait un moment que j'ai pas fait de javascript et j'ai pas de code tout pret cette fois ci.
il faudrait seulement rajouter une condition en javascript
si on click, l'élément s'affiche et l'image du bouton est active et les autres inactives