faire des onglets dans un message.

3 participants

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

Résolu faire des onglets dans un message.

Message par Carrie. Dim 12 Avr 2015 - 14:24

Bonjour à tous ! J'espère que vous passez un agréable dimanche !
Malheureusement, je viens vous embêter une nouvelle fois car malgré mes recherches, je n'arrive pas à trouver la perle rare.
Bref, j'aimerai faire un modèle de présentation avec des onglets, mais ceci sans passer par le Javascript (et si possible le moins possible par une page html pour que les membres puissent les modifier eux-même). J'ai vu pas mal de message disant que ce n'était pas possible, cependant je l'ai déjà vu faire & j'ai même entendu que ce serait possible avec du CSS3 (ex ce tutoriel : http://www.never-utopia.com/t50287p15-tuto-creer-des-onglets-en-full-css3-exemple-fiche-de-presentation )

J'aimerai vous proposer un code à simplement corriger, mais pour le moment, je n'ai rien de concluant. J'espère que l'un d'entre vous saura m'aiguillez, en général avec une structure de base ou un tuto , j'arrive à me débrouiller ::pourtoi:: Merci à vous pour le temps que vous m'accorderez & si vous désirez plus d'éléments, n'hésitez pas à demander , je ferais mon possible !

Bonne après-midi !


Dernière édition par Carrie. le Mer 22 Avr 2015 - 12:10, édité 1 fois
Carrie.

Carrie.
Nouveau membre

Messages : 13
Inscrit(e) le : 07/04/2015

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

Résolu Re: faire des onglets dans un message.

Message par MlleAlys Dim 19 Avr 2015 - 0:36

.faire des onglets dans un message. U10bBxG.Bonjour,

Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir délester votre sujet, merci de poster dans les 24h qui suivent ce message.

Si votre sujet est résolu, dans ce cas, :editer: votre premier message et cochez l'icône résolu

A bientôt sur ForumActif Smile
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

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

Résolu Re: faire des onglets dans un message.

Message par Carrie. Lun 20 Avr 2015 - 10:02

Problème toujours d'actualité Smile
Carrie.

Carrie.
Nouveau membre

Messages : 13
Inscrit(e) le : 07/04/2015

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

Résolu Re: faire des onglets dans un message.

Message par no_way Lun 20 Avr 2015 - 11:03

Bonjour, vous pouvez utiliser la pseudo-classe ":target", quel est votre code actuel ?
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

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

Résolu Re: faire des onglets dans un message.

Message par Carrie. Lun 20 Avr 2015 - 14:40

Tout d'abord merci à toi (: .
Ensuite j'avoue ne pas connaitre cette pseudo-class
Alors pour le moment j'ai trouvé ce code (en hide) :



Avec ce CSS :


Donc le soucis, c'est que je n'arrive pas à cliquer sur les onglets. Puis j'ai peur que le code soit un peu bancal. Par exemple si j'enlève le margin-top:-30px; ça me déforme le post.
J'espère que tu auras la réponse à ce problème. Dans tout les cas merci à toi !
Carrie.

Carrie.
Nouveau membre

Messages : 13
Inscrit(e) le : 07/04/2015

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

Résolu Re: faire des onglets dans un message.

Message par no_way Lun 20 Avr 2015 - 16:51

Tout compte fait au vu de la structure en tableau, passer par ":target" n'est pas judicieux.
Voici un code CSS de base:
Code:
table.onglets{
  width:400px
}
table.onglets span[class^="onglet"]{
  display:inline-block;
}
table.onglets div[class="panneau"]{
display:none
}
table.onglets span[class="onglet_1"]:hover~div:nth-of-type(0n+1){
  display:block;
}
table.onglets span[class="onglet_2"]:hover~div:nth-of-type(0n+2){
  display:block;
}
et voici le code html:
Je n'ai prévu que deux onglets.
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

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

Résolu Re: faire des onglets dans un message.

Message par Carrie. Lun 20 Avr 2015 - 16:59

Oh merci !!
Je vais aller tester ça tout de suite !
Et deux onglets c'est parfait Yes
Carrie.

Carrie.
Nouveau membre

Messages : 13
Inscrit(e) le : 07/04/2015

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

Résolu Re: faire des onglets dans un message.

Message par no_way Lun 20 Avr 2015 - 17:04

Oups concernant le "margin-top", je ne sais pas pourquoi son absence déforme vos posts.
Pouvez-vous mettre un lien d'un message disponible en invité ou sont placés les onglets afin de voir ce qui déraille.
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

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

Résolu Re: faire des onglets dans un message.

Message par Carrie. Lun 20 Avr 2015 - 18:18

Alors c'est bon avec ton code, j'ai plus la déformation Smile >>
J'ai pas mis encore en forme.

Par contre j'aurais deux-trois questions.
Déjà est ce qu'il est possible que le premier onglet soit visible par défaut ? Sans qu'on est besoin de passer dessus.
Puis Quand on passe sur l'onglet 2, comme le texte est plus long y a comme une déformation , c'est possible d'éviter que ça bouge?

Dernière petite chose (oui j'en profite) , comment faire (si possible) pour changer les onglets par clique de souris et non au passage. Encore merci à toi pour ton aide précieuse !!!
Carrie.

Carrie.
Nouveau membre

Messages : 13
Inscrit(e) le : 07/04/2015

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

Résolu Re: faire des onglets dans un message.

Message par no_way Lun 20 Avr 2015 - 18:49

Alors il y a pas mal de limites à chercher à faire sans javascript dont la capture d’évènement (le clic) qui ne peut être détecté que par la pseudo classe ":target" et implique aussi le même comportement qu'une ancre dans un document: le clic déplacera l’ascenseur vers l'élément ciblé.

Sinon pour que le premier onglet soit visible, il faut jouer sur le positionnement et le z-index.
no_way

no_way
Membre actif

Messages : 2214
Inscrit(e) le : 26/03/2010

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

Résolu Re: faire des onglets dans un message.

Message par Carrie. Mer 22 Avr 2015 - 12:10

D'accord.
En tout cas, merci pour ton aide !
Je crois avoir fait le tour de la question, je vais mettre en résolu!
Carrie.

Carrie.
Nouveau membre

Messages : 13
Inscrit(e) le : 07/04/2015

Carrie. 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