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

    le Ven 18 Avr 2014 - 12:55


    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 >
    Løve
    MasculinAge : 22Messages : 189

    le Sam 19 Avr 2014 - 14:44

    En voilà de belles catégories :3
    avatar
    Angie H.-Carter
    FémininAge : 34Messages : 714

    le Sam 19 Avr 2014 - 17:26

    Je les trouves très jolie franchement j'adore ton travail t'est super Halloween^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    Allison01
    FémininAge : 33Messages : 198

    le Lun 5 Mai 2014 - 23:34

    Oh whaouuu Halloween tu es génial  :hug: c'est vraiment le truc que je cherche tu es génial  :friends: merci  :hug2: 
    avatar
    Callisto
    FémininAge : 21Messages : 44

    le Jeu 8 Mai 2014 - 11:56

    danke ~
    avatar
    Doctor Who
    MasculinAge : 25Messages : 160

    le Jeu 8 Mai 2014 - 13:48

    Belle catégorie, merci beaucoup :)





    DOCTOR WHO ☼
    © Yamashita d'épicode
    avatar
    Lily-R
    FémininAge : 25Messages : 17

    le Jeu 8 Mai 2014 - 14:29

    Merci encore infiniment pour le partage ** !
    avatar
    Susan Storm
    FémininAge : 38Messages : 77

    le Jeu 8 Mai 2014 - 15:43

    Merci Very Happy
    Obsidienne
    FémininAge : 20Messages : 19

    le Jeu 8 Mai 2014 - 17:23

    Merci beaucoup :3
    avatar
    Zelfy
    FémininAge : 22Messages : 3

    le Ven 9 Mai 2014 - 13:26

    Magnifique, merci *-*
    avatar
    Zappy
    FémininAge : 18Messages : 55

    le Ven 9 Mai 2014 - 17:00

    Merci du partage
    avatar
    Invité

    le Sam 10 Mai 2014 - 13:10

    Merci encore une fois de ce partage x)
    C'est vraiment super ce que tu fais !!!!
    avatar
    Evydence
    FémininAge : 21Messages : 60

    le Sam 10 Mai 2014 - 14:23

    Merci!
    avatar
    BLUE HORIZON*
    FémininAge : 19Messages : 7

    le Sam 10 Mai 2014 - 22:33

    C'est excellent! En plus, je cherchais un code semblable depuis quelques semaines. Merci de le partager avec nous!  Very Happy
    avatar
    HW.
    FémininAge : 17Messages : 10

    le Mer 14 Mai 2014 - 17:00

    merci !
    avatar
    Belle Morte
    FémininAge : 21Messages : 42

    le Ven 16 Mai 2014 - 16:44

    Merci!
    avatar
    Chatchoum
    FémininAge : 26Messages : 43

    le Ven 16 Mai 2014 - 20:17

    Merci <3
    avatar
    Lime
    FémininAge : 22Messages : 32

    le Sam 17 Mai 2014 - 0:00

    Merci *-*
    avatar
    Mitsuomi73
    MasculinAge : 26Messages : 42

    le Sam 17 Mai 2014 - 15:52

    merci ♥
    avatar
    Liquid Dreams
    FémininAge : 28Messages : 38

    le Sam 17 Mai 2014 - 22:37

    Merci ! (:
    Tommy'
    MasculinAge : 23Messages : 8

    le Ven 23 Mai 2014 - 21:40

    Ça a l'air sympa tout ça.
    avatar
    Hopyes
    FémininAge : 30Messages : 79

    le Sam 24 Mai 2014 - 19:22

    un grand merci
    avatar
    DaZeli
    FémininAge : 22Messages : 377

    le Sam 24 Mai 2014 - 21:02

    Super! Merci!
    avatar
    Invité

    le Sam 24 Mai 2014 - 21:36

    Dankeschön ! :)
    avatar
    Framboaz
    FémininAge : 25Messages : 15

    le Sam 24 Mai 2014 - 22:17

    Magnifique, comme toujours ! Merci tu es génial(e) ^^
    Contenu sponsorisé


      La date/heure actuelle est Lun 25 Juin 2018 - 5:59