Problème couleur d'onglet qui ne reste pas quand on clique sur celui-ci.

[Asaki]

Bonjour !
Alors voici mon problème. Je cherche à faire une petite mise en page par onglets. Pour cela j'utilise plusieurs pages html ainsi que du CSS.
J'aimerais que mes onglets se mettent en rouge au survol de la souris et restent en rouge lorsqu'on clique dessus, pour faciliter la navigation. Seulement, ça ne marche pas.
Voici la présentation en question :
http://oyama.forumactif.org/t7-reglement-du-forum

Le code :

Code:

<center>[img]http://img11.hostingpics.net/pics/724793IMAGEEXEMPLE.png[/img]
<div class="fond01">
<div class="entete001">Commençons par le commencement...</div>

<div style="width:405px;font-family:calibri;text-align:justify;color:#ffffff;font-size:12px; line-height:14px;"><div style="background-color: #1b1b1f; text-align: center; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171);">Bonjour et bienvenue sur Behind the lies !
Ici commence votre lecture de tout ce qui fait la spécificité de ce forum. Nous tentons de rendre cette expérience la plus didactique possible donc laissez-vous guider !

En espérant vous compter bientôt parmi nous !
</div></div>

<div align="center"><table style="margin-top:-5px"><tr><td width="130px"><div style="margin:auto;text-align:center;width:100%"><a href="http://oyama.forumactif.org/h4-compte" target="PV"><div style="font-family: Lobster; font-size: 25px; color: #F0F0F0; text-align: center;"><div class="titreONGL">Compte</div></div></a></td><td width="130px"><a href="http://oyama.forumactif.org/h3-onglet2" target="PV"><div style="font-family: Lobster; font-size: 25px; color: #F0F0F0; text-align: center;">
<div class="titreONGL">Comportement</div>
</div></a></div></td><td width="130px"><div style="margin:auto;text-align:center;width:100%"><a href="http://oyama.forumactif.org/h2-onglet1" target="PV"><div style="font-family: Lobster; font-size: 25px; color: #F0F0F0; text-align: center;"><div class="titreONGL">Personnage</div></div></a></td><td width="130px"><div style="margin:auto;text-align:center;width:100%"><a href="http://oyama.forumactif.org/h2-onglet1" target="PV"><div style="font-family: Lobster; font-size: 25px; color: #F0F0F0; text-align: center;"><div class="titreONGL">RPG</div></div></a></td></tr></table></div>        
   
    <center><div style="background-color:#1b1b1f; width: 440px; height: 20px; border-left: 2px solid #bbbbbb; border-right: 2px solid #bbbbbb;"></div></center><div style="margin:auto;text-align:center;width:100%"><iframe src="http://oyama.forumactif.org/h4-compte" name="PV" style="width: 420px; height: 210px; background-color: #1b1b1f; border-left: 2px solid #bbbbbb; border-right: 2px solid #bbbbbb; text-align:center; padding:10px" width="100" frameborder="0" height="250"></iframe></div><center><div style="background-color:#1b1b1f; width: 440px; height: 20px; border-left: 2px solid #bbbbbb; border-right: 2px solid #bbbbbb;"></div></center>


<div style="width:405px;font-family:calibri;text-align:justify;color:#ffffff;font-size:12px; line-height:14px;"><div style="background-color: #1b1b1f; text-align: center; border-radius: 10px 10px 10px 10px; -moz-box-shadow: 0px 0px 5px rgb(177, 189, 171);">Le règlement ne vous fait pas peur ?
Bien ! Nous pouvons maintenant passer à la seconde étape. Cliquez ici pour découvrir quelles affreuses choses se cachent derrière cette ville scintillante !
</div></div>
</div>

</div></center>

Le CSS associé

Code:

.titreONGL {
      font-family: Lobster;
      font-size: 25px;
      color: #F0F0F0;
      position: relative;
    }

    .titreONGL:hover {
      font-family: Lobster;
      font-size: 25px;
      color: #FE6D6D;
      position: relative;
    }

  .titreONGL:active {
      font-family: Lobster;
      font-size: 25px;
      color: #FE6D6D;
      position: relative;
    }

