AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
LEGO Icons 10331 – Le martin-pêcheur
35 €
Voir le deal

    Petite question sur la personalisation des catégories d'Halloween

    Malice1329
    Malice1329
    FémininAge : 36Messages : 81

    Mer 17 Juin 2015 - 14:03

    Bonjour tout le monde, j'ai utilisé sur le forum d'une de mes amies le LS suivant et tout fonctionne très bien, mis a part que la deuxième admin du forum trouve qu'elle ne sont pas assez centré, elle voudrait que les parties no new/new/close, description du forum et dernier message soit plus centré comme l'est le titre des catégories.

    J'ai essayé quelques petites modifications en ne voyant aucun changement, alors je viens vous voir pour vous demander si c'est possible de tout centrer.

    Voici l'adresse du forum :
    Code:
    http://nevergiveup.rpgwars.net/
    Voici l'effet comme vous pouvez le voir sur le forum :
    Code:
    http://nsm08.casimages.com/img/2015/06/17//15061702011111202413374084.png
    Voici l'effet qu'elle voudrait que cela donne (photo modifié avec paint) :
    Code:
    http://nsm08.casimages.com/img/2015/06/17//15061702011211202413374085.png

    Je vous donne le template et le css du forum complet

    Template:
    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 class="cate_titre" style="vertical-align: middle;">{catrow.tablehead.L_FORUM}</div>



      <!-- END tablehead -->
      <!-- BEGIN cathead -->
      
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
     
     
      <div class="categorie">
    <table><tr><center><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></center>
      <td><div class="sf"><img class="no_new" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> <div class="survolez_moi">Survolez-moi !</div><span>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div>
        
      </td>
      <td>
        <div class="fond_desc">{catrow.forumrow.FORUM_DESC}</div></td>
      <td style="position: relative;"><img src="http://img11.hostingpics.net/pics/4234531401967931cadrederniermess.png" class="derniers_img" /><div class="derniers_messages">{catrow.forumrow.TOPICS} sujets <span style="font-size: 15px; color: #6C684B;">☁</span> {catrow.forumrow.POSTS} messages<br /><br />{catrow.forumrow.LAST_POST}
        </div></td>
    </tr>
    </table>
        
        </div>

      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
      
      <!-- END catfoot -->
      <!-- BEGIN tablefoot -->
      
     
    <!-- END tablefoot --><!-- END catrow -->
    <link href='http://fonts.googleapis.com/css?family=Oswald|Pacifico' rel='stylesheet' type='text/css'>

    CSS:
    Code:
           body {
            background-repeat: no-repeat;
      background-position: top center;
            }
      
    .maintitle
    {margin-top:120px;}

    /* ------------------------------------- CATEGORIES ------------------------------------- */
            
    /* Mise en forme de la description de forum */
    .texte_desc {
      width: 380px;
      height: 45px;
      overflow: auto;
      padding: 20px;
      text-align: justify;
      font-size: 11px;
      position: absolute;
      top: 1em;
      opacity: 1;
      z-index: 2;
      color: #ffffff;
    }

    /* Mise en forme des images "New", "No new" et "Lock" */
    .no_new {
      opacity: 0.5;
      left: 1.2em;
      position: relative;
    }

    /* Transformation au survol des images "New", "No new" et "Lock" */
    .no_new:hover {
      opacity: 1;
      transform: rotate(-30deg);
    }

    /* Mise en forme des derniers messages */
    .derniers_messages {
      font-size: 10px;
      text-align: center;
      width: 200px;
      height: 153px;
      position: absolute;
      top: 1em;
    }

    /* Positionnement de l'image de fond des derniers messages */
    .derniers_img {
      position: absolute;
      top: -1.8em;
    }

    /* Mise en forme des liens des derniers messages */
    .derniers_messages a {
      text-decoration: none !important;
      font-style: none !important;
      font-weight: none !important;
      color: #6C684B !important;
      font-family: 'Oswald', sans-serif;
      font-size: 11px;
    }

    /* Mise en forme au survol des liens des derniers messages */
    .derniers_messages a:hover {
      letter-spacing: 3px;
      color: #DCDACB !important;
    }

    /* Mise en forme du texte "survolez-moi" */
    .survolez_moi {
      font-family: 'Oswald', sans-serif;
      font-size: 12px;
      position: absolute;
      left: 4em;
    }

    /* Mise en forme des liens des sous-forum */
    .sf a {
      text-decoration: none !important;
      font-style: none !important;
      font-weight: none !important;
      color: #6C684B !important;
      font-family: 'Oswald', sans-serif;
      font-size: 12px;
    }

    /* Mise en forme des liens des sous-forum au survol */
    .sf a:hover {
      letter-spacing: 3px;
      color: #DCDACB !important;
    }

    /* Info-bulle des sous-forum */
    .sf {
      position: relative;
      z-index: 24;
      text-decoration: none !important;
    }
     
    .sf:hover {
      z-index: 25;
    }
     
    .sf span {
      display: none;
    }
     
    .sf:hover span {
      display: block;
      position: absolute;
      top: -3.6em;
      left: 10em;
      width: 400px;
      height: 85px;
      overflow: auto;
      background-color: #1E332D;
      color: #000;
      text-align: justify;
      font-weight: none;
      padding: 5px;
    }

    /* Mise en forme de l'illustration en fond de description */
    .img_desc {
      position: absolute;
      top: 0.5em;
      left: 1.2em;
      opacity: 0.8;
      z-index: 1;
    }

    /* Lettrine de la description */
    .lettrine {
      font-size: 250%;
      float: left;
      font-family: 'Pacifico', cursive;
    }

    /* Contenu de l'ensembre des forum */
    .categorie {
      padding: 20px;
      background-color: #030200;
      }

    /* Mise en forme du texte des titres de forum */
    a.forumlink {
      color: #6C684B !important;
      font-family: 'Oswald', sans-serif;
      font-size: 28px;
      text-decoration: none !important;
      text-align: center !important;
      border-bottom: 5px dotted #786F4E;
      width: 100%:
    }

    a.forumlink:hover {
      color: #DCDACB !important;
      text-decoration: none !important;
      letter-spacing: 3px;
      border-bottom: 5px dotted #DCDACB;
    }

    /* Illustration de fond de forum */
    .fond_desc {
      background-image: url('http://img11.hostingpics.net/pics/6548011401967931cadrecat.png');
      width: 440px;
      height: 110px;
      z-index: 1;
    }

    /* ------------------------------------- FIN CATEGORIES ------------------------------------- */
    /* Arrondissement du forum */
    .forumline {
      
            -webkit-border-radius:10px;
            -moz-border-radius:10px;
            border-radius:10px;}

    /*Retirer les soulignements sous les liens */
    a { text-decoration: none; }!Enlever le soulignement des liens.
    a {text-decoration: none;}
    a:link {text-decoration: none;}
    a:hover {text-decoration: none!important;}
    a.forumlink {text-decoration: none;}
    a.topiclink {text-decoration: none; }
    a.topiclink:hover {text-decoration: none!important; }

    /* -------------------------- CODAGE CONCERNANT LA MISE EN PAGE GENERAL -------------------------*/
    th, td.catBottom, td.catHead, th.thHead, td.thHead, td.thLeft, td.catLeft, td.thRight, td.catRight{
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    }

    textarea, .textarea.post, input.post {
    -moz-border-radius:15px;
    -webkit-border-radius: 15px;
    border-radius:15px;
    }

    /* Arrondissement du bouton envoyer */
    .mainoption {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;}

    /* Arrondissement du bouton previsualisation */
    .liteoption {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;}
    /* Arrondissement des citations */
    .quote {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;}

    .code
    {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    padding : 5px;}

    .spoiler
    {
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    padding : 5px;}

    /* Marge interieure des citations */
    .quote {
    padding : 5px;}

    th.thHead,td.catHead {
    border-width: 0 0 0 0;
    }
    th.thSides,td.catSides,td.spaceRow {
    border-width: 0 0;
    }
    th.thRight,td.catRight,td.row3Right {
    border-width: 0 0 0 0;
    }
    th.thLeft,td.catLeft {
    border-width: 0 0 0 0;
    }
    th.thBottom,td.catBottom {
    border-width: 0 0 0 0;
    }

    /* -------------------------- CODAGE SUR LES CATEGORIES -------------------------*/

    .browse-arrows{
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;}
     
    .selectCode { float:right; text-transform: uppercase; cursor:pointer; }
    div.cont_code { clear: right; }

    /* -------------------------------- QEEL -------------------------------- */

            /*** MISE EN FORME LIENS AU SURVOL ***/
            a:hover {
              text-decoration: none !important;
            }

            /*** MISE EN FORME FONT DU QEEL ***/
            .fond_qeel {
              width: 780px;
              border-radius: 0px 0px 25px 25px;
              background-color: #4F546A;
              margin: auto;
              height: 620px;
              position: relative;
            }

            /*** MISE EN FORME TITRE PRINCIPAL ***/
            .titre_principal {
              color: #ffffff;
              font-family: 'Dancing Script';
              font-size: 28px;
              text-align: center;
            }

            /*** MISE EN FORME SOUS-TITRE "Et à qui se fier ?" ***/
            .titre_secondaire {
              color: #E58763;
              font-family: 'lobster two';
              font-size: 18px;
              text-align: center;
            }

            /*** MISE EN FORME BLOC STATISTIQUES ***/
            .bloc_stat {
              background-color: #F0F0F0;
              padding: 15px;
              width: 200px;
              height: 150px;
              overflow: auto;
              font-size: 11px;
              border: 2px solid #CACACA;
              text-align: justify;
              color: #515151;
              position: absolute;
              left: 3em;
              z-index: 1;
            }

            /*** MISE EN FORME BLOC DES GROUPES ***/
            .bloc_groupes {
              background-color: #F0F0F0;
              padding: 15px;
              width: 420px;
              height: 50px;
              overflow: auto;
              font-size: 20px;
              border: 2px solid #CACACA;
              text-align: center;
              font-family: 'Six Caps', sans-serif;
              position: absolute;
              left: 14.5em;
              z-index: 1;
            }

            /*** MISE EN FORME BLOC DES CONNECTES LES 24H ***/
            .bloc_connectes {
              background-color: #F0F0F0;
              padding: 15px;
              width: 420px;
              height: 50px;
              overflow: auto;
              font-size: 20px;
              border: 2px solid #CACACA;
              text-align: center;
              font-family: 'Six Caps', sans-serif;
              position: absolute;
              left: 14.5em;
              z-index: 1;
            }

            /*** COULEUR ET TRANSPARENCE DU FOND DES 24H ***/
            #kaboum .row1 {
              background-color : transparent;
            }

            #kaboum span.gensmall {
              color: #515151;
            }

            /*** MISE EN FORME DES TITRES (simple + survol) ***/
            .titre_bloc {
              font-family: 'Dancing Script', cursive;
              font-size: 24px;
              font-weight: bold;
              color: #E58763;
              position: absolute;
              z-index: 2;
              margin-top: -18px;
            }

            .titre_bloc:hover {
              color: #2D5A57;
            }

            /*** GROUPES A ONGLETS ***/
            /* Mise en forme des noms de groupe */
            .groupe_onglet {
              display: inline-block;
              padding: 10px;
            }

            /* Mise en forme du bloc en transparence de description */
            .contenu_groupe_onglet {
              padding: 15px;
              display: none;
              width: 315px;
              height: 115px;
              overflow: auto;
              font-size: 11px;
              color: #000000;
              text-align: justify;
              background-color: #CBC4C2;
              position: absolute;
              top: 14em;
              left: 21em;
              filter: alpha(opacity = 50);
              opacity: 0.5;
            }

            /* Mise en forme des liens */
            .contenu_groupe_onglet a{
              text-decoration: none !important;
            }

            /*** MISE EN FORME DES CREDITS ***/
            .credits {
              text-align: right;
              margin-right: 10px;
              font-size: 9px;
              margin-top: 10px;
            }

            .credits a{
              color: #B0C3AB;
            }

            /* -------------------------------- FIN QEEL -------------------------------- */

    Merci beaucoup de l'aide que vous pourrez m'apportez.

    Ps. en faisant prévisualisé j'ai remarqué que mes codes n'apparait pas au complet donc s'il manque quoi que ce soit faites moi signe.



    ❝ Every Love Story is Beautiful ❞
    Baby, I'm dancing in the dark with you between my arms, Barefoot on the grass, listening to our favorite song,When you said you looked a mess, I whispered underneath my breath But you heard it, darling, you look perfect tonight× BY LIZZOU
    Malice1329
    Malice1329
    FémininAge : 36Messages : 81

    Ven 19 Juin 2015 - 14:04

    petit Upinounet ^^



    ❝ Every Love Story is Beautiful ❞
    Baby, I'm dancing in the dark with you between my arms, Barefoot on the grass, listening to our favorite song,When you said you looked a mess, I whispered underneath my breath But you heard it, darling, you look perfect tonight× BY LIZZOU
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Ven 19 Juin 2015 - 14:06

    Coucou Malice :)

    En fait il faut jouer avec le CSS ici :
    Code:
    /* Contenu de l'ensembre des forum */
    .categorie {
      padding: 20px;
      background-color: #030200;
    }

    Pour centrer un bloc en CSS il faut lui donner une largeur et des valeurs de marges latérales automatiques.
    Du coup tu pourrais ajouter quelque chose comme ceci :
    Code:
    width: 750px;
    margin: auto;

    J'ai mis le 750px un peu au hasard, il faudra peut-être augmenter/diminuer légèrement la valeur.

    Petite précision, pas besoin de mettre des balises code autour du lien du forum et des images, c'est même plus simple sans, comme ça les liens sont cliquables directement (sans devoir les copier / coller) xD.

    Malice1329
    Malice1329
    FémininAge : 36Messages : 81

    Ven 19 Juin 2015 - 14:51

    Merci beaucoup Nihil, le forum est maintenant centrer et faut croire que la grandeur que tu m'a fourni était la bonne car je l'ai mis et tout de suite le forum s'est mis au centre.

    Pour ce qui est de mettre en code les liens, j'oublie toujours de ne pas le faire.

    Merci encore pour tes conseils, je vais maintenant me rappeler de ce qu'il faut faire pour centrer un bloc. ^^



    ❝ Every Love Story is Beautiful ❞
    Baby, I'm dancing in the dark with you between my arms, Barefoot on the grass, listening to our favorite song,When you said you looked a mess, I whispered underneath my breath But you heard it, darling, you look perfect tonight× BY LIZZOU
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 23:12