Page d'accueil type onglet

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

Résolu Page d'accueil type onglet

Message par Park Ha Gi le Dim 10 Oct 2010 - 13:21

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 Smile
Spoiler:

Merci d'avance Smile

Park Ha Gi
**

Féminin
Messages : 76
Inscrit(e) le : 03/12/2009

http://www.mybrowserbar.com/cgi/errors.cgi?q=http%3A%2F%2Fwww.th
Park Ha Gi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil type onglet

Message par killeurswat le Dim 10 Oct 2010 - 14:14


killeurswat
***

Masculin
Messages : 165
Inscrit(e) le : 28/07/2009

http://passion-pub.forumgratuit.org/forum.htm
killeurswat a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil type onglet

Message par Invité le Dim 10 Oct 2010 - 14:31

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.

Invité
Invité


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

Résolu Re: Page d'accueil type onglet

Message par Park Ha Gi le Dim 10 Oct 2010 - 15:20

Isolde a écrit:
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é ?

Park Ha Gi
**

Féminin
Messages : 76
Inscrit(e) le : 03/12/2009

http://www.mybrowserbar.com/cgi/errors.cgi?q=http%3A%2F%2Fwww.th
Park Ha Gi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil type onglet

Message par Invité le Dim 10 Oct 2010 - 19:59

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

Cordialement.

Invité
Invité


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

Résolu Re: Page d'accueil type onglet

Message par Park Ha Gi le Dim 10 Oct 2010 - 20:59

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

Park Ha Gi
**

Féminin
Messages : 76
Inscrit(e) le : 03/12/2009

http://www.mybrowserbar.com/cgi/errors.cgi?q=http%3A%2F%2Fwww.th
Park Ha Gi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil type onglet

Message par Invité le Dim 10 Oct 2010 - 21:07

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?

Invité
Invité


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

Résolu Re: Page d'accueil type onglet

Message par Park Ha Gi le Dim 10 Oct 2010 - 21:52

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:
Code:
.onglet {
display:inline-block;
margin-left:3px;
margin-right:5px;
padding:3px;
border:2px solid #999;
border-bottom:0px solid #999;
cursor:pointer;
}
.onglet_0 {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
background:;
border-bottom:0px solid #999;
}
.onglet_1 {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
background:;
border-bottom:0px solid #999;
padding-bottom:4px;
}
.contenu_onglet {
-moz-border-radius: 15px;
border:2px solid #999;
margin-left: 20px;
margin-right: 20px;
margin-top:-1px;
padding:5px;
display:none;
width: 800px;
}

a {
font-variant: small-caps;
text-decoration: none !important;
color: #999;
}
a:hover {
text-shadow: 2px 2px 3px #777;
letter-spacing : 2px;
cursor: ne-resize;
color: #000;
}

u {
border-bottom: 1px #437340 dashed;
text-decoration: none !important;
}

.taille {
width: 800px;
}

.couleur {
border: 8px double darkred;
-moz-border-radius: 20px;
background-color: white
}

.boite1 {
height: 600px;
overflow: auto;
}

.boite2 {
height: 600px;
overflow: auto;
}


Park Ha Gi
**

Féminin
Messages : 76
Inscrit(e) le : 03/12/2009

http://www.mybrowserbar.com/cgi/errors.cgi?q=http%3A%2F%2Fwww.th
Park Ha Gi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil type onglet

Message par Invité le Dim 10 Oct 2010 - 22:18

Assomé

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.

Invité
Invité


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

Résolu Re: Page d'accueil type onglet

Message par Park Ha Gi le Dim 10 Oct 2010 - 22:20

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

Park Ha Gi
**

Féminin
Messages : 76
Inscrit(e) le : 03/12/2009

http://www.mybrowserbar.com/cgi/errors.cgi?q=http%3A%2F%2Fwww.th
Park Ha Gi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil type onglet

Message par Invité le Dim 10 Oct 2010 - 22:42

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?

Invité
Invité


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

Résolu Re: Page d'accueil type onglet

Message par Park Ha Gi le Lun 11 Oct 2010 - 17:59

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:

Park Ha Gi
**

Féminin
Messages : 76
Inscrit(e) le : 03/12/2009

http://www.mybrowserbar.com/cgi/errors.cgi?q=http%3A%2F%2Fwww.th
Park Ha Gi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil type onglet

Message par Invité le Lun 11 Oct 2010 - 19:00

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.

Invité
Invité


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

Résolu Re: Page d'accueil type onglet

Message par Florianx60 le Lun 11 Oct 2010 - 19:06

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.

Florianx60
**

Messages : 70
Inscrit(e) le : 08/02/2010

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

Résolu Re: Page d'accueil type onglet

Message par Park Ha Gi le Lun 11 Oct 2010 - 19:23

Isolde a écrit: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 Smile

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

Park Ha Gi
**

Féminin
Messages : 76
Inscrit(e) le : 03/12/2009

http://www.mybrowserbar.com/cgi/errors.cgi?q=http%3A%2F%2Fwww.th
Park Ha Gi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Page d'accueil type onglet

Message par Florianx60 le Lun 11 Oct 2010 - 19:29

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

Florianx60
**

Messages : 70
Inscrit(e) le : 08/02/2010

Florianx60 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