Catégorie composite : apparence

[melusine711]

Bonjour,

J'ai suivi le tuto pour faire une catégorie composite et tout fonctionne impeccablement. Seulement il y a quelques petites choses au niveau de l'apparence que je souhaiterai changer :



Voici l'URL de mon forum : http://meliscrap-design.forumgratuit.org/
Mon forum est en phpBB2.
Et je suis la fondatrice.
J'ai très peu de CSS ajouté.

La ligne de séparation encadrée en rouge elle est bleue foncée hors je la souhaiterai "transparente" comme ce que vous présentez dans le tuto "Catégorie composite".

Le 1 : comme vous pouvez le voir les liens ne sont pas en italique comme à côté ou en bas. Je ne comprends pas pourquoi.
De plus j'aimerai que tout ce côté soit au même niveau que le côté gauche. Là c'est centré apparemment.

Le 2 : Je trouve que "A la rencontre de l'équipe" est trop prêt de la ligne de séparation. Je souhaiterai que ce soit comme "Règles et modalités du forum".

Dernière petite chose : peux-t-on mettre des petites icônes à la place des puces ? Si je supprime les <li> ce ne sera plus agencé comme des puces.

Voici mon code HTML :

Code:

<table width="100%" rules="rows" border="0" style="margin-top: -10px;">
        <tr>
        <td width="55">
        <a href="http://meliscrap-design.forumgratuit.org/f154-regles-du-forum"><img src="Lien vers l'image N°1" border="0" alt=""></a>
        </td>
        <td width="42%">
       
       
        <a href="http://meliscrap-design.forumgratuit.org/f154-regles-du-forum"><b>Règles et modalités du forum</b></a>

        <br><em><strong>Merci de prendre quelques minutes pour lire les règles et les modalités d'accès à la totalité du forum...</strong><em>
       
        <ul>
        <li><a href="http://meliscrap-design.forumgratuit.org/t1294-regles">Règles</a></li>
        <li><a href="http://meliscrap-design.forumgratuit.org/t1226-modalites-d-acces-au-forum">Modalités d'accès au forum</a></li>
        <li><a href="http://meliscrap-design.forumgratuit.org/t1277-modalites-des-points-ateliers-points-creas">Modalites des points ateliers/points creas</a></li>
        </ul>
        </td>
        <td width="10">
       
        </td>
        <td width="55">
        <a href="http://meliscrap-design.forumgratuit.org/f1-passage-obligatoire"><img src="Lien vers l'image N°2" border="0" alt=""></a>
        </td>
        <td width="42%">
       
       
        <a href="http://meliscrap-design.forumgratuit.org/f1-passage-obligatoire"><b>Passage obligatoire...</b></a>

<br><em><strong>Petit passage obligatoire pour devenir membres à part entière. </strong></em>
        <ul>
        <li><a href="http://meliscrap-design.forumgratuit.org/f237-charte">Charte</a></li>
        <li> <a href="http://meliscrap-design.forumgratuit.org/f3-presentation">Présentation</a></li>
   <li> <a href="http://meliscrap-design.forumgratuit.org/f241-bienvenue-aux-nouvelles-recrues">Bienvenue aux nouvelles recrues</a></li>
        </ul>
        </td>
        </tr>
       
        <tr>
        <td width="55px">
        <a href="http://meliscrap-design.forumgratuit.org/f238-a-la-rencontre-de-l-equipe"><img src="Lien vers l'image N°3" border="0" alt=""></a>
        </td>
        <td width="42%">
       
       
        <a href="http://meliscrap-design.forumgratuit.org/f238-a-la-rencontre-de-l-equipe"><b>A la rencontre de l'équipe</b></a>
        <br><em><strong>Venez rencontrer notre joyeuse équipe...</strong><em>
        <ul>
        <li><a href="http://meliscrap-design.forumgratuit.org/t1300-melinou">Mélinou</a></li>
        <li><a href="http://meliscrap-design.forumgratuit.org/t1299-patou">patou</a></li>
        <li><a href="http://meliscrap-design.forumgratuit.org/t1298-vivi14">vivi14</a></li>
   <li><a href="http://meliscrap-design.forumgratuit.org/t1296-jewel">jewel</a></li>
   </ul>
        </td>
   </tr>
        </table>

A savoir que j'ai laissé les <img src="Lien vers l'image N°1" border="0" alt=""> car je souhaite mettre ensuite des images mais pas encore trouvé lesquelles pour le moment.

