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
    Little Melody
    FémininAge : 17Messages : 64

    le Sam 5 Juil 2014 - 14:41

    Merci ♥
    avatar
    Sparky59
    FémininAge : 18Messages : 54

    le Sam 5 Juil 2014 - 19:31

    Merci ^^ C'est magnifique
    avatar
    Marwin
    MasculinAge : 25Messages : 47

    le Dim 6 Juil 2014 - 1:02

    merci
    avatar
    Lisou
    FémininAge : 17Messages : 303

    le Dim 6 Juil 2014 - 17:27

    Merci beaucoup ♥
    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Mar 8 Juil 2014 - 11:21

    Merci !!
    avatar
    Stitch56
    FémininAge : 24Messages : 200

    le Mar 8 Juil 2014 - 17:20

    Merci :3
    avatar
    Asuka
    FémininAge : 24Messages : 105

    le Mer 9 Juil 2014 - 12:26

    Merci !



    avatar
    missphan
    FémininAge : 35Messages : 156

    le Mer 9 Juil 2014 - 16:26

    Tes codages sont magnifiques !!!
    avatar
    Shiwaii
    MasculinAge : 29Messages : 108

    le Mer 9 Juil 2014 - 21:35

    Merci
    avatar
    Freshdaw
    FémininAge : 23Messages : 14

    le Jeu 10 Juil 2014 - 18:31

    Génial, merci !
    avatar
    Natsumi13
    FémininAge : 22Messages : 64

    le Jeu 10 Juil 2014 - 19:46

    Trop cool! J'adore! Arigato!
    avatar
    CN.June
    FémininAge : 54Messages : 314

    le Sam 12 Juil 2014 - 22:37

    Mercii du partage ~
    avatar
    WizzyFree
    MasculinAge : 24Messages : 1994

    le Dim 13 Juil 2014 - 13:58

    jolie !



    avatar
    Leisha.
    FémininAge : 27Messages : 29

    le Lun 14 Juil 2014 - 21:27

    J'adore !
    avatar
    C. Hook
    FémininAge : 20Messages : 45

    le Mar 15 Juil 2014 - 3:11

    merci !
    avatar
    Mimirage
    FémininAge : 26Messages : 17

    le Mar 15 Juil 2014 - 17:50

    Merci beaucouuuuuuuup !!!!!
    avatar
    Hazielle
    FémininAge : 26Messages : 17

    le Jeu 17 Juil 2014 - 0:28

    Très joli, merci! :3
    avatar
    Deliriumblacktis
    FémininAge : 24Messages : 24

    le Sam 19 Juil 2014 - 2:43

    Un énorme merci gros comme la vie <3 <3
    avatar
    Sakura-chan
    FémininAge : 20Messages : 180

    le Sam 19 Juil 2014 - 3:24

    Magnifique !
    avatar
    Invité

    le Sam 19 Juil 2014 - 21:30

    Merci
    avatar
    Acédie
    FémininAge : 19Messages : 91

    le Dim 20 Juil 2014 - 14:07

    merci ! (:
    avatar
    bubulle
    FémininAge : 31Messages : 76

    le Dim 20 Juil 2014 - 19:46

    Merci
    avatar
    Zuiichi
    MasculinAge : 24Messages : 119

    le Dim 20 Juil 2014 - 19:46

    Merci !



    avatar
    Dagaa
    FémininAge : 17Messages : 16

    le Jeu 24 Juil 2014 - 12:09

    Merci, C'magnifique :OO
    avatar
    Airore
    FémininAge : 19Messages : 132

    le Ven 25 Juil 2014 - 11:54

    Merci!
    Contenu sponsorisé


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