Tableau à onglet

[Spy_1000mg]

Bonsoir à tous j'ai suivi le tuto du tableau à onglet de FA qui marche à merveille cependant je voudrai rajouter un genre comme sa:

Spoiler:

Alors je met ce code:

Code:

<br><div class="systab"><div class="modo1">
  <div>
    <span><div class="modo2">Onglet 1</div></span>
  Contenus 1
  </div>
  <div>
  <span><div class="modo2">Onglet 2 </div></span>
  Contenus 2
  </div>
  <div>
  <span><div class="modo2">Onglet 3</div></span>
  Contenus 3  </div>
 </div>
</div>

et résultat:

Spoiler:

Les onglets ne fonctionne pas et ils ne sont pas à l'horizontal :S
Un peu d'aide? Merci d'avance

[Spy_1000mg]

Vous voulez peut être d'autres codes?

[Ünicorn]

Bonjour !

Dans le premier cas il me semble qu'il s'agit plus d'une boîte avec titre qu'un tableau à onglet. Par ailleurs je vous conseille d'ajouter le CSS correspondant à votre tableau à onglet car sans lui vous aurez peu de chance d'obtenir une réponse.

[Spy_1000mg]

Code:

/*Tableau à Onglet*/
/* .systab .tab => les onglet */
.systab .tab {
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #152026;
border: 1pxp solid #000000;
border-radius: 4px 4px 4px 4px;
  cursor: pointer;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
  background: #b8efa1;
  color: #487f31;
  border-color: #487f31;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
  color: #ccc;
  background: #333;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents {
  margin-top: 1px;
  margin-bottom: 1px;
  color: #FFFFFF;
  background: #152026;
  border: 2px solid #000;
  padding: 10px;
}
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
  margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;
}
/*Tableau à onglet*/
 .forumline tr:first-child th:first-child { border-top-left-radius: 20px }
.forumline tr:first-child th:last-child { border-top-right-radius: 20px }
.forumline tr:last-child td:first-child { border-bottom-left-radius: 20px }
.forumline tr:last-child td:last-child { border-bottom-right-radius: 20px }
/*Bordure Gauche-Droite*/
.forumline {
border-left: 3px solid #152026 !important ;
border-right: 3px solid #152026 !important ;
}
/*Message Officiel*/
.modo1 {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #3F4C54;
border-color: #FEB500 #FE7D00 #FE7D00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 1px black inset, 0 0 2px black;
color: white;
display: block;
margin: 15px 35px;
padding: 13px 10px 10px;
}
.modo2 {
background: none repeat scroll 0 0 #3F4C54;
border-color: #FEB500 #FE7D00 #FE7D00;
border-radius: 4px 4px 4px 4px;
border-style: dashed;
border-width: 1px;
box-shadow: 0 1px 1px black inset, 0 0 2px black;
color: #FEB500;
display: table;
font-family: Georgia,Arial;
font-size: 18px;
font-variant: small-caps;
margin-left: -3px;
margin-top: -25px;
padding: 4px 5px;
text-align: center;
text-shadow: 0 0 2px black;
}

Le message officiel correspond à la bordure orange-doré

[Ünicorn]

Hop ! J'y aurais passé un peu de temps mais j'y suis finalement arrivé !

J'ai supprimé pas mal de chose dans votre code initial. Premièrement les balises que vous avez rajouté : .modo2. J'ai transféré tous les effets directement dans le .systab .tab. Du coup le bug d'affichage est réglé et le code est simplifié.

Concernant le code HTML placé la class .modo1 avant ce qui règle là aussi un souci de bug. J'ai également supprimé la span class modo2 puisque j'ai directement intégré les effets de la class dans la class par défaut des onglets (en réalité vous aviez créé deux class différentes pour la même chose ─ c'est ce qui faisait buger votre code). Bref, je vous laisse le code à la place de blablater.

Code:

<div class="modo1"><div class="systab">
  <div class="selected">
    <span>Mon onglet 1</span>
    Mon contenu 1
  </div>
  <div>
    <span>Mon onglet 2</span>
    Mon contenu 2
  </div>
  <div>
    <span>Mon onglet 3</span>
    Mon contenu 3
  </div>
</div></div>

Le CSS

Code:

/* .systab .tab => les onglet */
.systab .tab {margin-right: 3px;
  cursor: pointer;
  background: #3F4C54;
  border-color: #FEB500 #FE7D00 #FE7D00;
  border-radius: 4px 4px 4px 4px;
  border-style: dashed;
  border-width: 1px;
  box-shadow: 0 1px 1px black inset, 0 0 2px black;
  color: #FEB500;
  font-family: Georgia,Arial;
  font-size: 18px;
  font-variant: small-caps;
  padding-left: -3px;
  margin-top: 25px;
  padding: 4px 5px;
  text-align: center;
  text-shadow: 0 0 2px black;}

/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {background: #b8efa1;
  color: #487f31;
  border-color: #487f31;}

/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{color: #ccc;
  background: #333;}

/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents {margin-top: -10px;
  padding-top: 17px;
  padding-bottom: 10px;
  margin-bottom: 1px;
  color: #FFFFFF;
  background: #152026;
  border: 2px solid #000;}

/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {display: block;
  margin: 5px;}

/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {float: left;}

.modo1 {-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #3F4C54;
border-color: #FEB500 #FE7D00 #FE7D00;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 1px black inset, 0 0 2px black;
color: white;
display: block;
margin: 15px 35px;
padding: 13px 10px 10px;}

Et un petit bout de code que vous m'aviez donné et qui ne rentre pas en compte dans l'affichage du tableau mais qui donne un effet sur vos catégories.

Code:

/*Tableau à onglet*/
 .forumline tr:first-child th:first-child { border-top-left-radius: 20px }
.forumline tr:first-child th:last-child { border-top-right-radius: 20px }
.forumline tr:last-child td:first-child { border-bottom-left-radius: 20px }
.forumline tr:last-child td:last-child { border-bottom-right-radius: 20px }

/*Bordure Gauche-Droite*/
.forumline {border-left: 3px solid #152026 !important ;
border-right: 3px solid #152026 !important ;}

[Spy_1000mg]

Comment dire... c'est vraiment parfait :')
Merci beaucoup de ta rapidité et de la qualité de ton travail

Par contre c'est normal que les avatars de mes membres qui se situe dans dernier message ont disparu? :S
Si c'est normal, c'est pas grave si c'est pas normal c'est pas grave aussi ^^

[Ünicorn]

Chez moi rien à signaler de ce côté : screen.

[Spy_1000mg]

En effet, j'ai réactualisé sa marche
Je met le sujet en résolu un grand merci pour l'aide