Bien le bonjour tout le monde (: Alors voila je viens vers vous à cause d'un vilain code qui me résiste encore e___e
Je vous présente déjà mon forum qui va passe en ce moment même en version 7 "http://percy-jackson.forumactif.com/" donc ne vous inquiéter pas pour les soucis de couleurs et d'harmonisation. Tout est en cours enfin bref. Je vais vous exposer mon problème. Enfin les deux problèmes...

1. Un soucis d'onglet

Comme vous pouvez le voir, j'ai des onglets pour séparer la partie Hors RPG, de ma partie RPG. Malheureusement lorsque j'essaye de les modifier pour leur donner un arrondis avec Border-Radius, ils ne les prennent pas mais pas du tout en compte uu' Les angles arrondis et les bords ne veulent pas s'afficher et je ne vois vraiment pas où est le problème.

Le HTML dans Index Box:

Code:

<table id="conteneur_onglets">
  <tr>
      <td OnClick="change_categorie(1)"><div class="zonehrp">      Zone Hrpg</div></td>
      <td OnClick="change_categorie(2)"><div class="zonerp">     &nbsp;Zone Rpg</div></td>
<!--  <td OnClick="change_categorie(Y)">nom onglet Y</td>  -->
  </tr>
</table>
<script type="text/javascript">

  function change_categorie(numero)
  {
      if($('.categorie:eq('+(numero-1)+')').size() != 0)
      {
        $('.categorie').css("display","none");
        $('.categorie:eq('+(numero-1)+')').fadeIn();
      }
      else
      {
        alert("Vous n'avez pas accès à cette catégorie")
      }
  } 

  $("document").ready(function()
  {
      if($(".categorie").size() > 1)
      {
        if($("#conteneur_onglets").is("table"))
        {
            $("#conteneur_onglets").css("display","table");
        }
        else
        {
            $("#conteneur_onglets").css("display","block");
        }
      }

      change_categorie(1);
  })
 
</script>

Le CSS correspondant:

Code:

#conteneur_onglets
{
  width: 100%;
  display: none;
  margin-top: 20px;
  text-align: center;
  border-collapse: collapse;
}


.zonehrp
{
  border: #5c5342 ;
  border-radius-topleft: 20px;
border-radius-topright: 20px;
  font-family: ;
  text-shadow: black 1px 1px 2px;
  background-color: #ada18d;
  width:115px; /*Largeur de l'onglet étant actif*/
  height:25px; /*Hauteur de l'onglet étant actif*/
  color: #000000;
  font-size: 14px;
margin-left: 70px;
margin-bottom: -3px;
}

.zonerp
{
  border: #5c5342 ;
  border-radius-topleft: 20px;
  border-radius-topright: 20px;
  font-family: ;
  text-shadow: black 1px 1px 2px;
  background-color: #ada18d;
  width:115px; /*Largeur de l'onglet étant actif*/
  height:25px; /*Hauteur de l'onglet étant actif*/
  color: #000000;
  font-size: 14px;
margin-right: -70px;
margin-bottom: -3px;
}

.zonehrp:hover
{
  border: #5c5342 ;
  border-radius-topleft: 20px;
border-radius-topright: 20px;
  font-family: ;
  text-shadow: black 1px 1px 2px;
  background-color: #ada18d;
  width:115px; /*Largeur de l'onglet étant actif*/
  height:25px; /*Hauteur de l'onglet étant actif*/
  color: #000000;
  font-size: 14px;
margin-left: 70px;
margin-bottom: -3px;
}

.zonerp:hover
{
  border: #5c5342 ;
  border-radius-topleft: 20px;
  border-radius-topright: 20px;
  font-family: ;
  text-shadow: black 1px 1px 2px;
  background-color: #ada18d;
  width:115px; /*Largeur de l'onglet étant actif*/
  height:25px; /*Hauteur de l'onglet étant actif*/
  color: #000000;
  font-size: 14px;
margin-right: -70px;
margin-bottom: -3px;
}


#conteneur_onglets td
{
  cursor: pointer;
}

Donc déjà ici pour une chose facile je sèche grave, j'essaye par tout les moyens, mais impossible qu'il me les affiche >.<

2. Une nouvelle page d'accueil

Voici le second problème qui n'en n'est pas réellement un, ce serait plutôt un aiguillage ^-^ J'ai décidé de faire une nouvelle page d'accueil. Tout fier et tout content de mon fond, j'étais partit pour faire une image réactive avec des onglets et les pages qui changent donc au centre. Mais voila, je ne vois vraiment pas comment integrer les deux en même temps. J'ai trouvé comment faire des images réactives mais qui permettent de renvoyer vers des liens externes alors que là c'est pour un changement d'onglets sûr cette PA. Donc si quelqu'un pouvait m'expliquer un peu le topo et ce que je dois faire pour y arriver {:

La PA en question:

https://i.servimg.com/u/f42/11/12/90/71/fond_p13.jpg


Voila pour moi, en espérant que quelqu'un puisse trouver les solutions (: Merci d'avance.
Cordialement Aaron

Hey ! Je ne peux pas répondre à ton premier soucis, mais je peux pour le second ! Tu peux utiliser le sélecteur :target ? Je fais mes PA à onglets uniquement comme ça. :O Ça utilise le système des ancres avec les id pour changer par exemple le z-index de tel ou tel élément quand il est séléctionné par l'ancre...

Par exemple, à cet endroit : http://rpgs-others.frbb.net/h3-p

J'utilise les ancres pour changer le z-index et l'opacité des éléments, et ça donne une PA à onglets... Il suffit juste de générer et de positionner tes éléments là où ils doivent être - avec un petit position: absolute; et quelques margin, je pense - puis de les placer dans l'ordre que vous voulez avec le z-index... Par exemple :

Le HTML

Code:

<a href="#onglet1">Lien 1</a>
<a href="#onglet2">Lien 2</a>
<a href="#onglet3">Lien 3</a>
<div class="pa">
<div class="onglet" id="onglet1">CONTENU</div>
<div class="onglet" id="onglet2">CONTENU</div>
<div class="onglet" id="onglet3">CONTENU</div>
</div>

Le CSS

Code:

.onglet {
  width: 400px;
  height: 400px;
  -webkit-border-radius: 200px;
  -moz-border-radius: 200px;
  -o-border-radius: 200px;
  border-radius: 200px;
}

#onglet1 {
  position: absolute;
  z-index: 3;
}

#onglet2 {
  position: absolute;
  z-index: 2;
}

