PA en onglets [CSS3, sans javascript]

Rappel du premier message :


Il s'agit une zone comportant différents onglets et permettant chacun d'afficher une information différentes dans cette même zone. Par exemple, en cliquant sur le premier onglet vous affichez le contexte, sur le second le staff, etc... et le tout dans le même encadré, permettant d'éviter les pages d'accueil trop longues ou bien de faire de votre QEEL un espace plus sympathique que le QEEL d'origine. Ce code peut être utilisé pour l'un ou l'autre, il suffit dans le second cas d'enlever le code du QEEL de base, d'y mettre ce code, et de remplir avec les informations de votre QEEL de base. Il faut cependant un petit peu de connaissances dans les templates, histoire de savoir où et comment mettre les choses, mais c'est très facile à apprendre !

Voici l'aperçu :

>>> Aperçu du résultat <<<

Vous allez me dire que ce code a déjà été fait, qu'il existe déjà... oui certes le résultat est ressemblant, mais ce code que je vous donne là vous permet de faire des onglets SANS javascript. Le code est donc plus simple, il ne comporte que deux partie : un code html et un code css.

Il vous suffit ensuite de mettre ce que vous voulez dans chaque zone de texte, y compris une image de fond différente pour chacune

Vous constaterez qu'il y a un espace au dessus du bloc d'accueil, c'est pour éviter qu'en se recentrant sur l'accueil à cause de l'ancre placé en codage la page ne remonte trop. Si ma phrase vous parait être du chinois, essayez-donc d'enlever la série de "< br / >" et vous comprendrez mieux . Pour combler ce "vide" je vous conseille de faire une image ou de mettre un titre en assez gros, avec simplement "Accueil" ou "Online" (selon l'utilisation) ou encore un "Welcome [username]"




Comme expliqué en titre et en intro, il n'y a pas de javascript dans ce code, tout est fait uniquement en CSS3, vous avez donc deux codes à afficher :

• le premier, l'html, dans la partie du forum où vous voulez que soit votre accordéon (il peut s'agir tout simplement de la page d'accueil, mais aussi dans un template, comme par exemple si vous souhaitez vous en servir en QEEL)

• le second, le css ou "mise en forme", vous devez le copier coller dans la Feuille CSS de votre forum, c'est à dire : dans le Panneau d'Admin > Affichage > Couleurs > Feuille de style CSS.


- Code HTML -

Code:

<div id="accueil1"><div id="accueil2"><div id="accueil3"><div id="accueil4">
<br /><br /><br /><br /><br /><br />
<span class="ongl1"><a href="#accueil1">Onglet 1</a></span><span class="ongl2"><a href="#accueil2">Onglet 2</a></span><span class="ongl3"><a href="#accueil3">Onglet 3</a></span><span class="ongl4"><a href="#accueil4">Onglet 4</a></span><div id="content1"><div id="content2"><div class="info_accueil">Ici se trouve le contenu de votre second onglet.</div></div><div id="content3"><div class="info_accueil">Ici se trouve le contenu de votre troisième onglet.</div></div><div id="content4"><div class="info_accueil">Ici se trouve le contenu de votre quatrième onglet.</div></div><div class="info_accueil">Placez ici le contenu de votre premier onglet. Il peut s'agit de texte, liens images, mais aussi tableaux ou autres. Attention, cette zone seulement permet de placer des infos dans l'onglet 1, il vous faut laisser ces infos à cet endroit précis, et non avant les "div" des onglets précédents afin qu'ils ne décalent pas vos autres onglets par la suite. </div></div>
</div></div></div></div><span class="credit"><a href="http://www.never-utopia.com">(c) par Never-Utopia</a></span>

- Code CSS -

Code:

.ongl1, .ongl2, .ongl3, .ongl4
{
display: inline-block;
width: 120px;
height: 30px;
margin-left: 20px;
background-color: #abb8cd;
border-top: 1px solid #808489;
border-left: 1px solid #808489;
border-right: 1px solid #808489;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
text-align: center;
}
.ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover
{
background-color: #d3dce9;
}
.ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
{
display: block;
padding-top: 2px;
font-weight: bold;
text-decoration: none !important;
color: #8b9cb8 !important;
text-shadow: 1px 1px 0px #eef1f6;
font-size: 18px;
}
.ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover
{
color: #446291 !important;
text-shadow: 1px 1px 0px #23334c;
}
#content1
{
display: block;
height: 300px;
overflow: hidden;
background: #8799b6;
border: 1px solid #596b87;
font-size: 11px;
color: #3c506f;
}
#content2, #content3, #content4
{
display: none;
}
#accueil1:target #content1
{
display: block;
height: 300px;
overflow: hidden;
border: 1px solid #596b87;
font-size: 11px;
color: #3c506f;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
}
#accueil2:target #content2
{
display: block;
height: 300px;
overflow: hidden;
background: #8799b6;
font-size: 11px;
color: #3c506f;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
}
#accueil3:target #content3
{
display: block;
height: 300px;
overflow: hidden;
background: #8799b6;
font-size: 11px;
color: #3c506f;
}
#accueil4:target #content4
{
display: block;
height: 300px;
overflow: hidden;
background: #8799b6;
font-size: 11px;
color: #3c506f;
}
.info_accueil
{
padding: 10px;
text-align: justify;
}

