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 >
    avatar
    ldavidl
    MasculinAge : 28Messages : 30

    le Dim 10 Avr 2016 - 23:24

    Joli travail, merci!
    avatar
    FondaHS
    MasculinAge : 19Messages : 11

    le Lun 11 Avr 2016 - 14:51

    Merci trés ressi Wink
    avatar
    Manwin
    MasculinAge : 20Messages : 25

    le Jeu 28 Avr 2016 - 22:16

    Merci ! Very Happy
    avatar
    NanoiHime
    FémininAge : 20Messages : 563

    le Lun 9 Mai 2016 - 19:40

    mercii



    avatar
    Hiruyio Atame
    MasculinAge : 16Messages : 87

    le Mar 10 Mai 2016 - 15:42

    Merci
    avatar
    aryanon
    MasculinAge : 21Messages : 50

    le Mer 11 Mai 2016 - 4:26

    Merci Very Happy
    avatar
    marie-noelle
    FémininAge : 61Messages : 109

    le Lun 16 Mai 2016 - 2:08

    merci :)
    avatar
    Invy
    FémininAge : 25Messages : 48

    le Lun 30 Mai 2016 - 16:54

    Merci beaucoup!
    avatar
    Shi Tsu Michaelis
    FémininAge : 26Messages : 26

    le Mar 31 Mai 2016 - 23:43

    Merci pour ton travail et ton partage <3
    avatar
    Kaipy
    FémininAge : 23Messages : 36

    le Mer 1 Juin 2016 - 12:43

      Merciiii !
    avatar
    Dragonia
    FémininAge : 29Messages : 21

    le Mar 7 Juin 2016 - 2:09

    très sympa ^^
    avatar
    Sian
    FémininAge : 23Messages : 7

    le Lun 20 Juin 2016 - 21:48

    j'aime beaucoup, merci du partage *^*
    avatar
    Applauze
    MasculinAge : 22Messages : 167

    le Mar 21 Juin 2016 - 8:07

    Magnifique ! Merci
    avatar
    Pelezinho
    MasculinAge : 19Messages : 87

    le Mer 22 Juin 2016 - 1:08

    TROOOO BOOOOOOOOOOW !!!



    [MERCI D'INTRODUIRE SIGNATURE ORIGINALE ICI]
    Valkoor
    MasculinAge : 22Messages : 34

    le Jeu 23 Juin 2016 - 18:54

    wow vraiment joli :)
    avatar
    Mystigri
    FémininAge : 15Messages : 97

    le Mar 28 Juin 2016 - 18:19

    Je prends ! Je vais voir si ça donne un bon résultat. :3



    avatar
    Lamia
    FémininAge : 23Messages : 145

    le Jeu 30 Juin 2016 - 11:17

    Ca rend vraiment bien ! Merci
    avatar
    Amaliiah
    FémininAge : 20Messages : 50

    le Ven 22 Juil 2016 - 14:46

    Merciiii
    avatar
    Sokaro
    FémininAge : 22Messages : 195

    le Sam 23 Juil 2016 - 0:36

    Superbe codage *-* merci du partage!




    (Signature provisoire.)
    avatar
    Discorde
    FémininAge : 18Messages : 58

    le Ven 29 Juil 2016 - 20:58

    Thanks ! ♥
    Divas/Marion
    FémininAge : 19Messages : 44

    le Sam 30 Juil 2016 - 0:53

    Super !
    avatar
    Maija.
    FémininAge : 26Messages : 6

    le Ven 5 Aoû 2016 - 17:12

    Très beau, merci ! :heart:
    avatar
    LegendsOfToday
    FémininAge : 22Messages : 78

    le Ven 19 Aoû 2016 - 16:39

    Merci !
    avatar
    MPGuenette
    FémininAge : 23Messages : 111

    le Lun 29 Aoû 2016 - 3:34

    Merci, c'est très jolie :)
    avatar
    Nyroc
    MasculinAge : 16Messages : 57

    le Lun 29 Aoû 2016 - 12:15

    Merci ^^



    Contenu sponsorisé


      La date/heure actuelle est Dim 16 Déc 2018 - 10:20