.titre001 {
    color: #FE6D6D;
    font-family: Bebas Neue;
    font-size: 20px;
    letter-spacing: -1px;
    text-align: center;
}

.entete001 {
    background-color: #8D1810;
    color: #fff;
    font-family: playball;
    font-size: 30px;
    letter-spacing: -1px;
    padding: 5px;
    text-align: center;
  
}        

.fond01 {
    background-image: url('http://img11.hostingpics.net/pics/280152Bois3.jpg');
    box-shadow: 0px 0px 0px 0px #000;
    width: 550px;
}


Un exemple de page html

Code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div style="color: #bbbbbb;">
 
<div style="color: #FE6D6D;">►</div> Votre pseudo doit contenir un nom et un prénom dans l'ordre PRÉNOM - NOM. Aucun surnom ni chiffre ou symbole n'est autorisé. Seuls les noms inventés sont admis donc merci de ne pas prendre le prénom d’un personnage connu, qu’il soit historique ou non. L’action se déroulant à Singapour dans un futur proche, vous avez un choix quasiment illimité de noms, profitez-en !<br /><br />
 <div style="color: #FE6D6D;">►</div> Nous souhaitons conserver un niveau correct de français afin que tout le monde puisse prendre plaisir à écrire et à lire les aventures des uns et des autres. C’est pourquoi nous demandons un bon niveau de syntaxe. N’hésitez donc pas à vous relire ou à utiliser des correcteurs orthographiques. Si malgré cela le niveau de français est trop bas, le compte sera supprimé. <br /><br />► Vous avez trois semaines à compter de votre inscription pour faire votre fiche de présentation. Le titre de celle-ci devra obligatoirement du type : "NOM Prénom, emploi (ou occupation si étudiant ou autre)". Si vous venez à être absent durant cette période, merci de le signaler dans la section Absences sous peine de voir votre compte supprimé.<br /><br /> ► Nous supprimons les comptes non-validés sous un mois d'inactivité (sans avoir prévenu dans la section Absences). Pour les comptes validés, le délai est de deux mois.<br /><br /> ► Les pouvoirs magiques et autres faits surhumains sont prohibés, nous sommes dans un univers réaliste.<br /><br /> ► Dans le cas d'une inactivité prolongée, sans que celle-ci soit référencée dans la section Absences, le Staff se réserve le droit de supprimer le compte.
</div>

Merci beaucoup !

[Asaki]

Bonsoir !
Mon problème est toujours d'actualité !

[Asaki]

Bonjour !
Mon problème est toujours d'actualité.

[Asaki]

Bonjour,

Mon problème est toujours d'actualité.

[Scoubifitz]

bonjour,

remplacez le code par celui ci (plus simple)

Code:

[center][img]http://img11.hostingpics.net/pics/724793IMAGEEXEMPLE.png[/img][/center]
<div class="fond01">
<div class="entete001">Commençons par le commencement...</div>

<div style="width:405px;font-family:calibri;color:#ffffff;font-size:12px; line-height:14px;background-color: #1b1b1f; text-align: center; border-radius:10px;box-shadow: 0px 0px 5px rgb(177, 189, 171);margin:auto">Bonjour et bienvenue sur Behind the lies !
Ici commence votre lecture de tout ce qui fait la spécificité de ce forum. Nous tentons de rendre cette expérience la plus didactique possible donc laissez-vous guider !

En espérant vous compter bientôt parmi nous !
</div>

[table style="margin:auto"][tr][td]<div class="titreONGL"><a href="http://oyama.forumactif.org/h4-compte" target="PV">Compte</a></div>
[/td][td]<div class="titreONGL"><a href="http://oyama.forumactif.org/h2-comportement" target="PV">Comportement</a></div>
[/td][td]<div class="titreONGL"><a href="http://oyama.forumactif.org/h3-personnage" target="PV">Personnage</a></div>
[/td][td]<div class="titreONGL"><a href="http://oyama.forumactif.org/h5-rpg" target="PV">RPG</a></div>
[/td]
[/tr]
[/table]


