forme catégorie

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu forme catégorie

Message par Igorette. le Jeu 5 Juil 2012 - 17:27

Bonjour,

Ne sachant pas comment expliquer voici un schéma. La partie bleue sera une image. Les couleurs ne sont pas encore définies. + j'ai oublié de noter dans la partie bleue au dessus de ''dernier message'' ce serait 12 messages dans 2 sujets par exemple.


Merci d'avance

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par Dolip le Jeu 5 Juil 2012 - 21:12

Huuum a mon avis tu vas devoir bourrer ton forum de CSS et de modifications de templates.
Vous en avez des choses difficiles MDR
Déjà pour 'Pseudo' Ca sera "{USERN.AME}" sans le "."


Dernière édition par Dolip le Jeu 5 Juil 2012 - 21:38, édité 3 fois (Raison : Oubli)

Dolip
***

Masculin
Messages : 187
Inscrit(e) le : 01/06/2012

http://hobbagame.forumgratuit.org
Dolip a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par Igorette. le Jeu 5 Juil 2012 - 23:04

Oui tout doit être fait au niveau des templates + du css pour la personnalisation mais je ne sais pas exactement ce à quoi il faut toucher. :/

Je ne veux pas d'un code tout fait mais d'une aide, d'explications étapes par étapes. ^^

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par benneke le Ven 6 Juil 2012 - 9:36

Bonjour,

Effectivement, ce ne sera pas simple Wink

A savoir (je ne connais pas ton niveau en HTML/CSS), que tout élément est un carré, que tu vas devoir positionner correctement et/ou déplacer en CSS et/ou JavaScript.
Je ne connais pas la structure de punBB, mais pour pouvoir t'aider mieux, il faudrait mettre du contenu sur ton forum pour pouvoir étudier le code et éventuellement faire des essais.

Bonne journée,
Ben

benneke
***

Messages : 150
Inscrit(e) le : 07/04/2012

http://www.guilde-aof.com
benneke a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par Igorette. le Ven 6 Juil 2012 - 12:46

Bonjour,

Merci pour votre réponse. Pour mon niveau en CSS je me débrouille plutôt pas mal et je commence à m'habituer au reste.

J'ai un forum test qui contient déjà deux catégories pour pouvoir tester les codes & aussi parler avec l'équipe si ce que vous demandiez.

Le schéma que j'ai fait n'est qu'un exemple & cela ne gêne pas s'il n'est pas suivi à la lettre, je ne souhaite simplement qu'une forme de ce genre. ^^

Bonne journée, si vous avez des questions n'hésitez pas.

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par Invité le Mar 10 Juil 2012 - 12:18

Bonjour,

J'ai essayé quelque chose, mais je connais mal la version PunBB, donc il est possible que j'ai supprimé des éléments qu'il ne faut pas enlever Razz . De plus ce n'est pas tout à fait identique à votre schéma Sad.

J'ai modifié le template Index_box, en ajoutant des div et des tableaux:
Remplacez:
Code:
<table cellspacing="0" class="table">
            <thead>
               <tr>
                  <th class="tcl">{L_FORUM}</th>
                  <th class="tc2">{L_TOPICS}</th>
                  <th class="tc3">{L_POSTS}</th>
                  <th class="tcr">{L_LASTPOST}</th>
               </tr>
            </thead>
par:
Code:
<table cellspacing="0" class="table">
            <thead>
               <tr>
                  <th class="tcl">{L_FORUM}</th>
               </tr>
            </thead>

