[CSS] Menu à onglet

Résolu/Fermé
jimelfou Messages postés 133 Date d'inscription samedi 20 octobre 2001 Statut Membre Dernière intervention 6 février 2016 - 19 juil. 2010 à 19:53
jimelfou Messages postés 133 Date d'inscription samedi 20 octobre 2001 Statut Membre Dernière intervention 6 février 2016 - 20 juil. 2010 à 21:07
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!
A voir également:

23 réponses

will5555 Messages postés 332 Date d'inscription samedi 2 août 2008 Statut Membre Dernière intervention 20 août 2013 45
19 juil. 2010 à 21:39
De rien, de mémoire je pense qu'il faut chercher du coté de la fonction onclick
1
will5555 Messages postés 332 Date d'inscription samedi 2 août 2008 Statut Membre Dernière intervention 20 août 2013 45
19 juil. 2010 à 19:55
Les images respectives de tes onglets doivent etre de la même taille tout simplement
0
jimelfou Messages postés 133 Date d'inscription samedi 20 octobre 2001 Statut Membre Dernière intervention 6 février 2016 2
19 juil. 2010 à 20:05
Les 3 images sont les mêmes, mais étant donné qu'elles sont en background, seule la partie vis-à-vis le texte est affiché.
0
will5555 Messages postés 332 Date d'inscription samedi 2 août 2008 Statut Membre Dernière intervention 20 août 2013 45
19 juil. 2010 à 20:09
Euh je vois pas la, les images s'affichent pas? ou le texte dépasse des images?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
jimelfou Messages postés 133 Date d'inscription samedi 20 octobre 2001 Statut Membre Dernière intervention 6 février 2016 2
19 juil. 2010 à 20:15
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?
0
will5555 Messages postés 332 Date d'inscription samedi 2 août 2008 Statut Membre Dernière intervention 20 août 2013 45
Modifié par will5555 le 19/07/2010 à 20:17
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
0
jimelfou Messages postés 133 Date d'inscription samedi 20 octobre 2001 Statut Membre Dernière intervention 6 février 2016 2
19 juil. 2010 à 20:21
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> ?
0
will5555 Messages postés 332 Date d'inscription samedi 2 août 2008 Statut Membre Dernière intervention 20 août 2013 45
Modifié par will5555 le 19/07/2010 à 20:30
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?
0
jimelfou Messages postés 133 Date d'inscription samedi 20 octobre 2001 Statut Membre Dernière intervention 6 février 2016 2
19 juil. 2010 à 20:32
http://www.enico.com

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

}
0
jimelfou Messages postés 133 Date d'inscription samedi 20 octobre 2001 Statut Membre Dernière intervention 6 février 2016 2
19 juil. 2010 à 20:50
effectivement.

Je suis en train d'essayé avec une liste plutot que seulement des <a>.
On verra bien ce que ça donnera!
0
will5555 Messages postés 332 Date d'inscription samedi 2 août 2008 Statut Membre Dernière intervention 20 août 2013 45
19 juil. 2010 à 20:51
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
0
jimelfou Messages postés 133 Date d'inscription samedi 20 octobre 2001 Statut Membre Dernière intervention 6 février 2016 2
19 juil. 2010 à 20:55
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!
0
will5555 Messages postés 332 Date d'inscription samedi 2 août 2008 Statut Membre Dernière intervention 20 août 2013 45
19 juil. 2010 à 21:00
De rien ^^
0
jimelfou Messages postés 133 Date d'inscription samedi 20 octobre 2001 Statut Membre Dernière intervention 6 février 2016 2
19 juil. 2010 à 21:12
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 ....!
0
will5555 Messages postés 332 Date d'inscription samedi 2 août 2008 Statut Membre Dernière intervention 20 août 2013 45
19 juil. 2010 à 21:13
il faut utiliser un script javascript, je vais les mettre ici dans quelques minutes
0
will5555 Messages postés 332 Date d'inscription samedi 2 août 2008 Statut Membre Dernière intervention 20 août 2013 45
19 juil. 2010 à 21:18
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>
0
jimelfou Messages postés 133 Date d'inscription samedi 20 octobre 2001 Statut Membre Dernière intervention 6 février 2016 2
19 juil. 2010 à 21:26
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...
0