<div style="background-color:#1b1b1f; width: 440px; height: 250px; border: 2px solid #bbbbbb; border-width:0 2px;margin:auto"><iframe src="http://oyama.forumactif.org/h4-compte" name="PV" style="width: 420px; height: 210px;padding:20px 10px" frameborder="0" height="250" width="100"></iframe>
</div>

et le CSS par celui ci :

Code:

.titreONGL a{
font-family: Lobster;
font-size: 25px;
color: #F0F0F0;
position: relative;
margin:10px;
}

.titreONGL a:hover,
.titreONGL a:active,
.titreONGL a:focus {
color: #FE6D6D;
}

.titre001 {
color: #FE6D6D;
font-family: Bebas Neue;
font-size: 20px;
letter-spacing: -1px;
text-align: center;
}

.entete001 {
background-color: #8D1810;
color: #fff;
font-family: playball;
font-size: 30px;
letter-spacing: -1px;
padding: 5px;
text-align: center;

}        

.fond01 {
background-image: url('http://img11.hostingpics.net/pics/280152Bois3.jpg');
box-shadow: 0px 0px 0px 0px #000;
width: 550px;
}

[Asaki]

Bonjour !
Merci pour votre aide. Malheureusement cela ne marche pas. J'ai mis le résultat ici :
http://oyama.forumactif.org/t23-probleme-onglet

Et sur l'autre code de fiche cela m'a enlevé le fait que cela soit coloré en rouge au survol.

[Scoubifitz]

attention ... le CSS que je vous ai donné est lié au code que je vous ai donné .

je pense que vous êtes sous google chrome , il faut donc remplacer :

Code:

.titreONGL a:hover,
.titreONGL a:active,
.titreONGL a:focus {
color: #FE6D6D;
}

par :

Code:


.titreONGL:hover a,
.titreONGL:active a,
.titreONGL:focus a{
color: #FE6D6D;
}

[Asaki]

Oui, j'ai bien mis le CSS pour ce nouveau code. Le problème c'est que cela donne ce résultat (l'image se retrouve à gauche et il n'y a pas de mise en forme de la police, ni de hover, ni quand l'onglet est actif).
Je suis sur Firefox. Mon forum est en phBB2.
J'ai essayé votre deuxième code et cela donne le même résultat.

Il ne faut pas passer par du Javascript par hasard ?

[Scoubifitz]

éditez votre CSS et corrigez la première ligne , il y a un slash de trop dans le commentaire ...

Code:

//*Police onglet*/

devrait être :

Code:

/*Police onglet*/

[Asaki]

Ah effectivement merci !
Alors cette fois cela applique bien la police et le hover, sauf que l'image n'est pas centrée et que cela n'applique pas la couleur rouge qui reste lorsqu'on clique dessus.

Merci pour votre aide jusque là !

EDIT : C'est bon le clic marche ! Je vais vérifier que cela marche bien sur Chrome. L'image par contre est toujours décalée.
EDIT2 : Sur Chrome l'image est bien centrée mais cela n'applique pas le clic. De plus la partie basse est comme coupée.

[Scoubifitz]

oups ... il manque une "div" de fermeture en fin de code ... à rajouter ...

dans le CSS , rajouter "margin:auto; " à la class ".fond01 " pour center le tout .

Apparemment, google chrome a des soucis avec la pseudo-class :focus , et pas de solution en cours ...

[Asaki]

Bonjour !
Alors tout d'abord merci, ça marche à merveille !
Et j'ai trouvé une solution pour Chrome (apparemment ça ne marche pas sur Safari également) : au niveau des div pour les onglets, il faut rajouter tabindex="0" (tabindex="1" etc... pour les autres onglets) et cela fonctionne.

Par exemple :

Code:

<div tabindex="0" class="titreONGL"><a href="http://oyama.forumactif.org/h4-compte" target="PV">Compte</a></div>

[Scoubifitz]

un peu biscornu , puisque c'est plutôt prévu pour des formulaires , mais ça à l'air de fonctionner !^^