Et remplacez:
Code:
<!-- BEGIN forumrow -->
               <tr>
                  <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
                     <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
                        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                     </span>
                     <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                     <br />
                     {catrow.forumrow.FORUM_DESC}
                     <!-- BEGIN switch_moderators_links -->
                     <br />
                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                     <!-- END switch_moderators_links -->
                     {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                     <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                  </td>
                  <td class="tc2">{catrow.forumrow.TOPICS}</td>
                  <td class="tc3">{catrow.forumrow.POSTS}</td>
                  <td class="tcr">
                     <span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </td>
               </tr>
   <!-- END forumrow -->

par :
Code:
<!-- BEGIN forumrow -->
               <tr>
                  <td>
                     <div class="titrefora"><h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                                                  </div><br />
                                                  <div class="stats">{catrow.forumrow.POSTS} messages{catrow.forumrow.TOPICS} sujets.</div>
                                                 
                                                    <table class="formeindex"><tr><td width="120px;">
                     <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
                                                      </td>
                                                      <td width="600px">{catrow.forumrow.FORUM_DESC}
                     <!-- BEGIN switch_moderators_links -->
                     <br />
                     {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                     <!-- END switch_moderators_links -->
                     </td>
                                                      <td width="200px;">
                     <div class="lastm"><span>
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                                                          </span></div>
                                                      </td></tr> </table>
                                                  <div class="sousfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                                    <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
                                                 
                                          </td>
               </tr>
   <!-- END forumrow -->
J'ai ensuite ajouté au CSS:
Code:
.statists{
text-align: center;
border: 1px solid lightblue;
 width: 150px;
padding: 5px;
background: lightblue;
position: relative;
left:60%;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
box-shadow: 0px -1px 0px 1px black;}

.titrefora{
text-align: center;
margin-bottom: -30px;
font-size: 16px;}

.lastm{
background: grey;
border: 1px solid black;
border-radius: 11px;
padding: 5px;
margin: 5px;}

.formeindex{
border: 0px solid lightblue;
border-radius: 85px;
border-left: 2px solid black;
border-right: 2px solid black;
background: lightblue;
margin: auto;
box-shadow: 1px -1px 1px 2px black;}

.pun table.table td{
background: none;}

.sousfo{
text-align: center;
border: 1px solid lightblue;
width: 500px;
padding: 5px;
background: lightblue;
position: relative;
left:30%;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
box-shadow: 0px 1px 0px 1px black;}

.page-title{
text-align: center;}

thead{
  display: none;}

.main-head{
width: 200px;
position: relative;
left: 82%;}

.formeindex td{text-align: center}
Et j'ai obtenu ce résultat:
Spoiler:
C'est une piste de départ qu'il faut modifier pour avoir un meilleur résultat Wink.

Bien sincèrement.


Dernière édition par Azami le Mer 11 Juil 2012 - 13:55, édité 1 fois (Raison : amélioration du CSS)

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par Igorette. le Sam 14 Juil 2012 - 17:56

    Bonjour,

    Excusez - moi d'avoir pris autant de temps à répondre, j'étais en vacances. Je vais de ce pas tester et dès que cela sera fait j'éditerai pour vous donner mes impressions Smile

    J'adore l'exemple que vous m'avez donné, je ne pense pas être déçue!

    Encore merci. Razz

EDIT : J'ai quelques problèmes.
- Je vous ai fait une capture avec une légende couleur pour chaque problème pour que vous vous y retrouviez ^^ (et moi aussi hihi)


- Pour le titre des catégories, je n'obtiens pas le carré en bleu foncé comme dans votre exemple à droite. Les catégories restent au centre et sont un ''simple texte''.
- Pour la barre du bas, elle est décalée et dépasse du reste du cadre.
- Pour le '2 messages2 sujets' le '2sujets' est collé à '2messages' serait t'il possible d'avoir un '-' entre les deux ? + Il n'y a pas de barre en haut des catégories pour que ce texte '2 messages2sujets' s'y glisse, cela s'affiche tout à gauche de la catégorie, dans le ''vide''.
- Le texte des catégories est trop gros, mais ça je pense savoir le gérer via le CSS.
- J'avais des images semi-transparentes comme fond de catégorie serait - il possible de garder ces images en tant que fond ? (Voilà le code que j'utilise pour mettre les images semi-transparentes en tant que fond via le CSS malheureusement les modifications ''annulent'' ce code) :
Code:
td.row1{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
}
td.row2{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
}
td.row3{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
}
- Et je tenais juste une fois encore à vous remercier. I love you Cela se rapproche beaucoup de ce que j'attendais. :p J'ai juste rencontré un petit problème, ce bout de code que je devais remplacer n'est pas dans mon index_box, j'ai trouvé un bout de code semblable pour pouvoir le remplacer : peut-être que cela a un incident sur le reste ? Voilà le code que je n'ai pas trouvé :
Code:
<table cellspacing="0" class="table">
            <thead>
              <tr>
                  <th class="tcl">{L_FORUM}</th>
                  <th class="tc2">{L_TOPICS}</th>
                  <th class="tc3">{L_POSTS}</th>
                  <th class="tcr">{L_LASTPOST}</th>
              </tr>
            </thead>

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par Invité le Sam 14 Juil 2012 - 19:38

Bonsoir,

Il se peut fort bien que ce que contient votre CSS fasse conflit avec ce que j'ai ajouté Razz. Pourriez-vous me donner tout ce que contient votre feuille de style?

Autre chose à laquelle , je n'ai pas pensé, c'est la largeur de votre forum Razz. Quelle est-elle?

Dernière question, le forum concerné est bien en version PunBB comme l'indique votre profil? parce que le code que vous me donnez pour les images de fond correspond à une version phpBB2.



Bien sincèrement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par Igorette. le Dim 15 Juil 2012 - 18:56

Bonjour,

Merci pour votre réponse, encore une fois Smile

Voici tout mon CSS :
Code:
#fond_pa {
        margin : auto;
        border-radius : 7px;
        box-shadow : 0 0 10px black;
        width : 780px;
        padding : 10px;
        background : silver;
        }
       
        #fond_pa h1 {
        margin : 0 auto -15px;
        }
       
        .contour0_pa, .contour1_pa {
        display : inline-block;
        vertical-align : top;
        }
       
        .contour1_pa {
        margin-top : 5px;
        margin-bottom : 3px;
        }
       
        #bienvenue_pa {
        width : 488px;
        height : 190px;
        padding : 5px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : justify;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
        #bienvenue_pa:hover, #nouveautes_pa:hover, #contenu:hover, #credits_pa:hover, #topssites_pa:hover, #partenaires_pa:hover {
        color : white;
        text-shadow : 1px 1px 0 rgba(0,0,0,0.4);
        border-radius : 15px;
        box-shadow : 1px 1px 2px rgba(0,0,0,0.4) inset;
        }
       
        #nouveautes_pa {
        width : 264px;
        height : 190px;
        padding : 5px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : center;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
        #onglets ul {
        list-style : none;
        margin-right : 10px;
        padding-top : 34px;
        }
       
        #contenu {
        width : 178px;
        height : 190px;
        padding-top : 10px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : center;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
        div.info_staff{
        opacity : 0.5;
        -moz-transition : 2s;
        -webkit-transition : 2s;
        -o-transition : 2s;
        transition : 2s;
        position : relative;
        }
             
             
        div.info_staff:hover{
        opacity : 1;
        }

        div.info_staff div {
        position : absolute;
        display : none;
        }
               
        div.info_staff:hover div {
        display : block;
        left : 18px;
        top : 2px;
        width : 136px;
        height : 37px;
        background : rgba(255,255,255,0.3);
        color : silver;
        text-align : center;
        padding : 3px;
        line-height : 13px;
        border-radius : 5px;
        }
       
        div.info_staff div a {
        text-decoration : none;
        color : white;
        }
       
        #credits_pa {
        width : 228px;
        height : 200px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : center;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
        #credits_pa a {
        text-decoration : none;
        color : white;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        }

        #topssites_pa {
        width : 206px;
        height : 200px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : center;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
        #topssites_pa img {
        opacity : 0.5;
        width : 35px;
        margin-top : 10px;
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
        #topssites_pa img:hover {
        opacity : 1;
        }
       
        #partenaires_pa {
        padding : 10px 0 5px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : center;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
        #partenaires_pa img {
        opacity : 0.5;
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
        #partenaires_pa img:hover {
        opacity : 1;
        }

        img {border : none; }