Un grand merci de votre aide.

[Tech]

Bonjour,

Je ne vois pas de catégorie composite sur votre forum.
Pouvez-vous la remettre si vous l'avez retiré ?

Cordialement.

[melusine711]

Vous la voyez pas parce que j'ai mis les permissions pour personne encore. Je vais la mettre en ligne dîtes moi dès que je peux enlever la permission car vous êtes "Invité" donc cela voudra dire que les invités vont voir la catégorie entière dont les liens.

Edit : voilà c'est fait dîtes moi si vous la voyez.

[Tech]

Changez votre code HTML actuel par celui-ci :

Code:

<table width="100%" rules="rows" border="0" style="margin-top: -10px;">
                <tr>
                <td width="55">
                <a href="http://meliscrap-design.forumgratuit.org/f154-regles-du-forum"><img src="Lien vers l'image N°1" border="0" alt=""></a>
                </td>
                <td width="42%">
             
             
                <a href="http://meliscrap-design.forumgratuit.org/f154-regles-du-forum"><b>Règles et modalités du forum</b></a>
       
                <br><em><strong>Merci de prendre quelques minutes pour lire les règles et les modalités d'accès à la totalité du forum...</strong></em><em>
             
                <ul>
                <li><a href="http://meliscrap-design.forumgratuit.org/t1294-regles">Règles</a></li>
                <li><a href="http://meliscrap-design.forumgratuit.org/t1226-modalites-d-acces-au-forum">Modalités d'accès au forum</a></li>
                <li><a href="http://meliscrap-design.forumgratuit.org/t1277-modalites-des-points-ateliers-points-creas">Modalites des points ateliers/points creas</a></li>
                </ul></em>
                </td>
                <td width="10">
             
                </td>
                <td width="55">
                <a href="http://meliscrap-design.forumgratuit.org/f1-passage-obligatoire"><img src="Lien vers l'image N°2" border="0" alt=""></a>
                </td>
                <td width="42%">
              <div style="margin-top: -28px;">
             
                <a href="http://meliscrap-design.forumgratuit.org/f1-passage-obligatoire"><b>Passage obligatoire...</b></a>
       
        <br><em><strong>Petit passage obligatoire pour devenir membres à part entière. </strong></em><em>
                <ul>
                <li><a href="http://meliscrap-design.forumgratuit.org/f237-charte">Charte</a></li>
                <li> <a href="http://meliscrap-design.forumgratuit.org/f3-presentation">Présentation</a></li>
          <li> <a href="http://meliscrap-design.forumgratuit.org/f241-bienvenue-aux-nouvelles-recrues">Bienvenue aux nouvelles recrues</a></li>
                </ul></em></div>
                </td>
                </tr>
             
                <tr>
                <td width="55px">
                <a href="http://meliscrap-design.forumgratuit.org/f238-a-la-rencontre-de-l-equipe"><img src="Lien vers l'image N°3" border="0" alt=""></a>
                </td>
                <td width="42%">
             
             
                <a href="http://meliscrap-design.forumgratuit.org/f238-a-la-rencontre-de-l-equipe"><b>A la rencontre de l'équipe</b></a>
                <br><em><strong>Venez rencontrer notre joyeuse équipe...</strong><em>
                <ul>
                <li><a href="http://meliscrap-design.forumgratuit.org/t1300-melinou">Mélinou</a></li>
                <li><a href="http://meliscrap-design.forumgratuit.org/t1299-patou">patou</a></li>
                <li><a href="http://meliscrap-design.forumgratuit.org/t1298-vivi14">vivi14</a></li>
          <li><a href="http://meliscrap-design.forumgratuit.org/t1296-jewel">jewel</a></li>
          </ul>
                </td>
          </tr>
                </table>

Et ajoutez ceci dans votre PA > Affichage > Couleurs > Feuille de style :

Code:

.forumline tr {
    border: 0 none;
}

