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

    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
    Broken Lullaby
    FémininAge : 23Messages : 12

    le Mer 25 Juin 2014 - 18:35

    Merci ! ♥
    Luti
    FémininAge : 27Messages : 18

    le Jeu 26 Juin 2014 - 16:27

    Merci *^*
    avatar
    Maître Corbeau
    MasculinAge : 18Messages : 21

    le Jeu 26 Juin 2014 - 20:12

    merciiii ! *_*
    avatar
    Invité

    le Jeu 26 Juin 2014 - 22:52

    Merci !
    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Ven 27 Juin 2014 - 16:16

    Merci ~



    avatar
    Chewbi
    FémininAge : 21Messages : 39

    le Ven 27 Juin 2014 - 19:35

    C'est génial, depuis le temps que j'en cherchais un comme ça! Merci :3
    avatar
    shibari
    MasculinAge : 23Messages : 277

    le Ven 27 Juin 2014 - 23:24

    merci





    Merci Dakota pour ce kit.
    avatar
    Tempy
    FémininAge : 20Messages : 76

    le Ven 27 Juin 2014 - 23:37

    Merci du partage !
    avatar
    Pastiche
    FémininAge : 23Messages : 78

    le Sam 28 Juin 2014 - 12:37

    De belles catégories que voilà. Merci du partage ! ♥
    avatar
    Eden.
    FémininAge : 25Messages : 201

    le Sam 28 Juin 2014 - 14:32

    Merci !
    avatar
    HEAVEN.SPIRIT
    MasculinAge : 24Messages : 37

    le Dim 29 Juin 2014 - 0:04

    merci du partage =)
    avatar
    skaera22
    MasculinAge : 23Messages : 72

    le Lun 30 Juin 2014 - 12:08

    merci
    avatar
    Inoue Musaki
    FémininAge : 28Messages : 147

    le Lun 30 Juin 2014 - 21:15

    merci ^^
    avatar
    Invité

    le Lun 30 Juin 2014 - 23:32

    Il est vraiment Joli *.*
    avatar
    missvodkadems
    FémininAge : 28Messages : 114

    le Mar 1 Juil 2014 - 2:56

    Merci pour ton codage



    avatar
    Mordiern
    FémininAge : 40Messages : 282

    le Mar 1 Juil 2014 - 10:06

    Merci beaucoup pour ce partage !
    avatar
    nuanciel
    FémininAge : 26Messages : 139

    le Mar 1 Juil 2014 - 11:41

    Merci du partage ^^<3
    avatar
    Milka
    FémininAge : 30Messages : 112

    le Jeu 3 Juil 2014 - 12:06

    Merci pour ce code :)
    avatar
    Snapforum
    MasculinAge : 31Messages : 23

    le Jeu 3 Juil 2014 - 13:24

    Merci !! :)
    avatar
    Mello
    FémininAge : 21Messages : 52

    le Jeu 3 Juil 2014 - 15:44

    Merci
    avatar
    Times.
    FémininAge : 22Messages : 14

    le Jeu 3 Juil 2014 - 19:41

    merci !
    avatar
    Kio
    FémininAge : 20Messages : 22

    le Ven 4 Juil 2014 - 15:52

    Elles sont juste parfaites, merci merci.
    avatar
    Kit Kat
    FémininAge : 21Messages : 17

    le Ven 4 Juil 2014 - 21:22

    Merci du partage ^^
    avatar
    Myosotis
    FémininAge : 18Messages : 97

    le Sam 5 Juil 2014 - 12:58

    Merci
    avatar
    Cherry'
    FémininAge : 22Messages : 65

    le Sam 5 Juil 2014 - 14:07

    C'est splendide !
    Merci beaucoup ! ♥
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Aoû 2018 - 17:06