.credit
{
display: block;
text-align: right;
margin-right: 20px;
}
.credit a
{
font-size: 10px;
text-decoration: none !important;
}

Je le répète, mais svp n'enlevez pas le crédit en fin de code ! Je suis très généreux mais j'apprécie d'avoir un remerciement et j'estime que celui-ci est correct, pas excessivement voyant et normal pour utiliser quelque chose que j'ai mis du temps à réaliser

En voilà un qui m’intéresse et qui pique ma curiosité

Merci Cap'tain ;D

j'aimerais voir :3
Un grand merci! *.*

Merci,

Comment mettre le Qui est en ligne dans l'un de ces onglets ?

Salut^^

Il ne s'agit pas de le mettre dans l'un, mais de mettre le QEEL sous la forme de ce tabeau à onglet^^ Pour cela il faut connaitre un peu les templates et placer le code dans le template de page d'accueil, dans la zone du QEEL (en virant le code de base) puis placer les variables (présentes entre accolades : {...}) dans la zone de texte du code

Merci du partage!

Merci beaucoup, juste deux choses :

Peut-on arrondir le cadre ?

Comment monter le tableau pour le mettre ainsi plus près du forum : https://i.servimg.com/u/f47/14/87/76/27/sans_t34.jpg

dans ton code html il faut enlever des

Code:

<br/>

qui servent a sauter des ligne au tout début
pour arrondir le cadre c'est dans le css en rajoutant un border-radius ^^

Excusez-moi, mais avez vous un tutoriel pour les angles mais qui ne touche qu'à ce tableau ?

Merci j'ai hâte de tester ça =)

J'ai un petit soucis, ça donne des onglets verticaux.

http://testforumd.creerforums.com/

Est ce moi qui est raté quelque chose ? ou peut être mon navigateur ? (c'est Opera 11.52)

merci pour la future aide ^.^

Je viens de savoir où été le problème alors pour ceux qui l'on aussi voici ce que j'ai changé :

Code:

.ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
{
display: inline-block;

Je confirme ce qu'on dit les autres : super !

Oui si tu changes le "inline-block" en "block" ça met les onglets les uns en dessous des autres

Je veux voir *-*

Trooop *-*

Merci merci merci ! Je test illico !!

EDIT : Est-ce que tu pourrais expliquer comment installer le HTML dans les templates pour le QEEL s'il-te-plait T__T ? Je comprends pas du tout comment faire malheureusement DX

Je sais qu'il faut le placer quelque part dans le template index_body mais j'arrive pas à voir où ni comment x-x

Perso je voudrais avoir un onglet « Qui est en ligne », un autre « Les Groupes » et un autre « Statistiques » mais j'ose pas déplacer quoi que ce soit de peur de tout foutre le codage en l'air x-x

Dans le templates tu trouveras le code du QEEL, il sera mentionné vers la fin entre deux annotations de ce type :

Code:

<!-- BEGIN WHO IS ONLINE -->

<!-- END WHO IS ONLINE -->

C'est peut-être pas le terme exact car j'ai pas regardé mais en gros c'est l'idée^^ Tout ce qu'il y a à l'intérieur sert à afficher le QEEL et ce qui est entre accolade affiche des informations. C'est donc ces éléments qu'il te faudra placer dans le code.
Pour modifier, je te conseille de le faire petit peu par petit peu, en validant et vérifiant à chaque fois que ça n'a rien bousculé dans le code de base. Ainsi, si quelque chose foire, tu pourras savoir ce que c'est et l'enlever ou remettre le code de base, alors que si tu modifies 10 trucs différents avant de valider et que ça fait tout planter tu sauras pas d'où ça vient^^

J'aimerais voir svp! Merci pour ce tuto capitaine

Thank you verry much !! (je ne parle pas anglais donc ne rien dire sur les possibles fautes :°) )

Je veux voir ! Et merci pour ce tuto *o*

merci

Ah, je voudrais bien faire ce tuto !
Merci (:

Ca peut être VACHEMENT intéressant comme mise en page pour un forum
Pressée de pouvoir le mettre en place

Heum.. Est ce que vous savez comment on peut changer la couleur du tableau ? Parce que le bleu ne rend pas très bien *-*

Sympa l'effet, j'essaie !

merci ^^

Merci pour le code, c'est vrai que c'est plus pratique sans JS x)