Bonjour, merci pour ce code. Mais j'ai simplement un petit soucis je voulais savoir comment je pouvais faire pour qu'au passage de la souris sur les onglets inactifs, la couleur change. (Je crois qu'il faudrait ajouter un :hover?) Je sais que le sujet date un peu et j'espère qu'il y aura quelqu'un pour m'aider. Merci beaucoup.

Bonjour

très bon tuto

j'ai créé un design à l'aide de votre tuto

comment espacer les onglets

cordialement

pierre

C'est génial ce genre de code! :o Je pense que je testerai sur le forum sur lequel je suis, pour la signature d'un personnage! (l'espace étant limité, avoir plusieurs onglets sera très pratique pour tout caser!)

Bonjour Mike !
avec un grand merci parce que c'est drôlement bien fait !
voir par là :
http://repertoire.ek.la/accueil-p1251768↗
Merci beaucoup et au plaisir :)

Finalement j'ai trouvé : mettre la balise style et le code CSS dedans dans l'article juste avant le HTML, ça le fait !

• • Eyael_

    Dimanche 18 Novembre 2018 à 11:20
    

    Voilà, c'est installé dans chacune des descriptions de mes rubriques en guise d'index pour faire des sous-menus et alléger la navigation. Un super grand merci à toi ! Un exemple : http://lapensinemutine.eklablog.com/brainstorming-c26905250

Bonjour,
Je voulais tester pour alléger les index de mes rubriques (que je mets dans la zone description) mais ça ne fonctionne pas. Quand je copie-colle le code CSS dans Ajouter du CSS à ma feuille de style modifiée au moment de valider l'éditeur EB me dit que le code contient des erreurs et me demande de corriger. Par élimination j'ai déterminé que c'est le code au niveau des onglets actifs avec le signe ~ mais si on l'enlève, ça ne marche plus. Donc là je coince, je ne sais comment faire :/
Merci de me répondre si votre blog est toujours actif.

Merci beaucoup pour ce code !

Salut !

Merci pour ce code qui est très utile, il permet de classer les informations sans charger les pages. Néanmoins, il y a quelque chose que je comprends pas : pourquoi le sixième onglet n'apparaît pas, alors qu'il est dans le code HTML ? j'ai essayé de me débrouiller toute seule, mais sans succès... Pourrais-tu m'aider stp ?

Merci d'avance !

• • Yume chan

    Vendredi 6 Mai 2016 à 21:48
    

    Ça fonctionne ! Merci beaucoup d'avoir pris le temps de me répondre et de m'aider.

    Bonne continuation !

  • Mike GMZ

    Vendredi 6 Mai 2016 à 19:06
    

    Si on ajoute le 6ème onglet il faut retirer une balise de fermeture de l'onglet 5 (</div>).....
    Et idem si on ajoute un 7ème et 8ème onglet, on retire cette balise à l'onglet précédent, ça donne:

    <!------------------------------HTML--------------------------------------->

    <div id="menu-tab"><!----------------tableau-01---------------------------------->

    <div id="page-wrap">

    <div class="tabs"><!----------------onglet-01-A-B-C-D-------------------------->

    <div class="tab"><input id="tab-1" checked="checked" name="tab-group-1" type="radio" /> <label for="tab-1">A-B-C-D</label>

    <div class="content">

    <h1>A :</h1>

    <br />

    <p><a href="#">ABONNEMENT, ABONN&Eacute;S</a></p>

    <p><a href="#">Contact</a></p>

    <p><a href="#">Newsletter</a></p>

    </div>

    </div>

    <!----------------onglet-02-articles-------------------------->

    <div class="tab"><input id="tab-2" name="tab-group-1" type="radio" /> <label for="tab-2">E-F-G-H</label>

    <div class="content">

    <p>Exemple, une image, du texte</p>

    <br />

    <p><img src="http://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /></p>

    </div>

    </div>

    <!----------------onglet-03-forum-------------------------->

    <div class="tab"><input id="tab-3" name="tab-group-1" type="radio" /> <label for="tab-3">Forum</label>

    <div class="content">

    <p>Exemple, une image, et une video...</p>

    <br />

    <p><img src="http://ekladata.com/UM-RXN_kZ3q93_FwWhFA15FP_uc.jpg" alt="" /></p>

    <p><iframe style="width: 90%; margin-left: 5%; box-shadow: 6px 6px 10px grey;" src="http://player.vimeo.com/video/36778024" frameborder="0" width="500" height="281"></iframe></p>

    </div>

    </div>

    <!----------------onglet-04-libre-------------------------->

    <div class="tab"><input id="tab-4" name="tab-group-1" type="radio" /> <label for="tab-4">Video-1</label>

    <div class="content">

    <p>Une vid&eacute;o de Constance..!</p>

    <br /> <iframe style="width: 90%; margin-left: 5%; box-shadow: 6px 6px 10px grey;" src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="300" height="315" allowfullscreen="allowfullscreen"></iframe></div>

    </div>

    <!----------------onglet-05-libre------------------------->

    <div class="tab"><input id="tab-5" name="tab-group-1" type="radio" /> <label for="tab-5">Video-2</label>

    <div class="content"><br /> <iframe style="width: 90%; margin-left: 5%; box-shadow: 6px 6px 10px grey;" src="//www.youtube.com/embed/I3W3mRs4ULQ?rel=0" frameborder="0" width="300" height="315" allowfullscreen="allowfullscreen"></iframe></div>

    </div>

    <!----------------onglet-06-libre-------------------------->

    <div class="tab"><input id="tab-6" name="tab-group-1" type="radio" /> <label for="tab-6">Codes</label>

    <div class="content">

    <p>Code CSS</p>

    <br /><iframe src="//www.youtube.com/embed/LU2BQY_Doio?rel=0" frameborder="0" width="420" height="315" allowfullscreen="allowfullscreen"></iframe></div>

    </div>

    </div>

    </div>

  • Yume chan

    Vendredi 6 Mai 2016 à 18:33
    

    C'est bien ce qui me semblait, alors du coup j'ai fait comme tu as dit, mais le sixième onglet n'apparaît pas et ça fait un truc bizarre au niveau du header. En fait, Il y a un bloc blanc qui est sur le header. Je ne comprends pas d'où il sort...

    EDIT : Ah si tiens, j'avais mal regardé, mais j'ai bien un sixième onglet qui est apparu mais en dessous du bloc, c'est trop bizarre.

     

  • Mike GMZ

    Vendredi 6 Mai 2016 à 09:31
    

    Le code html du 6ème onglet est inséré dans une balise commentaire <!------------> donc non exécuté par le navigateur.
    Il est considéré comme un commentaire.
    Pour l'activer, il suffit de refermer cette balise sur le titre par exemple (6ème onglet) et non pas à la fi du code :

    <!---------------6ème onglet---------------->

     

Pour la vidéo en utilisant ce code:

<iframe style="border: 10px double #FCCF8D; border-radius: 20px;
box-sizing: border-box;"
src="http://www.youtube.com/embed/6Ugj9STi-dg?rel=0"
frameborder="0" width="400" height="300"></iframe>
......................
"Partager" code vidéo YouTube ceci est - https://youtu.be/6Ugj9STi-dg
Pour modifier la vidéo, vous devez changer cette partie 6Ugj9STi-dg par l'autre vidéo

Bonjour et merci pour ce code... 

J'ai toutefois une question : Peut-on l'intégrer uniquement à un article comme un genre de sommaire ?

ex : article introduction qui comprendrait les onglets : introduction, matériel, étapes, modèles

Les onglets pointeraient vers d'autres articles ...

D'avance, merci pour la réponse 

• • La Folie des Fêtes

    Jeudi 24 Mars 2016 à 18:26
    

    Ouh lala !!! Mais c'est trop top ton truc !!! Merci beaucoup... Euhhhh par contre te demanderai peut-être un coup de main... car le seul css que j'ai fait c'est arrondir mes visiteurs mdrrr... 

    Merci beaucoup pour ce code !!! J'étais en train de m'énerver avec un tableau mais on voit pas bien les bords... Donc, je vais terminer de construire les articles à mettre en onglets ... 

    Super !!! super !!! Trop contente !!!  

    Dommage y a pas d'émoticone qui saute de joie ... !!!

  • Mike GMZ

    Jeudi 24 Mars 2016 à 16:25
    

    Salut!
    
    Oui, oui, on peut faire comme ça !

Adorable et très serviable. 1000 grâce à l'excellent travail. GloriaV

Merci pour ce tableau à onglet
jy ai fait mon billet avec !!!
bonne journée

OK, merci. Bon week-end

Merci pour cette réponse.

Même problème pour moi; lorsque je copie-colle le code, on me dit qu'il y a une erreur... Quelqu'un peut-il m'aider?

Bonjour. J'ai voulu refaire un tableau à onglets comme sur le modèle, quand je copie le code CSS j'ai un message d'erreur ....Quelqu'un peut-il m'aider ? Merci

merci bcp, pour ces codes. ^^

• Nom / Pseudo :
  
  E-mail (facultatif) :
  
  Site Web (facultatif) :
  
  Commentaire :
  
  Me prévenir par mail en cas de réponse
  

y a t-il une erreur sur ce code??? car chez moi le css disparait après avoir fonctionné d'1 minute

OK, merci ça marche.... Super !

Bonsoir
J'ai le même souci : j'ai copié collé le code htlm sur la page htlm mais j'ai une page avec les rubriques, et non un tableau. Il fallait surement que j'intégre le code css, mais ... comment je fais ? Merci

Bien le bonjour,
depuis la mise à jour sur eklablog les onglets sont légèrement mal mis, c'est possible de corriger cela ou pas ? :/ On dirait que les écritures des onglets ont été abaissée.

Bonne vacances alors :)
Et voila quand je le place directement dans l'article sa marche, en attendant faudra que je fasse comme cela ^^
Un grand merci en tout cas.

Un grand merci, j'ai réussi à insérer le tableau :) Il ne me reste plus qu'un peu de pratique je pense !

Edit: J'ai un autre problème, quand j'actualise la page de mon site le code CSS que j'ai placé dans Apparence > Modifier le thème > Ajout CSS (bas fenêtre) > Enregistrer disparaît :/ Pourtant j'ai d'autres codes CSS placé là et ceux la restent bien là. Et donc le tableau disparaît aussi quand j'actualise. Et excusez moi de vous dérangez autant ^^'

Re bonsoir,
Merci pour m'avoir orienter ici , c'est exactement ce que je recherchais.
Mais je ne comprends strictement rien dans le langage informatique à mon grand regret. Je dois copié collé le code css ou htlm dans mon article? J'ai essayé sa n'a rien donné ... /:

Au passage très beau blog :)