Tableau à onglets verticaux

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

Résolu Tableau à onglets verticaux

Message par Mouton.Electric le Lun 13 Fév 2012 - 15:35

Bonjour à tous,

Comme l'indique le titre, je cherche à faire un tableau à onglets verticaux, dont le contenu coulisserait par le bas dans l'idéal. J'ai bien essayé d'adapter le code du troisième tableau proposé ici dans les trucs et astuces mais plus je touche à la structure du tableau ou au css et moins ça ressemble à ce que je voudrais obtenir. -_-*
Voici un schéma de ce que je voudrais réaliser :

J'ai beau écumer les tuto concernant le jQuery, javascript ou même le html/css au moins pour la structure, je n'arrive à rien... Pourriez-vous donc m'apporter votre aide ou quelques conseils ?

Merci d'avance.


Dernière édition par Mouton.Electric le Lun 13 Fév 2012 - 22:04, édité 1 fois

Mouton.Electric
Nouveau membre

Messages : 25
Inscrit(e) le : 07/12/2011

http://try-again.forumactif.com
Mouton.Electric a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets verticaux

Message par Final-Blonde le Lun 13 Fév 2012 - 15:57

Bonjour,

En fait ce serait réalisable même en CSS.

As-tu des dimensions précises (largeur est hauteur générales du tableau) ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets verticaux

Message par Mouton.Electric le Lun 13 Fév 2012 - 16:14

Bonjour,

Merci pour ta réponse. Je n'étais pas sûre qu'en css on puisse avoir les contenus interactifs en fonction de l'onglet sélectionné, mais je suis ravie de l'apprendre, ça me permettra sûrement de mieux comprendre les codes. Même si je débute complétement et que c'est souvent difficile pour moi. =)

Alors, je n'avais pas de dimensions précises mais finalement, ce serait peut-être plus esthétique si elles étaient définies... Je dirais 350px de largeur pour l'ensemble du tableau et 250px de hauteur pour les contenus avec un scrollbar pour éviter le débordement du blabla qui va atterrir dedans.
En tout cas, merci beaucoup de t'être penchée sur ma demande ! o/


Mouton.Electric
Nouveau membre

Messages : 25
Inscrit(e) le : 07/12/2011

http://try-again.forumactif.com
Mouton.Electric a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets verticaux

Message par Final-Blonde le Lun 13 Fév 2012 - 19:40

Je t'en prie, mais voyons d'abord si j'arrive à t'aider à ce que tu voudrais atteindre...

En HTML, nous allons créer un tableau général et ensuite des blocs pour chaque onglet/contenu.
En CSS, hormis les bases, c'est surtout la propriété "transition" qui fera coulisser les différents blocs.

Dans le HTML, voici un exemple qui rend les onglets et les contenus uniformes:
Code:
<!-- smart onglets -->
<table align="center" width="350" border="4" cellspacing="3" cellpadding="3"><tr><td align="center" valign="middle"><div class="smartonglet">
<p class="outonglet">ONGLET 1</p><div class="inonglet">CONTENU 1<br />
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div><div class="smartonglet">
<p class="outonglet">ONGLET 2</p><div class="inonglet">CONTENU 2<br />
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div><div class="smartonglet">
<p class="outonglet">ONGLET 3</p><div class="inonglet">CONTENU 3<br />
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div><div class="smartonglet">
<p class="outonglet">ONGLET 4</p><div class="inonglet">CONTENU 4<br />
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5] A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius: 'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.</div></div>
</td></tr></table>
Dans la feuille de style :
Spoiler:
/*------------------------------------------------------- smartonglets pour Mouton.Electric -----------------------------------------------------------*/
/*smart spoiler pour Ventus
------------------------------------*/
.smartonglet {
display: block;
overflow: hidden;
width: 350px;
height: 34px;
transition: 1s all;
-webkit-transition: 1s all;
-moz-transition: 1s all;
-o-transition: 1s all;
-ktm-transition: 1s all;
margin: 0px 4px;
cursor: pointer;
}
.outonglet {
display: inline-block;
width: 89%;
font: smallcaps bold 13px arial; /*ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size ez le family dans l ordre*/
text-align: center;
border: 3px solid #000;
padding: 4px;
}
.smartonglet:hover {
height: 250px;
overflow-y: auto; /*au cas où le texte serait trop long une scrollbar sera là*/
transition: height 1s linear;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ktm-transition: height 1s linear;
}
.inonglet {
display: inline-block;
width: auto;
font: 13px arial; /*ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly (on peut omettre toutes les propriétés sauf le size ez le family dans l ordre)*/
text-align: justify;
padding: 0px 4px;
margin: o auto;
}
/*------------------------------------------------------- end smartonglets pour Mouton.Electric -----------------------------------------------------------*/
A toi de personnaliser en couleurs, style de texte, etc.