Pour changer la puce, je ne connais pas de moyen direct de mettre une image (même s'il y a moyen de "bidouiller" pour arriver à avoir quelque chose de ressemblant avec des images) mais il y a divers puces possibles. Voyez-par vous même : http://www.w3schools.com/cssref/playit.asp?filename=playcss_ul_list-style-type&preval=circle

Cordialement.

[melusine711]

Merci pour le code Html. C'est déjà mieux. Par conte pour la ligne de séparation il y en a carrément plus.

Je vous donne mon CSS au cas où il y aurait une interférence avec votre code :

Code:

.Avatar img {
          border : 2px solid #4E6377;
       border-radius: 10px;
          -moz-border-radius: 10px ;
          -webkit-border-radius:10px;
          -border-radius:10px;
          -khtml-border-radius:10px;
          padding : 5px;
        }
        .profinfo {
          border : 2px solid #4E6377;
       border-radius: 10px;
          -moz-border-radius: 10px ;
          -webkit-border-radius:10px;
          -border-radius:10px;
          -khtml-border-radius:10px;
          padding : 5px;
        }
        .profrpg {
          border : 2px solid #4E6377;
       border-radius: 10px;
          -moz-border-radius: 10px ;
          -webkit-border-radius:10px;
          -border-radius:10px;
          -khtml-border-radius:10px;
          padding : 5px;
        }
   .arrondie {
     border:3px solid #4E6377;
     border-radius: 10px;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
       margin:0 5px 0 0;
       padding : 5px;
   }
   .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;
        }
        .mini_ava {
          float: center;
        }
        .mini_ava img {
          width: 40px;
          height: 40px;
          margin: 0 5px;
       border : 2px solid #4E6377;
          border-radius: 10px;
          transition: all 2s;
          -moz-transition: all 2s;
          -webkit-transition: all 2s;
          -o-transition: all 2s;
        }
        .mini_ava img:hover
        {
          width: 80px;
          height: 80px;
        }
   .genmed a,.genmed a:active{
        font-size:1.0em;
        text-decoration:none;
        }
        .genmed a:hover{
        text-decoration:underline;
        }
        .forumline tr {
            border: 0 none;
        }

A vrai dire le colorpicker je sais plus à quoi il sert car je l'avais ajouter au tout début de la création de mon forum il y a un an à peu près. Je l'ajoute à chaque fois que je change de thème.

Pour les puces merci du lien je vais aller voir.

[melusine711]

Bonjour,

Alors voilà : j'ai réussi ! J'ai réussi en bidouillant d'une part votre ".forumline" dans la feuille de style pour la ligne de séparation.

Et j'ai réussi aussi pour insérer des images à la place des puces :
voilà ce que cela donne.



Comme j'ai remarqué que certains sujet intéressants postés pour demander de l'aide sont résolus par les demandeurs eux-mêmes et que ces personnes ne prennent pas la peine de proposer la manière dont ils s'y sont pris alors que la solution des fois pourraient éventuellement nous intéresser, voir nous montrer la possible solution, je vous met à la suite mon résultat au cas où cela aiderait certains d'entre vous.

Voici donc le CSS :

Code:

