Tableau à onglets coulissants

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

Résolu Tableau à onglets coulissants

Message par Melow le Lun 21 Nov 2011 - 12:11

Bonjour à tous,

Je cherche à faire un tableau à onglets coulissants mais ai quelques soucis pour me dépatouiller. J'ai un peu de mal avec certains scripts alors j'ai recherché sur le forum des topics qui pourraient m'aider. J'en ai trouvé des tas, même beaucoup mais aucun ne correspond vraiment à ce que je voudrais. J'aimerais quelque chose de complètement personnalisable. Taille, formes arrondies, titres et tout ça.

Je fais toujours des tas de recherches sur votre site avant de poser une question (c'est le seul site que je trouve très clair au niveau des explications, les autres me prennent la tête), c'est d'ailleurs pour cette raison qu'en deux ans, ce n'est que mon deuxième sujet sur le site. D'habitude, je trouve toujours une réponse ou bien je me débrouille pour modifier ce que je trouve mais présentement, y'a pas moyen, je n'y arrive pas. Donc s'il vous plaît, ne me reportez pas à un autre sujet... je les ai déjà tous lus Sad .

Je vous laisse un petit screen de ce que j'aimerais obtenir comme résultat.

Spoiler:

Je voudrais qu'il y ait une petite image seulement sur le bout de l'onglet à l'emplacement des titres (si c'est possible) et une autre image de fond pour le contenu.

Je m'y connais un peu en css et codage et d'habitude je me débrouille avec vos différents tutos mais là, je requiers vraiment votre aide. Je voudrais faire quelque chose de chouette pour les membres de mon forum, quelque chose qui change un peu et j'ai besoin de vous...

Vous remerciant d'avance...


Dernière édition par Melow le Lun 28 Nov 2011 - 10:58, édité 1 fois

Melow
**

Féminin
Messages : 60
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets coulissants

Message par Final-Blonde le Lun 21 Nov 2011 - 14:50

Bonjour,

Pas besoin de script, c'est juste avec du HTML et du bon CSS3 (propriété . "transition") que nous allons le réaliser.

Comme tu dis te débrouiller en CSS, je te laisse le style et te donne juste les bases de la structure.
J'ai pour manie de placer des blocs (div) dans d'autres blocs, que je place à leur tour dans un tableau qui lui-même est dans LE tableau principal.
Non pour écrire des codes à la suite, mais juste pour ensuite bien pouvoir les positionner (les deux tableaux), et pour mieux les gérer quant au style (tableaux et blocs), c'est là aussi que tu peux mettre tes fonds à l'identifiant approprié (voir plus bas dans le CSS).

Commençons par le HTML :
Code:
<table align="left" style="display: block; position: relative; width: 197px; margin: 0 auto; padding: 7px;"><tr><td width="100%" valign="top">
<table align="center" style="display: block; position: absolute; top: 0px; left: 0px; width: 100%; margin: 0 auto; border: 3px ridge #000;  -moz-border-radius: 19px; -webkit-border-radius: 19px; border-radius: 19px; padding: 3px;"><tr><td valign="top">
<br />
<div id="slidepanno"><div class="pannotitre1" align="center">TITRE 1</div><div class="panninside1" align="center">TEXTE<br />
IMAGE<br />
LIENS
</div></div>
<br />
<div id="slidepanno"><div class="pannotitre2" align="center">TITRE 2</div><div class="panninside2" align="center">TEXTE<br />
IMAGE<br />
LIENS
</div></div>
<br />
<div id="slidepanno"><div class="pannotitre3" align="center">TITRE 3</div><div class="panninside3" align="center">TEXTE<br />
IMAGE<br />
LIENS
</div></div>
<br />
<div id="slidepanno"><div class="pannotitre4" align="center">TITRE 4</div><div class="panninside4" align="center">TEXTE<br />
IMAGE<br />
LIENS
</div></div>
<br />
</td></tr></table>
</td></tr></table>
Là j'ai mis un peu de style dans les deux premiers table :
Le positionnement du premier en "relative" qui crée un parent et qui permet à l'autre table d'hériter et de pouvoir être en "absolute" tout en étant "cadré" dans l'espace du premier table.
Un peu de radius pour les arrondis.
Tu peux aussi leur attribuer un "class" et les gérer par leur identifiant propre dans la feuille de style CSS.

