Page d'accueil type onglet
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Page d'accueil type onglet
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
Merci d'avance
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
Invité- Invité
Re: Page d'accueil type onglet
Isolde a écrit:
Le script des onglet hébergé chez PMSC ne fonctionne plus, prenez soin de l'héberger à nouveau.
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é ?
Re: Page d'accueil type onglet
Bonsoir,
Pour changer la forme des onglet il faut modifier la feuille de style CSS.
Cordialement.
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;
}
Cordialement.
Invité- Invité
Re: Page d'accueil type onglet
Je viens d'essayer mais ça ne change pas du tout par rapport à mon onglet de départ --"
Je suis nulle ...
Je suis nulle ...
Invité- Invité
Re: Page d'accueil type onglet
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;
}
Re: Page d'accueil type onglet
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é
Re: Page d'accueil type onglet
Ah ..... ba en faite, j'en sais pas plus que toi, j'ai trouvé la base et j'ai juste modifié les champs ...... --"
Re: Page d'accueil type onglet
Ok, pas de soucis, reprenons.
En enregistrant en .js et en hébergeant ce script:
On s'approche du résultat voulu?
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';
}
}
}
}
- 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>
- 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;}
On s'approche du résultat voulu?
Invité- Invité
Re: Page d'accueil type onglet
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 )...
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:
Re: Page d'accueil type onglet
Bonsoir,
Retriez cette ligne dans votre CSS:
Cordialement.
Retriez cette ligne dans votre CSS:
- Code:
overflow:auto;
Cordialement.
Invité- Invité
Re: Page d'accueil type onglet
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.
Je ne peux pas en enregistrer moi.
Florianx60- **
- Messages : 70
Inscrit(e) le : 08/02/2010
Re: Page d'accueil type onglet
Isolde a écrit:Bonsoir,
Retriez cette ligne dans votre CSS:(Elle est tout à la fin normalement). Ça devrait ôter les barre de défilement.
- Code:
overflow:auto;
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
Re: Page d'accueil type onglet
Merci. Mon problème est réglé, sauf que les onglets ne sont pas au milieu.
Mais merci beaucoup.
Mais merci beaucoup.
Florianx60- **
- Messages : 70
Inscrit(e) le : 08/02/2010
Sujets similaires
» Problème avec la page d'accueil type onglet
» Affichage des visiteurs sur la page daccueil.
» Faute dans l'onglet de la page internet, de la page d'accueil
» Pied de page type FDF
» Problème avec la taille et le type de la police d'une page à l'autre pour la Barre de Nav et les catégories :3
» Affichage des visiteurs sur la page daccueil.
» Faute dans l'onglet de la page internet, de la page d'accueil
» Pied de page type FDF
» Problème avec la taille et le type de la police d'une page à l'autre pour la Barre de Nav et les catégories :3
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum