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
    Astrid Hofferson
    FémininAge : 23Messages : 18

    le Mer 31 Aoû 2016 - 0:55

    merci bien
    avatar
    Xyyny
    FémininAge : 27Messages : 59

    le Mer 31 Aoû 2016 - 14:56

    Merci ♥
    avatar
    Shivichou
    FémininAge : 23Messages : 23

    le Mer 31 Aoû 2016 - 19:57

    Ho merciii !! ^^
    avatar
    amy pond
    FémininAge : 19Messages : 59

    le Jeu 1 Sep 2016 - 0:08

    merci
    avatar
    ~LP
    FémininAge : 22Messages : 11

    le Mar 6 Sep 2016 - 18:41

    Merci pour ce beau codage :)
    avatar
    Lena Choux
    FémininAge : 22Messages : 30

    le Jeu 8 Sep 2016 - 0:29

    J'adore ** merci
    avatar
    Djeina
    FémininAge : 22Messages : 233

    le Mer 14 Sep 2016 - 9:40

    Merci du partage ^^
    avatar
    Hakura
    FémininAge : 19Messages : 32

    le Mer 14 Sep 2016 - 17:36

    Aaaah j'adore *w*
    avatar
    Hakura
    FémininAge : 19Messages : 32

    le Mer 14 Sep 2016 - 17:37

    Merci beaucoup !
    avatar
    witm
    FémininAge : 24Messages : 51

    le Mer 14 Sep 2016 - 21:18

    c'est parfait, merci :heart:
    avatar
    Thanos
    MasculinAge : 23Messages : 84

    le Mer 14 Sep 2016 - 23:45

    merci
    avatar
    Laya
    FémininAge : 19Messages : 19

    le Ven 16 Sep 2016 - 23:23

    merci Very Happy
    avatar
    Edward Speleers
    FémininAge : 30Messages : 456

    le Mar 20 Sep 2016 - 10:20

    Merci :)



    avatar
    Liintu
    FémininAge : 29Messages : 67

    le Ven 23 Sep 2016 - 17:54

    merci beaucoup :)
    avatar
    noksye
    FémininAge : 27Messages : 53

    le Dim 25 Sep 2016 - 0:02

    Merci c:
    avatar
    Meeko
    MasculinAge : 25Messages : 31

    le Dim 25 Sep 2016 - 6:48

    Merci
    avatar
    whowwillfallfirst
    MasculinAge : 20Messages : 54

    le Dim 25 Sep 2016 - 14:24

    Merci. ♥
    Yunroxas
    FémininAge : 25Messages : 37

    le Dim 25 Sep 2016 - 18:12

    Merci c'est du très beau travail
    avatar
    Aladiah
    FémininAge : 21Messages : 58

    le Dim 25 Sep 2016 - 19:02

    Merci :)
    avatar
    Shaïka
    FémininAge : 22Messages : 79

    le Sam 1 Oct 2016 - 14:04

    Merci, c'est sublime! *-*
    avatar
    Oce5986
    FémininAge : 21Messages : 7

    le Jeu 6 Oct 2016 - 23:23

    Damn ! Merci Very Happy
    avatar
    Jynnea
    FémininAge : 23Messages : 103

    le Ven 7 Oct 2016 - 1:45

    Merci!
    avatar
    Jynnea
    FémininAge : 23Messages : 103

    le Ven 7 Oct 2016 - 8:30

    Merci!
    avatar
    Froufy
    FémininAge : 18Messages : 59

    le Sam 8 Oct 2016 - 11:24

    Vraiment super merci!



    1+1= 4
          2
    3
    avatar
    Cez
    FémininAge : 22Messages : 17

    le Mer 26 Oct 2016 - 22:26

    merci beaucoup ! :)
    Contenu sponsorisé


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