td.row1{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
}
td.row2{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
}
td.row3{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
}

.statistiques{
border:0px;
background-image: url("http://img15.hostingpics.net/pics/951468qeel.jpg");
background-repeat: no-repeat;
background-position: center;
height:270px;}

.groupes{
background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}


/*HEADER DE FOND*/
body {
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706063259957903.png");
background-repeat:no-repeat;
  background-position: top center;
  background-attachment: fixed;
}

/*INFOBULLE-DESCRIPTION-*/
div.infobulle3 {
  position: relative;
  cursor:cross; /*donne au curseur la forme de petite main, comme sur un lien*/
}

/*INFOBULLE-DESCRIPTION-*/
div.infobulle3 div{
  display: none; /* ceci masque l'infobulle */
}

/*INFOBULLE-DESCRIPTION-*/
div.infobulle3:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}

/*INFOBULLE-DESCRIPTION-*/
div.infobulle3:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;
width: 140px
  top: 5px; /* on positionne notre infobulle */
  left: 15px;
  background-image: url("http://img24.imageshack.us/img24/9205/77455733.png");/* arrière-plan de l'infobulle */
color: #C79973; /* texte dans l'infobulle */
margin-bottom: 10px;
margin-top: 10px;
margin-right:10px;
margin-left: 10px;
Padding-left: 10px;
Padding-right: 10px;
Padding-bottom: 10px;
Padding-top: 10px;
font-family: arial /* Police du texte */
font-size: ; 9px; /* Grosseur du texte soit 100%, 190% étant plus gros */
text-align: justify; /* Alignement du texte : left, right, center ou justify */
 /* bordures de votre infobulle*/
  border: 1px dotted #cfa3cb;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}



