AccueilFAQRechercherMembresGroupesS'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.


    Catégories bleues, sous-forum en hover

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9757

    le Ven 18 Avr 2014 - 12:55

    Rappel du premier message :


    Plop,

    Suite à une demande voici le LS qui en découle.

    Catégories


    Version  phpBB2 ▬  CSS & HTML

    Aperçu ▬ www


    CSS
    Code:
       /* --------------------------------- CATEGORIES --------------------------------- */


        /* SOUS-FORUM CACHES */

        .sf {
          width: 100px;
          height: 170px;
          overflow: hidden;
          position: relative;
          top: 0em;
          background-color: #D5D2D2;
        }

        .sf_img {
          position: relative;
          z-index: 2;
          width: 100px;
          height: 170px;
          margin-left: 0px;
          transform: all;
          -moz-transform: all;
          -o-transform: all;
          -htm-transform: all;
          -webkit-transform: all;
          transition: 1s;
          -moz-transition: 1s;
          -o-transition: 1s;
          -htm-transition: 1s;
          -webkit-transition: 1s;
        }

        .sf:hover .sf_img {
          margin-left: 400px;
          transform: all;
          -moz-transform: all;
          -o-transform: all;
          -htm-transform: all;
          -webkit-transform: all;
          transition: 1s;
          -moz-transition: 1s;
          -o-transition: 1s;
          -htm-transition: 1s;
          -webkit-transition: 1s;
        }
          
       .sf_description {
          position: relative;
          z-index: 1;
          width: 100px;
          height: 170px;
          margin-top: -180px;
          font-size: 11px;
          color: #8c8c8c;
          padding: 15px;
          overflow: auto;
        }

        .sf_description a{
          color: #005677;
        }

        .sf_description a:hover {
          color: #007EAE;
          text-decoration: none !important;
        }

        /*** FONDS GENERAUX ***/

        /* Fond titre catégorie */
        .cate_titre {
          width: 600px;
          margin: auto;
          padding: 5px;
          background-color: #007BAA;
          box-shadow: 2px 2px 15px black;
          -moz-box-shadow: 2px 2px 15px black;
          -webkit-box-shadow: 2px 2px 15px black;
        }

        /* Mise en forme nom de catégorie */
        h2 {
          font-size: 30px;
          font-family: 'Oregano', cursive;
          color: #003E55;
          text-align: center;
        }

        /* Fond du forum */
        .categorie {
          background-color: #B7B3B3;
          width: 700px;
          height: 200px;
          padding: 15px;
        }


        /*** MISE EN FORME DES FORUM ***/

        /* Mise en forme du texte des titres de forum */
        .forumlink {
          position: relative;
          left: 2em;
          top: 0.6em;
          color: white !important;
          font-family: 'Allura', cursive;
          font-size: 36px !important;
          font-weight: none !important;
          z-index: 1;
        }

        .forumlink:hover {
          color: #002F40 !important;
          text-decoration: none !important;
        }

        .forumlink a {
          font-size: 16px;
          width: 500px;
        }

        /* Mise en forme de la description */
        .description {
          width: 300px;
          height: 100px;
          overflow: auto;
          font-size: 11px;
          text-align: justify;
          background-color: #ffffff;
          color: #007BAA;
          border-top: 5px solid #007BAA;
          padding: 15px;
        }

        /*** DERNIERS MESSAGES ***/
        .derniers_messages {
          text-align: center;
          font-size: 11px;
        }

        .derniers_messages a {
          color: #007BAA !important;
        }

            /*--------------------------------- FIN CATEGORIES --------------------------------- */



    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 -->

            <center><div style="background-color: #D5D2D2; padding: 15px; width: 780px;"><div class="cate_titre" style="vertical-align: middle;">{catrow.tablehead.L_FORUM}</div>



              <!-- END tablehead -->
              <!-- BEGIN cathead -->
            
             <!-- END cathead -->
              <!-- BEGIN forumrow -->
          
         
           <br /><br /> <div class="categorie">
                <table><tr>
                  <td><div class="sf"><div class="sf_img"><img src="http://i55.servimg.com/u/f55/16/61/97/52/14_10.png" /></div><div class="sf_description"><span class="gensmall" id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
        <script type="text/javascript">
          jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
        </script></div></div>
                  <div style="clear: both;"></div></td>
                  <td><div style="width: 20px;"></div></td>
                  <td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                    <div class="description">{catrow.forumrow.FORUM_DESC}</div><div style="text-align: center; font-size: 9px; color: #ffffff;">{catrow.forumrow.TOPICS} messages dans {catrow.forumrow.POSTS} topics</div></td>
                  <td><div style="width: 20px;"></div></td>
                  <td><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br /><div class="derniers_messages">{catrow.forumrow.LAST_POST}</div></td>
                  </tr></table>
              
           </div>

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



    Un petit merci ou commentaire est toujours le bienvenu ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Halloween le Jeu 13 Avr 2017 - 20:31, édité 3 fois




    < / Libre service codage >
    avatar
    Aoko
    FémininAge : 24Messages : 38

    le Jeu 2 Fév 2017 - 22:46

    Merci! :)
    avatar
    Hallibel
    FémininAge : 25Messages : 82

    le Ven 3 Fév 2017 - 6:10

    Merci !
    avatar
    mijako
    FémininAge : 26Messages : 83

    le Dim 5 Fév 2017 - 22:11

    Merci ;-;
    avatar
    Lena
    FémininAge : 27Messages : 100

    le Ven 17 Fév 2017 - 23:23

    merci du partage Very Happy





    Merci a Kazuya pour son kit =)
    Lupa
    FémininAge : 22Messages : 183

    le Mar 28 Fév 2017 - 2:51

    Coucou, juste pour informer que les liens vers les images ne sont plus valables ^^"



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    avatar
    Nyotengu
    FémininAge : 24Messages : 85

    le Jeu 9 Mar 2017 - 18:04

    merci
    avatar
    Kuta89
    MasculinAge : 20Messages : 12

    le Sam 11 Mar 2017 - 14:20

    Merci ^^
    avatar
    Mahogany
    FémininAge : 25Messages : 54

    le Lun 17 Avr 2017 - 23:01

    Merci
    avatar
    Insane.
    FémininAge : 20Messages : 82

    le Mer 19 Avr 2017 - 15:15

    J'adore !
    avatar
    Tomoe
    FémininAge : 18Messages : 13

    le Mer 19 Avr 2017 - 18:19

    Merci !
    avatar
    luxury67
    FémininAge : 26Messages : 20

    le Jeu 20 Avr 2017 - 19:59

    Merci beaucoup !
    avatar
    Anide Vintage
    FémininAge : 25Messages : 6

    le Jeu 25 Mai 2017 - 15:10

    thank you!
    avatar
    Raynold
    MasculinAge : 19Messages : 39

    le Lun 29 Mai 2017 - 20:19

    tres jolie cheers cheers cheers Razz Cool
    avatar
    Raynold
    MasculinAge : 19Messages : 39

    le Lun 29 Mai 2017 - 20:20

    tres jolie cheers cheers cheers Razz Cool
    avatar
    Kilda
    FémininAge : 38Messages : 73

    le Lun 5 Juin 2017 - 21:33

    C'est très jolie, merci :)
    avatar
    Kizuro hoki
    MasculinAge : 23Messages : 45

    le Jeu 8 Juin 2017 - 20:26

    merci !
    avatar
    Solitude
    FémininAge : 43Messages : 286

    le Sam 17 Juin 2017 - 13:55

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    Nihal
    FémininAge : 14Messages : 23

    le Jeu 22 Juin 2017 - 2:33

    Merci!
    avatar
    saoune972
    FémininAge : 20Messages : 18

    le Mer 5 Juil 2017 - 16:21

    J'aime biennnnnn !
    avatar
    Destan
    MasculinAge : 40Messages : 37

    le Dim 30 Juil 2017 - 22:04

    Merci
    avatar
    Titi | Luna
    FémininAge : 13Messages : 50

    le Sam 14 Oct 2017 - 14:22

    Merci pour le code !
    avatar
    Lixies
    FémininAge : 26Messages : 12

    le Lun 16 Oct 2017 - 10:58

    Merci beaucoup ! <3
    avatar
    Costati
    FémininAge : 19Messages : 52

    le Mar 5 Déc 2017 - 20:18

    C'est absolument magnifique merci beaucoup ♥
    avatar
    Mochi
    FémininAge : 18Messages : 13

    le Mar 2 Jan 2018 - 12:22

    Merci beaucoup! Very Happy
    avatar
    angiela
    FémininAge : 22Messages : 5

    le Jeu 4 Jan 2018 - 3:41

    merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc 2018 - 18:20