Dans le CSS, la propriété "transition" est assez simple à comprendre >
Entre les balises /*commentaires CSS*/ :
Spoiler:
/*tuto slidedown multi-panneaux
----------------------------*/
/*etat du slide up*/
#slidepanno {
display: block;
overflow: hidden; /*pour ne pas avoir la scrollbar*/
width: 170px; /*largeur du slide up et interieure du slide down*/
height: 19px; /*hauteur visible du slide up - titre*/
}
/*actions sur hover*/
#slidepanno:hover {
height: 197px; /*hauteur du slide down*/
-webkit-transition: height 4s linear;
-moz-transition: height 4s linear;
-o-transition: height 4s linear;
-htm-transition: height 4s linear;
transition: height 4s linear; /*direction du slide, secondes a ouvrir, slide identique du debut a la fin*/
z-index: 1; /*priorité sur ce qui se trouverait dessous*/
}
.pannotitre1 {
Propriétés-titre 1
}
.panninside1 {
Propriétés-contenu 1
}
.pannotitre2 {
Propriétés-titre 2
}
.panninside2 {
Propriétés-contenu 2
}
.pannotitre3 {
Propriétés-titre 3
}
.panninside3 {
Propriétés-contenu 3
}
.pannotitre4 {
Propriétés-titre 4
}
.panninside4 {
Propriétés-contenu 4
}

Point tu ne regarderas mes fautes car je ne peux pas éditer sans mettre la mise en page du HTML en péril, notamment les "br /" et les div ainsi alignés pour que tu puisses bien suivre.


Dernière édition par Final-Blonde le Lun 21 Nov 2011 - 15:16, édité 3 fois

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 coulissants

Message par Melow le Lun 21 Nov 2011 - 15:06

Tout d'abord, merci beaucoup de cette rapide réponse !

><. J'ai fait ce que vous m'avez dit... j'ai même compris la plupart des choses que vous m'avez expliqué... mais mon forum ne semble pas les comprendre lui xD.

J'ai essayé de deux manières. Tout d'abord en plaçant le code directement dans mes généralités. Ca m'a donné ceci (snif T.T) :

Spoiler:

Alors, j'ai tenté autre chose : créer une page html pour ensuite placer le lien dans mes généralités. C'est sûr, maintenant, on voit le tableau... par contre... euh... je vous laisse comprendre par vous-même :

Spoiler:

Alors soit... j'suis pas douée... soit mon forum est capricieux... Désolée de vous déranger encore =/.

Melow
**

Féminin
Messages : 60
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets coulissants

Message par Final-Blonde le Lun 21 Nov 2011 - 15:10

Arf, oui, c'est la largeur (width) du premier table qui doit être définie et non en "auto".

Je réédite le HTML plus haut en corrigeant cela et le titre 4.

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 coulissants

Message par Melow le Lun 21 Nov 2011 - 15:20

C'est mieux oui ^^. Au niveau de la taille (j'ai réglé aussi en fonction de mon forum), j'ai obtenu ce que je voulais, un grand merci.

Ceci dit, me reste ce problème de tableau. L'un ne coulisse pas. Et l'autre... euh... Il coulisse un peu bizarrement et se trouve en plein milieu de mes catégories.

Je vous laisse le lien de mon forum test pour que vous jugiez par vous-même. J'ai peut-être fait une erreur quelque part ...

Forum test

De plus, je voulais vous demander : me conseillez-vous d'insérer ce tableau grâce à une page HTML ou directement dans mes généralités ?

EDIT :
- Le tableau du haut est inséré via un lien HTML
- Le tableau du bas est celui inséré directement dans les généralités.

Melow
**

Féminin
Messages : 60
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets coulissants

Message par Final-Blonde le Lun 21 Nov 2011 - 15:28

Oui, tu as fait une erreur.
Copie-colle d'abord tel quel et ensuite adapte pas à pas.
Cela dit, ce n'est pas un tableau pour être aussi large, ou alors beaucoup moins haut lors du slide-down...
C'est plus pour des nouvelles, en tableau inclus dans un tableau principal (le premier table).

Le CSS des titres et des contenus, il faut le styler et pas le laisser ainsi en texte .
Il y a des navigateurs, qui n'aiment pas ça du tout.

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 coulissants

Message par Melow le Lun 21 Nov 2011 - 15:36

Hm... J'ai copié collé tel que vous me l'avez écrit. Je n'ai modifié que la taille. Rien d'autre pour le moment car je ne voulais justement pas faire de bêtises.

Je ne comprends pas trop où vous voulez en venir :/

Ensuite ce que je cherche à obtenir est un tableau d'accueil comme on voit sur la plupart des forums. Je veux pouvoir y inscrire plusieurs choses : les nouveautés, le staff, et certains autres trucs qui concernent mon forum RPG.

Enfin, mon navigateur ne m'a jamais posé de souci au niveau des tableaux coulissants. J'ai Google Chrome et ça fonctionne parfaitement sur d'autres forums.

Je ne demande pas un simple tableau (ça je sais faire XD), je veux un tableau dont les onglets coulissent latéralement. Je n'ai pas de forum exemple à vous montrer malheureusement.

EDIT :

J'ai tout remis comme l'aviez inscrit. Vous pourrez constater que ça n'est... pas du tout ce que je cherche... =/ Je sens que je vais m'arracher les cheveux.