/*CONENU DES DESCRIPTIONS*/
.description {
text-align:justify;
padding:5px;
word-spacing:2pt;
color: #C79973;
font-size: 10px; }


.bodyline {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
 


input, select {
    color : #515D70;
    font: normal 11px Verdana;
    border: #7bcdca;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-width: 1px;
    background-color: #ffffff;
    -moz-border-radius: 10px 10px 10px 10px;
    }

textarea, select {
    color : #515D70;
    font: normal 11px Verdana;
    border: #7bcdca;
    border-left-style: solid;
    border-left-width: 3px;
    border-right-style: solid;
    border-right-width: 3px;
    background-color: #ffffff;
    -moz-border-radius: 10px 10px 10px 10px;
    }

.tableauqueel{
background-color : #ffffff ; /*ici la couleur du fond*/
border : solid Xpx #7bcdca; /*la couleur et taille de votre bord*/
-moz-border-radius : 2px 2px 2px 2px}

.partiedroite {
font-size : 12px ;
border-left : 2px dotted #7bcdca ;
padding-left : 10x }


.groupes{
background-color:#ffffff ;
border: 1px color #7bcdca  ;
-moz-border-radius : 2px 2px 2px 2px;
height:40px;
padding-right:12px;
padding-left:14px;
padding-bottom:3px;
font-size:14px;
text-align:center;
font-color : #ffffff ;
text-decoration: none !important; (
}

.noms{
font-family: cinnamon cake; /*ECRITURE*/
font-size: 17px;
text-shadow: #89725B 1px 1px 2px;
position : relative;
top : 8px;
}

 
a {
text-decoration:none;
}
a:link {text-decoration: none;}
a:hover{text-decoration: none !important;}
a:active
{
text-decoration: none;
}

.hauteur {
height: 180px;
overflow: auto;
}

div.infobulle {
  position: relative;
  cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.infobulle div{
  display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;}


.milieu {width: 90%; margin: 0px; border: 1px solid #597199;-moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 5px; background-color:#d2d6db}
 


/*CODE CITATION CODE SPOILER*/
.quote
{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
color: #C79973;
  border: #cfa3cb;
font-family: Verdana, Arial;
padding-left: 10px;
padding-right: 15px;
}

.code
{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
color: #C79973;
    border: #cfa3cb;
font-family: Verdana, Arial;
padding-left: 10px;
padding-right: 15px;
}

.spoiler
{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
font-family: Verdana, Arial;
color: #C79973;
    border: #cfa3cb;
padding-left: 10px;
padding-right: 15px;
}

.spoiler_closed hidden, .spoiler_content, .spoiler_closed
{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
font-family: Verdana, Arial;
color: #C79973;
    border: #cfa3cb;
padding-left: 10px;
padding-right: 15px;
border: none
}
/*FIN CODE CITATION ETC*/



/*CODE EN VRAC POUR AMELIORER RENDU DU FORUM*/
a{
text-decoration: none !important;
}
a:hover {
text-decoration: none !important;
color: #48B3B1 !important;
}

ul, li{
  list-style: none;
}

#page-body {
margin-top:0px;
}


/*DEBUT CODE DESCRIPTION*/

/*INFOBULLE-DESC*/
div.infobulle {
  position: relative;
  cursor:cross;
}

/*INFOBULLE-DESC*/
div.infobulle div{
  display: none;
}

/*INFOBULLE-DESC*/
div.infobulle:active {
  background: none;
  z-index: 999;
}

/*INFOBULLE-DESC*/
div.infobulle:active div{
display: block;
  position: absolute;
width: 450px
top: 10px;
left: 10px;
background: #c0b093;
color: black;
margin-bottom: 20px;
margin-top: 20px;
margin-right: 30px;
margin-left: 30px;
Padding-left: 10px;
Padding-right: 10px;
Padding-bottom: 10px;
Padding-top: 10px;
font-family: arial
font-size: ; 11px/
text-align: justify !important;
text-shadow: 1px 1px 1px #fff;
border: 2px outset #ac9269;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

/*CKOI*/
.contient {
text-align: right;
font-family: arial;
font-size: 10px;
color: #826d52;
text-shadow: 1px 1px 2px #ad9d88;
}


.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d9ccb9;
  border: 1px solid #ecd980;
  cursor: pointer;
  margin-bottom: -1px;

.mon_onglet:hover{
  background: #775036;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #775036;
  border-top: 1px solid #2f2d27;
  border-right: 1px solid #2f2d27;
  border-left: 1px solid #2f2d27; 
  border-bottom: 1px solid #2f2d27; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #666;
  background: #dfd6bd;
  border: 1px solid #68ce3e;
  padding: 10px;
        margin: -1px;           
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

/*FIN CODE DESCRIP*/




/*CONTOUR DES AVATARS EN COULEUR*/
.postdetails.poster-profile a img
{
border: 1px solid #48B3B1 ;
-moz-border-radius: 3px 3px 3px 3px;
}


/* PAS DE MARGE EN HAUT DU FORUM */
body{
margin-top: 2px;
margin-bottom: 2px;
}

La largeur du forum est de 50%, mais étant donné que la majorité des catégories contiennent une image 500 (largeur) * 80 (hauteur) je pense que cela 'agrandi' la largeur du forum non ?

Pour la version, le forum a changé il y a peu d'adresse, la nouvelle version est : PHPBB2 Excusez-moi pour ce désagrément.

Cordialement.

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par Invité le Dim 15 Juil 2012 - 20:40

Bonsoir,

Ça ne risquait pas de fonctionner si l'on n'était pas sur la bonne version Razz.

Alors, j'ai tout repris pour PhpBB2 avec les nouvelles informations, ça devrait être nettrement mieux:
Le template index_box:
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 --><div  nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </div>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
        </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">
            <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="" 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><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
                  <div class="stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages</span></div>
         <table id="formeindex" width="100%"><tr>
                          <td><td 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>
                          <td width="75%"><div class="descindex"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                          <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                            <!-- END switch_moderators_links --></span></td>
                          <td align="center" valign="middle" height="50">
                            <div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td></tr>
          </table>
         <div class="sousfo"><span class="gensmall">
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                          </span></div>
                          </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><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Et votre CSS :
Code:
#fond_pa {
        margin : auto;
        border-radius : 7px;
        box-shadow : 0 0 10px black;
        width : 780px;
        padding : 10px;
        background : silver;
        }
       
#fond_pa h1 {
        margin : 0 auto -15px;
        }
       
.contour0_pa, .contour1_pa {
        display : inline-block;
        vertical-align : top;
        }
       
.contour1_pa {
        margin-top : 5px;
        margin-bottom : 3px;
        }
       
#bienvenue_pa {
        width : 488px;
        height : 190px;
        padding : 5px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : justify;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
 #bienvenue_pa:hover, #nouveautes_pa:hover, #contenu:hover, #credits_pa:hover, #topssites_pa:hover, #partenaires_pa:hover {
        color : white;
        text-shadow : 1px 1px 0 rgba(0,0,0,0.4);
        border-radius : 15px;
        box-shadow : 1px 1px 2px rgba(0,0,0,0.4) inset;
        }
       
#nouveautes_pa {
        width : 264px;
        height : 190px;
        padding : 5px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : center;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
#onglets ul {
        list-style : none;
        margin-right : 10px;
        padding-top : 34px;
        }
       
#contenu {
        width : 178px;
        height : 190px;
        padding-top : 10px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : center;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
div.info_staff{
        opacity : 0.5;
        -moz-transition : 2s;
        -webkit-transition : 2s;
        -o-transition : 2s;
        transition : 2s;
        position : relative;
        }
                 
div.info_staff:hover{
        opacity : 1;
        }

div.info_staff div {
        position : absolute;
        display : none;
        }
               
div.info_staff:hover div {
        display : block;
        left : 18px;
        top : 2px;
        width : 136px;
        height : 37px;
        background : rgba(255,255,255,0.3);
        color : silver;
        text-align : center;
        padding : 3px;
        line-height : 13px;
        border-radius : 5px;
        }
       
div.info_staff div a {
        text-decoration : none;
        color : white;
        }
       
#credits_pa {
        width : 228px;
        height : 200px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : center;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
#credits_pa a {
        text-decoration : none;
        color : white;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        }

