Tableau à onglet

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

Résolu Tableau à onglet

Message par Spy_1000mg le Mar 30 Oct 2012 - 19:20

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


Dernière édition par Spy_1000mg le Mer 31 Oct 2012 - 14:46, édité 1 fois

Spy_1000mg
*

Messages : 38
Inscrit(e) le : 21/06/2012

http://undeadrebelsjump.net
Spy_1000mg a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par Spy_1000mg le Mer 31 Oct 2012 - 10:22

Vous voulez peut être d'autres codes?

Spy_1000mg
*

Messages : 38
Inscrit(e) le : 21/06/2012

http://undeadrebelsjump.net
Spy_1000mg a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par Ünicorn le Mer 31 Oct 2012 - 10:25

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.

Ünicorn
**

Masculin
Messages : 61
Inscrit(e) le : 14/11/2011

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

Résolu Re: Tableau à onglet

Message par Spy_1000mg le Mer 31 Oct 2012 - 12:10

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é

Spy_1000mg
*

Messages : 38
Inscrit(e) le : 21/06/2012

http://undeadrebelsjump.net
Spy_1000mg a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par Ünicorn le Mer 31 Oct 2012 - 14:22

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 ;}

Ünicorn
**

Masculin
Messages : 61
Inscrit(e) le : 14/11/2011

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

Résolu Re: Tableau à onglet

Message par Spy_1000mg le Mer 31 Oct 2012 - 14:32

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 ^^

Spy_1000mg
*

Messages : 38
Inscrit(e) le : 21/06/2012

http://undeadrebelsjump.net
Spy_1000mg a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglet

Message par Ünicorn le Mer 31 Oct 2012 - 14:35

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

Ünicorn
**

Masculin
Messages : 61
Inscrit(e) le : 14/11/2011

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

Résolu Re: Tableau à onglet

Message par Spy_1000mg le Mer 31 Oct 2012 - 14:45

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

Spy_1000mg
*

Messages : 38
Inscrit(e) le : 21/06/2012

http://undeadrebelsjump.net
Spy_1000mg 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