Hello ! ça fait un bail, et je bosse sur un nouveau thème pour un autre forum. J'aimerais un petit peu d'aide s'il vous plait! J'ai vu qu'il y avait un code semblable en libre service mais je n'ai pas réussi à le décortiquer pour en faire ce que je voulais...et ça craint un peu. J'aimerais pas devoir enlever tout l'ensemble de mon code pour coller celui là. Voila en gros ce que je voudrais faire : http://prntscr.com/7p6htx
eeeet voila... le lien du forum de test est ici : http://testforum.probb.fr/
j'ai pas vraiment d'idée de comment m'y prendre, ça fait vraiment longtemps que j'ai pas re-touché au codage, donc j'espérais avoir un petit peu d'aide. Je suis pas sûr d'avoir posté au bon endroit par contre donc désolé si c'est pas bon. Voila, merci d'avance! o/
SUPER-EDIT : Bon en fait j'ai réussi à intégrer d'une façon ou d'une autre, mais j'ai un petit soucis... en effet les catégories apparaissent vide, comme si elles ne reconnaissaient pas le CSS. Voila à quoi ça ressemble : http://prntscr.com/7phvhj , hors j'aimerais que ça reconnaisse le CSS que j'utilise pour les catégories, à savoir un truc comme ça : http://prntscr.com/7phvvb . C'est assez bizarre d'ailleurs... quand je change la hiérarchie, ça m'affiche le CSS mais toutes les catégories sont en bas (donc pas au dessus du forum qu'il contient); quand je le change encore le CSS disparait mais tout reviens à l'endroit... une idée d'où ça pourrait venir? je vous donne le CSS que j'utilise actuellement pendant mes tests; ça se peux que je trouve tout seul mais je galère un peu pour l'instant :
Page de test : http://testforum.probb.fr/?tt=1
merci d'avance!
eeeet voila... le lien du forum de test est ici : http://testforum.probb.fr/
SUPER-EDIT : Bon en fait j'ai réussi à intégrer d'une façon ou d'une autre, mais j'ai un petit soucis... en effet les catégories apparaissent vide, comme si elles ne reconnaissaient pas le CSS. Voila à quoi ça ressemble : http://prntscr.com/7phvhj , hors j'aimerais que ça reconnaisse le CSS que j'utilise pour les catégories, à savoir un truc comme ça : http://prntscr.com/7phvvb . C'est assez bizarre d'ailleurs... quand je change la hiérarchie, ça m'affiche le CSS mais toutes les catégories sont en bas (donc pas au dessus du forum qu'il contient); quand je le change encore le CSS disparait mais tout reviens à l'endroit... une idée d'où ça pourrait venir? je vous donne le CSS que j'utilise actuellement pendant mes tests; ça se peux que je trouve tout seul mais je galère un peu pour l'instant :
- HTML:
- Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>
<!-- END switch_user_logged_in -->
<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">
<!-- BEGIN switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
<!-- END switch_user_logged_in -->
<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
{catrow.tablehead.L_FORUM}
</tr>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<div class="cate"> <span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}"><div class="catitre"><b><i>{catrow.cathead.CAT_TITLE}</i></b></div></a>
</span> </div>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<div class="un_forum">
<div class="un_titre">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
{catrow.forumrow.FORUM_NAME}
</a>
</h{catrow.forumrow.LEVEL}>
</div>
<div class="image_messages">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</div>
<div class="description">
{catrow.forumrow.FORUM_DESC}
<span class="sous_forums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
</div>
<div class="dernier_message">
<span class="mess_et_sujets">
{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets
</span>
<span id="last" class="liens_mess">
<!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">
{catrow.forumrow.LATEST_TOPIC_NAME}
</a>
<!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
</span>
<script type="text/javascript">jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');</script>
</div>
</div>
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
- CSS:
- Code:
/*------------------------------------------------------------------------------------FONDS*/
body{
background-image: url('http://i.imgur.com/c9ZbxOJ.jpg');
background-color: #dddddd;
background-align: center;
background-size: 100%;
background-repeat: repeat;}
div#background1{
background-image: url('http://i.imgur.com/7JzwybD.jpg');
background-repeat: repeat-x;
}
div#background2{
height:100%;
width:100%;
margin:0;
padding:0;
background:transparent url('http://www.pixenli.com/images/1436/1436188077068503700.png') top no-repeat;
}
#page-body {
background-color: #e9e9e9;
border-left: 66px solid #303030;
border-bottom: 66px solid #303030;
border-right: 66px solid #303030;
}
/*------------------------------------------------------------------------------------CHATBOX*/
#chatbox .cb-avatar {
height: 62px!important;
width: 68px!important;
overflow: hidden!important;
}
#chatbox .cb-avatar > img {
height: 160px!important;
width: 68px!important;
}
#chatbox_members ul.online-users li a {
text-decoration:none;
font-family: 'trebuchet MS';
font-size: 13px;
}
body.chatbox {
background-color: #e9e9e9;
}
#chatbox_members
{
border: 0px;
border-right: 2px dotted #c2c2c2;
}
#chatbox .chatbox_row_1,#chatbox .chatbox_row_2{
background-color: #e9e9e9;
}
#chatbox p.chatbox_row_1 span.user-msg span.user a {
text-decoration:none;}
#chatbox p.chatbox_row_2 span.user-msg span.user a {
text-decoration:none;}
#chatbox_footer {
border: 3px double #c4c4c4;
}
td.catBottom {
border: 2px dotted #c2c2c2;
}
/*-----------------------------------------------------------------------------------TEST1*/
/* Mise en place d'un forum: taille, qu'il se mette à la suite, etc */
.un_forum {
/* Ne pas toucher */
position: relative;
vetical-align: top;
/* Largeur puis hauteur */
width: 859px;
height: 173px;
/* Marge du haut */
margin-top: 20px;
/* Empêche que ce qui dépasse soit vu: ne pas toucher. */
overflow: hidden;
/* Applique un bord, puis une ombre */
border: 3px solid white;
border-radius: 5px;
box-shadow: 0 1px 4px grey;
}
/* Mise en forme du titre de forum */
.un_titre {
position: relative;
/* Largeur: prend toute la largeur, puis hauteur */
width: auto;
height: 40px;
/* Dot être de la même taille que "height": centre le texte */
line-height: 40px;
padding: 10px;
/* Taille de la police */
font-size: 30px;
overflow: hidden;
}
/* Couleur du titre forum et effet au passage de la souris */
.un_titre a, .un_titre a:link, .un_titre a:active, .un_titre a:visited {
color:black;
text-decoration: none !important;
text-shadow: 1px 1px 5px white;
letter-spacing: 5px;
transition: all ease 1s;
}
/* On met tout le reste en position absolue */
.image_messages, .img_forum, .sous_titre, .dernier_message {
position: absolute;
}
/* On place l'image au-dessus de tout */
.img_forum{
top: 0;
left: 0;
z-index: 1;
}
/*On place out le reste au-dessus */
.un_titre, .image_messages, .sous_titre, .dernier_message, .sous_forums {
z-index: 2;
}
/*-------------------------------------------------------------------------------------INDEX BOX*/
.cate {
width: 100%;
margin-top: 20px;
height: 85px;
background-image: url('http://www.pixenli.com/images/1436/1436126470021342400.jpg');
background-repeat: repeat;
}
.catitre {
margin-top: 30px;
margin-left: 35px;
font-size: 30px;
font-family: 'Arial';
text-transform: Uppercase;
position: absolute;
}
.cattitle a.cattitle {
color: #717171;
}
.forumlink a.forumlink {
position: relative;
top: 5px;
text-transform: uppercase;
font-family: 'Francois One', sans-serif;
font-weight: normal;
font-size: 20px;
color: white;
text-decoration: none;
}
.forumname1 {
position: relative;
top: 10px;
left: 2px;
width: 345px;
height: 44px;
text-align: center;
background-color: #4c4c4c;
}
.nonew {
margin-top: 10px;
}
.description1 {
position: relative;
width: 325px;
height: 118px;
left: 3px;
color: white;
padding: 10px;
background-color: #42bbd0;
}
.description1 > img {
position: absolute; /* pour déplacer image */
left: 354px; /* on place image tout à droite */
top: -49px;
}
.description2 {
position: relative;
top: 5px;
left: 10px;
width: 288px;
height: 102px;
background-color: white;
text-align: justify;
color: #5e5e5e;
font-size: 10px;
padding: 5px;
overflow: auto;
}
.raccourcis1 {
float:left;
margin-top: -94px;
margin-left: 358px;
width: 136px;
height: 94px;
text-align: center;
text-transform: uppercase;
background-color: #4c4c4c;
overflow: auto;
}
.raccourcis1 a.gensmall {
color: white;
display: block;
}
.lastmessage1 {
position: relative;
top: 51px;
left: -5px;
width: 296px;
height: 94px;
background-color: #d04242;
}
.lastmessage2 {
position: relative;
top: 8px;
width: 210px;
height: 48px;
background-color: white;
margin: auto;
text-align: center;
padding: 5px
}
.lastmessage3 {
display: block;
margin-left: 40px;
margin-top: -5px;
color: white;
font-family: "Francois One", sans-serif;
font-size: 20px;
}
/*--------------------------------------------------------------------------------------------------------------- QUI EST EN LIGNE */
.qeel1 {
width: 890px;
height: 365px;
background-image: url('http://www.pixenli.com/images/1422/1422441738058643800.jpg');
}
.retard {
width: 192px;
height: 142px;
text-align: justify;
position: relative;
top: 30px;
left: -336px;
overflow: auto;
}
a:hover{
text-decoration: none !important;
}
a {
text-decoration: none !important;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
.retardgroupes {
position: absolute;
margin-top: 38px;
margin-left: 230px;
width: 371px;
height: 144px;
background-image: url(http://www.pixenli.com/images/1422/1422443912008178900.jpg);
}
.retard2
{
width: 314px;
height: 61px;
position:relative;
font-size: 9px;
right: 269px;
top: 30px;
padding: 5px;
text-align: justify;
}
.stats {
position: relative;
right: 20px;
top: 30px;
}
/*Profil*/
.avatartext {
margin-top: 120px;
padding-left: 6px;
padding-right: 6px;
font-family: 'Calibri';
font-size: 11px;
color: #ffffff;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
}
.profil_sexe img {
position: absolute;
top: 25px;
left: 0px;
}
.RPGSHEET {
position: absolute;
bottom: 10px;
margin-top: -30px;
color: black;
text-shadow : none !important;
}
.description4
{
display: block;
width: 180px;
margin: auto;
min-height: 450px;
overflow: hidden;
transition:0.4s ease;
-o-transition:0.4s ease;
-moz-transition:0.4s ease;
-webkit-transition:0.4s ease;
}
.description4:hover {
display: block;
width: 180px;
margin: auto;
height: 450px;
overflow: hidden;
}
.description4_contenu
{
position: absolute;
width: 180px;
height: 450px;
overflow: 400px;
background-image: url(http://www.pixenli.com/images/1417/1417006155012873000.jpg);
padding:0px;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.description4_contenu:hover
{
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
/*Rangs*/
.ranking{
margin-top: 250px;
margin-left: -46px;
}
/*Profils persos*/
#profil_head
{
background-image: url(lien);
background-repeat: no-repeat;
width: rien;
height: rien;
}
#name
{
font-family: 'Kaushan Script', cursive;
width: 253px;
height: 130px;
font-weight: normal;
position: relative;
background-image: url(http://www.pixenli.com/images/1398/1398959374017911300.png);
background-repeat: no-repeat;
font-size: 20px;
padding-top: 23px;
padding-left: 5px;
text-align: center;
margin-top: -505px;
margin-left: -38px;
text-shadow: 1px 2px 0px rgba(255, 255, 255, 1);
}
#profil_body
{
background-color: white;
background-image: url(http://www.pixenli.com/images/1398/1398824357035111000.jpg);
background-repeat: no-repeat;
width: 190px;
height: 452px;
margin-left: -62px;
margin-top: 30px;
padding-top: 30px;
position: relative;
-webkit-box-shadow: 9px 2px 10px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 9px 2px 10px 2px rgba(0, 0, 0, 0.1);
box-shadow: 9px 2px 10px 2px rgba(0, 0, 0, 0.1);
}
#profil_foot
{
background-image: url(adresse de votre image de fond);
background-repeat: no-repeat;
width: largeur de votre image;
height: hauteur de votre image;
}
/*Bulle Message*/
.bulle{
text-align: justify;
padding : 5px;
}
/*--------------------------------------------------------------------------------------------------------------------------SCROLLBAR PERSO*/
/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
width: 5px; /*largeur de la scrollbar verticale*/
height: 5px; /*hauteur de la scrollbar horizontale*/
background-color: #0cc929}
::-webkit-scrollbar-track {
background-color: #FFFFFF; /*couleur du fond de la scrollbar*/}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
background-color: #696969 /*couleur de l'ascenseur*/;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;}
/* ------------------------------------------- FICHE TECHNIQUE ----------*/
.ftinstall1 {
background-color: #d6d6d6; width: 586px; padding-bottom: 5px;
}
.ftinstall2 {
height: 5px;
}
.zone1 {
background-color: #fc9d27; width: 60px; height: 131px; color: #ffffff; font-size: 35px; font-family: 'Denk One', sans-serif; text-align : center;
}
.zone11 {
height: 53px;
}
.zone2 {
background-color: #fc9d27; width: 504px; height: 18px; color: #ffffff; font-size: 10px; text-transform: uppercase; font-family: 'Press Start 2P', cursive; padding: 2px; padding-left: 3px;
}
.zone2B {
background-color: #1d8fc3; width: 504px; height: 18px; color: #ffffff; font-size: 10px; text-transform: uppercase; font-family: 'Press Start 2P', cursive; padding: 2px; padding-left: 3px;
}
.zone3 {
width: 503px; height: 103px; background-color: #ffffff; color: #a5a5a5; font-family: Times New Roman; font-size: 12px; padding: 3px; overflow: auto;
}
.zone3B {
width: 503px; height: 103px; background-color: #ffffff; color: #1d8fc3; font-family: Times New Roman; font-size: 12px; padding: 3px; overflow: auto;
}
/* ------------------------------------------ FICHE DE PRESENTATION -------*/
.fp1 {
background-color : #c7c7c7; width: 586px;
}
.fp2 {
background-color : #ff8a00; width: 564px; height: 24px; text-align: right; color: #ffccac; font-size: 33px; font-family: 'Dorsa', sans-serif; font-weight: light; padding-right: 20px; padding-top: 7px; letter-spacing: 1px; text-shadow: 1px 1px 10px #000000;
}
.fp3 {
margin-top: 5px;
}
.fp4 {
background-image: url(http://i.imgur.com/IoqCC2i.jpg); width: 260px; height: 111px; text-align: center; color: #ffccac; font-size: 25px; font-family: 'Dorsa', sans-serif; padding-top: 7px; text-shadow: 1px 1px 10px #000000; letter-spacing: 1px;
}
.fp5 {
height: 2px;
}
.fp6 {
background-color: #ededed; width: 294px; height: 154px; margin-left: 3px; margin-bottom: 4px; color: #919191; font-size: 11px; font-family : Times New Roman; padding: 3px; line-height: 15px; overflow: auto;
}
.fp7 {
background-color: #ededed; width: 294px; height: 154px; margin-left: 3px; font-size: 11px; font-family : Times New Roman; padding: 3px; color: #a5a5a5; line-height: 15px; overflow: auto;
}
.fp8 {
background-color : #ff8a00; width: 548px; height: 24px; text-align: center; color: #ffccac; font-size: 33px; font-family: 'Dorsa', sans-serif; font-weight: light; padding-right: 20px; padding-top: 7px; letter-spacing: 1px; text-shadow: 1px 1px 10px #000000;
}
.fp9 {
background-color: #ededed; width: 556px; height: 204px; color: #a5a5a5; text-align: justify; font-size: 11px; line-height: 15px; padding: 6px; overflow: auto;
}
.fp10 {
font-family : Times New Roman;
}
.fp11 {
background-color: #ededed; width: 403px; height: 109px; margin-top: 4px; color: #919191; text-align: justify; font-size: 11px; line-height: 15px; padding: 5px; overflow: auto;
}
.fp12 {
font-family : Times New Roman;
}
.fp13 {
background-color : #ff8a00; width: 152px; height: 129px; margin-left: 6px; margin-top: 3px; margin-bottom: 5px;
}
.fp14 {
text-align: center; color: #ffffff; font-size: 22px; font-family: 'Dorsa', sans-serif; padding-top: 7px; text-shadow: 1px 1px 10px #000000; letter-spacing: 1px;
}
.fp15 {
background-color: #ffffff; width: 140px; height: 30px; margin-top: 3px; text-align: center; color: #ff8a00; font-size: 26px; font-family: 'Dorsa', sans-serif; letter-spacing: 1px; padding: 4px,
}
.fp0 {
height: 6px;
}
/* -----------------------------------------------------------------------------FICHES DE LIEN ALPHA 2 */
td.fl1 {
width: 133px;
height: 1140px;
}
td.fl2 {
width:609;
}
.fl3 {
width: 609px;
height: 304px;
background-image: url(http://i.imgur.com/nCvQF6B.jpg);
overflow: hidden;
transition: 0.3s ease;
}
.fl3:hover
{
width: 609px;
height: 304px;
display: block;
margin: auto;
overflow: hidden;
}
.fl3t {
width: 609px;
height: 304px;
background-image: url(http://i.imgur.com/mzdCl0x.jpg);
opacity: 0;
transition: all 0.3s;
}
.fl3t:hover {
width: 609px;
height: 304px;
opacity: 1;
transition: all 0.3s;
}
.fl3 .fl4 {
width: 164px;
height: 222px;
border: 3px solid white;
margin-top: 31px;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.54);
margin-left: 10px;
position: absolute;
opacity: 1;
transition: all ease 0.3s;
}
.fl3:hover .fl4 {
opacity: 0;
transition: all ease 0.3s;
}
.fl5 {
font-family: 'Times New Roman'; font-size: 15pt; color: white; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75); display: block; margin-top: 279px; margin-left: 175px; float: left; position: absolute; z-index: 4;
}
td.fl6 {
width: 609px;
height: 836px;
background-image: url(http://i.imgur.com/F6bkaf5.jpg);
top: 0px;
}
.fl7 {
width: 550px; height: 440px; margin-left: 28px; margin-top: -60px; padding-left: 5px; overflow: auto; position:relative;
}
.fl7::-webkit-scrollbar {
display: none;
}
.fl8 {
height: 96px; width: 96px; border: 3px solid white; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); float: left; margin-top: -2px
}
.fl9 {
width: 427px; height: 96px; background-color: white; margin-left: 100px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); overflow: hidden; padding-bottom: 3px
}
.fl10 {
width: 427px; height: 20px; background-image: url(http://i.imgur.com/TvWJhd2.png); top ; font-family: 'Aparajita'; font-size: 13pt; text-transform: uppercase; letter-spacing: 1px; color: white; text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
}
.fl10b {
width: 427px; height: 20px; background-image: url(http://i.imgur.com/Jfqoo2g.png); top ; font-family: 'Aparajita'; font-size: 13pt; text-transform: uppercase; letter-spacing: 1px; color: white; text-shadow: 0px 0px 5px rgba(0, 0, 0, 1);
}
.fl11 {
margin-left: 10px
}
.fl12 {
width: 415px; height: 77px; margin: auto; overflow: auto;
}
.fl12::-webkit-scrollbar {
display: none;
}
.fl13 {
font-family: 'Trebuchet MS'; font-size: 8pt; line-height: 1.3em; text-align: justify
}
.fl14 {
width: 293px; height: 203px; bottom; left; margin-top: 1px; margin-left: 7.2px; position:relative; float:left
}
.fl15 {
display: block; margin-left: 30px; margin-top: 5px; font-family: 'Orator Std'; font-size: 21px; text-transform: uppercase;
}
.fl16 {
width: 273px; height: 158px; margin-left: 3px; margin-top: 4px; padding: 5px; overflow: auto
}
.fl16::-webkit-scrollbar {
display: none;
}
.fl17 {
font-family: 'Trebuchet MS'; font-size: 10px; line-height: 1.3em; text-align: justify
}
.fl18 {
width: 293px; height: 203px; margin-top: 1px; margin-left: 7.2px; position:relative; float: left;
}
.fl19 {
display: block; margin-left: 60px; margin-top: 5px; font-family: 'Orator Std'; font-size: 21px; text-transform: uppercase;
}
.fl20 {
width: 273px; height: 158px; margin-left: 3px; margin-top: 4px; padding: 5px; overflow: auto ;
}
.fl20::-webkit-scrollbar {
display: none;
}
.fl21 {
font-family: 'Trebuchet MS'; font-size: 10px; line-height: 1.3em; text-align: justify
}
/* Contenu du tarot des fiches de liens ici */
.tl1 {
margin-left: 5px;
margin-top: 25px;
float: left;
}
.tl2 {
width: 156px;
height: 222px;
background-image: url(http://www.pixenli.com/images/1401/1401905203084451000.png);
margin-left: 11px;
margin-top: 25px;
float: left;
padding-left: 4px;
padding-top: 5px;
padding-right: 4px;
padding-bottom: 3px;
overflow: hidden
}
.tl3 {
display: block;
font-family: 'Charlemagne Std';
color: white;
font-size: 10.5pt;
text-align: center;
position: absolute;
letter-spacing: -1px;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.53);
}
.tl4 {
color: white;
font-size: 13pt;
text-align: center;
position: absolute;
letter-spacing: -1px;
display: block;
margin-top: -10px;
font-weight: bold;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.53);
}
.tl5 {
display: inline-block;
margin-top: 5px;
color: #d8d8d8;
text-align: justify;
font-family: 'Trebuchet MS';
font-size: 9px;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.53);
line-height: 1em;
}
#tl6 {
width: 276px;
height: 195px;
background-image: url(http://www.pixenli.com/images/1401/1401905203084451000.png);
margin-left: 310px;
margin-top: 25px;
position: absolute;
padding-left: 4px;
padding-right: 4px;
padding-top: 13px;
padding-bottom: 22px
}
#tl7 {
border-spacing: 5px
}
td.tl8 {
width: 252px;
height: 24px;
background-image: url(http://www.pixenli.com/images/1401/1401982554048363300.png);
padding-left: 12px;
padding-right: 12px;
padding-top: 5.5px;
padding-bottom: 5.5px;
color: #c1c1c1;
font-family: 'Myriad Pro';
font-size: 15px;
text-transform: uppercase;
text-align: center;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.53);
}
/* SUPPRIMER SCROLLBAR */
.noscroll::-webkit-scrollbar {
display: none;
}
/*---------------------------------------------------------------------------------------------- NOUVELLES FICHES DE PRES*/
.fn1 {
width: 757px;
height: 818px;
background-image: url(http://www.pixenli.com/images/1422/1422559326051550700.jpg);
}
.fn2 {
width: 225px;
height: 172px;
position:relative;
top: 29px;
left: 35px;
}
.fn3 {
width: 218px;
height: 280px;
position: relative;
top: 180px;
left: 1px;
overflow: auto;
font-size: 11px;
line-height: 13px;
padding: 4px;
}
.fn4 {
width: 400px;
height: 130px;
position: relative;
top: -265px;
left: 265px;
padding: 6px;
overflow: auto;
font-size: 11px;
line-height: 12px;
text-align: justify
}
.fn5 {
width: 406px;
height: 130px;
position: relative;
top: -245px;
left: 265px;
padding: 6px;
overflow: auto;
font-size: 11px;
line-height: 12px;
text-align: justify
}
.fn6 {
width: 395px;
height: 343px;
position: relative;
top: -220px;
left: 265px;
padding: 6px;
overflow: auto;
font-size: 11px;
line-height: 12px;
text-align: justify
}
.fn7 {
position: relative;
top: -315px;
left: 0px;
text-align: center;
font-family: 'Impact';
font-size: 24px;
color: white;
}
.fn8 {
position: relative;
top: -300px;
left: 0px;
text-align: center;
font-family: 'Impact';
font-size: 19px;
}
/*------------------------------------------------------------------------------------------------------NOUVELLES FICHES TECHNIQUES*/
#fc1 {
width: 800px;
height: 1000px;
background-image: url(http://www.pixenli.com/images/1420/1420714540056346700.jpg);
margin:auto
}
#fc2 {
width: 755px;
height: 245px;
border: 1px solid #c0c0c0;
position: relative;
top: 19px;
left: 21px;
}
#fc3 {
width: 735px;
height: 675px;
padding: 10px;
position: relative;
top: 253px;
left: 0px;
overflow:auto;
font-family: 'Arial';
font-size: 12px;
line-height: 8,5pt
}
.fc4 {
width: 745px;
height: 18px;
color: white;
font-family: 'Arial';
text-transform: uppercase;
font-size: 10pt;
padding: 5px;
background-color: #818181;
position:relative;
left: -10px
}
/*------------------------------------------------------------------------------------------------------------------------ FICHE DE PRES V3 */
.sc1 {
width: 534px; height: 900px; background-color: #d1d1d1; margin: auto;
}
.sc2 {
position: absolute; width: 500px; min-height: 862px; margin-top: 11px; margin-left: 18px; background-image: url('http://www.pixenli.com/images/1422/1422700712061630400.jpg')
}
.sc3 {
width: 500px; height: 27px; background-color: #cd3131; font-family: 'Trebuchet MS'; font-size: 16px; text-transform: uppercase; color: white; text-align: center;
}
.sc4 {
width: 469px; height: 223px; background-color: white; opacity: 0.6; margin-top: 9px; margin-left: 16px;
}
.sc5 {
width: 150px; height: 190px; font-size: 10px; line-height: 10px; float:left; margin-left: 10px; overflow: auto; padding: 5px; text-transform: lowercase;
}
.sc6 {
width: 150px; height: 190px; font-size: 10px; line-height: 10px; float:left; margin-left: 130px; margin-top: -30px; overflow: auto; padding: 5px; text-transform: lowercase
}
.sc7 {
width: 500px; height: 27px; background-color: #31aacd; font-family: 'Trebuchet MS'; font-size: 16px; text-transform: uppercase; color: white; text-align: center;
}
.sc8 {
width: 469px; height: 223px; background-color: white; opacity: 0.6; margin-top: 9px; margin-left: 16px;
}
.sc9 {
width: 447px; height: 203px; padding: 5px; font-size: 10px; line-height: 10px; overflow: auto;
}
/*----------------------------------------------------------------------------------------------------------------------------- FICHES DE LIENS V2 */
.ss1 {
width: 533px; min-height: 1057px; background-color: #d7d7d7; margin:auto; padding-top: 14px; padding-left: 36px;
}
.ss2 {
width: 500px; min-height: 1012px; background-image: url('http://www.pixenli.com/images/1422/1422783557070456000.jpg');
}
.ss3 {
width: 500px; height: 25px; background-color: #35acde; text-align: center; font-family: 'Trebuchet MS'; color: white; font-size: 21px; padding-top: 10px;
}
.ss4 {
width: 200px; height: 206px; background-color: white; opacity: 0.6; float: left; margin-left: 22px; margin-top: 10px; font-size: 10px; line-height: 10px; padding: 10px; overflow: auto;
}
.ss5 {
width: 200px; height: 206px; background-color: white; opacity: 0.6; float: left; margin-left: 22px; margin-top: -25px; font-size: 10px; line-height: 10px; padding: 10px; overflow: auto; margin-bottom: 30px
}
.ss6 {
width: 500px; height: 25px; background-color: #dc3737; text-align: center; font-family: 'Trebuchet MS'; color: white; font-size: 21px; padding-top: 10px; margin-top: 190px;
}
.ss7 {
width: 500px; height: 25px; background-color: #555555; text-align: center; font-family: 'Trebuchet MS'; color: white; font-size: 21px; padding-top: 10px;
}
.ss8 {
width: 415px; height: 142px; background-color: white; opacity: 0.6; float: left; margin-left: 32px; margin-top: -10px; font-size: 10px; line-height: 10px; padding: 10px; overflow: auto;
}
/*--------------------------------------------------------------------------------------------------------------------------------- LIENS V2 */
.su1 {
width: 500px; min-height: 1012px; margin: auto; border-top: 10px solid #d7d7d7; border-bottom: 10px solid #d7d7d7; border-left: 7px solid #d7d7d7; border-right: 7px solid #d7d7d7; padding-top: 10px; background-image: url('http://www.pixenli.com/images/1422/1422790426030357700.jpg');
}
.su2 {
width: 465px; height: 170px; margin-top: -44px;
}
.su3 {
border: 3px solid white; float: left; margin-left: 20px; margin-top: 30px
}
.su4 {
font-family: 'arial'; color: white; position: relative; left: 10px; top: 13px; letter-spacing: 3px; text-transform: uppercase;
}
.su5 {
font-family: 'georgia'; font-size: 20px; color: white; position: relative; left: 10px; letter-spacing: 1px; top: -6px;
}
.su6 {
width: 300px; height: 90px; position: relative; background-color: white; font-size: 10px; line-height: 10px; padding: 10px; overflow: auto; left: 10px; top: 0px;
}
Page de test : http://testforum.probb.fr/?tt=1
merci d'avance!
Dernière édition par Pito le Mar 7 Juil 2015 - 13:16, édité 1 fois
![[CATE] Image de catégorie en background 1435969469-signd](https://2img.net/image.noelshack.com/fichiers/2015/27/1435969469-signd.png)
![[CATE] Image de catégorie en background 150804081846482087](https://nsa38.casimages.com/img/2015/08/04/150804081846482087.jpg)