[CSS] Menu à onglet
Résolu
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!
23 réponses
-
Finalement j'ai réussi. Sur un OnClick j'appelle une fonction qui met display='' sur l'image que je veux afficher.
Merci de ton aide -
De rien, de mémoire je pense qu'il faut chercher du coté de la fonction onclick
-
bon, je vais arrêter de faire mon paresseux et je vais aller voir mon ami google pour apprendre le javascript. Merci à toi!
-
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 -
mais lorsque je clique sur un des onglets et que la section relative a celui-ci est affichée, il doit demeuré à l'image active, et c'est cette partie qui m'embête...
-
Voici le code pour les boutons
il faut completer les adresses pour localiser les images
l'adresse du onmouseout doit etre identique à celle de la balise image
le name de image doit etre présent car il sert a situer l'image
<a onmouseout="document.home.src='http://www.';" onmouseover="document.home.src='http://www.';" href="http://www.">
<img alt="" src="http://www." name="home">
</a> -
il faut utiliser un script javascript, je vais les mettre ici dans quelques minutes
-
oups, petit hic par contre.
Comment je lui dit quelle image utilisé selon si l'onglet est actif ou non? Étant donné que je ne l'affecte plus par le css je ne sais plus trop comment lui faire afficher active.jpg ou inactive.jpg ....! -
De rien ^^
-
C'étais ma solution finale, le but était de sauver quelque ko en utilisant qu'une seule image, mais je crois bien que je vais l'utiliser tout de suite. Je crois bien que j'ai déjà perdu assez de temps !
Merci de ton aide! -
l'autre choix serai de créer des images avec le nom déjà inscrit et de faire :
<a><img /></a>
C'est ce que je fait en général et ça marche bien -
effectivement.
Je suis en train d'essayé avec une liste plutot que seulement des <a>.
On verra bien ce que ça donnera! -
en effet il y'a un souci car apparemment aucune propriété css n'a été appliquer aux liens !
vous aviez bien entrez ce code dans le css ?
.tab_active {
liste des propriétés
}
.tab {
liste des propriétés
} -
"Automatisation" , "Sécurité des machines" et "Viscosité en ligne"
-
Ce sont les onglets de bienvenue?
-
http://www.enico.com
Le menu est environ au milieu de la page. Les onglets devraient être au-dessus du rectangle blanc. -
oui ça doit etre pour ça
essaye en remplaçant le a par un li si tu a fait une liste
Si ton site est en ligne peut tu me passer le lien? -
comme tu peux voir dans mon premier message, j'ai mis les propriétés height et width, mais pour une raison inconnu il ne sont pas pris en compte... C'est donc pourquoi j'ai posé cette question ici...!
Est-ce que se serait parceque j'essaie de l'affecter à une balise <a> ? -
Oui bien plus clair ^^
Normalement en mettant le width a 249px et le height à 44px cela devrait marché
avec un text-align : center pour que texte soit au milieu -
Le texte est en arrière-plan (Code CSS : background-image:url(images/active-tab.gif);)
Donc si mon texte est de 10px par 100px, alors l'image couvrira seulement cette surface à l'arrière du texte.
La dimension de mon image est de 294px par 44px. Et je voudrais que même si mon texte est de 10px par 10px que l'image s'affiche au complet avec le texte au centre de celle-ci.
Est-ce plus clair?
- 1
- 2
Suivant
