Aide pour les catégories

Date d'inscription: 14/10/2011

Bonjour, =)

Adresse de votre forum : http://pokland-isshu.forumgratuit.org/forum
Justification de la demande d'aide spécifique : Je n'y connais rien en codage T_T
Aide spécifique choisie : Personnalisation des catégories
Voici un petit screen de mon fofo :
http://i48.servimg.com/u/f48/15/68/87/80/11110.jpg

Et ce que je voudrais obtenir (un peu dans ce genre là quoi :/) :
http://i48.servimg.com/u/f48/15/68/87/80/22210.png

J'ajoute quand quand on passe la souris sur le "cadre" ce dernier s'eclaircit
J'aimerai réaliser un truc dans le genre, mais je suis vraiment nuub en matière de CSS et Html :/

Si ils vous faut mon template ou CSS, dites le moi

Merci énormément, d'avance Very Happy

Hello

MErci de lire les [règles de section].

Une fois respectée, quelqu'un viendra t'aider.

Bon dimanche.

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 14/10/2011

Euh ... voilà c'est édité :0

Mince... ce message n'était pas pour une en-tête à la base ?

Bref.

Tu pourrais nous donner ton template et CSS actuel + les infos de mises en page que tu aimerais ?

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 14/10/2011

Non j'avais pas vu les autres post, sauf après avoir posté, et vu que je peux pas déplacer, ben ...
Enfin bref, merci déjà de bien vouloir m'aider Very Happy

Voici mon CSS :

Spoiler:

Code:

body.chatbox {
background-color: #4F405C;
}

table.tableau_profil{
width:200px;
margin:auto;
border:0;
}

table.tableau_profil td.haut_tab{
width:226px;
height:35px;
background-image:url('http://i48.servimg.com/u/f48/15/68/87/80/1a11.png');
background-repeat:no-repeat;
}

table.tableau_profil td.milieu_tab{
width:226px;
background-image:url('http://i48.servimg.com/u/f48/15/68/87/80/2a11.png');
background-repeat:repeat-y;
padding-left:14px;
padding-right:14px;
text-align:center;
}

table.tableau_profil td.bas_tab{
width:226px;
height:34px;
background-image:url('http://i48.servimg.com/u/f48/15/68/87/80/3a10.png');
background-repeat:no-repeat;
}

table.tableau_profil td.milieu_tab span.pseudo_posteur{
font-family:Comic Sans Ms;
font-size:15pt;
border-bottom:purple 2px dashed;
border-top:purple 1px dotted;
color: purple;
}

table.tableau_profil td.milieu_tab span.rang_posteur{
font-family:Comic Sans Ms;
font-size:8pt;
color:white;
font-style:italic;
}

table.tableau_profil td.milieu_tab div.infos_posteur{
width:170px;
margin:auto;
padding:1px;
text-align:left;
font-family:Comic Sans Ms;
font-size:10pt;
color:white;
text-shadow:black 2px 2px 2px 2px
background-color:#c4b6a8;
border:1px solid white;
opacity:0.5; /* Transparence : 0 = transparent // 1 = opaque */
-moz-opacity : 0.5; /* Transparence pour Firefox */
-ms-filter: "alpha(opacity=50)"; /* Transparence pour IE 8 */
filter : alpha(opacity=50); /* Transparence pour les versions IE antérieure à la 8 */
}

//-------------------Profil-------------//

____________
____________
____________

body{cursor:url("http://fc08.deviantart.net/fs70/f/2011/166/9/4/oshawot_cursor_by_ronaldthefox-d3j152l.png"),default;}

a {
cursor: url('http://fc06.deviantart.net/fs70/f/2010/194/3/7/Pokemon_DS_Cursor_by_thefoxyaidan.png'), auto;
}

img {
cursor:url('http://fc00.deviantart.net/fs70/i/2011/102/7/b/cursor_scrafty_by_megapokemon3-d3duu7h.png'), auto;
}

