Bonjour/ Bonsoir.
Voici déjà mon code css actuel:
Et mon templaye index box:
Merci d'avance.
Commande
Elément à coder : Les catégories
Adresse du forum : http://invade-gaming-esport.forumactif.org/
Description du résultat voulu : Je voudrais quelque chose d'harmonieux pour les catégories, je ne sais pas trop comment faire pour rendre le tout jolie, avec le nombre de sujets et message, le dernier message, les sous forums et la description comme je l'ai déjà installée.
Couleurs ou tons : Même ton que sur le forum.
Images : //
Autres précisions : Je ne veux juste pas de catégorie en deux colonnes, je veux que ca reste l'une en dessous de l'autre.
Elément à coder : Les catégories
Adresse du forum : http://invade-gaming-esport.forumactif.org/
Description du résultat voulu : Je voudrais quelque chose d'harmonieux pour les catégories, je ne sais pas trop comment faire pour rendre le tout jolie, avec le nombre de sujets et message, le dernier message, les sous forums et la description comme je l'ai déjà installée.
Couleurs ou tons : Même ton que sur le forum.
Images : //
Autres précisions : Je ne veux juste pas de catégorie en deux colonnes, je veux que ca reste l'une en dessous de l'autre.
Voici déjà mon code css actuel:
- Spoiler:
- Code:
body {
background: url('http://img4.hostingpics.net/pics/361067test.png') no-repeat top center, url('http://img4.hostingpics.net/pics/543494repete.png') repeat top center;
}
a { text-decoration: none; }
#accueil
{
width: 900px;
height: 400px;
overflow: hidden;
background: url(http://imagesup.org/images11/1369494193-news.png) center no-repeat;
border: 3px solid #272727;
}
#page1
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #555555;
}
#page2
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #777777;
}
#page3
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #9b9b9b;
}
#page4
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #bababa;
}
#page5
{
width: 40px;
height: 400px;
float: left;
overflow: hidden;
background-color: #dcdcdc;
}
.current
{
width: 82% !important;
height: 400px !important;
}
.contenu_page
{
width: 100%;
height: 400px;
}
.page_titre
{
display: inline-block;
height: 40px;
width: 400px;
margin-left: -180px;
color: #ffffff;
text-align: center;
font-size: 24px;
font-family: arial black;
letter-spacing: 2px;
text-shadow: 1px 1px 0px #5f5f5f;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.page_titre:hover
{
cursor: pointer;
}
.contenu
{
width: 670px;
height: 380px;
margin-left: -180px;
overflow: none;
background-color: white;
overflow: hidden;
padding: 6px;
}
.credit
{
display: block;
text-align: right;
margin-right: 20px;
}
.credit a
{
font-size: 10px;
text-decoration: none !important;
}
a.mainmenu{
text-decoration: none;
color : #82b1c5;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
border: #071115;
padding-right: 3px;
border-right-style: solid;
border-right-width: 12px;
font-family: Courier New;
background-color: #14242b;
-moz-border-radius: 10px;
}
a.mainmenu:hover{
text-decoration: none;
color : #1d2b31;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
cursor: crosshair;
border: #e0e0e0;
border-right-style: solid;
border-right-width: 12px;
padding-right: 3px;
font-family: Courier New;
background-color: #759bac;
}
/*--- Cette partie correspond à la description du forum ---*/
.catetitre
{
margin-left: 40px;
color: #d7cfd0;
font-family: verdana;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #205268;
}
.forum-description {
margin: auto;
padding: 10px;
color: #4c7392;
width: 80%;
background: #c9e2f4;
border: 3px solid #ffffff;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
font-size: 12px;
}
.lien {
border: 1px solid #2B889F;
display: block;
padding-left: 15px;
background-color: #000000;
font-variant: small-caps;
font-size: 12px;
-moz-border-radius: 5px 5px 5px 5px;
}
.lien:hover {
border: 1px solid #2B889F;
display: block;
padding-left: 14px;
background-color: #454c4f;
font-variant: small-caps;
font-size: 12px;
-moz-border-radius: 5px 5px 5px 5px;
}
a:hover{text-decoration: none !important;}
a {text-decoration: none !important;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
/* MISE EN FORME DES CATEGORIES ET FORUMS */
.description
{
display: block;
width: 400px;
margin: auto;
height: 100px;
overflow: hidden;
border: 2px solid #9c9c9c;
box-shadow: 1px 1px 1px #191817;
-moz-box-shadow: 1px 1px 1px #191817;
-htm-box-shadow: 1px 1px 1px #191817;
-webkit-box-shadow: 1px 1px 1px #191817;
-o-box-shadow: 1px 1px 1px #191817;
}
.description_contenu
{
position: absolute;
display: block;
width: 391px;
height: 91px;
overflow: auto;
background-color: #191817;
font-size: 10px;
color: #9c9c9c;
text-align: justify;
padding: 5px;
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;
}
.description_contenu:hover
{
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
filter: alpha(opacity=80);
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;
}
.legende
{
}
/*|__________ DEBUT DES MODIFICATIONS DE L'AFFICHAGE DES CATEGORIES __________*/
table.haut_cate{
width:858px;
height:78px;
background-image:url('http://imagesup.org/images11/1370033617-haut.png');
background-repeat:no-repeat;
margin:auto;
}
table.haut_cate h2{
width:600px;
margin-left:95px;
margin-right:auto;
font-variant:small-caps;
font-size:14px;
color:#fff;
text-shadow: 1px 1px 2px #8f8175;
}
div.milieu_cate{
background-image:url('http://imagesup.org/images11/1370033628-corps.png');
background-repeat:repeat-y;
width:858px;
margin:auto;
}
table.forumline{
background-color:transparent !important;
border:0!important;
}
table.forumline td.index_cate{
background-color:transparent !important;
border-bottom:1px solid grey;
}
table.bas_cate{
width:858px;
height:83px;
background-image:url('http://imagesup.org/images11/1370035777-bas.png');
background-repeat:no-repeat;
margin:auto;
}
/*|__________ FIN DES MODIFICATIONS DE L'AFFICHAGE DES CATEGORIES __________*/
/*Liens catégories*/
.postbody, td.row1 span.gensmall {
text-align: justify !important;
display: block;
margin-left:10px;
margin-right:10px;
}
a.forumlink:link, a.forumlink:visited {
font-family: Bodoni MT;
text-transform : uppercase;
text-align: center;
font-size: 16px;
border-bottom: 10px solid #224859;
color: #224859;
letter-spacing: 1px;
display: block;
-moz-border-radius:10px;
}
a {
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
}
td.row1 span.gensmall{
display: inline-block !important;
}
/***affichage des sujets et messages***/
.catéhunter { => by .Hunter
background-color: #5f818f /* couleur du fond */
border-collapse: separate; /* bordure du tableau */
border-left: 4px solid #1f3e4b; /* bordure à gauche */
border-right: 4px solid #1f3e4b; /* bordure à droite */
border-radius: 30px; /* le rayon */
font-family: Verdana;
font-size: 15px;
line-height: 9px;
text-align: center;
margin-left: 40px;
}
/*affichage derniers messages*/
.dernsujethunter { => by .Hunter
padding: 5px; /*espace entre le texte et la bordure*/
margin: 5px; /*espace entre le bord et la bordure*/
border: 5px #1f3e4b; /* bordure */
-moz-border-radius-topleft: 5px; /*arrondir l'angle gauche du haut*/
-moz-border-radius-bottomright: 5px; /*arrondir l'angle droit du bas*/
text-align: center;
}
Et mon templaye index box:
- Spoiler:
- 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="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table>
<div class="milieu_cate">
<table class="forumline" width="800px" align="center" border="0" cellspacing="1" cellpadding="0">
<!-- 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">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>
<!-- END cathead -->
<!-- BEGIN forumrow -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
<!-- END inc -->
<td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td>
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<h{catrow.forumrow.LEVEL} class="hierarchy">
<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
</span>
</h{catrow.forumrow.LEVEL}>
<table>
<tr>
<td><span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<span class="gensmall">
<!-- BEGIN switch_moderators_links -->
{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
<!-- END switch_moderators_links -->
{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
</td>
<td>
<div class="catéhunter">
<div class="dernsujethunter"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</table>
</div>
<table class="bas_cate"><tr valign="center"><td> </td></tr></table>
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Merci d'avance.
