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
    Angy38
    FémininAge : 48Messages : 220

    le Dim 25 Mai 2014 - 15:00

    Merci



    avatar
    Doan Lavita
    FémininAge : 20Messages : 72

    le Dim 25 Mai 2014 - 16:52

    Encore merci, bon travail :)



    avatar
    Jigsaw.
    FémininAge : 27Messages : 19

    le Dim 25 Mai 2014 - 16:58

    Merci beaucoup Halloween !
    Nal Souclade
    MasculinAge : 19Messages : 163

    le Dim 25 Mai 2014 - 19:56

    C'est vraiment magnifique ! Merci beaucoup !
    avatar
    Malick
    Age : 24Messages : 159

    le Lun 26 Mai 2014 - 11:59

    Merci !



    avatar
    MOON LEE
    FémininAge : 24Messages : 149

    le Lun 26 Mai 2014 - 20:48

    Merci
    avatar
    Zibeline
    FémininAge : 33Messages : 84

    le Lun 26 Mai 2014 - 21:17

    :love: 
    avatar
    Apokalip'z
    MasculinAge : 25Messages : 290

    le Mar 27 Mai 2014 - 20:00

    enfin ce que je cherche \o/
    Merci Hallow' ^^



    avatar
    Porcelain Detox
    MasculinAge : 23Messages : 91

    le Mer 28 Mai 2014 - 21:01

    merci ^^
    Catblack
    FémininAge : 22Messages : 85

    le Jeu 29 Mai 2014 - 13:14

    merci j'adore c'est trop beau
    .Galaxie
    FémininAge : 27Messages : 12

    le Jeu 29 Mai 2014 - 15:45

    Sublime, merci du partage !
    avatar
    Miss lili
    FémininAge : 27Messages : 49

    le Ven 30 Mai 2014 - 9:19

    merci pour ce partage toujours superbe
    avatar
    SNMitsuki
    FémininAge : 20Messages : 63

    le Ven 30 Mai 2014 - 9:54

    Merci O:



    GEnterZ
    MasculinAge : 20Messages : 63

    le Ven 30 Mai 2014 - 12:04

    Merci.
    avatar
    Sumaki
    FémininAge : 20Messages : 31

    le Sam 31 Mai 2014 - 18:08

    C'est trop magnifique Merci.
    avatar
    Delena
    FémininAge : 34Messages : 96

    le Sam 31 Mai 2014 - 18:17

    Merci !



    avatar
    Skyggie
    FémininAge : 21Messages : 9

    le Sam 31 Mai 2014 - 21:54

    Très jolie
    merci du partage ♥
    avatar
    Darkeye
    FémininAge : 18Messages : 56

    le Dim 1 Juin 2014 - 8:33

    J'aime beaucoup. =)



    Epoxy
    MasculinAge : 22Messages : 14

    le Dim 1 Juin 2014 - 11:49

    merci ! :3
    avatar
    Baby Pikachu
    FémininAge : 22Messages : 72

    le Lun 2 Juin 2014 - 18:37

    Merci :3
    avatar
    Shuna
    FémininAge : 23Messages : 131

    le Ven 6 Juin 2014 - 12:30

    merci ~
    avatar
    Pensées
    FémininAge : 73Messages : 41

    le Ven 6 Juin 2014 - 14:35

    Superbe, ce code!
    avatar
    alex24d
    FémininAge : 30Messages : 95

    le Sam 7 Juin 2014 - 9:37

    merci
    avatar
    Bzzzz
    FémininAge : 34Messages : 86

    le Sam 7 Juin 2014 - 13:21

    Bravo j'aime vraiment beaucoup
    avatar
    AwenWolf
    FémininAge : 30Messages : 76

    le Sam 7 Juin 2014 - 15:38

    Merci, j'aime aussi beaucoup celui là *_*
    Contenu sponsorisé


      La date/heure actuelle est Mer 15 Aoû 2018 - 18:55