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 >
    Aëla
    FémininAge : 24Messages : 21

    le Ven 25 Juil 2014 - 15:36

    Merci !!
    avatar
    Ju' de fruits
    FémininAge : 25Messages : 82

    le Ven 25 Juil 2014 - 16:16

    Merci énormément pour le partage !  :love: 



    avatar
    Dydy
    FémininAge : 28Messages : 490

    le Lun 28 Juil 2014 - 13:39

    merci du partage ^^



    avatar
    Demoniall
    FémininAge : 18Messages : 74

    le Mar 29 Juil 2014 - 17:34

    Joli, merci !
    avatar
    liliboom
    FémininAge : 26Messages : 17

    le Mer 30 Juil 2014 - 12:37

    Tu fais vraiment de très belles choses ! :)
    avatar
    InkBoy
    MasculinAge : 25Messages : 66

    le Mer 30 Juil 2014 - 15:14

    Superbe merci beaucoup !



    avatar
    petit lu
    FémininAge : 26Messages : 180

    le Sam 2 Aoû 2014 - 20:21

    Merci
    avatar
    Mikasa
    FémininAge : 21Messages : 162

    le Lun 4 Aoû 2014 - 20:48

    Merci !




    Signa:


    avatar
    Velvet-Mist
    FémininAge : 27Messages : 44

    le Lun 4 Aoû 2014 - 21:18

    Merci! ♥
    avatar
    GoldenGrams
    FémininAge : 18Messages : 35

    le Lun 4 Aoû 2014 - 21:25

    C'est beau *w*

    Ça ira parfaitement avec le thème de mon forum d'été ! Enfin, j'espère x')
    avatar
    Tine
    FémininAge : 20Messages : 37

    le Mar 5 Aoû 2014 - 20:46

    Merci c:
    avatar
    Orangina
    MasculinAge : 18Messages : 5

    le Mer 6 Aoû 2014 - 16:19

    Merci
    avatar
    Lugatique
    MasculinAge : 19Messages : 23

    le Mer 6 Aoû 2014 - 20:19

    merci
    avatar
    Liliumini
    FémininAge : 23Messages : 55

    le Jeu 7 Aoû 2014 - 10:04

    Merci!
    avatar
    Myfanwi
    FémininAge : 21Messages : 91

    le Jeu 7 Aoû 2014 - 10:16

    J'adore *w*
    avatar
    .lovely
    FémininAge : 21Messages : 54

    le Jeu 7 Aoû 2014 - 17:50

    Superbe !
    avatar
    Zhulan
    FémininAge : 20Messages : 25

    le Ven 8 Aoû 2014 - 9:17

    Merci!
    avatar
    GreenGage
    FémininAge : 25Messages : 73

    le Sam 9 Aoû 2014 - 2:06

    Merci !
    avatar
    patriciadpt30
    FémininAge : 55Messages : 240

    le Mar 12 Aoû 2014 - 0:21

    sublime vraiment merci :)



    Patricia :)
    avatar
    SpicAsh
    FémininAge : 22Messages : 171

    le Mer 13 Aoû 2014 - 11:05

    Merci !
    avatar
    LOLIZE™
    FémininAge : 27Messages : 9

    le Mer 13 Aoû 2014 - 12:09

    Super merci beaucoup **
    avatar
    Alyssa.B50
    FémininAge : 24Messages : 42

    le Dim 17 Aoû 2014 - 15:36

    :) Thanks
    avatar
    Chione
    MasculinAge : 18Messages : 397

    le Lun 18 Aoû 2014 - 18:13

    Merci




    FEZ!FEZ!
    avatar
    mackay
    MasculinAge : 30Messages : 124

    le Mer 20 Aoû 2014 - 20:03

    thnaks
    avatar
    plushmasters
    FémininAge : 26Messages : 70

    le Sam 23 Aoû 2014 - 8:46

    j'adore , trop beau :)
    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc 2018 - 9:40