Melow
**

Féminin
Messages : 60
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets coulissants

Message par Final-Blonde le Lun 21 Nov 2011 - 16:00

En effet, il y a un souci avec Google Chrome, et je suis en train de chercher pourquoi, alors que j'ai un beau slide avec Opera.

Donc pour l'instant JE m'arrache les cheveux.
Tu peux aussi chercher avec moi, ce n'est pas le code qui est faux dans son principe, mais plutôt une façon d'écrire le code.

Alors, patience...

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 coulissants

Message par Melow le Lun 21 Nov 2011 - 16:03

Voui, voui je cherche aussi, rassurez-vous >.<. Ca fait même une semaine que je cherche. Une seule fois j'ai réussi à obtenir une espèce de tableau bizarre mais qui coulissait. Seulement ça n'était pas ça que je recherchais. Il coulissait vers le bas Sad.

Ne vous inquiétez pas, je patiente. Simplement, ça m'énerve de déranger les gens Embarassed ...

Merci de votre aide.

Melow
**

Féminin
Messages : 60
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets coulissants

Message par Final-Blonde le Lun 21 Nov 2011 - 16:06

Aaah, qui coulisse latéralement ?!
J'ai pensé que l'image était à pivoter ! Pfff, quelle cruche je fais !
Bon mais rien de grave, il suffit d'inverser les commandes HTML et CSS, ça c'est rien... Mr. Green

Ce qui me préoccupe, c'est pourquoi Google slide d'autre menus que j'ai avec les mêmes codes (quasiment) et refuse de slider celui-ci... Grrr

Je reviens.

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 coulissants

Message par Melow le Lun 21 Nov 2011 - 16:13

Erf... Désolée, je me suis mal expliquée apparemment >.<.

Pour ce qui est de Chrome, oui j'avoue que je ne comprends pas. D'habitude, ça fonctionne. Sur d'autres forums où je me suis promenée, ça fonctionne. Ca slide impeccable... alors que là... bah rien du tout >.<.

J'vais le taper ce navigateur... Merci encore Smile.

Melow
**

Féminin
Messages : 60
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets coulissants

Message par Final-Blonde le Lun 21 Nov 2011 - 20:42

Erf, je cherche encore !

Faire slider sur la droite n'est pas un problème, mais je ne comprends pas pourquoi Google et Firefox ne veulent pas coulisser alors que sur Opera ce sont des slides parfaits... Grrr

Sinon au pire, tape "accordéon" dans google et vois avec un jQuery (il y en a des tas et assez simples à utiliser), en voici un par exemple :
http://www.megaptery.com/2011/05/zaccordion-un-accordeon-horizontal-avec-jquery.html

Pendant ce temps je m'entête avec mon CSS3 re- Grrr

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 coulissants

Message par Melow le Lun 21 Nov 2011 - 21:25

D'accord. Je vais essayer de me dépatouiller avec ce lien. J'avais déjà cherché sur google pour ça et étais tombée sur du jQuery mais je n'y comprenais rien xD.

Merci beaucoup de votre aide. Je vous tiens au courant !

EDIT :

Rahhhhhhh !!! Ca m'énerve ! Ca ne marche pas ! Assomé J'ai même télécharger Opéra pour espérer une réussite mais non toujours rien. Je vais continuer de me triturer l'esprit mais si jamais vous trouvez ou que quelqu'un d'autre trouve, je suis preneuse...

Final-blonde, merci énormément pour votre aide, c'est gentil de votre part d'être si patient(e).

Melow
**

Féminin
Messages : 60
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets coulissants

Message par Final-Blonde le Mar 22 Nov 2011 - 17:29

Bonsoir,

Les jQuery fonctionnent avec n'importe quel navigateur et je suis surptise que le lien donné n'ait rien donné.

Quant au slide par le CSS3, ce devrait être l'inverse, parce que c'est conçu par webkit (Google Chrome et Safari) à l'origine, c'est pourquoi je ne saisi pas que ça ne fonctionne pas avec eux (seulement certains slide, d'autres fonctionnent très bien)...
Il doit y avoir quelque chose à suivre avec le HTML et le CSS, mais mes codes qui fonctionnent sur d'autres navigateurs sont tellement.. pfiou, fournis, que ça va me prendre du temps en dehors de celui que je n'ai pas...

Bref, j'ai trouvé un accordéon que j'ai rapidement testé (c'est à dire que je l'ai juste installé mais pas paramétré, ni stylé) :
Dans la gestion des pages javasripts, installe ce jQuery :
Code:
$(document).ready(function(){
    lastBlock = $("#a1");
    maxWidth = 210;
    minWidth = 75;   

    $("ul li a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
   $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
   lastBlock = this;
      }
    );
});
Ce que tu peux modifier là, ce sont les "max-width", "min-width" et "duration" (temps pris pour s'ouvrir entièrement)

Dans le HTML :
Code:
<ul>
<li>
<a id="a1">
<img src="images/free_thumb.jpg" />
<p>
<strong>Freebies</strong><br/>
Download free files to make your job easier.
</p>
</a>
</li>
<li>
<a>
<img src="images/tut_thumb.jpg" />
<p>
<strong>Tutorials</strong><br/>
Tips and tricks to help you
keep up with the latest technology.
</p>
</a>
</li>
<li>
<a>
<img src="images/inspire_thumb.jpg" />
<p>
<strong>Inspiration</strong><br/>
Get inspired by what other designers are doing.
</p>
</a>
</li>
</ul>

Et dans le CSS :
Code:
ul{
list-style: none;
margin: 0;
padding: 0;
}

ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}

ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}