#onglet3 {
  position: absolute;
  z-index: 2;
}

#onglet1:target {
  z-index: 4;
}

#onglet2:target {
  z-index: 4;
}

#onglet3:target {
  z-index: 4;
}

Donc on positionne les éléments en " profondeur " avec le z-index, puis on change les positions quand on clique sur un des liens.

Je sais pas si c'est assez clair, mais n'hésite pas si tu as des questions. ^^

Hello Aaron,

C'est la deuxième fois que je te surprends à faire un truc à la morale fort discutable (la première étant quand tu as viré mes crédits "par accident"). Pour l'heure, je suis très surprise de constater une ressemblance aussi forte entre le message d'accueil de ton forum et celui de goldheart. Est-ce que tu as leur permission ?

Damudo > La vache c'est astucieux O_O Est-ce que c'est compatible avec Internet Explorer au moins ?

Salut 'Christa (:

Pour répondre à e que tu as mis, je suis désolé mais on m'a proposé cette idée avec une planche faite sur 'Toshop, je l'ai donc suivis pour faire le design vus que ça me paresser une bonne idée que je n'avais pas exploité en rond. Je suis désolé que ça puisse ressembler à la PA de ce forum O.o Je vais changer ça de suite dans une autre forme et agencement, et demander où est se qu'il a eu cette idée. Je suis désolé uu'

Damudo > Merci pour ton aide je vais voir ce que ça donne (:

'Christa ;

Retour à la Source a écrit:

Le sélecteur :target fonctionne pour le moment sur Mozilla Firefox 2, Safari 3, et Opera Browser 9.50

Ne fonctionne qu'a partir d'Internet Explorer 9... De toute façon, j'ai pas mieux, je n'y connais rien en Javascript. ^^'
http://findmebyip.com/litmus/ Sinon, ça fonctionne pour tout les autres.

Aaron ; Pas de quoi, je suis ravi d'avoir pu t'aider. :3

Bonjour (:

Je viens juste prévenir que j'avais réussi à résoudre mon premier problème ^-^ Je n'avais pas fait le rapprochement Mozilla étant passé avec le .CSS3 il lui faut une nouvelle balise (;

border-top/botton-left/right-radius:20px 20px;

Voila je poste ça au cas où si ça peut aider quelqu'un on ne sait jamais x')
Pour le second problème, j'ai essayé avec le target mais je n'arrive à rien faire uu' donc je pense rapidement faire une commande (:

Voila voila donc je pense que l'on peut clore le topic Merci Damudo pour ton aide (:
Cordialement Aaron