Allons y.
Tout d'abord, il faut savoir que j'ai utilisé ce tutoriel pour le tableau à onglets.
Je ne le connaissais pas et je n'ai pas vraiment eu le temps de le découvrir, mais il se trouve qu'il est pas mal du tout et original^^
Je suis trop fatiguée après une grosse journée de cours pour me pencher sur le problème d'aligner les onglets à gauche.EDIT : Ayéh, j'ai trouvé (tout con d'ailleurs !)
Je te laisse découvrir le tout et n'hésite pas pour les questions.
1°- Le JS daans le PA >> Modules >> Gestion des Javascripts >
Activer : Oui >
Titre: ce-que-tu-veux >
Coche : sur l'index
- Code:
$(function(){
var d=function(){if($(this).is(".selected")) return;var a=$(this).closest(".systab");a.find(".selected").removeClass("selected").filter(".content")[a.is(".sslide")?"slideUp":a.is(".sfade")?"fadeOut":"hide"](500);$(this).addClass("selected").data("content").addClass("selected").stop(!0,!0)[a.is(".sslide")?"slideDown":a.is(".sfade")?"fadeIn":"show"](500)};$("div.systab").each(function(){var a=$("> div",this).detach(),c=[],b;$(this).html('<div class="'+($(this).is(".sbottom")?"contents":"tabs")+'"></div><div class="'+($(this).is(".sbottom")?
"tabs":"contents")+'"></div>');$(a).each(function(){b=$(this).children(":first");b.is("span")?(c=$(c).add($(b).addClass("tab").data("content",$(this))),$(this).addClass("content").data("tab",b)):$(this).remove()});$("> div.tabs",this).append(c);$("> 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(".shover").on("mouseenter",".tab",d)
});
2°- Le CSS :
- Spoiler:
.superqeel {
width: auto;
background: #d8b78c;
border: 2px solid #532f00;
-moz-border-radius: 13px;
-webkit-border-radius: 13px;
-khtml-border-radius: 13px;
border-radius: 13px;
padding: 7px;
margin: 10px auto;
}
.qeeltitre a {
display: block;
width: 250px;
height: 37px;
color: #000;
font: italic small-caps bold 34px arial black, sans-serif; /* ordre a respecter pour les normes W3C avec le raccourci font > style > variant > weight > size/height > familly on peut omettre toutes les propriétés SAUF le size et le family dans cet ordre */
text-align: right;
text-shadow: 1px 1px 1px yellow;
letter-spacing: 3px;
-moz-transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-htm-transform: rotate(-15deg);
transform: rotate(-15deg);
margin: 0 0 -52px 170px;
z-index: 1; /* définit une priorité sur l élément du dessous */
}
.ovale {
width: 320px;
height: 200px;
background: #ecdac2;
vertical-align: middle!important;
-moz-border-radius: 160px / 100px; /* le slash pour réctifier une erreur entre Google et Firefox */
-webkit-border-radius: 160px / 100px;
-khtml-border-radius: 160px / 100px;
border-radius: 160px / 100px;
padding: 16px;
margin: 4px auto;
}
/* statist..iques */
.statist {
vertical-align: middle!important;
padding: 7px;
margin: 0 auto;
}
/* .systab .tab => les onglet */
.systab .tab {
display: inline-block;
background: #ecdac2!important;
width: 34px!important;
height: 21px!important;
border: 2px solid #532f00;
margin: 4px -1px -1px 0 !important;
cursor: pointer;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets */
.systab .contents {
background: #ecdac2!important;
width: 340px;
height: 180px;
overflow: auto;
color: #000;
border: 2px solid #532f00;
margin-bottom: 4px;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
background: #ecdac2;
color: #fff;
border-color: #532f00;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
color: #fff;
background: #ecdac2;
}
/* groupes */
.wiogroups {
text-align: justify;
}
/* supression du fond blanc de row1 */
.annive td[class^="row"], .statist td[class^="row"] {
background-color: transparent;
text-align: justify;
}
.annive .row1 span.gensmall, .statist .row1 span.gensmall {
color: brown!important;
font: small-caps 10px !important;
}
/* les box-shadow */
.superqeel, .qeeltitre a, .qeelimg, .statist, .ovale, .wio, .wiogroups, .annive {
box-shadow: 8px 8px 16px #a92c10;
-moz-box-shadow: 8px 8px 16px #a92c10;
-webkit-box-shadow: 8px 8px 16px #a92c10;
-o-box-shadow: 8px 8px 16px #a92c10;
-khtml-box-shadow: 8px 8px 16px #a92c10;
-htm-box-shadow: 8px 8px 16px #a92c10;
}
Ici une petite explication s'impose :
Dans dernier code, celui du "box-shadow", j'ai réuni tous les identifiants dans l'ordre d'apparition du template, (alors attention les yeux, Ray Ban recommandées !), afin que tu puisses bien noter ces identifiants dans le HTML et que tu voies ce qui fait quoi...
Bien sûr, ces identifiants sont aussi là pour que tu puisses les styler séparément.
(Toutefois, uniquement pour les identifiants "
annive" et "
statist" tu passeras par le deuxième code du "
row1")
Pas de panique, tu vas comprendre avec le HTML, du moins je le souhaite !
3°- Le HTML c'est juste la partie concernée du template
index_body :
- Code:
<!-- BEGIN disable_viewonline -->
<br /><br />
<div class="qeeltitre"><a href="#top">Revolution</a></div>
<table class="superqeel" align="center" width="80%" border="0" cellspacing="8" cellpadding="0"><tr>
<td width="100%" colspan="2" align="center" valign="middle">
<a href="{U_VIEWONLINE}" rel="nofollow" target="_blank"><img class="qeelimg" src="http://i44.servimg.com/u/f44/15/34/38/50/qeel_e10.gif" title="qeel" /></a>
</td></tr>
<tr><td align="center" valign="middle">
<table class="ovale"><tr><td align="center" valign="middle">
<table class="statist"><tr><td class="row1" align="justify" valign="middle">
<span class="gensmall">
{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}<br />
{RECORD_USERS}
</span>
</td></tr></table>
</td></tr></table>
</td>
<td class="wio" align="center" valign="middle">
<div class="systab wio" align="left">
<div class="wio">
<span style="padding: 13px 34px 0 0;"></span>
<div class="gensmall">{TOTAL_USERS_ONLINE}<br />
{LOGGED_IN_USER_LIST}</div>
</div>
<div class="wiogroups">
<span style="padding: 7px 25px 0 0;"></span>
<span class="gensmall">
{LEGEND} : {GROUP_LEGEND}<br />
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5]
A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius:
'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est
aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5]
A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius:
'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est
aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
Synephebos ego, inquit, potius Caecilii aut Andriam Terentii quam utramque Menandri legam? [5]
A quibus tantum dissentio, ut, cum Sophocles vel optime scripserit Electram, tamen male conversam Atilii mihi legendam putem, de quo Lucilius:
'ferreum scriptorem', verum, opinor, scriptorem tamen, ut legendus sit. rudem enim esse omnino in nostris poetis aut inertissimae segnitiae est
aut fastidii delicatissimi. mihi quidem nulli satis eruditi videntur, quibus nostra ignota sunt.
</span>
</div>
<div class="annive">
<span style="padding: 3px 16px 0 0;"></span>
<table class="annive"><tr><td align="left" valign="top" class="row1">
<span class="gensmall">
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</span>
</td></tr></table>
</div>
</div>
</td>
</tr></table>
<!-- BEGIN switch_chatbox_activate -->
<br />
<table class="forumline" width="90%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td class="row1">
<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />
<!-- BEGIN switch_chatbox_popup -->
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>
<!-- END switch_chatbox_popup -->
</span>
</td>
</tr>
<!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->
J
'ai mis un Lorem Ipsum dans les groupes juste pour afficher la scrollbar.Je ne suis pas loin aujourd'hui en cas de besoin.
Dernière édition par Final-Blonde le Mar 20 Mar 2012 - 11:04, édité 1 fois