Il y a aussi moyen de séparer les onglets et contenus pour les personnaliser différemment, dis-moi ce que tu préfères.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets verticaux

Message par Mouton.Electric le Lun 13 Fév 2012 - 21:34

Merci beaucoup !! C'est pratiquement parfait !
Pour la personnalisation, pas de soucis, je me ferais un plaisir de faire ça à ma sauce ! ^^
Mais actuellement, les onglets et contenus se distinguent, non ? La class outonglet permet de personnaliser les onglets et inonglet les contenus, ou alors je comprends encore moins bien que prévu ? ^^
Est-ce qu'il est possible de faire sortir les onglets pour qu'ils restent visibles ? Parce que ça manque un peu de clarté pour le moment et ça risque d'être difficilement exploitable en l'état actuel...

Merci encore pour ta réponse, je te souhaite une très bonne soirée !

Mouton.Electric
Nouveau membre

Messages : 25
Inscrit(e) le : 07/12/2011

http://try-again.forumactif.com
Mouton.Electric a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets verticaux

Message par Final-Blonde le Lun 13 Fév 2012 - 21:47

Merci pour le gentil "merci". (-:

Oui, le outonglet est pour l'onglet, donc personnalisable à part du inonglet.
On peut aussi attribuer des identifiants différents pour chaque onglet et pour chaque contenu afin de les styler indépendamment les uns des autres.

Pour ce qui est de garder un onglet ouvert sans le curseur dessus, ce serait faisable qu'avec le clic, et là ce ne serait pas du tout le même code, et il faudrait ajouter un bout de JS.
C'est le principe du hover justement.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets verticaux

Message par Mouton.Electric le Lun 13 Fév 2012 - 22:03

Pas de quoi pour le merci, c'est la moindre des choses.
Ah oui, je vois où tu voulais en venir maintenant, je verrais bien, mais j'aime les codes uniformes, je trouve ça plus joli. J'improviserai au moment de la personnalisation s'il le faut. =)

En fait, en bidouillant ton code et en montant les <p class="outonglet">ONGLET 1</p> au dessus des <div class="smartonglet"> Les onglets restent visibles et la transition s'effectue sur le "Contenu 1". Ce qui me va très bien comme structure, car ça devient onglet/titre contenu/sous-titre paragraphe en latin/contenu.
Bref, je te vénère !! XD

Merci beaucoup pour ton aide ! Me reste plus qu'à personnaliser le tout. =)
Bonne soirée !

Mouton.Electric
Nouveau membre

Messages : 25
Inscrit(e) le : 07/12/2011

http://try-again.forumactif.com
Mouton.Electric a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets verticaux

Message par Final-Blonde le Lun 13 Fév 2012 - 22:23

@Mouton.Electric a écrit:en montant les <p class="outonglet">ONGLET 1</p> au dessus des <div class="smartonglet"> Les onglets restent visibles et la transition s'effectue sur le "Contenu 1".
Han, c'était donc ça !!!
Eh oui, un pseudo pas uniquement "collector" mais aussi bien significatif^^

Je t'en prie et bien du plaisir.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde 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