• Code pour ma "Présentation"

    Une question m'a été posé pour savoir quel code j'ai utilisé pour faire ma présentation à gauche de mon écran dans l'article "accueil" et "my life". Cette question vient de Cats life et j'y répond avec plaisir. 

    Explication : 

    J'ai trouvé ce code dans "Les astuces de Dalias" via "Code CSS" mais il fallait télécharger un fichier afin de l'avoir... J'ai hésité mais au final, je l'ai fais. Je vais du coup le mettre ici-bas. 

    Il est réglé pour la présentation mais vous pouvez bien évidement le trafiquer comme je l'ai fais pour qu'il soit de votre goût. Je retire également touts textes mis dessus mais pour aider un peu, je vous mettrais "écrit". 

    C'est un code pas facile à modifier et je galère encore. Mais c'est faisable. 

    Egalement une autre chose importante, il est à copier/ coller dans <> d'un article. C'est pour cette raison qu'il n'apparaîtra que lorsque vous êtes sur cet article. 

    J'espère que j'ai été comprise et je vous marque maintenant le code : 

     

     

    <!-------------Menu coulissant-------------------->
    <p>&nbsp;</p>
    <div id="table">
    <div class="titre">Pr&eacute;sentation</div>
    Bienvenue !<a href="http://someday.eklablog.com/"> </a>
    <table width="144" height="376">
    <tbody>
    <tr>
    <td>
    <p>Hey !</p>
    <p>écrit ce que tu veux ! &nbsp;</p>
    <p>écrit encore mais tu peux le faire directement dans l'article. C'est plus simple &agrave;p>
    <p>&nbsp;</p>
    <p><a title="pour une photo" href="lien" src="" alt="...: " width="163" height="164" data-load-state="pending" data-src="" /></a>&nbsp;</p>
    </td>
    </tr>
    </tbody>
    </table>
    <table>
    <tbody>
    <tr>
    <td>&nbsp;</td>
    </tr>
    </tbody>
    </table>
    <table>
    <tbody>
    <tr>
    <td>&nbsp;</td>
    </tr>
    </tbody>
    </table>
    <table>
    <tbody>
    <tr>
    <td>&nbsp;</td>
    </tr>
    </tbody>
    </table>
    </div>
    <style><!--
    #table  table { 
       width:170px;
       height:10px;
       font-family: Arial, Helvetica, sans-serif;
       font-size:12px;
       border-radius: 0px;
       padding:5px;
       margin-top:0px;
       box-shadow: px 0px 0px black ,0px 0px px black inset;
       background-color:#ffffff;
       background-image: url();
     
      }
     .titre{ 
        font-family: Arial, Helvetica, sans-serif;
        font-size:19px;                    
        text-align:center;                  
        position:relative;                 
        left:125px;                     
        top:100px;                          
        width:120px;                         
        height:22px;
        box-shadow: 0px 0px 10px black;
        background-image: url();
        background-color:;
        border-radius:0px 0px 8px 8px;  
        padding:5px 15px 15px 15px;
        transform: rotate(270deg);          
        -ms-transform: rotate(270deg);  
        -webkit-transform: rotate(270deg);  
        -o-transform: rotate(270deg);  
        -moz-transform: rotate(270deg);  
    }
     #table { 

        position:fixed; 
        top:50px; 
        left:-185px; 
        transition: 1s; 
        -webkit-transition: 1s; 
        -moz-transition: 1s; 
    }
     #table:hover { 
     
        left:-1px; 
        transition: 1s; 
        -webkit-transition: 1s; 
        -moz-transition: 1s; 
         
    }
    --></style>

     

     

     

     

    Voilà ! J'espère vraiment vous avoir aider. 


  • Commentaires

    1
    Dimanche 20 Août à 18:09

    Merci !

    Je voulais savoir si je pouvais le mettre dans une rubrique ?

    2
    Dimanche 20 Août à 18:12

    Je n'ai jamais essayer. Si tu tente, tu me diras si ça va ? 

    3
    Dimanche 20 Août à 18:18

    Je tenterai demain car ça ne m'a pas l'air d'une mince affaire !

    4
    Dimanche 20 Août à 18:21

    Si tu veux changer ^^ ahah, ok ok. 

    5
    Dimanche 20 Août à 22:14

    Hehe ! Et bien écoute, enfaite si, sur une rubrique ça marche tout autant ;)

    6
    Lundi 21 Août à 13:39

    Tant mieux :)



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :