[CSS] Menu à onglet [Résolu/Fermé]

Signaler
Messages postés
134
Date d'inscription
samedi 20 octobre 2001
Statut
Membre
Dernière intervention
6 février 2016
-
Messages postés
134
Date d'inscription
samedi 20 octobre 2001
Statut
Membre
Dernière intervention
6 février 2016
-
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 :

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

Messages postés
332
Date d'inscription
samedi 2 août 2008
Statut
Membre
Dernière intervention
20 août 2013
44
De rien, de mémoire je pense qu'il faut chercher du coté de la fonction onclick
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60769 internautes nous ont dit merci ce mois-ci

Messages postés
332
Date d'inscription
samedi 2 août 2008
Statut
Membre
Dernière intervention
20 août 2013
44
Les images respectives de tes onglets doivent etre de la même taille tout simplement
Messages postés
134
Date d'inscription
samedi 20 octobre 2001
Statut
Membre
Dernière intervention
6 février 2016
2
Les 3 images sont les mêmes, mais étant donné qu'elles sont en background, seule la partie vis-à-vis le texte est affiché.
Messages postés
332
Date d'inscription
samedi 2 août 2008
Statut
Membre
Dernière intervention
20 août 2013
44
Euh je vois pas la, les images s'affichent pas? ou le texte dépasse des images?
Messages postés
134
Date d'inscription
samedi 20 octobre 2001
Statut
Membre
Dernière intervention
6 février 2016
2
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?
Messages postés
332
Date d'inscription
samedi 2 août 2008
Statut
Membre
Dernière intervention
20 août 2013
44
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
Messages postés
134
Date d'inscription
samedi 20 octobre 2001
Statut
Membre
Dernière intervention
6 février 2016
2
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> ?
Messages postés
332
Date d'inscription
samedi 2 août 2008
Statut
Membre
Dernière intervention
20 août 2013
44
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?
Messages postés
134
Date d'inscription
samedi 20 octobre 2001
Statut
Membre
Dernière intervention
6 février 2016
2
http://www.enico.com

Le menu est environ au milieu de la page. Les onglets devraient être au-dessus du rectangle blanc.
Messages postés
332
Date d'inscription
samedi 2 août 2008
Statut
Membre
Dernière intervention
20 août 2013
44
Ce sont les onglets de bienvenue?
Messages postés
134
Date d'inscription
samedi 20 octobre 2001
Statut
Membre
Dernière intervention
6 février 2016
2
"Automatisation" , "Sécurité des machines" et "Viscosité en ligne"
Messages postés
332
Date d'inscription
samedi 2 août 2008
Statut
Membre
Dernière intervention
20 août 2013
44
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

}
Messages postés
134
Date d'inscription
samedi 20 octobre 2001
Statut
Membre
Dernière intervention
6 février 2016
2
effectivement.

Je suis en train d'essayé avec une liste plutot que seulement des <a>.
On verra bien ce que ça donnera!
Messages postés
332
Date d'inscription
samedi 2 août 2008
Statut
Membre
Dernière intervention
20 août 2013
44
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
Messages postés
134
Date d'inscription
samedi 20 octobre 2001
Statut
Membre
Dernière intervention
6 février 2016
2
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!
Messages postés
332
Date d'inscription
samedi 2 août 2008
Statut
Membre
Dernière intervention
20 août 2013
44
De rien ^^
Messages postés
134
Date d'inscription
samedi 20 octobre 2001
Statut
Membre
Dernière intervention
6 février 2016
2
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 ....!
Messages postés
332
Date d'inscription
samedi 2 août 2008
Statut
Membre
Dernière intervention
20 août 2013
44
il faut utiliser un script javascript, je vais les mettre ici dans quelques minutes
Messages postés
332
Date d'inscription
samedi 2 août 2008
Statut
Membre
Dernière intervention
20 août 2013
44
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>
Messages postés
134
Date d'inscription
samedi 20 octobre 2001
Statut
Membre
Dernière intervention
6 février 2016
2
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...