Créer des onglets

3 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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

Résolu Créer des onglets

Message par Shiyami Jeu 19 Oct 2017 - 13:51

Bonjour à vous !
Je voudrais créer des onglets pour faire apparaître des liens dans un bloc lorsque notre souris passe devant le titre de l'onglet. Petite explication en image :

Créer des onglets X8k9

La barre d'onglets est juste en dessous de la bannière dans cette image-ci :

Créer des onglets V6ij

J'ai fait beaucoup de recherches, et rien ne me satisfait vraiment, les résultats étant catastrophiques...
Voici mon code :

Code:
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8"/>
 
    <style type="text/css">

      a:link {text-decoration:none;}
     
      .LIEN {color:black;transition:color 1s ease-in-out, letter-spacing 1s ease-in-out;}
      .LIEN:hover {color:lightblue;letter-spacing:2px;}
</style>
  </head>
  <body>
    <div style="width:100%;height:70px;background:url(http://zupimages.net/up/17/42/v6ij.png);"><table style="border:none;" cellspacing="0"><tr>
                            <td><a href="http://institutespoirtest.forumactif.com/"><span class="LIEN" style="font-family:impact;font-size:20px;position:relative;top:20px;left:10px;">ACCUEIL</span></a></td>
                            <td><span style="font-family:impact;font-size:20px;color:black;position:relative;top:20px;left:40px;">UTILISATEUR</span></td>
      <td><span style="font-family:impact;font-size:20px;color:black;position:relative;top:20px;left:80px;text-transform:uppercase;">PIèces</span></td>
      <td><span style="font-family:impact;font-size:20px;color:black;position:relative;top:20px;left:120px;">LIENS UTILES</span></td>
</tr>
                            </table></div>
  </body>
</html>

Et ce que ça donne : plop
Si vous avez des idées, je suis preneuse ! Je désespère à trouver une solution Sad
Et je voudrais savoir comment mettre la toolbar dans l'onglet "Utilisateur" aussi ^^'
Merci beaucoup pour votre aide !!

(PS : le Accueil est juste un lien, pas un onglet ^^')
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Shiyami Ven 20 Oct 2017 - 18:55

Up !!
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Shiyami Sam 21 Oct 2017 - 20:18

Up Sad
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Shiyami Dim 22 Oct 2017 - 22:21

Up !
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Shiyami Lun 23 Oct 2017 - 23:55

Up pidup !
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Plümpheit Mar 24 Oct 2017 - 0:07

bonsoir,

je ne suis pas certaine d'avoir bien compris, mais ce tuto aide a créer un tableau a onglet après faut juste le personnaliser Smile

j'espère qu'il t’aidera comme il m'a aidé ^^

edit : je suis blonde j'ai oublié le lien XD
https://forum.forumactif.com/t310879-tableaux-a-onglets
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Shiyami Mar 24 Oct 2017 - 19:08

Oh ! C'est pas mal, ça se rapproche de ce que je veux !
Mais ce ne serait pas possible de camoufler les blocs et de les afficher quand la souris passe sur les "liens" utilisateur, pièces, etc. ?
Et du coup, comment faire pour mettre la barre de navigation dans l'onglet "Utilisateur" ? :/
Merci en tout cas ^^ Ca me sera sans doute utile !
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Plümpheit Mar 24 Oct 2017 - 21:00

Alors là ma chère Shiyami... j'en sais trop rien. Pour ce qui est de la barre de navi faudrait peut-être ouvrir un autre sujet ?

Pour le reste je pense qu'il s'agit de régler les propriétés en :hover ou a... Après je suis pas certaine. Il te faudrait l'aide de personnes plus douées que moi ^^

bon courage
Plümpheit

Plümpheit
****

Messages : 264
Inscrit(e) le : 20/05/2014

http://oc-test-graph-code.forumactif.com/
Plümpheit a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Shiyami Mer 25 Oct 2017 - 20:00

Merci quand même ! Very Happy
Je vais voir si d'autres personnes répondent, au cas où ^^'
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Shiyami Dim 29 Oct 2017 - 15:48

uP §
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Shiyami Lun 30 Oct 2017 - 22:47

Up ♥️♥️
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Shiyami Mer 1 Nov 2017 - 12:33

Bonjour !
Pour actualiser un peu, j'ai trouvé un code avec des infos bulles qui m'avait paru sympa pour ce que je souhaite faire. Malheureusement, quand je glisse ma souris sur les images "Utilisateur" "Pièces" et "Liens utiles", la bulle ne reste pas alors qu'utilisateur sera sensé pouvoir aller dans cette fameuse bulle.
Pour mieux expliquer, c'est comme si vous passiez votre souris sur la barre de navigation, et qu'en passant devant un texte, il y avait un bloc qui descendrait avec des liens à l'intérieur.

Je ne sais pas si c'est plus clair, mais bon.
J'espère avoir d'autres réponses !
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par IzumiRK Lun 6 Nov 2017 - 11:29

Si je comprends bien, tu veux faire un truc comme ça ?
Spoiler:
C'est en fait un menu et non des onglets, donc ça a un fonctionnement un peu différent.

Si c'est ça, voilà comment ça fonctionne :
Code:
<div class="menu">
<table>
<tr>
<td><ul><li>TITRE  1 <ul><li>CONTENU LIGNE 1</li><li> CONTENU LIGNE 2</li><li>CONTENU LIGNE 3</li><li> CONTENU LIGNE 4</li></ul></li></td>
<td><ul><li>TITRE  2 <ul><li>CONTENU LIGNE 1</li><li> CONTENU LIGNE 2</li><li>CONTENU LIGNE 3</li><li> CONTENU LIGNE 4</li></ul></li></td>
</tr>
</table>
</div>
Pour chaque colonne que tu veux ajouter, tu as juste à copier la partie entre
Code:
<td></td>
et pour chaque ligne la partie
Code:
<li> CONTENU LIGNE X</li>
.
Ensuite tu rajoutes à ton css :
Code:
.menu ul {
 margin:0;
 padding:0;
 list-style-type:none;
opacity:1;
 
 }
.menu li {
 float:left;
 padding:0;
 }


.menu li a:hover {
opacity:1;
 }

.menu ul li ul {
 display:none;
 }

.menu ul li:hover ul {
 display:block;
 }
.menu li:hover ul li {
 float:none;
 }

.menu li ul {
 position:absolute;
 }
Evidemment l'aspect se personnalise en css, ça sert juste à créer l'effet ^^

Pour rajouter ta barre de navigation dans un de tes onglets, il faut suivre les indications de ce tuto pour la rendre verticale puis placer cette portion de code :
Code:
<div class="vertical_nav" width=150px>{GENERATED_NAV_BAR}</div>
dans l'onglet que tu veux. Ça devrait marcher.
IzumiRK

IzumiRK
****

Messages : 208
Inscrit(e) le : 25/02/2015

http://indare.forumactif.com/
IzumiRK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Shiyami Lun 6 Nov 2017 - 15:15

Ah merci ! Je vais essayer, et je reposte un message si par miracle ça marche ! *-*
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer des onglets

Message par Shiyami Lun 6 Nov 2017 - 16:42

Tout marche nickel ! Merci énormément !
Shiyami

Shiyami
***

Messages : 184
Inscrit(e) le : 09/02/2017

http://the-owl.forumactif.com/
Shiyami 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

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

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