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.

Autopassion.net le site dédié à l'automobile créé par ses utilisateurs

    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 >
    avatar
    Rynkka
    FémininAge : 19Messages : 119

    le Sam 7 Juin 2014 - 16:47

    halloween + Catégories= COEEEEEUR! ♥~

    Merchii!



    avatar
    Kinjiro
    MasculinAge : 19Messages : 80

    le Sam 7 Juin 2014 - 18:50

    Merci.



    avatar
    CactusBarbu
    FémininAge : 26Messages : 11

    le Dim 8 Juin 2014 - 16:01

    Tellement joli !!! merci
    avatar
    Lyka Siuka
    FémininAge : 19Messages : 55

    le Dim 8 Juin 2014 - 16:26

    MERCI  :friends: 



    avatar
    Kwiks
    FémininAge : 21Messages : 20

    le Dim 8 Juin 2014 - 20:52

    Merci bien Razz
    avatar
    Tatia38
    FémininAge : 29Messages : 308

    le Dim 8 Juin 2014 - 23:00

    Belle catégorie
    avatar
    Sue Sheeran
    FémininAge : 19Messages : 27

    le Mer 11 Juin 2014 - 1:18

    sympa, merci :)
    avatar
    Toshiki
    FémininAge : 22Messages : 54

    le Mer 11 Juin 2014 - 23:38

    merci
    avatar
    Eleania Madena
    FémininAge : 21Messages : 88

    le Jeu 12 Juin 2014 - 9:39

    C'est super sympa merci !




    avatar
    Aurifereis
    MasculinAge : 25Messages : 39

    le Jeu 12 Juin 2014 - 16:20

    Très belle catégorie
    avatar
    Mircalla
    FémininAge : 25Messages : 17

    le Jeu 12 Juin 2014 - 20:29

    Merci pour ce beau partage !
    avatar
    M.T
    FémininAge : 29Messages : 53

    le Ven 13 Juin 2014 - 15:13

    Merci =)
    avatar
    Ay.am.e
    FémininAge : 20Messages : 123

    le Ven 13 Juin 2014 - 15:33

    Merci !
    avatar
    Juniper
    FémininAge : 22Messages : 32

    le Sam 14 Juin 2014 - 3:19

    De belles catégories et vu que je suis curieuse. X)
    Merci en tout cas. ^^;



    avatar
    Kau
    FémininAge : 16Messages : 148

    le Sam 14 Juin 2014 - 10:45

    merci
    avatar
    Raween
    FémininAge : 26Messages : 112

    le Sam 14 Juin 2014 - 16:17

    Merci beaucoup ^^
    avatar
    Ishyyn
    FémininAge : 23Messages : 90

    le Dim 15 Juin 2014 - 22:05

    Merci o/
    avatar
    Hashirama
    MasculinAge : 21Messages : 63

    le Lun 16 Juin 2014 - 17:33

    thx
    avatar
    Invité

    le Lun 16 Juin 2014 - 19:19

    Merci ♥
    avatar
    Yukionna
    FémininAge : 18Messages : 75

    le Lun 16 Juin 2014 - 20:40

    Merci :3



    Irisia Anderson
    FémininAge : 23Messages : 28

    le Mar 17 Juin 2014 - 20:43

    Magnifique **
    avatar
    Insanys
    FémininAge : 17Messages : 13

    le Mer 18 Juin 2014 - 15:17

    Omg *q*
    avatar
    Gladou
    MasculinAge : 24Messages : 114

    le Mer 18 Juin 2014 - 18:18

    Ca m'a l'air compliqué tout ça.... on va tester pour voir Wink trop classe merci  :hug2: 



    avatar
    Lestrange
    FémininAge : 23Messages : 163

    le Mar 24 Juin 2014 - 11:11

    Merciiiiiiiiiiii °°
    avatar
    Loupiotte-Fr
    FémininAge : 22Messages : 27

    le Mar 24 Juin 2014 - 18:29

    Merci ♥



    Once Upon a Time
    ... Réécrit l'histoire ...
    Contenu sponsorisé


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