#a1{
width: 210px;
}

ul li img{
position: absolute;
border: 3px solid #881212;
}

ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}

Comme tu as dit te débrouiller, je te fais confiance pour créer un jouli zaccordéon en adaptant avec le CSS.

Moi je continue avec mon CSS !

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 coulissants

Message par Melow le Mer 23 Nov 2011 - 14:28

Super ! Ca fonctionne !! Merci beaucoup !

Mais j'ai encore un léger souci : Ca déborde sur les catégories en dessous.

Spoiler:

Je pense donc que je dois redimensionner quelque chose en rapport avec le tableau de la PA mais je n'arrive pas à trouver quoi. Après, je pense que je pourrais me débrouiller pour faire un joli accordéon Smile.

Merci beaucoup de votre aide en tous cas !

Melow
**

Féminin
Messages : 60
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets coulissants

Message par Final-Blonde le Mer 23 Nov 2011 - 21:07

Ah ben voilà !
Et moi j'y suis arrivée.. Rien qu'en CSS !
Ce sont des lignes et des lignes de codes, mais ça en vaut la peine.
Si l'effet slide ne fonctionnait que sur Opera, vient que j'utilisais du "display: none" au lieu du "overflow: hidden".
Chrome et Firefox n'ont pas aimé.

Pour ce qui est du débordement, c'est presque normal, parce qu'il y a du z-index qui permet à un élément de se placer sur un autre avec une priorité de 1 supérieur à celui de dessous.
Tu peux y remédier en mettant à ton table, si le tout se trouve dans un tableau, ou dans le div principal, une largeur et une hauteur fixes assez grandes pour contenir les volets de l'accodéon une fois ouverts.

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 coulissants

Message par Melow le Jeu 24 Nov 2011 - 11:59

Tout en css ! Tu es doué ! Je suis jalouse xD. Est-ce que je peux avoir aussi ce code là ? Histoire d'apprendre encore quelque chose ? J'adore apprendre en codage Embarassed

Pour le débordement, je vais essayer d'arranger ça en tous cas ! Merci beaucoup beaucoup pour ton aide, c'est gentil d'avoir pris la patience de m'aider Smile.

Melow
**

Féminin
Messages : 60
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets coulissants

Message par Final-Blonde le Jeu 24 Nov 2011 - 13:53

Je t'en prie, j'aime bien l'entraide, c'est aussi comme ça et ici que j'ai beaucoup appris en codage.

@Melow a écrit:Tout en css ! Tu es douéE !
Oh que nenni ! juste extrêmement têtue quand je veux y arriver, et je me suis faite aider par toute la toile, ainsi que par mes amis Google et Bing.

@Melow a écrit:Est-ce que je peux avoir aussi ce code là ?
Ce n'est pas un code, mais une grosse feuille de style...
Quant à te le transmettre, nope pas encore, je suis encore en train de le perfectionner pour quelque chose comme un grid accordéon en CSS uniquement :
http://codecanyon.net/item/grid-accordion/full_screen_preview/141991 Mr. Green

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 coulissants

Message par Melow le Jeu 24 Nov 2011 - 19:50

Oups ><. DouéE donc !

Impressionnant. Ca doit prendre énormément de temps de faire quelque chose comme ça ! Mais ça doit aussi être vachement intéressant à apprendre et à modifier =).

Personnellement, je vais retourner à mon tableau en soirée et je te dirai si tout est impec ^^.

En attendant, je remercie ton message car j'ai cru comprendre que cela fait prendre des points de réputation !

Melow
**

Féminin
Messages : 60
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau à onglets coulissants

Message par Melow le Lun 28 Nov 2011 - 10:58

Désolée du doublon, je marque résolu car j'abandonne le sujet. Je ne parviens pas au résultat souhaité.

Merci Final-blonde pour ton aide Smile.

Melow
**

Féminin
Messages : 60
Inscrit(e) le : 01/09/2010

http://aendryl.forumactif.org/
Melow 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