#topssites_pa {
        width : 206px;
        height : 200px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : center;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
#topssites_pa img {
        opacity : 0.5;
        width : 35px;
        margin-top : 10px;
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
#topssites_pa img:hover {
        opacity : 1;
        }
       
#partenaires_pa {
        padding : 10px 0 5px;
        background : #afafaf;
        border : 1px dotted white;
        text-align : center;
        text-shadow : 1px 1px 0 rgba(255,255,255,0.4);
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
#partenaires_pa img {
        opacity : 0.5;
        -moz-transition : 1s;
        -webkit-transition : 1s;
        -o-transition : 1s;
        transition : 1s;
        }
       
#partenaires_pa img:hover {
        opacity : 1;
        }

img {border : none; }

td.row1{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
}

td.row2{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
}

td.row3{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
}

.statistiques{
border:0px;
background-image: url("http://img15.hostingpics.net/pics/951468qeel.jpg");
background-repeat: no-repeat;
background-position: center;
height:270px;}

.groupes{
background-color:#FFFFFF;border: 1px #D0D0D0 dotted;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;padding-right:12px;padding-left:14px;padding-bottom:3px;
font-size:15px;font-weight: bold;text-align:center;
text-decoration: none !important;}


/*HEADER DE FOND*/
body {
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706063259957903.png");
background-repeat:no-repeat;
  background-position: top center;
  background-attachment: fixed;
}