.forumline tr {
            border: 2px groove #ffffff;
     }
   ul {
         list-style-type: none;
         padding: 0;
         margin: 10px;
   }   
   li.news {   
         background-image: url(http://img4.hostingpics.net/pics/947620packages.png);
         background-repeat: no-repeat;
         background-position: 0 50%;
         padding: 3px 0 3px 20px;
         margin: .4em 0;
   }
   li.regles {   
         background-image: url(http://img4.hostingpics.net/pics/146590ball3.png);
         background-repeat: no-repeat;
         background-position: 0 50%;
         padding: 3px 0 3px 20px;
         margin: .4em 0;
   }
   li.passage {   
         background-image: url(http://img4.hostingpics.net/pics/170589snowman.png);
         background-repeat: no-repeat;
         background-position: 0 50%;
         padding: 3px 0 3px 20px;
         margin: .4em 0;
   }



Voici également le Html :

Code:

<table width="100%" rules="rows" border="0" style="margin-top: -10px;">
                        <tr>
                        <td width="50">
                        <a href="http://meliscrap-design.forumgratuit.org/f154-regles-du-forum"><img src="http://img4.hostingpics.net/pics/261003winterbears.png" border="0" alt=""></a>
                        </td>
                        <td width="42%">
                   
                   
                        <a href="http://meliscrap-design.forumgratuit.org/f154-regles-du-forum"><b>Règles et modalités du forum</b></a>
             
                        <br><em><strong>Merci de prendre quelques minutes pour lire les règles et les modalités d'accès à la totalité du forum...</strong></em><em>
                   
                        <ul>
                        <li class="regles"><a href="http://meliscrap-design.forumgratuit.org/t1294-regles">Règles</a></li>
                        <li class="regles"><a href="http://meliscrap-design.forumgratuit.org/t1226-modalites-d-acces-au-forum">Modalités d'accès au forum</a></li>
                        <li class="regles"><a href="http://meliscrap-design.forumgratuit.org/t1277-modalites-des-points-ateliers-points-creas">Modalites des points ateliers/points creas</a></li>
                        </ul></em>
                        </td>
                        <td width="10">
                   
                        </td>
                        <td width="50">
                        <a href="http://meliscrap-design.forumgratuit.org/f1-passage-obligatoire"><img src="http://img4.hostingpics.net/pics/899490ChristmaDelight30.png" border="0" alt=""></a>
                        </td>
                        <td width="42%">
                      <div style="margin-top: -15px;">
                   
                        <a href="http://meliscrap-design.forumgratuit.org/f1-passage-obligatoire"><b>Passage obligatoire...</b></a>
             
                <br><em><strong>Petit passage obligatoire pour devenir membres à part entière. </strong></em><em>
                        <ul>
                        <li class="passage"><a href="http://meliscrap-design.forumgratuit.org/f237-charte">Charte</a></li>
                        <li class="passage"> <a href="http://meliscrap-design.forumgratuit.org/f3-presentation">Présentation</a></li>
                  <li class="passage"> <a href="http://meliscrap-design.forumgratuit.org/f241-bienvenue-aux-nouvelles-recrues">Bienvenue aux nouvelles recrues</a></li>
                        </ul></em></div>
                        </td>
                        </tr>
                   
                        <tr>
                        <td width="50px">
                        <a href="http://meliscrap-design.forumgratuit.org/f238-a-la-rencontre-de-l-equipe"><img src="http://img4.hostingpics.net/pics/709359BIBIWINTERJOYELEM22.png" border="0" alt=""></a>
                        </td>
                        <td width="42%">
                      <div style="margin-top: -81px;">
                   
                        <a href="http://meliscrap-design.forumgratuit.org/f238-a-la-rencontre-de-l-equipe"><b>A la rencontre de l'équipe</b></a>
                        <br><em><strong>Venez rencontrer notre joyeuse équipe...</strong></em></div>
                        </td>
                        <td width="10">
                   
                        </td>

                        <td width="50px">
                        <a href="http://meliscrap-design.forumgratuit.org/f239-les-news-annonces-du-forum"><img src="http://img4.hostingpics.net/pics/972687BIBIMYVMXMAS70.png" border="0" alt=""></a>
                        </td>

                        <td width="42%">
                      <div style="margin-top: 7px;">
                   
                        <a href="http://meliscrap-design.forumgratuit.org/f239-les-news-annonces-du-forum"><b>Les news / Annonces du forum...</b></a>
                        <br><em><strong>Il se passe quoi sur MéliScrap ? Ben les NEWS ! c'est ici ! </strong></em><em>
                        <ul>
                        <li class="news"><a href="http://meliscrap-design.forumgratuit.org/f6-des-nouvelles-du-forum">Les News !</a></li>
                        <li class="news"> <a href="http://meliscrap-design.forumgratuit.org/f42-nouveautes-dans-les-creations">Les News ! Créations</a></li>
                  <li class="news"><a href="http://meliscrap-design.forumgratuit.org/f240-artistes-copyright-permissions-non-permissions"> Artistes permissions</a></li>
                  <li class="news"> <a href="http://meliscrap-design.forumgratuit.org/f74-voter-pour-le-forum">Votez pour le forum</a></li>
                        </ul></em></div>
                        </td>
                  </tr>
                        </table>

Comme mon résultat est satisfaisant pour moi je suppose ce que j'ai fais est bon. Monsieur Tech donnez-moi votre avis.

En tout cas c'est grâce à ce que vous m'avez fait comme petit changements qui m'ont permise de "bidouiller" tout ça. Cela a été laborieux mais je pense que j'ai réussi. Merci Monsieur Tech.

[Tech]

Bonsoir,

J'aurais pas fait comme ça mais c'est plus simple votre manière. J'aurais appris quelque chose comme ça

Je vous invite à mettre en résolu votre sujet

Cordialement.

[melusine711]

Contente de vous avoir appris un petit quelque chose. Je met ce sujet en résolu.

Bonne soirée.