.colorpicker {
width: 356px;
height: 176px;
overflow: hidden;
position: absolute;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_background.png);
font-family: Arial, Helvetica, sans-serif;
display: none;
}
.colorpicker_color {
width: 150px;
height: 150px;
left: 14px;
top: 13px;
position: absolute;
background: #f00;
overflow: hidden;
cursor: crosshair;
}
.colorpicker_color div {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_overlay.png);
}
.colorpicker_color div div {
position: absolute;
top: 0;
left: 0;
width: 11px;
height: 11px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_select.gif);
margin: -5px 0 0 -5px;
}
.colorpicker_hue {
position: absolute;
top: 13px;
left: 171px;
width: 35px;
height: 150px;
cursor: n-resize;
}
.colorpicker_hue div {
position: absolute;
width: 35px;
height: 9px;
overflow: hidden;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_indic.gif) left top;
margin: -4px 0 0 0;
left: 0px;
}
.colorpicker_new_color {
position: absolute;
width: 60px;
height: 30px;
left: 213px;
top: 13px;
background: #f00;
}
.colorpicker_current_color {
position: absolute;
width: 60px;
height: 30px;
left: 283px;
top: 13px;
background: #f00;
}
.colorpicker input {
background-color: transparent;
border: 1px solid transparent;
position: absolute;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #898989;
top: 4px;
right: 11px;
text-align: right;
margin: 0;
padding: 0;
height: 11px;
}
.colorpicker_hex {
position: absolute;
width: 72px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_hex.png) top;
left: 212px;
top: 142px;
}
.colorpicker_hex input {
right: 6px;
}
.colorpicker_field {
height: 22px;
width: 62px;
background-position: top;
position: absolute;
}
.colorpicker_field span {
position: absolute;
width: 12px;
height: 22px;
overflow: hidden;
top: 0;
right: 0;
cursor: n-resize;
}
.colorpicker_rgb_r {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_r.png);
top: 52px;
left: 212px;
}
.colorpicker_rgb_g {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_g.png);
top: 82px;
left: 212px;
}
.colorpicker_rgb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_rgb_b.png);
top: 112px;
left: 212px;
}
.colorpicker_hsb_h {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_h.png);
top: 52px;
left: 282px;
}
.colorpicker_hsb_s {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_s.png);
top: 82px;
left: 282px;
}
.colorpicker_hsb_b {
background-image: url(http://tinyurl.com/colorpickerimg/colorpicker_hsb_b.png);
top: 112px;
left: 282px;
}
.colorpicker_submit {
position: absolute;
width: 22px;
height: 22px;
background: url(http://tinyurl.com/colorpickerimg/colorpicker_submit.png) top;
left: 322px;
top: 142px;
overflow: hidden;
}
.colorpicker_focus {
background-position: center;
}
.colorpicker_hex.colorpicker_focus {
background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
background-position: bottom;
}
.colorpicker_slider {
background-position: bottom;
}

#chatbox_header .cattitle strong { display: none; }
#chatbox_header .cattitle:before { content: "Le Bar de Pokland !!";
margin-left: 20px;
}
#chatbox_header .cattitle strong { visibility: hidden; }

:link,a:active,a:visited { color : #4d6b78; }a:hover{ text-decoration: none !important;}

table.case_stats td.dernier_msg p{
color:#e26e26;
width:140px; /*la largeur de mon bloc moins la largeur de ma pate */
padding:0;
margin:0;
margin-left:10px; /* Je décalle un peu par rapport aux bords gauche pour éviter que mon texte ne soit en dehors de mon cadre */
font-size:9px;
text-align:center;
}

table.case_stats td.dernier_msg p a{
text-decoration:none;
color:blue;
}

table.case_stats td.dernier_msg p a:hover{
border-bottom:green 1px dashed;
color:purple;
}

table.case_stats td.dernier_msg{
background-image:url('http://i48.servimg.com/u/f48/15/68/87/80/a12.png');
background-position: center top;
background-repeat:no-repeat;
padding-left:20px;
padding-right:20px; /* Je déclasse du bord droit de 60px à gauche de ma pate */
padding-top:10px;
height:75px; /* mon image fait 85px de haut, mais comme j'ajoute 10px de remplissage, j'impose à ma case une hauteur = hauteur de mon image - padding top */
}

table.case_stats td.stats_forum{
background-image:url('http://i48.servimg.com/u/f48/15/68/87/80/b13.png');
background-position: center bottom;
background-repeat:no-repeat;
padding-left:4px;
padding-right:4px;
height:45px;
}
_________________________
body {
cursor: url('http://fc08.deviantart.net/fs70/f/2011/166/9/4/oshawot_cursor_by_ronaldthefox-d3j152l.png'),auto;
}
.forumlink
{color: red;
text-shadow: white 2px 2px 2px;
font-style:italic;
font-size: 14px;
text-align: center;}
a.forumlink:hover
{text-shadow: #000000 1px 1px 1px;
font-size: 18px;
font-style: normal;
color: orange;
text-align: left;}
{ text-decoration: purple 1px dashed; }

a { text-decoration: none; }
a {
text-shadow: 1px 1px 1px #FFFFFF;
}
strong {
color:# ; /*couleur du texte*/
font-variant: small-caps; /*variante du texte (ici petites majuscules)*/
font-family:Century Gothic ; /*police du texte*/
letter-spacing:1px; /*espace entre les lettres*/
}

.titrecategorie hover{
border-bottom: purple 1px dashed;
border-bottom-width: 2px;
border-bottom-style: dashed;
border-bottom-color: #9C2E2E;
border-right: 6px solid #9C2E2E;
border-right-width: 6px;
border-right-style: solid;
border-right-color: #9C2E2E;
opacity: 0.6;
border-top-left-radius: 100px 50px;
border-top-right-radius: 100px 50px;
border-bottom-right-radius: 50px 100px;
font-family: prestige;
letter-spacing: -3px;
font-weight: bold;
font-size: 22px;
text-align: center;

background: url(http://in-nomine-mens.bbactif.com/146-ltr.css) 50% 50%;
}

Quant à ce que je voudrais obtenir, c'est ici http://in-nomine-mens.bbactif.com/

Le cadre avec une forme originale, qui contient les infos sur le sous-forum, avec un plus petit cadre à côté avec les liens des sous forums inférieurs.
Pour les couleurs ça serait dans des tons violets.

Ok d'acc

Donc On va commencer par la structure, puis on verra la mise en page ensuite Smile

Pour commencer, je te propose de lire ce tutoriel [clic] Et de me dire si tu as des questions.

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 14/10/2011

Merci beaucoup, j'ai fait le tuto et j'ai réussi à commencer une bonne partie, mais je m'arrête là car j'ai déjà quelques problèmes >o<

http://fofotestcgkshtplpf.forumgratuit.org

Déjà, l'encadré pour les liens des sous-forum, je voudrais qu'a chaque sous forum, il redescende à la ligne, et pas tous collé ...
Ensuite, j'aimerai décaller le cadre des description pour qu'on voit car là le début est caché par le cadre des liens du sous-forum 8D
Et, dernière chose, aucune des deux cadres n'est dans le tableau, donc si je met une image dans les descriptions, ben ça sors du tableau du forum 1 par exemple >o<

Alors voilà mon template Index_Box:

Spoiler:

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
   <td valign="bottom">
      
      <span class="gensmall">{LAST_VISIT_DATE}<br />
      {CURRENT_TIME}<br />
      </span>
      
      <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
   </td>
   <td class="gensmall" align="right" valign="bottom">
      
      <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
      <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
      
      <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
   </td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
   <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
   <th nowrap="nowrap" width="50">{L_TOPICS}</th>
   <th nowrap="nowrap" width="50">{L_POSTS}</th>
   <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
</tr>


<tr>
   
   <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <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>


<tr>
   
   <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" 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}>

<div class="description">{catrow.forumrow.FORUM_DESC}</div>
<span class="gensmall">
<div class="liens" width="150px" > {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>


{catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}

</span>
</td>
   <td class="row3" align="center" valign="middle" height="50">
      <span class="gensmall">{catrow.forumrow.TOPICS}</span>
   </td>
   <td class="row2" align="center" valign="middle" height="50">
      <span class="gensmall">{catrow.forumrow.POSTS}</span>
   </td>
   <td class="row3 over" align="center" valign="middle" height="50">
      <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
   </td>
</tr>


<tr>
   
   <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
   
   <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" />

Et mon CSS :

Spoiler:

Code:

a.forumlink{
display:block;
font-size:14px; /* la taille de la police */
padding:2px; /* Pour éviter que le texte ne soit collé aux bords de la case */
text-align:center;
font-variant:small-caps; /* Les petites capitales */
color:#6e5831 !important; /* On force l'application de cette propriété grâce au !important */
border-bottom:4px double #6a3e1a;
font-weight:normal; /* Le texte non boldé */
margin-bottom:0; /* Pour qu'il n'y ait pas trop d'espace entre le titre et ce qu'il y a en dessous */
}

a.forumlink:hover{
font-variant:small-caps;
color:#6e5831 !important;
border-bottom:4px double #6a3e1a;
font-weight:bold; /* Texte en gras */
display:block;
}

div.stats_cate{ /* La div ayant pour class 'stats_cate' */
font-size:12px;
text-align:right;
border-bottom:#6a3e1a 1px solid;
border-right:#6a3e1a 3px solid;
font-style:italic; /* On met le texte en italic */
color:#6a3e1a;
padding-right:4px; /* On met un peu de remplissage pour éviter que notre bloc soit collé au bord droit de la case */
margin-bottom:4px;
margin-top:-12px; /* On évite de mettre un trop gros espace entre le titre et notre bloc de stats' */
width:220px; /* On impose une largeur pour ne pas que la bordure en bas soit sur toute la largeur de la case */
margin-left:385px; /* On place le bloc à droite en le décallant par rapport au bord gauche de la case */
}

div.description {
text-align: right;
margin-top: 13px;
border-top-right-radius: 100px 50px;
border-top-left-radius: 100px 50px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;
-webkit-box-shadow: rgb(0, 0, 0) 0px 0px 10px;
margin-right: 60px;
position:absolute;
background: #0B0B0B;
margin-left: -50px;
border: 5px solid #0B0B0B;
color: purple;
}

div.liens {width: 100px;
text-align: center;
margin-top: 15px;
border-top-right-radius: 100px 50px;
border-top-left-radius: 100px 50px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;
-webkit-box-shadow: rgb(0, 0, 0) 0px 0px 10px;
margin-right: 10px;
position: absolute;
background: #0B0B0B;
margin-left: -50px;
border: 5px solid #0B0B0B;
color: purple;
}

div.liens:hover {
width: 100px;
text-align: center;
margin-top: 15px;
background: #0B0B0B;
border-top-right-radius: 100px 50px;
border-top-left-radius: 100px 50px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;
-webkit-box-shadow: rgb(0, 0, 0) 0px 0px 10px;
margin-right: 10px;
}

Comment faire? :0

Bon c'est pas mal Smile

Pour que les liens retournent à la ligne, on va essayer d'ajouter ça dans le CSS

Code:

div.liens a{
display:block;
}

En gros, on dit au CSS : "tu considères chaque lien de sous-forum comme un bloc. Donc, j'aimerai que tu places ces liens les uns en dessous des autres"

Citation:

Ensuite, j'aimerai décaller le cadre des description pour qu'on voit car là le début est caché par le cadre des liens du sous-forum 8D

Notre cadre contenant les descriptions s'appelle "description" et correspond à cette partie du CSS

Code:

div.description {
text-align: right;
margin-top: 13px;
border-top-right-radius: 100px 50px;
border-top-left-radius: 100px 50px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;
-webkit-box-shadow: rgb(0, 0, 0) 0px 0px 10px;
margin-right: 60px;
position:absolute;
background: #0B0B0B;
margin-left: -50px;
border: 5px solid #0B0B0B;
color: purple;
}

Si on veut le décaller plus vers la droite, il faut modifier ça :

Code:

margin-left: -50px;

On fait déjà ça ?

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 14/10/2011

Merci, ça, c'est réglé.
Parcontre c'est toujours hors du tableau du forum 1 :/
Pour encore mieux te montrer, j'ai mis une image en description :

http://fofotestcgkshtplpf.forumgratuit.org/

Comment tout faire rentrer dans le tableau correspondant, et comment faire pour que les bords de l'image ne dépassent pas des bords du cadre de description ? Surprised

Coucou

On va commencer par placer ça comme il faut dans le forum ^^ Pour cela, on va agir sur cette partie du css

Code:

div.description {
text-align: right;
margin-top: 13px;
border-top-right-radius: 100px 50px;
border-top-left-radius: 100px 50px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;
-webkit-box-shadow: rgb(0, 0, 0) 0px 0px 10px;
margin-right: 60px;
position:absolute;
background: blue;
margin-left: 50px;
border: 5px solid #0B0B0B;
color: purple;
}

div.liens {width: 100px;
text-align: center;
margin-top: 20px;
border-top-right-radius: 100px 50px;
border-top-left-radius: 100px 50px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;
-webkit-box-shadow: rgb(0, 0, 0) 0px 0px 10px;
margin-right: 10px;
position: absolute;
background: #0B0B0B;
margin-left: -50px;
border: 5px solid #0B0B0B;
color: purple;
}

en modifiant les margin-left. Par exemple :

Code:

div.description {
text-align: right;
margin-top: 13px;
border-top-right-radius: 100px 50px;
border-top-left-radius: 100px 50px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;
-webkit-box-shadow: rgb(0, 0, 0) 0px 0px 10px;
margin-right: 60px;
position:absolute;
background: blue;
margin-left: 120px;
border: 5px solid #0B0B0B;
color: purple;
}

div.liens {width: 100px;
text-align: center;
margin-top: 20px;
border-top-right-radius: 100px 50px;
border-top-left-radius: 100px 50px;
border-bottom-right-radius: 50px 100px;
border-bottom-left-radius: 50px 100px;
-webkit-box-shadow: rgb(0, 0, 0) 0px 0px 10px;
margin-right: 10px;
position: absolute;
background: #0B0B0B;
margin-left: 20px;
border: 5px solid #0B0B0B;
color: purple;
}

Et pour que l'image ne dépasse pas du cadre, on va ajouter du remplissage dans la div "description"

Code:

padding:10px;

_________________

SoP Story :: 2ème votes éliminatoires