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 sombres, sous-forum en hover

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Lun 28 Juil 2014 - 21:28

    Rappel du premier message :



    Plop,

    Un LS suite à une demande que je n'ai pas pu finaliser.

    Un merci fait toujours plaisir et ça prend pas 20 minutes de vos vies =3

    /!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



    Catégories


    Template & CSS

    Aperçu : www ▬ Au survol de l'image "No new" (ou "New") : www


    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 -->

    <div class="cate_titre" style="vertical-align: middle;">{catrow.tablehead.L_FORUM}</div>



      <!-- END tablehead -->
      <!-- BEGIN cathead -->
     
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
     
     
      <div class="categorie">
    <table><tr><center><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></center>
      <td><div class="sf"><img class="no_new" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /> <div class="survolez_moi">Survolez-moi !</div><span>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div>
       
      </td>
      <td>
        <div class="fond_desc">{catrow.forumrow.FORUM_DESC}</div></td>
      <td style="position: relative;"><img src="http://img11.hostingpics.net/pics/4234531401967931cadrederniermess.png" class="derniers_img" /><div class="derniers_messages">{catrow.forumrow.TOPICS} sujets <span style="font-size: 15px; color: #6C684B;">☁</span> {catrow.forumrow.POSTS} messages<br /><br />{catrow.forumrow.LAST_POST}
        </div></td>
    </tr>
    </table>
       
        </div>

      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
     
      <!-- END catfoot -->
      <!-- BEGIN tablefoot -->
     
     
    <!-- END tablefoot --><!-- END catrow -->
    <link href='http://fonts.googleapis.com/css?family=Oswald|Pacifico' rel='stylesheet' type='text/css'>

    CSS :
    Code:
    /* ------------------------------------- CATEGORIES ------------------------------------- */
           
    /* Mise en forme de la description de forum */
    .texte_desc {
      width: 380px;
      height: 45px;
      overflow: auto;
      padding: 20px;
      text-align: justify;
      font-size: 11px;
      position: absolute;
      top: 1em;
      opacity: 1;
      z-index: 2;
      color: #2A2A2A;
    }

    /* Mise en forme des images "New", "No new" et "Lock" */
    .no_new {
      opacity: 0.5;
      left: 1.2em;
      position: relative;
    }

    /* Transformation au survol des images "New", "No new" et "Lock" */
    .no_new:hover {
      opacity: 1;
      transform: rotate(-30deg);
    }

    /* Mise en forme des derniers messages */
    .derniers_messages {
      font-size: 10px;
      text-align: center;
      width: 200px;
      height: 153px;
      position: absolute;
      top: 1em;
    }

    /* Positionnement de l'image de fond des derniers messages */
    .derniers_img {
      position: absolute;
      top: -1.8em;
    }

    /* Mise en forme des liens des derniers messages */
    .derniers_messages a {
      text-decoration: none !important;
      font-style: none !important;
      font-weight: none !important;
      color: #6C684B !important;
      font-family: 'Oswald', sans-serif;
      font-size: 11px;
    }

    /* Mise en forme au survol des liens des derniers messages */
    .derniers_messages a:hover {
      letter-spacing: 3px;
      color: #DCDACB !important;
    }

    /* Mise en forme du texte "survolez-moi" */
    .survolez_moi {
      font-family: 'Oswald', sans-serif;
      font-size: 12px;
      position: absolute;
      left: 4em;
    }

    /* Mise en forme des liens des sous-forum */
    .sf a {
      text-decoration: none !important;
      font-style: none !important;
      font-weight: none !important;
      color: #6C684B !important;
      font-family: 'Oswald', sans-serif;
    }

    /* Mise en forme des liens des sous-forum au survol */
    .sf a:hover {
      letter-spacing: 3px;
      color: #DCDACB !important;
    }

    /* Info-bulle des sous-forum */
    .sf {
      position: relative;
      z-index: 24;
      text-decoration: none !important;
    }
     
    .sf:hover {
      z-index: 25;
    }
     
    .sf span {
      display: none;
    }
     
    .sf:hover span {
      display: block;
      position: absolute;
      top: -3.6em;
      left: 10.2em;
      width: 392px;
      height: 85px;
      overflow: auto;
      background-color: #1E332D;
      color: #000;
      text-align: justify;
      font-weight: none;
      padding: 5px;
    }

    /* Mise en forme de l'illustration en fond de description */
    .img_desc {
      position: absolute;
      top: 0.5em;
      left: 1.2em;
      opacity: 0.8;
      z-index: 1;
    }

    /* Lettrine de la description */
    .lettrine {
      font-size: 250%;
      float: left;
      font-family: 'Pacifico', cursive;
    }

    /* Contenu de l'ensembre des forum */
    .categorie {
      padding: 20px;
      background-color: #080E0C;
    }

    /* Mise en forme du texte des titres de forum */
    a.forumlink {
      color: #6C684B !important;
      font-family: 'Oswald', sans-serif;
      font-size: 28px;
      text-decoration: none !important;
      text-align: center !important;
      border-bottom: 5px dotted #786F4E;
      width: 100%:
    }

    a.forumlink:hover {
      color: #DCDACB !important;
      text-decoration: none !important;
      letter-spacing: 3px;
      border-bottom: 5px dotted #DCDACB;
    }

    /* Illustration de fond de forum */
    .fond_desc {
      background-image: url('http://img11.hostingpics.net/pics/6548011401967931cadrecat.png');
      width: 440px;
      height: 110px;
      z-index: 1;
    }

    /* ------------------------------------- FIN CATEGORIES ------------------------------------- */

    A placer dans le descriptif de chaque forum :
    Code:
    <div style="position: relative;">
        <img src="http://i39.servimg.com/u/f39/17/97/89/15/3610.png" class="img_desc" />
       <div class="texte_desc">
          
          <div class="lettrine">
              E
          </div>
           x his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare. Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna. Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.
       </div>
    </div>

    Petite explication, pour modifier l'illustration bleue (ou rose sur le second exemple), ça se passe dans ce dernier code, ici :

    Code:
    <div style="position: relative;">
        <img src="ADRESSE DE L'IMAGE" class="img_desc" />
       <div class="texte_desc">
          
          <div class="lettrine">
              E
          </div>
           x his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare. Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna. Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.
       </div>
    </div>



    - 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 Ven 5 Sep 2014 - 22:23, édité 1 fois




    < / Libre service codage >
    avatar
    SamyChou
    FémininAge : 21Messages : 31

    le Ven 8 Avr 2016 - 13:00

    Très jolie comme catégorie ! Merci du Partage ! o/
    avatar
    Saphira
    FémininAge : 21Messages : 72

    le Ven 8 Avr 2016 - 15:59

    Merci beaucoup :)
    avatar
    Coco-Lapin02
    MasculinAge : 49Messages : 167

    le Mer 20 Avr 2016 - 17:55

    Merci
    avatar
    *-Atlas-*
    MasculinAge : 29Messages : 137

    le Lun 9 Mai 2016 - 5:30

    Merci



    avatar
    Orochimaru
    FémininAge : 28Messages : 209

    le Jeu 12 Mai 2016 - 16:16

    Beau Travail. Very Happy J'adore. Merci du partage Very Happy



    Orochimaru

    " Les proies doivent toujours faire preuve de la plus grande vigilance, lorsqu'elles tentent d'échapper à leur prédateur. Tout ce qu'une proie peut espérer de son prédateur, c'est qu'il daigne la laisser tranquille après avoir eu ce qu'il voulait."
    avatar
    Ice Cream'
    FémininAge : 15Messages : 15

    le Ven 13 Mai 2016 - 16:34

    Merci ! :3
    avatar
    LVVY
    FémininAge : 17Messages : 31

    le Sam 14 Mai 2016 - 19:00

    Waaaaaa merci beaucouuuup ! :friends:
    avatar
    Chocolakato
    FémininAge : 28Messages : 795

    le Dim 15 Mai 2016 - 16:53

    Merci !



    avatar
    Démo
    FémininAge : 18Messages : 53

    le Lun 16 Mai 2016 - 18:33

    Merciii
    avatar
    Lou Ange
    FémininAge : 20Messages : 33

    le Lun 16 Mai 2016 - 21:11

    Merci beaucoup pour ce code ! *-*



    avatar
    didicmy
    FémininAge : 27Messages : 69

    le Jeu 19 Mai 2016 - 22:07

    Merci pour le partage de ce code :)
    avatar
    Doku
    FémininAge : 23Messages : 65

    le Mar 24 Mai 2016 - 20:45

    Merci du partage :ange:
    avatar
    Doku
    FémininAge : 23Messages : 65

    le Mar 24 Mai 2016 - 20:46

    Merci du partage :ange:
    avatar
    Nono-Chan
    FémininAge : 20Messages : 273

    le Sam 28 Mai 2016 - 11:33

    Très joli
    avatar
    Nartiifiice
    FémininAge : 20Messages : 88

    le Sam 28 Mai 2016 - 16:25

    merci
    avatar
    alas
    FémininAge : 27Messages : 20

    le Sam 28 Mai 2016 - 17:18

    Merci !
    avatar
    Précyounette
    FémininAge : 19Messages : 39

    le Dim 19 Juin 2016 - 23:03

    Merciii
    avatar
    Callumm
    MasculinAge : 24Messages : 10

    le Lun 20 Juin 2016 - 13:43


    Un grand merci :chomp:
    avatar
    Applauze
    MasculinAge : 22Messages : 167

    le Mar 21 Juin 2016 - 8:11

    Merci
    avatar
    indiana.mimi
    FémininAge : 24Messages : 25

    le Ven 24 Juin 2016 - 10:51

    merci beaucoup !
    avatar
    Mustique
    FémininAge : 22Messages : 10

    le Ven 24 Juin 2016 - 13:35

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

    le Sam 25 Juin 2016 - 18:43

    Thank you very mucchhhh
    avatar
    andie_xcv
    FémininAge : 22Messages : 35

    le Sam 2 Juil 2016 - 19:31

    Très joli ! Merci pour ce code :)
    avatar
    dean winchester
    MasculinAge : 23Messages : 85

    le Lun 18 Juil 2016 - 0:51

    merci
    avatar
    Thanos
    MasculinAge : 22Messages : 83

    le Lun 18 Juil 2016 - 20:48

    Merci. *-*
    Contenu sponsorisé


      La date/heure actuelle est Lun 25 Juin 2018 - 15:44