/* PAS DE MARGE EN HAUT DU FORUM */
body{
margin-top: 2px;
margin-bottom: 2px;
}

/*INFOBULLE-DESCRIPTION-*/
div.infobulle3 {
  position: relative;
  cursor:cross; /*donne au curseur la forme de petite main, comme sur un lien*/
}

div.infobulle3 div{
  display: none; /* ceci masque l'infobulle */
}

div.infobulle3:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
}

div.infobulle3:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;
width: 140px
  top: 5px; /* on positionne notre infobulle */
  left: 15px;
  background-image: url("http://img24.imageshack.us/img24/9205/77455733.png");/* arrière-plan de l'infobulle */
color: #C79973; /* texte dans l'infobulle */
margin-bottom: 10px;
margin-top: 10px;
margin-right:10px;
margin-left: 10px;
Padding-left: 10px;
Padding-right: 10px;
Padding-bottom: 10px;
Padding-top: 10px;
font-family: arial /* Police du texte */
font-size: ; 9px; /* Grosseur du texte soit 100%, 190% étant plus gros */
text-align: justify; /* Alignement du texte : left, right, center ou justify */
 /* bordures de votre infobulle*/
  border: 1px dotted #cfa3cb;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

/*CONTENU DES DESCRIPTIONS*/
.description {
text-align:justify;
padding:5px;
word-spacing:2pt;
color: #C79973;
font-size: 10px; }

