AccueilDernières imagesRechercherS'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.

Le Deal du moment :
Pokémon EV06 : où acheter le Bundle Lot ...
Voir le deal

    Pour une forum Black butler.

    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Dim 16 Déc 2012 - 21:23

    Commande
    Adresse du forum : http://kuroshitsuji.rpgdynasty.net/
    Description des éléments : http://www.petit-fichier.fr/2012/12/16/sans-nom-3/ ou http://www.casimages.com/f.php?f=121226014524656786.pdf
    Et je voudrais pouvoir mettre une page en fond quand on ne choisit pas une des catégories.
    Couleurs ou tons : Entre le blanc et le noir. Possibilité de gris. Le thème est par rapport aux journaux "The Times"
    Images : Je préférerais les ajouter moi-mêmes... Si ce n'est pas trop difficile.
    Autres précisions : C'est la première fois que je fais ce genre de demande... Et j'adore le concept de PA en Accordéon.



    Dernière édition par Light Anonymous le Mer 26 Déc 2012 - 21:52, édité 1 fois
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Lun 17 Déc 2012 - 18:22

    Bonjour

    Ton forum est-il en construction ? ^^
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Lun 17 Déc 2012 - 18:44

      Oui. Cela pose un problème O.O ?
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Lun 17 Déc 2012 - 18:51

    En fait ça va. Tu as ce qu'il faut.

    Donc

    La commande est validée !▬ il est autorisé de la relancer toutes les 48h minimum
    ▬ une commande laissée sans nouvelles sera relancée au bout de 10 jours
    ▬ après la relance du modérateur, si nous n'avons toujours pas d'actualisation de la commande elle sera archivée après une semaine
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Lun 17 Déc 2012 - 19:04

      Merci beaucoup. Very Happy
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Mar 18 Déc 2012 - 19:06

      Up ?
    Anonymous
    Invité

    Mar 18 Déc 2012 - 19:27

    Oups... t'es en avance !Attention, il faut laisser 48h minimum entre deux relances pour les commandes.
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Ven 21 Déc 2012 - 21:38

      Désolée... J'avais mal lu.

    Anonymous
    Invité

    Dim 23 Déc 2012 - 13:33

      Coucou,

      Serait-il possible d'héberger ton schéma ailleurs, sur servimg par exemple, car actuellement mon anti-virus me bloque la page =/

      Merci.
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Mer 26 Déc 2012 - 13:45

      Le problème c'est que c'est un fichier pdf.
      Il faut forcément le téléchargé je pense...
      Peut-être avec casimage : http://www.casimages.com/f.php?f=121226014524656786.pdf
      Je vais essayer de le faire en jpg... Mais sa risque d'être difficile sur cet ordi.
    Anonymous
    Invité

    Mer 26 Déc 2012 - 14:08

      Yop,

      Ça fonctionne =) Tu devrais ajouter ce lien au premier post pour ceux qui sont dans mon cas. Je vais voir si je peux tenter quelque chose.

      Bon courage.
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Mer 26 Déc 2012 - 21:51

      Merci beaucoup pour tes conseils. Et de me donner un peu de ton temps.
    Angelusia
    Angelusia
    FémininAge : 39Messages : 1159

    Ven 4 Jan 2013 - 9:45

    Bonjour, nous sommes sans nouvelles...Ce topic est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de cette demande.
    Attention, l'absence de réponse à ce message entrainera l'archivage du topic d'ici trois semaines.
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Ven 4 Jan 2013 - 10:57

      Oui oui. J'attend sagement :3
    Anonymous
    Invité

    Ven 4 Jan 2013 - 11:44

    Je rencontre pas mal de soucis pour rajouter un onglet à l'accordéon (par rapport aux tailles etc ...) donc si quelqu'un veut tenter qu'il le fasse, sinon tu risques d'attendre longtemps Light =/

    Désolée.
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Ven 4 Jan 2013 - 18:19

      Je suis très patiente x) Et merci beaucoup d'essayer.
    Anonymous
    Invité

    Lun 7 Jan 2013 - 15:03

      Coucou,

      J'avance, mais j'ai toujours ce soucis d'ajout d'onglet et j'ai peut-être une solution : ton onglet "New" fait vraiment vide, on pourrait peut-être le combiner avec le contexte par exemple, non ? =O

      Tu peux suivre l'avancée ici en attendant : Test
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Lun 7 Jan 2013 - 18:57

      *Pleure de joie* Oh mon dieu T.T Comment vous faites pour que ça soit si beau ?
      Par contre la cadre est très bien, mais les cases prédéterminé (Contexte, news et cases de prédèfs) me paraît petit par rapport à la place qu'il y a... Alors soit comme tu le dis on met Contexte et news avec. C'est une bonne idée.
      Sinon c'est parfait. Je suis en adoration uu Je peux vous vénérer ?
    Anonymous
    Invité

    Lun 7 Jan 2013 - 19:04

      J'adapte juste le tuto de Sparrow, c'est rien d'extraordinaire xD Mais merci =)
      Du coup je dois pouvoir terminer ce soir, et je vais tenter d'agrandir les cases prédéterminées. Par contre pitié, on se tutoie xD

      Rien d'autre à modifier tant que j'y suis ? =)
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Lun 7 Jan 2013 - 19:12

      D'accord :-D Mais c'est bizarre de tutoyer un être supérieur.
    Anonymous
    Invité

    Lun 7 Jan 2013 - 19:25

      Le soucis si j'agrandis les cases, c'est que certains onglets disparaissent =/ Si ça gène vraiment je cède ma place à quelqu'un d'autre, sinon tu peux aussi mettre une image amusante au fond pour combler ce vide =)

      J'ai apporté les autres modifications, si ça te va je te passe les codes Wink

      Je suis pas un être supérieur xD
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Lun 7 Jan 2013 - 20:23

      Serait-il possible de rajouter des cases (Sur le côté ou en dessous/dessus) pour les perso prédèf's ? Pour voir si ça rend mieux. Le vide est un peu désagréable pour cette onglet. Le reste est très bien. C'est un super rendu.
      Si ça ne marche pas. Des petites places pour image sur le côté serait le bienvenu
      Sinon tout ceux qui parle la langue du codage sont des génies pour moi uu
    Anonymous
    Invité

    Lun 7 Jan 2013 - 20:35

      Rajouter des cases pour les prédef ... ajouter des icônes dans les postes vacants ? Si c'est le cas, c'est fait, sinon pourrais-tu reformuler s'il te plait ? =O
    Light Anonymous
    Light Anonymous
    FémininAge : 28Messages : 57

    Lun 7 Jan 2013 - 20:37

      Mieux. C'était bien ça. :-D C'est parfait.
      C'est juste magnifique.
    Anonymous
    Invité

    Lun 7 Jan 2013 - 20:43

      J'ai eu peur, j'ai cru que tu voulais que je rajoute des bidules un peu partout xD

      Voila donc les codes ...

      A mettre dans l'accueil :

      Code:
      <div id="accueil"><div id="page1"><table class="contenu_page"><tbody><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">CONTEXTE & NEWS</span></td><td><div class="contenu"><center>
      <br><br><br><table border="0" cellspacing="2" width="100%">
        <tbody><tr>
          <td width="60%"><link href="http://fonts.googleapis.com/css?family=Parisienne" rel="stylesheet" type="text/css"><div style="font-family:Parisienne;color: white; font-size: 40px; letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px"><center>Accroche</center></div><center><div style="background-color: #CCCCCC; font-family:arial; color: #4D4D4D; font-size: 12px; letter-spacing: 0px; font-weight: normal; width: 300px; height: 200px; TEXT-ALIGN: justify; PADDING-LEFT: 5px; PADDING-RIGHT: 10px; OVERFLOW: auto;">Coriolano quatenus Coriolano iuvare amicitia rem amicitia num Maelium arma Coriolanus Numne debuerunt si quatenus arma amor Numne quatenus progredi primum ob ferre debuerunt Numne in num patriam Coriolanus arma iuvare rem videamus ob amici adpetentem num debuerunt progredi in placet Numne videamus iuvare Vecellinum Vecellinum progredi quatenus debeat videamus amicos illi in adpetentem debuerunt contra debeat iuvare illi arma debuerunt Maelium in id Maelium Coriolano amicitia illi arma debuerunt debuerunt ferre regnum rem quatenus habuit iuvare rem regnum cum regnum debuerunt si regnum Vecellinum patriam progredi amor cum contra num ferre regnum videamus debuerunt iuvare primum amor videamus in. Coriolano quatenus Coriolano iuvare amicitia rem amicitia num Maelium arma Coriolanus Numne debuerunt si quatenus arma amor Numne quatenus progredi primum ob ferre debuerunt Numne in num patriam Coriolanus arma iuvare rem videamus ob amici adpetentem num debuerunt progredi in placet Numne videamus iuvare Vecellinum Vecellinum progredi quatenus debeat videamus amicos illi in adpetentem debuerunt contra debeat iuvare illi arma debuerunt Maelium in id Maelium Coriolano amicitia illi arma debuerunt debuerunt ferre regnum rem quatenus habuit iuvare rem regnum cum regnum debuerunt si regnum Vecellinum patriam progredi amor cum contra num ferre regnum videamus debuerunt iuvare primum amor videamus in.</div></center></td>

          <td width="40%"><div style="font-family:Parisienne;color: white; font-size: 40px; letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px"><center>Nouveautés</center></div><br><center><div style="background-color: #CCCCCC; font-family:arial; color: #4D4D4D; font-size: 12px; letter-spacing: 0px; font-weight: normal; width: 200px; height: 200px; TEXT-ALIGN: justify; PADDING-LEFT: 5px; PADDING-RIGHT: 10px; OVERFLOW: auto;">Coriolano quatenus Coriolano iuvare amicitia rem amicitia num Maelium arma Coriolanus Numne debuerunt si quatenus arma amor Numne quatenus progredi primum ob ferre debuerunt Numne in num patriam Coriolanus arma iuvare rem videamus ob amici adpetentem num debuerunt progredi in placet Numne videamus iuvare Vecellinum Vecellinum progredi quatenus debeat videamus amicos illi in adpetentem debuerunt contra debeat iuvare illi arma debuerunt Maelium in id Maelium Coriolano amicitia illi arma debuerunt debuerunt ferre regnum rem quatenus habuit iuvare rem regnum cum regnum debuerunt si regnum Vecellinum patriam progredi amor cum contra num ferre regnum videamus debuerunt iuvare primum amor videamus in. Coriolano quatenus Coriolano iuvare amicitia rem amicitia num Maelium arma Coriolanus Numne debuerunt si quatenus arma amor Numne quatenus progredi primum ob ferre debuerunt Numne in num patriam Coriolanus arma iuvare rem videamus ob amici adpetentem num debuerunt progredi in placet Numne videamus iuvare Vecellinum Vecellinum progredi quatenus debeat videamus amicos illi in adpetentem debuerunt contra debeat iuvare illi arma debuerunt Maelium in id Maelium Coriolano amicitia illi arma debuerunt debuerunt ferre regnum rem quatenus habuit iuvare rem regnum cum regnum debuerunt si regnum Vecellinum patriam progredi amor cum contra num ferre regnum videamus debuerunt iuvare primum amor videamus in.</div></center></td>
        </tr>
      </tbody></table></center></div></td></tr></tbody></table></div><div id="page2"><table class="contenu_page"><tbody><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">STAFF</span></td><td><div class="contenu"><br><br><br><br>


      <center><a class="imginfo"><img src="http://i13.servimg.com/u/f13/17/97/89/15/sans_t12.png"><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><br><div style="font-family: arial; color: white; font-size: 20px; letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px;">Nom & Prénom</div><br></td></tr><tr><td style="text-align: center;"><br><a class="imginfo"><img src="http://i13.servimg.com/u/f13/17/97/89/15/sans_t10.png"></a></td></tr><tr><td style="text-align: center;"><br><font size="1"><div style="font-family: arial; color: white; font-size: 16px;
      letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px">Surnom ou citation</div><br><br><div style="font-family:arial; font-size: 12px; letter-spacing: 0px; font-weight:
      normal;"><a href="http://kuroshitsuji.rpgdynasty.net"><font color="#272727">MP</font></a> - <a href="http://kuroshitsuji.rpgdynasty.net"><font color="#272727">Contact</font></a></div></font></td></tr></tbody></table></span></a>    <a class="imginfo"><img src="http://i13.servimg.com/u/f13/17/97/89/15/sans_t12.png"><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><br><div style="font-family: arial; color: white; font-size: 20px; letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px;">Nom & Prénom</div><br></td></tr><tr><td style="text-align: center;"><br><a class="imginfo"><img src="http://i13.servimg.com/u/f13/17/97/89/15/sans_t10.png"></a></td></tr><tr><td style="text-align: center;"><br><font size="1"><div style="font-family: arial; color: white; font-size: 16px;
      letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px">Surnom ou citation</div><br><br><a href="http://kuroshitsuji.rpgdynasty.net"></a><div style="font-family:arial; font-size: 12px; letter-spacing: 0px; font-weight:
      normal;"><a href="http://kuroshitsuji.rpgdynasty.net"><font color="#272727">MP</font></a> - <a href="http://kuroshitsuji.rpgdynasty.net"><font color="#272727">Contact</font></a></div></font></td></tr></tbody></table></span></a>    <a class="imginfo"><img src="http://i13.servimg.com/u/f13/17/97/89/15/sans_t12.png"><span><table border="0" cellpadding="1" cellspacing="1" width="125"><tbody><tr><td style="text-align: center;"><br><div style="font-family: arial; color: white; font-size: 20px; letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px;">Nom & Prénom</div><br></td></tr><tr><td style="text-align: center;"><br><a class="imginfo"><img src="http://i13.servimg.com/u/f13/17/97/89/15/sans_t10.png"></a></td></tr><tr><td style="text-align: center;"><br><font size="1"><div style="font-family: arial; color: white; font-size: 16px;
      letter-spacing: 0px; font-weight: normal; text-shadow: black 0px 2px 2px">Surnom ou citation</div><br><br><a href="http://kuroshitsuji.rpgdynasty.net"></a><div style="font-family:arial; font-size: 12px; letter-spacing: 0px; font-weight:
      normal;"><a href="http://kuroshitsuji.rpgdynasty.net"><font color="#272727">MP</font></a> - <a href="http://kuroshitsuji.rpgdynasty.net"><font color="#272727">Contact</font></a></div></font></td></tr></tbody></table></span></a></center>


      </div></td></tr></tbody></table></div><div id="page3"><table class="contenu_page"><tbody><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">POSTES VACANTS</span></td><td><div class="contenu"><br><br>

      <center><br><br><br><br><a href="http://kuroshitsuji.rpgdynasty.net/"><img src="http://images2.fanpop.com/images/photos/3800000/Ciel-kuroshitsuji-3838389-100-100.jpg?1357568066935" class="arrondie1"></a>  <a href="http://kuroshitsuji.rpgdynasty.net/"><img src="http://images2.fanpop.com/images/photos/3800000/Ciel-kuroshitsuji-3838389-100-100.jpg?1357568066935" class="arrondie1"></a>  <a href="http://kuroshitsuji.rpgdynasty.net/"><img src="http://images2.fanpop.com/images/photos/3800000/Ciel-kuroshitsuji-3838389-100-100.jpg?1357568066935" class="arrondie1"></a>  <a href="http://kuroshitsuji.rpgdynasty.net/"><img src="http://images2.fanpop.com/images/photos/3800000/Ciel-kuroshitsuji-3838389-100-100.jpg?1357568066935" class="arrondie1"></a><br><br><a href="http://kuroshitsuji.rpgdynasty.net/"><img src="http://images2.fanpop.com/images/photos/3800000/Ciel-kuroshitsuji-3838389-100-100.jpg?1357568066935" class="arrondie1"></a>  <a href="http://kuroshitsuji.rpgdynasty.net/"><img src="http://images2.fanpop.com/images/photos/3800000/Ciel-kuroshitsuji-3838389-100-100.jpg?1357568066935" class="arrondie1"></a>  <a href="http://kuroshitsuji.rpgdynasty.net/"><img src="http://images2.fanpop.com/images/photos/3800000/Ciel-kuroshitsuji-3838389-100-100.jpg?1357568066935" class="arrondie1"></a>  <a href="http://kuroshitsuji.rpgdynasty.net/"><img src="http://images2.fanpop.com/images/photos/3800000/Ciel-kuroshitsuji-3838389-100-100.jpg?1357568066935" class="arrondie1"></a></center></div></td></tr></tbody></table></div><div id="page4"><table class="contenu_page"><tbody><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">EVENEMENTS</span></td><td><div class="contenu"><div style="width: 600px; height: 380px; OVERFLOW: auto;"><img src="http://www.pixenli.com/images/1339863565023475000.png"></div></div></td></tr></tbody></table></div><div id="page5"><table class="contenu_page"><tbody><tr><td style="width: 40px; overflow: hidden;"><span class="page_titre">CREDITS & PARTENAIRES</span></td><td><div class="contenu"><br><br><center><div style="background-color: #CCCCCC; font-family:arial; color: #4D4D4D; font-size: 12px; letter-spacing: 0px; font-weight: normal; width: 500px; height: 150px; TEXT-ALIGN: justify; PADDING-LEFT: 20px; PADDING-RIGHT: 20px; OVERFLOW: auto;">Varietate omnis vero proeliorum peragrari terras conferri tuis nec victoriis cuiusquam potuisse ante cursibus regum conficiendi gestas gentium victoriis libenter victoriis saepe dicam sermonibus potuisse cuiusquam dicam libenter tuis vero nostrorum citius bellorum cum nec varietate ponere peragrari tuis exterarum conficiendi vero exterarum imperatorum vero crebris disiunctissimas populorum.<br><br>
      PA par <a href="http://www.never-utopia.com">Never-Utopia</a>.</div>
      <br>
      <br><br><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg"></a> <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg"></a> <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg"></a><br><br><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg"></a> <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg"></a> <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg"></a></center></div></td></tr></tbody></table></div></div>

      Dans le CSS :

      Code:
      a { text-decoration: none; }

      /*Image arrondie*/
      .arrondie1 {
        border-radius:50px;
      -webkit-border-radius:50px;
      -moz-border-radius:50px;
      }


      /*Infobulles*/
      a.imginfo {
        position: relative;
        color: #7d7d7d;
        text-decoration: none;
        border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
      }

      a.imginfo span {
        display: none; /* on masque l'infobulle */
      }
      a.imginfo:hover {
        background: none; /* correction d'un bug IE */
        z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
      }
      a.imginfo:hover span {
        display: inline; /* on affiche l'infobulle */
        position: absolute;
        white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
        top: -242px; /* on positionne notre infobulle */
        left: -2px;
        width: 150px;
        height: 250px;
        background: #CCCCCC;
          text-decoration: none;
        color: #4D4D4D;
      border: 0px solid grey;
        border-left: 1px solid #4D4D4D;
        border-right: 1px solid #4D4D4D;
        border-top: 1px solid #4D4D4D;
        border-bottom: 1px solid #4D4D4D;
       -moz-border-radius: 20px 20px 20px 20px;
      -webkit-border-radius: 20px 20px 20px 20px;
      border-radius: 20px 20px 20px 20px;
       
      }



      #accueil
      {
      width: 900px;
      height: 400px;
      overflow: hidden;
      background: url(http://i13.servimg.com/u/f13/17/97/89/15/pa10.jpg) center no-repeat;
      border: 3px solid #272727;
      }



      #page1
      {
      width: 40px;
      height: 400px;
      float: left;
      overflow: hidden;
      background-color: #000000;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }
      #page1:hover
      {
      width: 80%;
      height: 400px;
      overflow: hidden;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }
      #page2
      {
      width: 40px;
      height: 400px;
      float: left;
      overflow: hidden;
      background-color: #000000;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }
      #page2:hover
      {
      width: 80%;
      height: 400px;
      overflow: hidden;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }
      #page3
      {
      width: 40px;
      height: 400px;
      float: left;
      overflow: hidden;
      background-color: #000000;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }
      #page3:hover
      {
      width: 80%;
      height: 400px;
      overflow: hidden;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }
      #page4
      {
      width: 40px;
      height: 400px;
      float: left;
      overflow: hidden;
      background-color: #000000;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }
      #page4:hover
      {
      width: 80%;
      height: 400px;
      overflow: hidden;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }
      #page5
      {
      width: 40px;
      height: 400px;
      float: left;
      overflow: hidden;
      background-color: #000000;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }
      #page5:hover
      {
      width: 80%;
      height: 400px;
      overflow: hidden;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }
      #page6
      {
      width: 40px;
      height: 380px;
      float: left;
      overflow: hidden;
      background-color: #000000;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }
      #page6:hover
      {
      width: 80%;
      height: 380px;
      overflow: hidden;
      transform: all;
      -moz-transform: all;
      -o-transform: all;
      -htm-transform: all;
      -webkit-transform: all;
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
      }

      .contenu_page
      {
      width: 100%;
      height: 400px;
      }
      .page_titre
      {
      display: inline-block;
      height: 40px;
      width: 400px;
      color: #ffffff;
      margin-left: -180px;
      text-align: center;
      font-size: 24px;
      font-family: arial black;
      letter-spacing: 2px;
      -webkit-transform: rotate(-90deg); 
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      }
      .contenu
      {
      width: 0px;
      height: 0px;
      background : url(http://www.pixenli.com/images/mini/1339865038030514200.jpg);
      overflow: hidden;
      padding: 20px;
      opacity: 0;
      -moz-opacity: 0;
      -khtml-opacity: 0;
      filter: alpha(opacity=0);
      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;
      }
      #page1:hover .contenu, #page2:hover .contenu, #page3:hover .contenu, #page4:hover .contenu, #page5:hover .contenu
      {
      width: 650px;
      height: 380px;
      margin-left: -180px;
      background-color: #4D4D4D;
      overflow: none;
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
      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;
      }

      Si tu as des soucis pour personnaliser ou autre, n'hésites pas =)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 2 Mai 2024 - 15:50