Menu en onglets avec image éclaircie pour l'onglet sélectionné

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Menu en onglets avec image éclaircie pour l'onglet sélectionné

Message par Lunaa le Lun 21 Jan 2013 - 13:50

Bonjour a tous !

Tout d'abord, je suis désolée si cette question a déjà été posée, mais je chercher depuis samedi sans trouver quelque chose qui me va +___+
Mon forum est en phpBB2

Comme spécifiée dans le titre, j'ai fait un menu en onglet pour la PA de mon forum et je cherche a avoir l'image de l'onglet sélectionné en plus clair. Soit en mettant des filter soit en changeant d'image. J'ai essayée les deux mais c’était vraiment du bricolage et rien ne se passait... Siffleur Alors si quelqu'un pouvait m'aider ce serait génial =)
En sachant que mes onglets sont en s_hover ( ils s'ouvrent au passage du curseur )

Voila mon CSS attribué aux onglets :
Code:
/*  onglets */
.systab .tab {
padding: 2px;
  margin-right: 5px;
  color: #000;
  background: transparent;
  border: 0px solid #000;
  cursor: pointer;
 }

 /* les onglets survolés */
 .systab .tab:hover {
  background: transparent;
  color: red;
 border-color: transparent;
 }

 /* onglets sélectionnés */
.systab .tab.selected{
  color: red;
    background: transparent;
  }

  /* contenus associés aux onglets  */
  .systab .contents {
        margin-top: 10px;
        margin-bottom: 1px;
        color: #000;
        background: #fff;
        border: 1px solid #000;
        padding: 10px;
 }

et mon html placé dans le message de page d'accueil :

Code:
<div class="systab s_slide s_hover selected">
 <div>
  <span><img src="http://i17.servimg.com/u/f17/17/41/81/03/pour_c11.gif"></span>Mon contenu 1
 </div>
  <div>
  <span><img src="http://i17.servimg.com/u/f17/17/41/81/03/stat13.gif"></span>Mon contenu 2
  </div>
  <div>
 <span><img src="http://i17.servimg.com/u/f17/17/41/81/03/stat13.gif"></span>Mon contenu 3
  </div>
 </div>

Voila ce que ça donne pour l'instant :
Et voila ce que j'aimerais :

( a quelques détails près )

Et sinon : un forum ou j'ai vu a peu près ce que je veux

Merci a tout ceux qui auront la gentillesse de consacrer un peu de leur temps a mon problème,
Luna


Dernière édition par Lunaa le Lun 21 Jan 2013 - 14:10, édité 1 fois

Lunaa
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 11/07/2012

http://catsdestiny.forumgratuit.org/
Lunaa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu en onglets avec image éclaircie pour l'onglet sélectionné

Message par Matriochka le Lun 21 Jan 2013 - 14:00

Bonjour,

Il te suffit d’utiliser les propriétés CSS d’opacité. Exemple :

Onglets non éclairés :
Code:
.systab .tab {
opacity:0.7;
-moz-opacity:0.7;
-ms-filter:"alpha(opacity=70)";
filter:alpha(opacity=70);
padding: 2px;
  margin-right: 5px;
  color: #000;
  background: transparent;
  border: 0px solid #000;
  cursor: pointer;
 }

Onglets éclairés :
Code:
.systab .tab:hover {
opacity:1;
-moz-opacity:1;
-ms-filter:"alpha(opacity=100)";
filter:alpha(opacity=100);
  background: transparent;
  color: red;
 border-color: transparent;
 }

Matriochka
+ Hyperactif +

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu en onglets avec image éclaircie pour l'onglet sélectionné

Message par Lunaa le Lun 21 Jan 2013 - 14:05

Merci pour ta réponse si rapide ! =)

Ton code est très bien, mais y aurait-il une possibilité pour que l'image de l'onglet sélectionné reste éclairée même si le curseur n'est pas dessus ?

Lunaa
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 11/07/2012

http://catsdestiny.forumgratuit.org/
Lunaa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Menu en onglets avec image éclaircie pour l'onglet sélectionné

Message par Lunaa le Lun 21 Jan 2013 - 14:08

Ah c'est bon, j'ai réussi en mettant le code que tu m'a donné pour les onglets survolés dans les onglets sélectionnés. Je met en résolu.

Merci encore !

Lunaa
Nouveau membre

Féminin
Messages : 10
Inscrit(e) le : 11/07/2012

http://catsdestiny.forumgratuit.org/
Lunaa a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum