| « Page d'accueil en onglet »
| |
|
Auteur | Message |
---|
Kimel'
Messages : 65 Date d'inscription : 24/12/2011 Âge : 28 Logiciel graphique : Photoshop CS4
Contact et infos
| Sujet: Page d'accueil en onglet Jeu 17 Mai 2012, 16:50 | |
| Page D'accueil en Onglet Niveau ( lors des modifications de CSS ) : Moyen Le temps : 10 min Rendu : Page d'accueil Code de : Kimel'. La partie html à mettre dans Affichage>Page d'accueil>Généralités : - Code:
-
<div class="systeme_onglets"> <img class="imgpa" src="http://img15.hostingpics.net/pics/458556bienvenue.png"> <table class="onglets"> <tr> <td><span class="onglet_0 onglet" id="onglet_staff_1" onclick="javascript:change_onglet('staff_1');"><img src="http://img11.hostingpics.net/pics/133141Accueil.png"></span></td> <td rowspan="2"> <div class="contenu_onglets"> <div class="contenu_onglet" id="contenu_onglet_staff_1"><table><tr> <td colspan="2" class="titrepa">Bienvenue sur Le Forum!</td></tr> <tr><td><div class="box1">CSSxHTML est un forum d'entraide au codage et programmation. Nous vous proposons divers services tels que les commandes, les tutoriels, le Libre Service et un espace pour les questions. Si vous avez des problèmes avec vos codes, n'hésitez pas à venir demander, nos codeurs ainsi que nous, les Administratrices, vous répondrons et aiderons dans les plus bref délais. Une petite partie pour le graphisme est là si jamais vous avez besoin d'un avatar ! </div></td> <td><div class="box2">Mais aussi pour nous montrer que vous n'êtes pas doué que dans le codage ! =3 Pour vous divertir, nos Animateurs proposent des concours divers ! Enfin, nous avons trois types : Ceux de Codage, ceux de Graphisme et des concours Jeux tels que des "Enigmages" et "Devinettes". Vous pouvez même aller joué ou raconter votre vie dans les sections adéquates ! Enfin, c'est le paradis pour vous, mais aussi pour votre forum ! ^^</div></td> </tr></table></div>
<div class="contenu_onglet" id="contenu_onglet_staff_2"><table> <td colspan="2" class="titrepa">Annonce</td></tr> <tr><td><div class="box1"><div class="minititre">Recrutement</div> Nous recrutons : <br /> Des modérateurs - Des animateurs - Des Graphistes.</div></td> <td><div class="box2"><div class="minititre">Nouveautés</div> JJ/MM/AAAA : Ouverture du forum. <br />JJ/MM/AAAA : Nouveau dans le staff. <br /></td> </div></tr></table></div>
<div class="contenu_onglet" id="contenu_onglet_staff_3"><table><tr> <td colspan="2" class="titrepa">Staff</td></tr> <tr><td><div class="box3"><table><tr><td><div id="cf"> <a href="#"><img src="http://img11.hostingpics.net/pics/705637staffadmin.png" class="bottom" /> <img src="http://img11.hostingpics.net/pics/892737staff.png" class="top" /></a></div></td> <td><div id="cf"><a href="#"><img src="http://img11.hostingpics.net/pics/705637staffadmin.png" class="bottom" /><img src="http://img11.hostingpics.net/pics/892737staff.png" class="top" /></a></div></td> <td><div id="cf"><a href="#"><img src="http://img11.hostingpics.net/pics/705637staffadmin.png" class="bottom" /><img src="http://img11.hostingpics.net/pics/892737staff.png" class="top" /></a></div></td> <td><div id="cf"><a href="#"><img src="http://img11.hostingpics.net/pics/705637staffadmin.png" class="bottom" /><img src="http://img11.hostingpics.net/pics/892737staff.png" class="top" /></a></div></td></tr></table></div></td> </tr></table></div>
<div class="contenu_onglet" id="contenu_onglet_staff_4"><table><tr> <td colspan="2" class="titrepa">Partenariat</td></tr> <tr><td><div class="box3"> <img src="http://img11.hostingpics.net/pics/390345avaparten.png" /> <img src="http://img11.hostingpics.net/pics/390345avaparten.png" /> <img src="http://img11.hostingpics.net/pics/390345avaparten.png" /> </div></td> </tr></table></div> </div> </td> <td><span class="onglet_0 onglet" id="onglet_staff_2" onclick="javascript:change_onglet('staff_2');"><img src="http://img11.hostingpics.net/pics/133141Accueil.png"></span> </td></tr> <tr><td><span class="onglet_0 onglet" id="onglet_staff_3" onclick="javascript:change_onglet('staff_3');"><img src="http://img11.hostingpics.net/pics/133141Accueil.png"></span></td> <td><span class="onglet_0 onglet" id="onglet_staff_4" onclick="javascript:change_onglet('staff_4');"><img src="http://img11.hostingpics.net/pics/133141Accueil.png"></span></td> </tr> </table><div class="navpa"> <a href="#" class="lien">Règlement</a> - <a href="#" class="lien">Présentation</a> - <a href="#" class="lien">Nouveautées</a> - <a href="#" class="lien">Annonces</a><div class="credit">Crédit: PA by kimel de <a href="http://www.cssxhtml.org/">CSSxHTML</a></div> </div>
<script type="text/javascript"> //<!-- var anc_onglet = 'staff_1'; change_onglet(anc_onglet); //--> </script>
CSS à mettre dans Affichage>Images et couleurs> Couleur> Feuille de style CSS : - Code:
-
/* PAGE D ACCUEIL */ .onglet{ display:inline-block; margin-left:0px; margin-right:0px; padding:3px; } .onglet_0{ opacity: 0.5; transition: 1s; -moz-transition: 1s; -o-transition: 1s; -htm-transition: 1s; -webkit-transition: 1s; } .onglet_0:hover{ opacity: 1; } .onglet_1{ opacity: 1; } .contenu_onglet{ heigth: 300px; margin-top:-1px; padding:5px; display:none; }
.systeme_onglets { background: url(http://i46.servimg.com/u/f46/17/26/74/77/fond10.png); width:700px; border-radius: 20px; }
.imgpa { border-radius: 20px 20px 0px 0px; }
.titrepa { Border: 1px solid black; border-radius: 0px 0px 5px 5px; background: #2F7E76; box-shadow: 0px 0px 5px black; width: 300px; color: white; text-shadow: 1px 1px 0 white; text-align: center; position: relative; margin-bottom: -20px; }
.minititre { font-variant:small-caps; font-style:italic; text-align: center; border-bottom : 1px dotted white;
}
.box1 { background : #75BDB7; width: 250px; height: 100px; border: 1px solid black; padding-top:10px; padding-right:10px; padding-left:30px; padding-bottom: 10px; margin-right: -5px; margin-top: -10px; overflow: auto; border-radius: 80px 0px 0px 80px; }
.box2 { background : #75BDB7; width: 250px; height: 100px; border: 1px solid black; padding-top:10px; padding-right:10px; padding-left:5px; padding-bottom: 10px; margin-top: -10px; overflow: auto; border-radius: 0px 0px 0px 0px; } .box3 { background : #75BDB7; padding-top:10px; padding-right:10px; padding-left:30px; padding-bottom: 10px; width: 515px; height: 100px; border: 1px solid black; border-radius: 80px 0px 0px 80px; margin-top: -10px; }
.boxcontenue { width: 480px; }
.navpa{ width: 548px; Border: 1px solid black; font-weight: normal; font-family:Georgia; font-size: 16px; text-align: center; border-radius: 0px 0px 5px 5px; background: #2F7E76; box-shadow: 0px 0px 5px black; color:#fff; position: relative; margin-top: -13px; }
.credit { font-size: 5px; text-align: right; }
#cf { position:relative; height:85px; width:100px; margin:0px; } #cf img { border-radius:5px; border-top: 3px double white; border: 1px solid white; margin-bottom: 2px; position:absolute; left:0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; }
#cf img.top:hover { opacity:0; } Informations supplémentaires Il faut que vous installez le code Javascript. Pour ce faire, aller dans Modules>HTML et JAVASCRIPT > Cocher "oui" pour activer et enregistrer. Vous allez ensuite créer un nouveau Javascript et coller ça : - Code:
-
//<!-- function change_onglet(name) { document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet'; document.getElementById('onglet_'+name).className = 'onglet_1 onglet'; document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none'; document.getElementById('contenu_onglet_'+name).style.display = 'block'; anc_onglet = name; } //-->
. |
|
Ashihei.
Messages : 621 Date d'inscription : 15/03/2012 Âge : 23 Logiciel graphique : Gimp
| |
Invité
Contact et infos
| |
Invité
Contact et infos
| |
Invité
Contact et infos
| |
Kimel'
Messages : 65 Date d'inscription : 24/12/2011 Âge : 28 Logiciel graphique : Photoshop CS4
Contact et infos
| |
Invité
Contact et infos
| |
Kimel'
Messages : 65 Date d'inscription : 24/12/2011 Âge : 28 Logiciel graphique : Photoshop CS4
Contact et infos
| Sujet: Re: Page d'accueil en onglet Mar 18 Sep 2012, 21:02 | |
| Et bien, on va essayer de changer l'emplacement du javascript, c'peut être là que ça coince ! Donc, tu vas aller dans Affichage > Templates >Général > overall_header et tu recherches la balise : - Code:
-
</head> Tu colleras le JS juste avant cette balise. Tu valides et dis moi si ça marche :3 |
|
Invité
Contact et infos
| |
Kimel'
Messages : 65 Date d'inscription : 24/12/2011 Âge : 28 Logiciel graphique : Photoshop CS4
Contact et infos
| |
Invité
Contact et infos
| Sujet: Re: Page d'accueil en onglet Mar 18 Sep 2012, 21:11 | |
| Toujours pas... : / À moins que je n'ai pas bien compris ce que tu voulais dire...pourtant je pense avoir fait correctement... |
|
Invité
Contact et infos
| |
Invité
Contact et infos
| |
Kimel'
Messages : 65 Date d'inscription : 24/12/2011 Âge : 28 Logiciel graphique : Photoshop CS4
Contact et infos
| Sujet: Re: Page d'accueil en onglet Dim 07 Oct 2012, 21:05 | |
| Oui, tu peux le changer via le css, sur cette ligne : - Code:
-
.systeme_onglets { background: url(url_de_ton_image); .... } Tu peux très bien mettre une couleur en remplaçant le "url(url_de_ton_image)" par un code couleur :3 Pour toi, Blabla-rêveuse, j'ai oublié de mettre quelque dans le JS pour toi, donc, bon.. Tu enlèves ce que je t'avais dis de mettre dans le template, et à la place, tu mets ça : [code] // [code] |
|
Invité
Contact et infos
| |
Manon&Ana♥
Messages : 2817 Date d'inscription : 15/02/2012 Âge : 25 Logiciel graphique : Gimpy!
| |
Invité
Contact et infos
| |
Invité
Contact et infos
| |
Invité
Contact et infos
| |
Invité
Contact et infos
| |
Invité
Contact et infos
| |
Invité
Contact et infos
| |
Azumii
Un peu plus... Rôle / Ancien rôle : Ancienne chef de la team Coctkail de Gourmandise et Ancienne Administratrice Décris-toi : Pwette Famille et relations :
Messages : 3806 Date d'inscription : 13/12/2013 Âge : 32 Logiciel graphique : CS 4
| |
Contenu sponsorisé
Contact et infos
| |
|