Un onglet de chaque côté du tableau ?

2 participants

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

Résolu Un onglet de chaque côté du tableau ?

Message par Cristallou Dim 11 Nov 2012 - 11:54

Bonjour, bonsoir !
Je viens poster ici après avoir passé pas mal de temps à rechercher moi-même la solution. Mais en désespoir de cause je m'en remets à vous. Mon problème est tout simple : je prépare une nouvelle page d'accueil pour mon forum (une PA à onglets). J'avais en tête une structure bien précise mais malheureusement je tourne en rond. J'aurais souhaité une PA avec deux onglets, chacun étant d'un côté du tableau. Enfin j'ai fait un petit schéma vu que je ne suis pas très douée pour les explications.

Schéma en question :

J'ai essayé diverses choses mais toutes ont échoué, me donnant des rendus assez bizarres et pas franchement concluants. xD Ah ! Et voilà mon HTML et le CSS qui va avec (en fait c'est les machins de base de Forumactif... avec ce tuto : Cliik').

Code:
CSS

/*Tableau PA*/

/* .systab .tab => les onglet */
.systab .tab {
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  border-radius: 3px;
  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: #000;
  background: #fff;
  border: 1px 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;
}

Code:
HTML

<div class="systab s_float s_fade s_hover">
  <div class="onglet 1">
    <span>Le forum</span>
    Mon contenu 1
  </div>
  <div class="selected onglet 2>
    <span>Godoooot</span>
    Mon contenu 2
  </div>
</div>

Voilà tout et merci d'avance et celui - ou ceux - qui voudra bien m'aider ! ::fleur::

Cristallou
Cristallou

Cristallou
*

Féminin
Messages : 32
Inscrit(e) le : 22/12/2009

http://showdown.bb-fr.com/
Cristallou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un onglet de chaque côté du tableau ?

Message par Cristallou Sam 17 Nov 2012 - 9:20

Petit UP ! :3
Cristallou

Cristallou
*

Féminin
Messages : 32
Inscrit(e) le : 22/12/2009

http://showdown.bb-fr.com/
Cristallou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un onglet de chaque côté du tableau ?

Message par Ea Mar 20 Nov 2012 - 23:42

Bonjour,


Où en est votre problème ?

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

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

Résolu Re: Un onglet de chaque côté du tableau ?

Message par Cristallou Mer 21 Nov 2012 - 13:00

Ça n'a pas avancé donc je re-up une fois encore. :3
Cristallou

Cristallou
*

Féminin
Messages : 32
Inscrit(e) le : 22/12/2009

http://showdown.bb-fr.com/
Cristallou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Un onglet de chaque côté du tableau ?

Message par Ea Mer 21 Nov 2012 - 14:22

Pour juste 2 onglets et à des positions différentes, autant le faire à la main je pense :

Code:
<table>
<tr>
  <td>
    <a href="javascript:$('#contenu1').fadeIn(300);$('#contenu2').fadeOut(300)"><img src="http://2img.net/i/fa/i/smiles/icon_smile.gif" /></a>
  </td>
  <td>
    <div id="contenu1">1, 2, 3, je m'en vais zau boa</div>
    <div id="contenu2" style="display:none">4, 5, 6, elles seront toutes rouze</div>
  </td>
  <td>
    <a href="javascript:$('#contenu2').fadeIn(300);$('#contenu1').fadeOut(300);"><img src="http://2img.net/i/fa/i/smiles/icon_cat.png" /></a>
  </td>
</tr>
</table>
Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

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

Résolu Re: Un onglet de chaque côté du tableau ?

Message par Cristallou Mer 21 Nov 2012 - 20:10

Bonsoir,
Ah oui ça fonctionne nickel ! Je ne vous remercierai jamais assez. *-*
Bonne soirée ! =P
Cristallou

Cristallou
*

Féminin
Messages : 32
Inscrit(e) le : 22/12/2009

http://showdown.bb-fr.com/
Cristallou a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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