Page d'accueil type onglet

[Park Ha Gi]

Bonjour,
Voilà, avec beaucoup de recherche qui n'ont malheureusement pas pas étés fructueuse, je me décide de vous demander de l'aide pour faire ma page d'accueil.
Voilà, j'aimerais savoir faire ce type de page d'accueil, c'est à dire avec les onglets qui changent au passage de la souris dessus et si possible comment on fait ce type d'onglet (design d'onglet ?? --" ) En gros j'aimerais savoir faire comme l'image ci-dessous

Spoiler:

Merci d'avance

[killeurswat]

Bonjour,
Ne serait-ce mas ceci ? :
https://forum.forumactif.com/trucs-et-astuces-f8/images-de-la-barre-de-navigation-modifiees-au-passage-de-la-souris-t246228.htm#2235908

[Invité]

Bonjour,

Voilà 3 sujets pour vous aider à réaliser ce que vous souhaitez:
Sujet 1 , Sujet 2 , Sujet 3 .

Le script des onglet hébergé chez PMSC ne fonctionne plus, prenez soin de l'héberger à nouveau.

Cordialement.

[Park Ha Gi]

Le script des onglet hébergé chez PMSC ne fonctionne plus, prenez soin de l'héberger à nouveau.

J'ai pas tout compris ? C'est bon j'ai compris de quoi tu parlais !

Merci je vais aller regarder et je vous préviens si j'y arrive.

EDIT :
Voilà, j'ai crée mon tableau avec onglet mais est-ce que quelqu'un peut me dire comment on fait pour faire le même style d'onglet que sur l'image que j'ai donné ?

[Invité]

Bonsoir,

Pour changer la forme des onglet il faut modifier la feuille de style CSS.

Code:

ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d8f8ca;
  border: 1px solid #68ce3e;
  border-radius:20px;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  cursor: pointer;
  margin: 2px;}
.mon_onglet:hover{
  background: #b8efa1;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #b8efa1;
  border: 1px solid #68ce3e;
  border-radius:20px;
  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  cursor: pointer;
  margin: 2px;}           
.clear{
  clear: both;
}
.mon_contenu{
  color: #666;
  background: #b8efa1;
  border: 1px solid #68ce3e;
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  padding: 10px;   
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

Je n'ai touché qu'à la forme en ajoutant les arrondis, je vous laisse gérer les couleurs .

Cordialement.

[Park Ha Gi]

Je viens d'essayer mais ça ne change pas du tout par rapport à mon onglet de départ --"
Je suis nulle ...

[Invité]

Re,
Vous avez bien validé la nouvelle CSS?
Avec la CSS donnée au dessus, j'obtiens ceci:


Qu'est ce qu'il faudrait modifier?

[Park Ha Gi]

Voilà, le code css que j'ai au départ, et quand j'ajoute le code que tu m'as donné rien ne change mais je sais pas quoi changer --'

Spoiler:

[Invité]

Là je suis complètement perdue. C'est la CSS qui correspond au message d'accueil? Parce que je ne reconnais aucun des identifiants ... et ils sont inscrit dans le message d'accueil mais aussi dans le script.

[Park Ha Gi]

Ah ..... ba en faite, j'en sais pas plus que toi, j'ai trouvé la base et j'ai juste modifié les champs ...... --"

[Invité]

Ok, pas de soucis, reprenons.
En enregistrant en .js et en hébergeant ce script:

Code:

function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }         
}

En plaçant ceci en message d'accueil - n'oubliez pas de placer l'adresse du fichier js d'au dessus:

Code:

<script src="ADRESSE_DU_FICHIER.js"></script><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onmouseover="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onmouseover="changeOnglet(this);">Onglet 4</li></ul>
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div>

Et ceci dans la feuille CSS:

Code:

ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  margin-left:3px;
  color: ;
  background: ;
  border: 1px solid #999;
  border-radius:15px;
  -moz-border-radius:15px;
  -webkit-border-radius:15px;
  cursor: pointer;
  margin: 2px;}

.mon_onglet:hover{
  background: ;
}       
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  margin-left:3px;
  color: ;
  border-radius:15px;
  -moz-border-radius:15px;
  -webkit-border-radius:15px;
  background: ;
  border: 1px solid #999;
  cursor: pointer;
  margin: 2px;}         
.clear{
  clear: both;
}
.mon_contenu{
  color: ;
  background:;
  border: 1px solid #999;
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;
  padding: 10px; 
}
#mes_contenus, #mes_onglets{
  width: 800px;
  overflow:auto;}


J'obtiens ceci:


On s'approche du résultat voulu?

[Park Ha Gi]

Wha !! C'est vraiment ce que je voulais, merci beaucoup !

EDIT
En fait, il y a un problème, voilà ce que ça me donne sauf que moi je veux pas du "truc" pour monter et descendre (sur la droite et en bas )...

Spoiler:

[Invité]

Bonsoir,

Retriez cette ligne dans votre CSS:

Code:

overflow:auto;

(Elle est tout à la fin normalement). Ça devrait ôter les barre de défilement.

Cordialement.

[Florianx60]

Tu peux me donner l'adresse de fichier js que tu as mis s'il te plaît?
Je ne peux pas en enregistrer moi.

[Park Ha Gi]

Bonsoir,

Retriez cette ligne dans votre CSS:

Code:

overflow:auto;

(Elle est tout à la fin normalement). Ça devrait ôter les barre de défilement.

Cordialement.

Merci ça marche ! Je te remercie pour ton aide

Pour toi, Dark-Wylli :
https://sd-2.archive-host.com/membres/up/113965783930418818/codagepa.js

[Florianx60]

Merci. Mon problème est réglé, sauf que les onglets ne sont pas au milieu.
Mais merci beaucoup.