.bodyline {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
 
input, select {
    color : #515D70;
    font: normal 11px Verdana;
    border: #7bcdca;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-width: 1px;
    background-color: #ffffff;
    -moz-border-radius: 10px 10px 10px 10px;
    }

textarea, select {
    color : #515D70;
    font: normal 11px Verdana;
    border: #7bcdca;
    border-left-style: solid;
    border-left-width: 3px;
    border-right-style: solid;
    border-right-width: 3px;
    background-color: #ffffff;
    -moz-border-radius: 10px 10px 10px 10px;
    }

.tableauqueel{
background-color : #ffffff ; /*ici la couleur du fond*/
border : solid Xpx #7bcdca; /*la couleur et taille de votre bord*/
-moz-border-radius : 2px 2px 2px 2px}

.partiedroite {
font-size : 12px ;
border-left : 2px dotted #7bcdca ;
padding-left : 10x }

.groupes{
background-color:#ffffff ;
border: 1px color #7bcdca  ;
-moz-border-radius : 2px 2px 2px 2px;
height:40px;
padding-right:12px;
padding-left:14px;
padding-bottom:3px;
font-size:14px;
text-align:center;
font-color : #ffffff ;
text-decoration: none !important; (
}

.noms{
font-family: cinnamon cake; /*ECRITURE*/
font-size: 17px;
text-shadow: #89725B 1px 1px 2px;
position : relative;
top : 8px;
}

.hauteur {
height: 180px;
overflow: auto;
}

.milieu {
width: 90%;
margin: 0px;
border: 1px solid #597199;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 5px;
background-color:#d2d6db;}
 


/*CODE CITATION CODE SPOILER*/
.quote{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
color: #C79973;
  border: #cfa3cb;
font-family: Verdana, Arial;
padding-left: 10px;
padding-right: 15px;
}

.code{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
color: #C79973;
    border: #cfa3cb;
font-family: Verdana, Arial;
padding-left: 10px;
padding-right: 15px;
}

.spoiler{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
font-family: Verdana, Arial;
color: #C79973;
    border: #cfa3cb;
padding-left: 10px;
padding-right: 15px;
}

.spoiler_closed hidden, .spoiler_content, .spoiler_closed{
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
font-family: Verdana, Arial;
color: #C79973;
    border: #cfa3cb;
padding-left: 10px;
padding-right: 15px;
border: none
}
/*FIN CODE CITATION ETC*/



/*CODE EN VRAC POUR AMELIORER RENDU DU FORUM*/

a {
text-decoration:none !important;}

a:link, a:active {text-decoration: none;}

a:hover {
text-decoration: none !important;
color: #48B3B1 !important;}

ul, li{
  list-style: none;
}

#page-body {
margin-top:0px;
}


/*DEBUT CODE DESCRIPTION*/

/*INFOBULLE-DESC*/
div.infobulle {
  position: relative;
  cursor:cross;}

div.infobulle:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */

}

div.infobulle div{
  display: none;
}

div.infobulle:hover div{
  display: block; /* ceci affiche l'infobulle */
  position: absolute;}

div.infobulle:active {
  background: none;
  z-index: 999;
}

div.infobulle:active div{
display: block;
  position: absolute;
width: 450px
top: 10px;
left: 10px;
background: #c0b093;
color: black;
margin-bottom: 20px;
margin-top: 20px;
margin-right: 30px;
margin-left: 30px;
Padding-left: 10px;
Padding-right: 10px;
Padding-bottom: 10px;
Padding-top: 10px;
font-family: arial
font-size: ; 11px/
text-align: justify !important;
text-shadow: 1px 1px 1px #fff;
border: 2px outset #ac9269;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}

/*CKOI*/
.contient {
text-align: right;
font-family: arial;
font-size: 10px;
color: #826d52;
text-shadow: 1px 1px 2px #ad9d88;
}
.mon_onglet{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #d9ccb9;
  border: 1px solid #ecd980;
  cursor: pointer;
  margin-bottom: -1px;

.mon_onglet:hover{
  background: #775036;
}           
.mon_onglet_selected{
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #333;
  background: #775036;
  border-top: 1px solid #2f2d27;
  border-right: 1px solid #2f2d27;
  border-left: 1px solid #2f2d27; 
  border-bottom: 1px solid #2f2d27; 
  cursor: pointer; 
  margin-bottom: -1px;
}             
.clear{
  clear: both;
}
.mon_contenu{
  color: #666;
  background: #dfd6bd;
  border: 1px solid #68ce3e;
  padding: 10px;
        margin: -1px;           
}
#mes_contenus, #mes_onglets{
  width: 400px;
}

/*FIN CODE DESCRIP*/

/*CONTOUR DES AVATARS EN COULEUR*/
.postdetails.poster-profile a img{
border: 1px solid #48B3B1 ;
-moz-border-radius: 3px 3px 3px 3px;
}

.stats{
text-align: center;
border: 0px solid #faf3e6;
width: 150px;
padding: 5px;
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
position: relative;
left:330px;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
box-shadow: 0px -1px 0px 1px black;}
 
a.forumlink{
display: block;
margin-left: 100px;
margin-bottom: -30px;
font-size: 16px;}
 
.lastm{
width: 150px;
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
border: 1px solid black;
border-radius: 11px;
padding: 5px;
margin: 2px;}
 
#formeindex{
width: 500px;
border: 0px solid lightblue;
border-radius: 85px;
border-left: 2px solid black;
border-right: 2px solid black;
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
margin: auto;
box-shadow: 1px -1px 1px 2px black;}
 
.sousfo{
text-align: center;
border: 0px solid #faf3e6;
width: 350px;
padding: 5px;
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
position: relative;
left:135px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
box-shadow: 0px 1px 0px 1px black;
margin-bottom: 10px;}
 
.secondarytitle{
text-align: center;
background: lightblue;
width: 200px;
float: right;}

.descindex{
width: 320px;
height: 100px;
overflow-y: auto;
padding: 5px;
margin: 5px;}
N'hésitez pas si vous avez des questions Very Happy.

Bien sincèrement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par Igorette. le Dim 15 Juil 2012 - 21:46

Bonsoir,

Effectivement ^^ Et je m'excuse encore une fois pour ce malentendu !

Alors tout fonctionne à merveille et tout commence à prendre forme, c'est vraiment ce à quoi je m'attendais, merci énormément pour le temps que vous m'accordez !

Donc je n'ai que 4 'modifications', tout est expliquer sur l'image pour plus de compréhension. Je pense que pour la plupart on doit toucher au CSS, mais dans le doute je préfère vous demandez des explications et un peu d'aide Razz

AJOUT : + Je parle des barres de défilements au niveau des catégories avec images, mais le problème arrive aussi aux catégories sans images avec un trop long texte. Serait-il possible qu'il n'y ai plus du tout ses barres ? Qu'importe la taille de l'image ou la longueur du texte ?


Dernière édition par Igorette. le Lun 16 Juil 2012 - 15:01, édité 1 fois

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par Invité le Lun 16 Juil 2012 - 17:33

Bonjour,

Oui normalement tout ceci se règle uniquement dans la feuille CSS (ou presque) Very Happy.

1. les titres des catégories:
Code:
.secondarytitle{
text-align: center;
background: lightblue;
width: 200px;
float: right;}
devient:
Code:
.secondarytitle{
text-align: center;
}
J'ai retiré le fond et l'alignement à droite pour ne garder que le centrage du texte.

2. le dernier message:
Il y a déjà le fond transparent, mais 2 images transparentes qui se superposent ça fait moins transparent Razz, donc autant la retirer Wink.
Code:
.lastm{
width: 150px;
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
border: 1px solid black;
border-radius: 11px;
padding: 5px;
margin: 2px;}
devient:
Code:
.lastm{
width: 150px;
padding: 5px;
margin: 2px;}
On retire l'image de fond, les contours et l'arrondi, pour ne garder que la largeur et les marges intérieures et extérieurs.

3. les descriptions:
Code:
.descindex{
width: 320px;
height: 100px;
overflow-y: auto;
padding: 5px;
margin: 5px;}
devient :
Code:
.descindex{
padding: 5px;
margin: 5px;}
J'avais donné une hauteur et une largeur fixes à vos descriptions, overflow permet l'apparition des barres de défilement, on retire le tout et on ne garde que les marges pour aérer la présentation.

4. les sous-forums:
Alors, on peut modifier le CSS pour aténuer la ligne de l'ombre, mais avec le code précédent les arrondis vont varier en fonction de la taille de la description, et du coup ça ne va pas toujours être bien raccord.
Je vous donne quand même la partie à modifier:
Code:
#formeindex{
width: 500px;
border: 0px solid lightblue;
border-radius: 85px;
border-left: 2px solid black;
border-right: 2px solid black;
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
margin: auto;
box-shadow: 1px -1px 1px 2px black;}
 
.sousfo{
text-align: center;
border: 0px solid #faf3e6;
width: 350px;
padding: 5px;
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
position: relative;
left:135px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
box-shadow: 0px 1px 0px 1px black;
margin-bottom: 10px;}
devient :
Code:
#formeindex{
width: 500px;
border: 0px solid lightblue;
border-radius: 85px;
border-left: 2px solid black;
border-right: 2px solid black;
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
margin: auto;
box-shadow: 1px -3px 1px 1px black;}
 
