Suivez-nous 2.0
Calendrier Event
JukeboxBobby
jukeboxV2
Qui est en ligne ?
Il y a en tout 4 utilisateurs en ligne :: 0 Enregistré, 0 Invisible et 4 Invités Aucun
Le record du nombre d'utilisateurs en ligne est de 20 le Dim 10 Oct - 12:44
Meilleurs posteurs
| Admin |
| |||
| Dany |
| |||
| yao |
| |||
| AH !! Why ? |
| |||
| BobbyDev |
| |||
| Pixolo |
| |||
| OvniZ'iteuse |
| |||
| TheAmazingTink |
| |||
| Titmoff |
| |||
| Yuitsu |
|
Liens Frenchnerd
Amis Fans
Web-séries
Goodies FFF
Tableau à onglet pour message d'accueil.
4 participants
:: BIENVENUE ! :: Vos présentations
Page 1 sur 2
Page 1 sur 2 • 1, 2 
Tableau à onglet pour message d'accueil.
par Dany Mer 22 Oct - 11:59
Code actif:
Codes Persmission:
si invité:
Tableau 2
Le CSS:- Code:
/* .systab .tab => les onglet */
.systab .tab {
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border: 1px solid #000;
cursor: pointer;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
background: #b8efa1;
color: #487f31;
border-color: #487f31;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
color: #ccc;
background: #333;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets */
.systab .contents {
margin-top: 1px;
margin-bottom: 1px;
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
}
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
display: block;
margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
float: left;
}
/* #tab-bloc = ce tableau d'onglet / .tabs = conteneur des onglets */
#tab-bloc .tabs {
text-align: center;
margin-bottom: 10px;
}
/* .tab = onglets */
#tab-bloc .tab {
border-radius: 5px;
border: none;
margin: 0 20px;
background: none;
}
/* .tab.selected = onglet sélectionné*/
#tab-bloc .tab.selected {
background: #111;
box-shadow: 0 0 5px #333;
color: #eee;
font-weight: bold;
}
/* .tab img = image dans les onglets */
#tab-bloc .tab img {
vertical-align: -3px;
}
/* .contents = conteneur des contenu */
#tab-bloc .contents {
border: 3px double #aaa;
background: #eee;
border-radius: 50px;
padding: 25px;
}
/* #tab-staff = contenu associé à l'onglet staff */
#tab-staff {
background: url(http://i.imgur.com/KlbuC.jpg);
width: 791px;
height: 607px;
border: 1px dotted #ccc;
margin: auto;
}
#tab-staff table {
color: #444;
background: url(http://i.imgur.com/GEdKG.png);
margin: 100px auto;
font-weight: 30px;
opacity: 0.8;
border: 2px solid #ccc;
border-radius: 5px;
}
/* #tab-bienvenue = contenu associé à l'onglet bienvenue */
#tab-bienvenue {
border-radius: 50px;
border: 2px dashed #bbb;
background: url(http://files.enjin.com.s3.amazonaws.com/393137/modules/forum/attachments/fluffy_1373775577.jpg);
Background-size: 820px 240px;
background-repeat: no-repeat;
text-align: center;
font-size: 20px;
color: #333;
text-shadow: 0 0 5px #fff;
}
/* #tab-bienvenue marquee = le marquee dans l'onglet bienvenue */
#tab-bienvenue marquee {
width: 400px;
text-align: center;
}
/* #tab-regles = contenu associé à l'onglet règles */
#tab-regles ul {
font-family: georgia, arial, serif;
font-size: 17px;
list-style: url(http://i.imgur.com/DMC6G.gif);
}
#tab-regles li {
margin-bottom: 10px;
color: green;
}
- Code:
<div class="systab" id="tab-bloc">
<div id="tab-regles">
<span><img src="http://i.imgur.com/8aDn6.gif" /> Les règles</span>
<ul>
<li>
1) Les messages agressifs ou diffamatoires, les insultes et critiques personnelles, les grossièretés et vulgarités et plus généralement tout message contrevenant aux lois françaises en vigueur sont interdits !
</li>
<li>
2) Les messages incitant à - ou évoquant - des pratiques illégales sont interdits ;si vous diffusez des informations provenant d'un autre site web, vérifiez auparavant si le site en question ne vous l'interdit pas. Mentionnez l'adresse du site en question par respect du travail de ses administrateurs !
</li>
<li>
3) Les doublons (poster deux réponses à la suite), les monoposts (un seul mot ou/et un smiley) ne seront pas tolérés, nous sommes des humains, diantre, non pas des machines ! Il en va de même du flood qui n'est accepté que dans le topic à flood. Et votre signature ne doit pas dépasser 250 pixels de haut, image et texte confondus. Dans le cas contraire, il vous sera demandé par Message Personnel de la modifier sous 48h. Temps au-delà duquel un administrateur ira la reformater avec ou sans votre consentement.
</li>
<li>
4) Merci de faire un effort sur la grammaire et l'orthographe. Style SMS INTERDIT ! Si vous avez de gros problèmes d'orthographe, merci de nous adresser un Message Privé.
</li>
<li>
5) La publicité est autorisée sur le forum, cependant, elle ne l'est que pour vos sites, forums et blogs. En aucun cas, les pubs pour les jeux sociaux et compagnie ne seront tolérées. De plus, vous pouvez toujours mettre un lien dans votre signature mais si le lien renvoie vers un site hors la loi, vous serez bannis si vous n'avez rien fait suite à un avertissement !
</li>
<li>
6) Le bouton "Recherche" vous sera utile afin de savoir si un sujet existe déjà; ne postez pas un nouveau sujet avant de vérifier s'il n'en existe pas déjà un.
</li>
<li>
7) Tout message contrevenant aux dispositions ci-dessus sera édité ou supprimé sans préavis ni justifications supplémentaires dans des délais qui dépendront de la disponibilité des modérateurs. Tout abus entraînera un bannissement temporaire puis une résiliation de l'inscription si récidive. Internet n'est ni un espace anonyme, ni un espace de non-droits ! Nous nous réservons la possibilité d'informer votre fournisseur d'accès et/ou les autorités judiciaires de tout comportement malveillant. L'adresse IP de chaque membre est enregistrée afin d'aider à faire respecter ces conditions.
</li>
<li>
8 ) Ne publiez pas n'importe quoi n'importe où, vérifiez que quelqu'un n'a pas mis la même chose que vous en ligne ! Les administrateurs et modérateurs s'accordent le droit de retirer une vidéo, une musique, etc. publiée si son contenu n'est pas en accord avec le Forum.
</li>
<li>
9 ) Lors des rencontres IRL, toute action déplacée ou violente aura de lourdes conséquences sur le forum.
</li>
<li>
10 ) Malgré tout, n'oubliez pas de vous amuser !
</li>
</ul>
</div>
<div class="selected" id="tab-bienvenue">
<span><img src="http://i.imgur.com/Xq6ZJ.jpg" /> Bienvenue</span>
<marquee direction="up">
<div>
Welkom
</div>
<div>
أهلاً و سهلاً
</div>
<div>
Բարի գալուստ!
</div>
<div>
Xoş gəlmişsiniz!
</div>
<div>
Ongi etorri
</div>
<div>
歡迎
</div>
<div>
Bienvenue
</div>
<div>
Καλώς Ορίσατε
</div>
<div>
Aloha
</div>
<div>
ᑐᙵᓱ
</div>
<div>
ようこそ
</div>
<div>
환영합니다
</div>
<div>
ຍິນດີຕ້ອນຮັບ
</div>
<div>
Laipni lūdzam
</div>
<div>
Räxim itegez
</div>
<div>
Benvignùo
</div>
<div>
Merhbe
</div>
<div>
კეთილი იყოს თქვენი
</div>
<div>
Vælkomin
</div>
<div>
Добро пожаловать
</div>
<div>
Haykuykuy!
</div>
</marquee>
</div>
<div id="tab-staff">
<span><img src="http://i.imgur.com/enPmV.png" /> L'équipe</span>
<table>
<tbody>
<tr>
<td>
<span style="color:red;font-weight:bold;">Admin :</span>
</td>
<td>
<span>Titmoff, yao</span>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<span style="color:blue;font-weight:bold;">Modo :</span>
</td>
<td>
Galaad, Louwizz, Albinou, Bob, Léo, Cibou, Laetitia, Vivi-7, TheAmazingTink, Tanuki
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<span style="color:#FF00FF; font-weight:bold">Dev : </span>
</td>
<td>
AHWHY, Aelis, Bobby, Dany, Friks
</td>
</tr>
</tbody>
</table>
</div>
</div>
- Code:
$(function() {
// clic sur un onglet
var d = function() {
// si l'onglet est déjà actif, ne rien faire
if ($(this).is(".selected")) return;
// affiche le contenu correspondant et on met l'onglet en sélectionné
var a = $(this).closest(".systab");
a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]);
$(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1])
};
// pour chacun des systèmes d'onglets
$("div.systab").each(function() {
var a = $("> div", this).detach(),
c = this,
b;
// on ajoute le conteneur d'onglet avant ou après ( si s_bottom )
$(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ?
"tabs" : "contents") + '"></div>');
$(a).each(function() {
b = $(this).children(":first");
b.is("span") ? (
$("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
});
$("> div.contents", this).append(a);
b = $(".content:first,.content.selected", this).last();
$(b).addClass("selected").siblings().hide();
$(b).data("tab").addClass("selected")
}).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d)
});
Aperçu
Codes Persmission:
si invité:
- Code:
$(document).ready(function(){if (_userdata["session_logged_in"] == 0)
$(function(){
$('.class').remove();
})});
- Code:
$(document).ready(function(){if (_userdata["user_posts"] < 1)
$(function(){
$('.M14 , .M15 , .M16').remove();
})});
- Spoiler:
Test tableau 1
Code HTML à mettre dans affichage>page d’accueil>généralité>message sur la pa- Code:
<div id="M14_horizontal">
<ul>
<li><span id="M14_un">Onglet 1</span></li>
<li><span id="M14_deux">Onglet 2</li>
<li><span id="M14_trois">Onglet 3</li>
<li><span id="M14_quatre">Onglet 4</li>
<li><span id="M14_cinq">Tous les onglets</li>
</ul>
<span class="M14_close_tout"title="Fermer tous les onglets">×</span><div class="M14_bloc_div"><div class="M14_un"style="display: none;">
<span class="M14_titre">Titre de l'onglet 1 </span>
<span class="M14_close1"title="Fermer l'onglet">×</span><br />
<p>
Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur.
</p>
</div>
<div class="M14_deux"style="display: none;">
<span class="M14_titre">Titre de l'onglet 2</span>
<span class="M14_close2"title="Fermer l'onglet">×</span><br />
<p>
Texte 2
</p>
</div>
<div class="M14_trois"style="display: none;">
<span class="M14_titre">Titre de l'onglet 3 </span>
<span class="M14_close3"title="Fermer l'onglet">×</span><br />
<p>
Ob haec et huius modi multa, quae cernebantur in paucis, omnibus timeri sunt coepta. et ne tot malis dissimulatis paulatimque serpentibus acervi crescerent aerumnarum, nobilitatis decreto legati mittuntur: Praetextatus ex urbi praefecto et ex vicario Venustus et ex consulari Minervius oraturi, ne delictis supplicia sint grandiora, neve senator quisquam inusitato et inlicito more tormentis exponeretur.
Post haec indumentum regale quaerebatur et ministris fucandae purpurae tortis confessisque pectoralem tuniculam sine manicis textam, Maras nomine quidam inductus est ut appellant Christiani diaconus, cuius prolatae litterae scriptae Graeco sermone ad Tyrii textrini praepositum celerari speciem perurgebant quam autem non indicabant denique etiam idem ad usque discrimen vitae vexatus nihil fateri conpulsus est.
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.
</p>
</div><div class="M14_quatre"style="display: none;">
<span class="M14_close4"title="Fermer l'onglet">×</span><br /><div style="float:left;width:23%;height:40px;overflow-y:auto;text-align:left;
padding:2px 5px 2px 5px;">
<center><span class="M14_titre">Titre du bloc 1</span></center> <br />
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.
</div><div style="float:left;width:23%;height:40px;overflow-y:auto;text-align:left;
padding:2px 5px 2px 5px;">
<center><span class="M14_titre">Titre du bloc 2</span> </center> <br />
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.
</div><div style="float:left;width:23%;height:40px;overflow-y:auto;text-align:left;
padding:2px 5px 2px 5px;">
<center><span class="M14_titre">Titre du bloc 3</span></center> <br />
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.
</div><div style="float:left;width:23%;height:40px;overflow-y:auto;text-align:left;
padding:2px 5px 2px 5px;">
<center> <span class="M14_titre">Titre du bloc 4</span> </center> <br />
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.
</div>
</div>
</div>
</div>
- Code:
/*le menu */
#M14_horizontal ul
{
height:20px;/*ne pas toucher*/
width:90%;/*ne pas toucher*/
}
/*le bloc de tous les menus qui s ouvrira au clic*/
#M14_horizontal div.M14_bloc_div
{
width:90%;/*ne pas toucher*/
min-height:70px;/*ne pas toucher*/
height:auto;/*ne pas toucher*/
padding:0;/*ne pas toucher*/
margin:-16px 0 10px 0;/*ne pas toucher*/
}
/*les titres des menus*/
div.M14_bloc_div .M14_titre{color:#ffffff;font-size:13px;}
/*les onglets*/
#M14_horizontal ul li
{
list-style: none;/*ne pas toucher*/
display:inline;/*ne pas toucher*/
}
/*les identifiants des onglets et leurs apparences*/
#M14_un , #M14_deux , #M14_trois , #M14_quatre , #M14_cinq
{
width:150px;/*ne pas toucher*/
margin-left:10px;/*on espace les onglets*/
padding:8px 5px 0 5px;/*ne pas toucher*/
color:#333333;/*couleur de police des onglets*/
font-size:12px;/*taille de police des onglets*/
text-decoration:none !important;/*ne pas toucher*/
cursor:pointer;/*on donne un curseur*/
border:5px solid #333333;/*bordures*/
border-bottom:none;/*ne pas toucher*/
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-transition: all 0.5s ease-in-out;/*ne pas toucher*/
-moz-transition: all 0.5s ease-in-out;/*ne pas toucher*/
-o-transition: all 0.5s ease-in-out;/*ne pas toucher*/
transition: all 0.5s ease-in-out; /*ne pas toucher*/
}
/*les identifiants des onglets et leurs apparences au survol*/
#M14_horizontal ul:hover #M14_un ,
#M14_horizontal ul:hover #M14_deux ,
#M14_horizontal ul:hover #M14_trois,
#M14_horizontal ul:hover #M14_quatre ,
#M14_horizontal ul:hover #M14_cinq
{
color:#ffffff;/*couleur de police des onglets*/
border-top:5px solid #333333;/*la bordure haute*/
border-left:5px solid #666666;/*la bordure gauche*/
border-right:5px solid #666666;/*la bordure droite*/
border-bottom:none;/*pas de bordure basse*/
-webkit-border-top-left-radius: 6px;/*les bordures arrondies*/
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/*les 4 menus*/
.M14_un , .M14_deux , .M14_trois , .M14_quatre
{
margin-top:2px;/*ne pas toucher*/
padding:10px 0 10px 3px;/*ne pas toucher*/
min-height:30px;/*ne pas toucher*/
height:auto;/*ne pas toucher*/
max-height:60px;/*ne pas toucher*/
overflow-y:auto;/*ne pas toucher*/
border-top:3px solid #333333;/*la bordure haute*/
border:5px solid #333333;/*les autres bordures*/
background:#222222;/*la couleur de fond*/
-webkit-border-top-left-radius: 6px;/*les bordures arrondies*/
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
/*on donne une apparence au contenu des menus*/
.M14_un p, .M14_deux p, .M14_trois p, .M14_quatre
{
text-align:left;/*on place le texte a gauche*/
color:#ffffff;/*la couleur de police*/
}
/*les boutons de fermeture*/
.M14_close1 , .M14_close2, .M14_close3 , .M14_close4 , .M14_close_tout
{
float:left;/*ne pas toucher*/
color:#20aec8;/*couleur du bouton*/
font-size:15px;/*la taille du bouton*/
font-weight:bold;/*caractere gras du bouton*/
cursor:pointer; /*on donne un curseur*/
}
- Code:
$(document).ready(function(){
$( "#M14_un" ).click(function()
{$( ".M14_un" ).show(500);
});
$( ".M14_close1" ).click(function()
{$( ".M14_un" ).hide(500);
});
$( "#M14_deux" ).click(function()
{$( ".M14_deux" ).show(500);
});
$( ".M14_close2" ).click(function()
{$( ".M14_deux" ).hide(500);
});
$( "#M14_trois" ).click(function()
{$( ".M14_trois" ).show(500);
});
$( ".M14_close3" ).click(function()
{$( ".M14_trois" ).hide(500);
});
$( "#M14_quatre" ).click(function()
{$( ".M14_quatre" ).show(500);
});
$( ".M14_close4" ).click(function()
{$( ".M14_quatre" ).hide(500);
});
$( "#M14_cinq" ).click(function()
{$( ".M14_un , .M14_deux , .M14_trois , .M14_quatre" ).show(500);
});
$( ".M14_close_tout" ).click(function()
{$( ".M14_un , .M14_deux , .M14_trois , .M14_quatre" ).hide(500);
})
});
Remarque:
-un tableau avec un contenu à taille fixe serait meilleur.
-empêcher le stacking des onglets?
-corriger l'apparence des onglets.(Revoir entièrement le design même.)
Dernière édition par Dany the DevDog le Lun 8 Déc - 10:31, édité 2 fois
Dany- Messages : 79
Date d'inscription : 10/09/2014
Age : 19
Re: Tableau à onglet pour message d'accueil.
par AH !! Why ? Mer 22 Oct - 14:54
C'est intéressant.
Mais tu voudrais l'utiliser pour quoi ?
Message d'accueil ?
Mais est ce bien pour les mobiles ?
Bref, très bonne initiative, faudra en parler pour voir ce qu'on peut en faire de bien ^^
Mais tu voudrais l'utiliser pour quoi ?
Message d'accueil ?
Mais est ce bien pour les mobiles ?
Bref, très bonne initiative, faudra en parler pour voir ce qu'on peut en faire de bien ^^
AH !! Why ?- Messages : 45
Date d'inscription : 27/08/2014
Re: Tableau à onglet pour message d'accueil.
par Dany Mer 22 Oct - 16:27
Je pensais l'utiliser pour un affichage alternatif des information du forum.
Par exemple mettre un onglet règlement, un onglet Concours, un onglet news, Frenchnews,... enfin bref, ya pas mal de possibilités.
Pour les mobiles j'ai pas testé, mais normalement ça devrait pas affecté la version mobile de forumactif.(pas comme la cb actuellement^^')
Par exemple mettre un onglet règlement, un onglet Concours, un onglet news, Frenchnews,... enfin bref, ya pas mal de possibilités.
Pour les mobiles j'ai pas testé, mais normalement ça devrait pas affecté la version mobile de forumactif.(pas comme la cb actuellement^^')
Dany- Messages : 79
Date d'inscription : 10/09/2014
Age : 19
Re: Tableau à onglet pour message d'accueil.
par yao Mer 22 Oct - 17:46
Ça peut être une bonne idée. Ça remplacerait en partie le widget "liens importants" + certaines annonces en page d'accueil.
Après, concernant la présentation des onglets, faudra voir comment améliorer / organiser
Peut-être un truc plus "simple", plus "beau"
Peut-être lorsqu'on clique sur une "catégorie", y'a une liste qui apparaît avec différents liens / icônes, que ce soit agréable à lire
Bref, à méditer mais bonne initiative
Après, concernant la présentation des onglets, faudra voir comment améliorer / organiser
Peut-être un truc plus "simple", plus "beau" Peut-être lorsqu'on clique sur une "catégorie", y'a une liste qui apparaît avec différents liens / icônes, que ce soit agréable à lire
Bref, à méditer mais bonne initiative
Dernière édition par yao le Jeu 23 Oct - 9:34, édité 1 fois
yao- Messages : 76
Date d'inscription : 19/08/2014
Age : 38
Re: Tableau à onglet pour message d'accueil.
par Dany Jeu 23 Oct - 8:30
Tableau 2
Le CSS:- Code:
/* .systab .tab => les onglet */
.systab .tab {
padding: 2px 10px;
margin-right: 5px;
color: #000;
background: #fff;
border: 1px solid #000;
cursor: pointer;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
background: #b8efa1;
color: #487f31;
border-color: #487f31;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
color: #ccc;
background: #333;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets */
.systab .contents {
margin-top: 1px;
margin-bottom: 1px;
color: #000;
background: #fff;
border: 1px solid #000;
padding: 10px;
}
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
display: block;
margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
float: left;
}
/* #tab-bloc = ce tableau d'onglet / .tabs = conteneur des onglets */
#tab-bloc .tabs {
text-align: center;
margin-bottom: 10px;
}
/* .tab = onglets */
#tab-bloc .tab {
border-radius: 5px;
border: none;
margin: 0 20px;
background: none;
}
/* .tab.selected = onglet sélectionné*/
#tab-bloc .tab.selected {
background: #111;
box-shadow: 0 0 5px #333;
color: #eee;
font-weight: bold;
}
/* .tab img = image dans les onglets */
#tab-bloc .tab img {
vertical-align: -3px;
}
/* .contents = conteneur des contenu */
#tab-bloc .contents {
border: 3px double #aaa;
background: #eee;
border-radius: 50px;
padding: 25px;
}
/* #tab-staff = contenu associé à l'onglet staff */
#tab-staff {
background: url(http://i.imgur.com/KlbuC.jpg);
width: 791px;
height: 607px;
border: 1px dotted #ccc;
margin: auto;
}
#tab-staff table {
color: #444;
background: url(http://i.imgur.com/GEdKG.png);
margin: 100px auto;
font-weight: 30px;
opacity: 0.8;
border: 2px solid #ccc;
border-radius: 5px;
}
/* #tab-bienvenue = contenu associé à l'onglet bienvenue */
#tab-bienvenue {
border-radius: 50px;
border: 2px dashed #bbb;
background: url(http://files.enjin.com.s3.amazonaws.com/393137/modules/forum/attachments/fluffy_1373775577.jpg);
Background-size: 820px 240px;
background-repeat: no-repeat;
text-align: center;
font-size: 20px;
color: #333;
text-shadow: 0 0 5px #fff;
}
/* #tab-bienvenue marquee = le marquee dans l'onglet bienvenue */
#tab-bienvenue marquee {
width: 400px;
text-align: center;
}
/* #tab-regles = contenu associé à l'onglet règles */
#tab-regles ul {
font-family: georgia, arial, serif;
font-size: 17px;
list-style: url(http://i.imgur.com/DMC6G.gif);
}
#tab-regles li {
margin-bottom: 10px;
color: green;
}
- Code:
<div class="systab" id="tab-bloc">
<div id="tab-regles">
<span><img src="http://i.imgur.com/8aDn6.gif" /> Les règles</span>
<ul>
<li>
1) Les messages agressifs ou diffamatoires, les insultes et critiques personnelles, les grossièretés et vulgarités et plus généralement tout message contrevenant aux lois françaises en vigueur sont interdits !
</li>
<li>
2) Les messages incitant à - ou évoquant - des pratiques illégales sont interdits ;si vous diffusez des informations provenant d'un autre site web, vérifiez auparavant si le site en question ne vous l'interdit pas. Mentionnez l'adresse du site en question par respect du travail de ses administrateurs !
</li>
<li>
3) Les doublons (poster deux réponses à la suite), les monoposts (un seul mot ou/et un smiley) ne seront pas tolérés, nous sommes des humains, diantre, non pas des machines ! Il en va de même du flood qui n'est accepté que dans le topic à flood. Et votre signature ne doit pas dépasser 250 pixels de haut, image et texte confondus. Dans le cas contraire, il vous sera demandé par Message Personnel de la modifier sous 48h. Temps au-delà duquel un administrateur ira la reformater avec ou sans votre consentement.
</li>
<li>
4) Merci de faire un effort sur la grammaire et l'orthographe. Style SMS INTERDIT ! Si vous avez de gros problèmes d'orthographe, merci de nous adresser un Message Privé.
</li>
<li>
5) La publicité est autorisée sur le forum, cependant, elle ne l'est que pour vos sites, forums et blogs. En aucun cas, les pubs pour les jeux sociaux et compagnie ne seront tolérées. De plus, vous pouvez toujours mettre un lien dans votre signature mais si le lien renvoie vers un site hors la loi, vous serez bannis si vous n'avez rien fait suite à un avertissement !
</li>
<li>
6) Le bouton "Recherche" vous sera utile afin de savoir si un sujet existe déjà; ne postez pas un nouveau sujet avant de vérifier s'il n'en existe pas déjà un.
</li>
<li>
7) Tout message contrevenant aux dispositions ci-dessus sera édité ou supprimé sans préavis ni justifications supplémentaires dans des délais qui dépendront de la disponibilité des modérateurs. Tout abus entraînera un bannissement temporaire puis une résiliation de l'inscription si récidive. Internet n'est ni un espace anonyme, ni un espace de non-droits ! Nous nous réservons la possibilité d'informer votre fournisseur d'accès et/ou les autorités judiciaires de tout comportement malveillant. L'adresse IP de chaque membre est enregistrée afin d'aider à faire respecter ces conditions.
</li>
<li>
8 ) Ne publiez pas n'importe quoi n'importe où, vérifiez que quelqu'un n'a pas mis la même chose que vous en ligne ! Les administrateurs et modérateurs s'accordent le droit de retirer une vidéo, une musique, etc. publiée si son contenu n'est pas en accord avec le Forum.
</li>
<li>
9 ) Lors des rencontres IRL, toute action déplacée ou violente aura de lourdes conséquences sur le forum.
</li>
<li>
10 ) Malgré tout, n'oubliez pas de vous amuser !
</li>
</ul>
</div>
<div class="selected" id="tab-bienvenue">
<span><img src="http://i.imgur.com/Xq6ZJ.jpg" /> Bienvenue</span>
<marquee direction="up">
<div>
Welkom
</div>
<div>
أهلاً و سهلاً
</div>
<div>
Բարի գալուստ!
</div>
<div>
Xoş gəlmişsiniz!
</div>
<div>
Ongi etorri
</div>
<div>
歡迎
</div>
<div>
Bienvenue
</div>
<div>
Καλώς Ορίσατε
</div>
<div>
Aloha
</div>
<div>
ᑐᙵᓱ
</div>
<div>
ようこそ
</div>
<div>
환영합니다
</div>
<div>
ຍິນດີຕ້ອນຮັບ
</div>
<div>
Laipni lūdzam
</div>
<div>
Räxim itegez
</div>
<div>
Benvignùo
</div>
<div>
Merhbe
</div>
<div>
კეთილი იყოს თქვენი
</div>
<div>
Vælkomin
</div>
<div>
Добро пожаловать
</div>
<div>
Haykuykuy!
</div>
</marquee>
</div>
<div id="tab-staff">
<span><img src="http://i.imgur.com/enPmV.png" /> L'équipe</span>
<table>
<tbody>
<tr>
<td>
<span style="color:red;font-weight:bold;">Admin :</span>
</td>
<td>
<span>Titmoff, yao</span>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<span style="color:blue;font-weight:bold;">Modo :</span>
</td>
<td>
Galaad, Louwizz, Albinou, Bob, Léo, Cibou, Laetitia, Vivi-7, TheAmazingTink, Tanuki
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<span style="color:#FF00FF; font-weight:bold">Dev : </span>
</td>
<td>
AHWHY, Aelis, Bobby, Dany, Friks
</td>
</tr>
</tbody>
</table>
</div>
</div>
- Code:
$(function() {
// clic sur un onglet
var d = function() {
// si l'onglet est déjà actif, ne rien faire
if ($(this).is(".selected")) return;
// affiche le contenu correspondant et on met l'onglet en sélectionné
var a = $(this).closest(".systab");
a.find(".selected").removeClass("selected").filter(".content")[a.is(".s_slide") ? "slideUp" : a.is(".s_fade") ? "fadeOut" : "hide"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1]);
$(this).addClass("selected").data("content").addClass("selected").stop(!0, !0)[a.is(".s_slide") ? "slideDown" : a.is(".s_fade") ? "fadeIn" : "show"](+((a.attr("class") || "").match(/^[sS]*(?:^|s)s_trans([0-9]+)(?:s|$)[sS]*$/) || ["", 500])[1])
};
// pour chacun des systèmes d'onglets
$("div.systab").each(function() {
var a = $("> div", this).detach(),
c = this,
b;
// on ajoute le conteneur d'onglet avant ou après ( si s_bottom )
$(this).html('<div class="' + ($(this).is(".s_bottom") ? "contents" : "tabs") + '"></div><div class="' + ($(this).is(".s_bottom") ?
"tabs" : "contents") + '"></div>');
$(a).each(function() {
b = $(this).children(":first");
b.is("span") ? (
$("> div.tabs", c).append($(b).addClass("tab").data("content", $(this))), $(this).addClass("content").data("tab", b)) : $(this).remove()
});
$("> div.contents", this).append(a);
b = $(".content:first,.content.selected", this).last();
$(b).addClass("selected").siblings().hide();
$(b).data("tab").addClass("selected")
}).on("click", ".tab", d).filter(".s_hover").on("mouseenter", ".tab", d)
});
Aperçu
Dany- Messages : 79
Date d'inscription : 10/09/2014
Age : 19
Re: Tableau à onglet pour message d'accueil.
par AH !! Why ? Jeu 23 Oct - 9:33
C'est extrêmement bien !! Super pratique et permettra de gagner pleins de place dans le message d'accueil, et donc mettre en avant que les nouvelles informations ^^
Tu as trouvé le code où ?
Tu as trouvé le code où ?
AH !! Why ?- Messages : 45
Date d'inscription : 27/08/2014
Dany- Messages : 79
Date d'inscription : 10/09/2014
Age : 19
Re: Tableau à onglet pour message d'accueil.
par yao Jeu 23 Oct - 9:38
C'est super beau ! Super pratique ! Super bien !
Merci Dany ! Je valide complètement !
Maintenant, à voir (principalement avec les modos) qu'est-ce qu'on pourrait y écrire mais ce ne sont pas les possibilités qui manquent ^^
Et c'est quoi FdF ? ^^'
Merci Dany ! Je valide complètement !
Maintenant, à voir (principalement avec les modos) qu'est-ce qu'on pourrait y écrire mais ce ne sont pas les possibilités qui manquent ^^
Et c'est quoi FdF ? ^^'
yao- Messages : 76
Date d'inscription : 19/08/2014
Age : 38
Re: Tableau à onglet pour message d'accueil.
par Dany Jeu 23 Oct - 9:40
Le forum des forums quoi^^' le forum de forumactif.
Dany- Messages : 79
Date d'inscription : 10/09/2014
Age : 19
Re: Tableau à onglet pour message d'accueil.
par Dany Mar 4 Nov - 7:43
D'ailleurs, je sens que je vais devoir modifier un peu le tableau, sinon Titmoff va encore me taper sur les doigts...elles a vraiment horreur des tableaux!^^
Dany- Messages : 79
Date d'inscription : 10/09/2014
Age : 19
Re: Tableau à onglet pour message d'accueil.
par AH !! Why ? Mar 4 Nov - 13:58
Je comprends Titmoff, c'est pas propre les tableaux mais bien pratique ^^
AH !! Why ?- Messages : 45
Date d'inscription : 27/08/2014
Re: Tableau à onglet pour message d'accueil.
par Dany Jeu 20 Nov - 10:45
Des trucs a changer/modifier sinon?
Dany- Messages : 79
Date d'inscription : 10/09/2014
Age : 19
Re: Tableau à onglet pour message d'accueil.
par yao Jeu 20 Nov - 14:39
Bah le truc qu'on avait déjà relevé la la réunion Team Dev : lorsqu'on actualise la page d'accueil, pendant une demie seconde, on voit tous les différents textes qui se suivent et c'est pas cool ^^
yao- Messages : 76
Date d'inscription : 19/08/2014
Age : 38
Re: Tableau à onglet pour message d'accueil.
par Dany Jeu 20 Nov - 15:02
Ah oui, et uniquement sous firefox...
Dany- Messages : 79
Date d'inscription : 10/09/2014
Age : 19
Re: Tableau à onglet pour message d'accueil.
par AH !! Why ? Jeu 20 Nov - 15:41
On peut pas rajouter un délais pour firefox ?
Exemple : avec -moz
Exemple : avec -moz
- Code:
transition-delay: 3s
AH !! Why ?- Messages : 45
Date d'inscription : 27/08/2014
Re: Tableau à onglet pour message d'accueil.
par yao Jeu 20 Nov - 20:37
On est bien d'accord que cela n'affectera pas le temps de chargement de la page d'accueil ? ^^
yao- Messages : 76
Date d'inscription : 19/08/2014
Age : 38
Re: Tableau à onglet pour message d'accueil.
par Dany Jeu 20 Nov - 21:40
Pour le code de Matyas? je sais pas...
Dany- Messages : 79
Date d'inscription : 10/09/2014
Age : 19
Re: Tableau à onglet pour message d'accueil.
par yao Mar 2 Déc - 9:45
Sinon, j'ai pensé qu'un des vieux projets pouvait se greffer à celui-ci. Il s'agit d'une petite annonce pour les non-inscrits et/ou les membres n'ayant pas encore posté de message (par exemple, leur dire de s'inscrire parce qu'on est cool et qu'il faut se présenter et tout (comme un guide)).
Pour faire cela, je ne sais pas si c'est facile ou non mais je sais que, niveau permission, on peut par exemple dire à un widget qu'il soit visible que pour les invités et pas pour les membres.
Faudrait peut-être poser la question sur le forum de forumactif si c'est possible
Pour faire cela, je ne sais pas si c'est facile ou non mais je sais que, niveau permission, on peut par exemple dire à un widget qu'il soit visible que pour les invités et pas pour les membres.
Faudrait peut-être poser la question sur le forum de forumactif si c'est possible
yao- Messages : 76
Date d'inscription : 19/08/2014
Age : 38
Re: Tableau à onglet pour message d'accueil.
par Dany Mar 2 Déc - 10:06
Ça doit être faisable, il me semble avoir lu un truc sur le sujet sur un autre projet que j'ai tué dans l'oeuf...
Dany- Messages : 79
Date d'inscription : 10/09/2014
Age : 19
Re: Tableau à onglet pour message d'accueil.
par yao Mar 2 Déc - 15:10
Chouette ! 
Ça, ça serait vraiment cool !
Ça, ça serait vraiment cool !
yao- Messages : 76
Date d'inscription : 19/08/2014
Age : 38
Page 1 sur 2 • 1, 2
Sujets similaires:: BIENVENUE ! :: Vos présentations
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