.sousfo{
text-align: center;
border: 0px solid #faf3e6;
width: 435px;
padding: 5px;
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
position: relative;
left:95px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
box-shadow: 0px 1px 0px 1px black;
margin-bottom: 10px;}

Le mieux va être de retoucher le template, pour retirer la partie des sous-forums, sans pour autant supprimer les liens vers les niveaux inférieurs:
Remplacez:
Code:
<td width="75%"><div class="descindex"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                          <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                            <!-- END switch_moderators_links --></span></td>
                          <td align="center" valign="middle" height="50">
                            <div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td></tr>
          </table>
        <div class="sousfo"><span class="gensmall">
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                          </span></div>
                          </td>
par:
Code:
<td width="75%"><div class="descindex"><span class="genmed">{catrow.forumrow.FORUM_DESC}</span></div>
                            <div class="sousfo"><span class="gensmall">
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                          </span></div>
                          <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                            <!-- END switch_moderators_links --></span></td>
                          <td align="center" valign="middle" height="50">
                            <div class="lastm"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
      </td></tr>
          </table>
       
                          </td>
et dans le CSS, remplacez:
Code:
.sousfo{
text-align: center;
border: 0px solid #faf3e6;
width: 350px;
padding: 5px;
background-image: url("http://nsa29.casimages.com/img/2012/07/06/120706071634244809.png");
background-repeat: repeat;
position: relative;
left:135px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
box-shadow: 0px 1px 0px 1px black;
margin-bottom: 10px;}
par:
Code:
.sousfo{
text-align: center;
padding: 5px;
margin: 5px;}
Bien sincèrement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: forme catégorie

Message par Igorette. le Mar 17 Juil 2012 - 12:02

Whaou ! Vraiment un énorme merci pour avoir répondu à toutes mes questions aussi rapidement. J'espère ne pas vous avoir trop embêter !

Tout marche à merveille, encore merci !

Cordialement.

Igorette.
**

Messages : 65
Inscrit(e) le : 29/06/2011

http://elendil.forumgratuit.org/
Igorette. a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum