• Onglets coulissant

    Et revoici le tuto pour faire des onglets coulissants (comme sur le côté gauche du blog) en plus développé, mais plus simple à coder ;)

    /!\ Compatible seulement avec les dernière version de Chrome, Safari et Firefox. Ne fonctionne pas avec IE. Autre navigateur non testé.

    Commençons par le css:

    .coulissant {
    z-index: 99;
    position: fixed;      
    height: Xpx;         
    width: Xpx;          
    left: -Xpx;              
    top: Xpx;              
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }
    .coulissant:hover{
    left: -1px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s
    }

    Explications:
    Modifiez les Xpx
    Pour height, par la hauteur de vos onglets
    Pour width, par la largeur de vos onglets

    Top indique à combien de px du haut de la page sont placé les onglets
    Left est une marge négative servant à masquer l'onglet. Si vos onglets font 100px en largeur, mettez environ -80px à left, pour laisser dépasser 20px. 

    Au survol (hover) la valeur de left indique de combien de px dépasse l'onglet. Je vous conseil de laisser à -1px.

    Si vous voulez les onglets à droite, remplacez "left" par "right"
    Si vous voulez les onglet en haut  gauche, inversez "top" et "left"
    Si vous voulez les onglets en haut à droite, remplacez "top" par "right" et "left" par "top"


    Voici le css de base. Rajoutez des bordures, de la couleur ou autre pour faire quelque chose de joli ;) 

    Passons au HTML. Mettezr le code suivant dans un module simple de votre blog

     <div class="coulissant">DU TEXTE; DES IMAGES...</div>
     <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>
     <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>
    <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div> 

    Structure de base pour 4 onglets. Pour éviter qu'ils ne se chevauchent, il faut rajouter "stlyle="top: Xpx"" à partir du deuxièmes: Remplacez Xpx par la hauteur de l'onglet (+les marges). Pour le troisième, remplacez Xpx par la hauteur de 2 onglets (+les marges) etc...

    Pour les connaisseur, je pense que je n'ai pas besoin d'en dire plus, vous aller me personnaliser tou ça ;)
    Pour ceux qui ne comprenne pas grand chose, je vous propose un exemple de personnalisation. Après, vous faie comme vous voulez ;)
    => Apperçu 

    CSS

    .coulissant { z-index: 99;
    position: fixed;
    height: 80px;
    width: 150px;
    left: -130px;
    top: 40px;
    background: #B7E5C7;
    border: 2px solid #50B27C;
    box-shadow: 0 0 10px #50B27C, inset 0 0 5px #50B27C;
    border-radius: 0 10px 10px 0;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 1s;
    transition-duration: 1s;
    }
    .coulissant:hover{ left: -2px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 1s;
    transition-duration: 1s;
    }
    .coulissant img {max-height: 70px;
    padding-top: 5px;
    margin-right: 5px;
    }
    .bout { -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    float:right;
    margin-right: -10px;
    height: 80px;
    line-height:80px;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #D1FFE9
    }

    HTML

    <div class="coulissant">
    <img style="float: left;" src="http://data0.ek.la/test-blog/mod_articles646820_1.jpg?2008" />
    <div class="bout">Accueil</div>
    Bienvenu sur mon blog!
    </div>

    <div class="coulissant" style="top: 140px; background: url('http://data0.eklablog.com/merry0712/mod_article1651277_5.jpg?9340') 100% 50%;">
    <div class="bout">Galerie</div>
    <a href="#">Clique ICI</a>
    </div> 

    Voilà sur deux onglets quelques exemple de ce que vous pouvez faire =)

    Tuto d'Eklatuce plus simple pour faire un lien sur les image =) 


    Tags Tags : , , , ,
  • Commentaires

    1
    Mardi 14 Février 2012 à 19:03

    C'est quoi "bout" ?

    2
    Mercredi 15 Février 2012 à 00:31

    arrigatou gosaimasu !! ♥

    3
    Mercredi 15 Février 2012 à 11:34

    Bonjour,

    Le même que moi en un peu plus complet.
    De mon côté je n'ai pas voulu trop embrouiller les leceurs, alors j'ai simplifié un peu plus.

    Sinon, félicitations, c'est un bon tutoriel.
    Christian Martins.

    4
    Mercredi 15 Février 2012 à 11:53

    Tantan-kun c'est toi?

    5
    Mercredi 15 Février 2012 à 12:02

    Oui, c'est bien moi, j'ai changé de pseudo ^^

    6
    Mercredi 15 Février 2012 à 12:23

    ah ok %D

    7
    Mercredi 15 Février 2012 à 12:39

    @Mochi : Oups, j'ai oublié de mettre l'apperçu (hont à moi). Regarde ici. C'est "Accueil" et "Galerie". J'ai juste rajouté un code pour écrire penché ;)

    @Himori Ayumi: De rien =)

    @Christian Martins (ça fais bizarre de plus t'appeler Tantan-kun ^^'): Merci ^^
    J'ai voulu rajouter le lien vers ton tuto, car c'est toi qui m'a donner l'idée d'utiliser transition, mais ton blog est en maintenance ^^'
    Préviens moi quand tu ouvre. 

    8
    Mercredi 15 Février 2012 à 12:44

    J'ouvrirais dans le courant de la semaine.
    Mais si tu ne veux pas mettre de lien, tu es libre, c'est comme tu le sens ;)

    9
    Mercredi 15 Février 2012 à 19:52

    Pour en faire deux de ce style là:

    <div id="coulissant"><img style="float: left;" src="http://data0.lo.gs/mochi-test-temporaire/perso/onglet%20colissant02.jpg" alt="" />

    <div class="bout">Acceuil</div>

    Bienvenu sur mon blog!</div>

    Comment faut-il faire pour que le second ne disparaisse pas?

    10
    Mercredi 15 Février 2012 à 20:00

    <div id="coulissant"><img style="float: left;" src="http://data0.lo.gs/mochi-test-temporaire/perso/onglet%20colissant02.jpg" alt="" />

    <div class="bout">Acceuil</div>

    Bienvenu sur mon blog!</div>

    <div id="coulissant" style="top: 140px;"><img style="float: left;" src="http://data0.lo.gs/mochi-test-temporaire/perso/onglet%20colissant02.jpg" alt="" />

    <div class="bout">Acceuil</div>

    Bienvenu sur mon blog!</div>

    Il faut que tu change les valeurs pour chaque nouvelle onglet que tu fais pour éviter qu'il ne se chevauche

    11
    Mercredi 15 Février 2012 à 20:03

    Merci !

    12
    Mercredi 15 Février 2012 à 20:15

    Encore une question désoler....

    Voilà j'aimerais que mon texte sois tu la même ligne. Le Site et Momokoi mais je ne sais pas comment faire....

    Apperçu :

    http://mochi-test-temporaire.lo.gs/

    13
    Mercredi 15 Février 2012 à 22:32

    Si tu veux que ce soit sur la même ligne, soit tu enlève l'image, soit tu agrandis l'onglet dans le css:

    #coulissant { z-index: 99;

    position: fixed; 

    height: 80px; 

    width: 150px;

    left: -130px;

    top: 40px; 

    background: #B7E5C7;

    border: 2px solid #50B27C; 

    box-shadow: 0 0 10px #50B27C, inset 0 0 5px #50B27C;

    border-radius: 0 10px 10px 0;

    -webkit-transition-duration: 0.3s; 

    -moz-transition-duration: 1s;

    transition-duration: 1s; 

    }

    14
    Jeudi 16 Février 2012 à 12:04

    Même en fesant ça sa ne fonctionne toujours pas...

    Voilà mon code :

    #coulissant z-index99;
    positionfixed
    height80px
    width150px;
    left-130px;
    top40px
    background#FFD6F3;
    font-familymonotype corsiva;
    text-aligncenter
    font-size15px;
    text-shadow0px 0px 3px white;
    border3px double black
    box-shadow10px whiteinset 5px white;
    border-radius10px 10px 0;
    -webkit-transition-duration0.3s
    -moz-transition-duration1s;
    transition-duration1s
    }
    #coulissant:hoverleft-2px
    -webkit-transition-duration0.5s;
    -moz-transition-duration1s
    transition-duration1s

    #coulissant img {max-height70px;
    padding-top5px;
    margin-right5px;

    .bout -webkit-transformrotate(90deg)
    -moz-transformrotate(90deg)
    -o-transformrotate(90deg);
    transformrotate(90deg)
    float:right;
    margin-right-10px
    height80px;
    line-height:80px
    font-size17px;
    font-weightbold
    text-shadow1px 1px 1px white;
    text-aligncenter;
    font-weightbold;

     

    15
    Jeudi 16 Février 2012 à 12:47

    Remplace le 150px par une valeur plus grande ;)

    16
    Jeudi 16 Février 2012 à 17:37

    Ils ne sont toujours pas sur la même ligne.... Momokoi aparès mais il ne se met pas sur la même ligne que que Le site.....

    17
    Jeudi 16 Février 2012 à 17:38

    @Mochi : Tu peux me laisser regarder, je peux peut-êter t'aider ;P

    18
    Jeudi 16 Février 2012 à 17:42

    Te laisser regarder? C'est à dire?

    19
    Jeudi 16 Février 2012 à 17:43

    Mets-le sur ton blog, sur une page et donnes-moi le lien en MP que je regarde ce qu'il se passe.

    20
    Jeudi 16 Février 2012 à 17:46

    Mettre quoi sur mon blog ??*moi être bêtre, moi avoir raison hein?*

    21
    Jeudi 16 Février 2012 à 17:47

    Installes le menu sur une page de ton blog et montres-moi la page que je puisse voir où ça cloche s'il te plaît.

    22
    Jeudi 16 Février 2012 à 17:56

    Le bug ne vient pas du css, je viens de tester.

    Mais je ne comprend pas ce que tu veux dire par: " il ne se met pas sur la même ligne que que Le site....."

    23
    Jeudi 16 Février 2012 à 18:04

    J'espere avoir été plus claire...

    24
    Jeudi 16 Février 2012 à 18:32

    bizarre... Je peux voir ton html?

    25
    Jeudi 16 Février 2012 à 18:38

    Ok :

    <div id="coulissant"><img style="float: left;" src="http://data0.lo.gs/mochi-test-temporaire/perso/onglet%20colissant02.jpg" alt="" />

    <div class="bout">Navigation</div>

    <a href="http://mochiblog.revolublog.com/le-site-c17008951">Clique ICI</a></div>

    <div id="coulissant" style="top: 140px;"><img style="float: left;" src="http://data0.lo.gs/mochi-test-temporaire/perso/onglet%20colissant02.jpg" alt="" />

    <div class="bout">Momokoi</div>

    <a href="http://mochiblog.revolublog.com/coin-tsugunaga-momoko-c17033100">Clique ICI</a></div>

    26
    Jeudi 16 Février 2012 à 19:09

    Le souci vient de l'image, là je vais manger, je t'aidera un peu plus tard si Nagalia ne le fait pas

    27
    Mercredi 22 Février 2012 à 14:54

    @ Mochi : J'ai eu le même problème, mais parce que le mot (" navigation" dans ton cas) était trop long. J'ai changé par "Navig." et tout est redevenu normal

    J'ai aussi un problème concernant les onglet : il m'est impossible de mettre une image dedans. Elle apparait , mais c'est un logo d'erreur. Ce n'est pas n rapport avec l'image elle-même, j'ai essayé avec différent hébergeur t sous différents formats (.gif  ; .png ; ...) 

    Voilà mon html :

    <div id="coulissant">

    <div class="bout">Pr&eacute;s.</div>

    <img src="http://hpics.li/653b3b4" alt="" /> Jool</div>

    <div id="coulissant" style="top: 140px; background: white 100% 50%;">

    <div class="bout">Navig.</div>

    <p>&nbsp;<a href="http://jool.eklablog.com/articles-c17320527">Articles</a></p>

    <p><a href="http://jool.eklablog.com/articles-c17320527"></a>&nbsp;<a style="background-color: white;" href="http://jool.eklablog.com/texte-made-in-moi-c17320539">Textes - Made In Moi</a></p>

    <p><a style="background-color: white;" href="http://jool.eklablog.com/texte-made-in-moi-c17320539"></a><span style="background-color: white;">&nbsp;</span><a style="background-color: white;" href="http://jool.eklablog.com/my-trip-in-usa-c17516634">My Trip In USA &hearts;</a><span style="background-color: white;">&nbsp;</span></p>

    <p><span style="background-color: white;">&nbsp;</span><a style="background-color: white;" href="http://jool.eklablog.com/gallery-c17321777">Gallery</a></p>

    </div>

    Merci :) 

    28
    Vendredi 2 Mars 2012 à 14:55

    je n'ai rien compris

    29
    Lou MinHee Profil de Lou MinHee
    Dimanche 11 Mars 2012 à 11:40

    This is a joke ?

    j'ai rien compris >_>

    30
    Dimanche 11 Mars 2012 à 14:53

    C'est dommage,j'aimerais tellement le faire,mais j'ai pas beacoup compris et ca marche pas quand j'ai essayer...

    31
    Dimanche 11 Mars 2012 à 16:47

    Jool : Met ça pour l'image

    <img src="http://img11.hostingpics.net/pics/113647oeilmoi1.gif" alt="" width="50" height="32" /> 

    Si vous ne comprenez vraiment pas et que vous voulez quand même faire ça, copier le code d'exemple dans votre css et dans un module simple. Puis voyez ce que vous voulez modifier.

    32
    Dimanche 11 Mars 2012 à 20:24

    D'accord je vais voir.Merci!

    33
    LalaGaga Profil de LalaGaga
    Mercredi 14 Mars 2012 à 19:47

    Hepl me TAT

    J'y arrive pas ;A;

    34
    Mercredi 14 Mars 2012 à 20:07

    Un peu plus de précision s'il te plait ;)

    QU'est ce que tu n'arrive pas à faire?

    35
    LalaGaga Profil de LalaGaga
    Mercredi 14 Mars 2012 à 20:11

    J'ai rien compris et en plus le code d'exemple marche pas TT^TT

    36
    Mercredi 14 Mars 2012 à 20:13

    Tu ne vois pas onglets coulisser ICI ?

    37
    LalaGaga Profil de LalaGaga
    Mercredi 14 Mars 2012 à 20:17

    Supprime dans ma phrase le code d'exemple marche pas xD

    38
    Mercredi 14 Mars 2012 à 20:22

    ^^

    Donc, si le code marche, je pense que le mieux pour comprendre comment ça fonctionne est de copier le css dans ton css et  de mettre le html dans un module simple de ton blog. Bidouille ensuite le css pour voir ce que tu veux modifier ;)

    39
    LalaGaga Profil de LalaGaga
    Mercredi 14 Mars 2012 à 20:40

    Super , j'ai réussis dans mon blog de test merci ^^

    Je pourrais ajouter des choses a mon blog grace a toi *^*

    Merci , Nagalia *s'incline et sort*

    40
    Mercredi 14 Mars 2012 à 20:43

    De rien =D

    41
    Lou MinHee Profil de Lou MinHee
    Jeudi 15 Mars 2012 à 09:46

    en fait c'que j'ai pas compris c'est que le module simple, aprés, on en fait quoi ? parce que ça fait moche aprés é_è

    42
    Lou MinHee Profil de Lou MinHee
    Jeudi 15 Mars 2012 à 10:08

    j'arrive paaaaaaaaaas >_<

     j'essaye de faire un menu en haut à droite (donc j'ai remplacer des trucs et tout) mais ça rend pas ce que ça devrait rendre u_u'

     

    CSS :

    #coulissant {
    z-index99;
    positionfixed;      
    height150px;         
    width80px;          
    top130px;              
    right40px;              
    -webkit-transition-duration0.3s;
    -moz-transition-duration0.3s
    transition-duration0.3s

    #coulissant:hover
    bottom-1px;
    -webkit-transition-duration0.5s;
    -moz-transition-duration0.5s;
    transition-duration0.5s
    }


    HTML :

    bah quand je le met, ça m'enlève Style="top Xpx (j'ai changer le X par une valeur...)

    avant :

     <div id="coulissant">TEST</div>

    <div id="coulissant" style="top: Xpx">TEST</div>


    aprés :

    <div id="coulissant">TEST</div>

    <div id="coulissant">TEST</div>


    c'est quoi ce bug ? >_<

    43
    Jeudi 15 Mars 2012 à 19:06

    Un conseil, met un fond et une bordure quand tu crée une classe, pour voir comme ça rend, avant de vraiment travailler le design.

    Alors, je t'ai fais ton code avec les erreurs en rouge

    #coulissant {z-index99;
    backgroundblack;
    border1px solid white;
    colorwhite;
    positionfixed;      
    height150px;         
    width80px;          
    top-100px;   /*marge négative pour cacher l'onglet*/           
    right40px;              
    -webkit-transition-duration0.3s;
    -moz-transition-duration0.3s
    transition-duration0.3s

    #coulissant:hover
    top30px;    /*Avec hover, on change par rapprot à l'état normal, donc ici top et non bottom*/
                  /*marge positive pour afficher l'onglet*/

    -webkit-transition-duration0.5s;
    -moz-transition-duration0.5s;
    transition-duration0.5s
    }

    <div id="coulissant" style="right: 140px;">TEST</div>

    <div id="coulissant">TEST</div>

    Si tu veux mettre tes onglets à droite, c'est sur le promier qu'il faut changer. Et mettre une marge différente à droite, et pas en haut pour qu'ils ne se chevauche pas ;)

    44
    Vendredi 16 Mars 2012 à 13:57

    Merci!Ca marche!

    45
    Lou MinHee Profil de Lou MinHee
    Vendredi 16 Mars 2012 à 15:37

    Okey ^^'

    ça m'a l'air assez complexe mais j'essaye xD

    46
    Lou MinHee Profil de Lou MinHee
    Vendredi 16 Mars 2012 à 15:44

    Et aussi, peux-tu m'expliquer plus en détails ça ?

    <div id="coulissant">
    <img style="float: left;" src="http://data0.ek.la/test-blog/mod_articles646820_1.jpg?2008" />
    <div class="bout">Accueil</div>
    Bienvenu sur mon blog!
    </div>

    <div id="coulissant" style="top: 140px; background: url('http://data0.eklablog.com/merry0712/mod_article1651277_5.jpg?9340') 100% 50%;">
    <div class="bout">Galerie</div>
    <a href="/onglets-coulissant-a39580075#">Clique ICI</a>
    </div> 

    47
    Nagalia deco
    Vendredi 16 Mars 2012 à 16:24

    Si tu regarde ici, c'est accueil et galerie. J'ai créée une autre class dans le css que j'ai appelé "bout" ou j'ai retourner le texte

    .bout { -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    float:right;
    margin-right: -10px;
    height: 80px;
    line-height:80px;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #D1FFE9
    }

    48
    Lou MinHee Profil de Lou MinHee
    Vendredi 16 Mars 2012 à 16:34

    Nag' is not connected .__.'

    okey ^^

    J'viens de capter xD

    49
    Nagalia deco
    Vendredi 16 Mars 2012 à 17:01

    je suis pas chez moi et j'ai la flemme de me connecter XD

    50
    Lou MinHee Profil de Lou MinHee
    Vendredi 16 Mars 2012 à 17:05

    xD

    pourtant, ça met que deux minutes pour se connecter u_u'

    Parce que j'ai une question (tréééééééééés importante par rapport au css) : http://alona.eklablog.net/taverne-a38982154

    51
    Vendredi 16 Mars 2012 à 17:10

    c'est bon, je suis co XD

    52
    Lou MinHee Profil de Lou MinHee
    Vendredi 16 Mars 2012 à 17:13

    j'ai vu ça xD

    53
    Lou MinHee Profil de Lou MinHee
    Samedi 17 Mars 2012 à 13:19

    c'est quoi ".bout" ?

    parce que j'ai chercher dans les classes et pseudo-classes et j'ai pas trouver x_x"

    54
    Samedi 17 Mars 2012 à 14:11

    C'est le nom que j'ai donné au texte mis en "bout" de l'onglet ;)

    55
    Lou MinHee Profil de Lou MinHee
    Samedi 17 Mars 2012 à 14:39

    okey =)

    56
    Dimanche 25 Mars 2012 à 19:55

    Bonjour Nagalia

    Avant tout,merci pour tout le partage de ces codes.

    J'aimerai mettre un onglet en haut à droite.

    J'ai réussi pour le code css par contre j'ai des difficultés pour placer mes textes.J'ai beau avoir testé  de  tous les côtés,je n'y arrive pas .J'aimerai obtenir quelque chose comme ça au niveau des placements de texte:

    a

    J'ai bien sur hébergé mon image que voilà:

    http://ekladata.com/9v1cf2hL9-9hdwQMUbR_USDsJt0/filleonglet.png

    Voici mon code css;

    #coulissant { z-index: 99;
      position: fixed;
     height: 170px;
     width: 110px;
      top: -130px;
      right: 40px;
     background: #e3c1b7;
      border: 2px solid #feffff;
     box-shadow: 0 0 10px #feffff, inset 0 0 5px #feffff;
      border-radius: 10px 10px 10px 10px;
      -webkit-transition-duration: 0.3s;
     -moz-transition-duration: 1s;
      transition-duration: 1s;
     }
      #coulissant:hover{ top: -2px;
     -webkit-transition-duration: 0.5s;
      -moz-transition-duration: 1s;
     transition-duration: 1s;
     }
     #coulissant img {max-height: 100px;
      padding-top: 25px;
      margin-right: 5px;
      }
     .bout { -webkit-transform: rotate(50deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(50deg);
      transform: rotate(50deg);
     float:top;
      margin-right: 70px;
     height: 40px;
      line-height:40px;
     font-size: 20px;
     font-weight: lighter;
     text-shadow: 0px 0px 1px #feffff
     


    Pour le code html:

    <div id="coulissant"><img style="float: left;" src="http://ekladata.com/9v1cf2hL9-9hdwQMUbR_USDsJt0/filleonglet.png" alt="" />
    <div class="bout">Kenavo</div>
    Merci de votre visite</div>

    Peut être pourras- tu m'aider.Je t'en remercie d'avance.

    Bonne semaine à tous

    57
    Lou MinHee Profil de Lou MinHee
    Lundi 26 Mars 2012 à 13:28

    Pour centrer ton texte et modifier la police du texte tu dois ajouter ça dans ton CSS (moi, je le met tout de suite après "#coulissant") :

    CSS :

    #coulissant z-index99;

    text-align:  center;

     font-familyNOM DE LA POLICE;

      positionfixed
     height170px
     width110px;
      top-130px;
      right40px
     background#e3c1b7;
      border2px solid #feffff
     box-shadow10px #feffffinset 5px #feffff;
      border-radius10px 10px 10px 10px;
      -webkit-transition-duration0.3s
     -moz-transition-duration1s;
      transition-duration1s
     }
      #coulissant:hovertop-2px
     -webkit-transition-duration0.5s;
      -moz-transition-duration1s
     transition-duration1s
     
     #coulissant img {max-height100px;
      padding-top25px;
      margin-right5px;
      
     .bout -webkit-transformrotate(50deg)
     -moz-transformrotate(0deg)
     -o-transformrotate(50deg);
      transformrotate(50deg)
     float:top;
      margin-right70px
     height40px;
      line-height:40px
     font-size20px
     font-weightlighter
     text-shadow0px 0px 1px #feffff
     

     

    Bon, maintenant, le HTML : pour sauter une ligne, il faut mettre "&nbsp;" (sans les guillemets) avant chaque mots que tu veux mettre a la ligne. N'oublie pas de centrer ce qui apparaitra sur ton module simple avec l'icone de centrage. (je vais inserer une capture d'écran...)

    HTML :

    <div id="coulissant" style="text-align: center;"><img style="display: block; margin-left: auto; margin-right: auto;" src="http://ekladata.com/9v1cf2hL9-9hdwQMUbR_USDsJt0/filleonglet.png" alt="" />

    <div class="bout">&nbsp;</div>

    <div class="bout" style="text-align: center;">Merci de votre visite</div>

    <div class="bout" style="text-align: center;">Kenavo</div>

    </div>

     

     

    Si tu as une question, ou que ça ne marche pas, n'hésite pas à la poser ;)

    58
    Lou MinHee Profil de Lou MinHee
    Lundi 26 Mars 2012 à 13:32

    Ah oui, j'allais oublier la capture d'écran :

    jrt

     

    Edit : le signe du sexe masculin n'est pas fait exprés --' (j'viens de le remarquer xD)

    59
    Lundi 26 Mars 2012 à 20:31

    Bonsoir,

    Merci infiniment Erenwë

    C'est tout simplement parfait,j'ai compris à présent mon erreur.Merci pour ces explications.

    Bonne semaine à tous

     

    60
    Mardi 27 Mars 2012 à 18:22

    ...comment on fait pour écrire dans l'image ?

    j'sens que j'commence à me perdre avec le texte XD

    61
    Mardi 27 Mars 2012 à 18:44

    Pour encrire "dans" l'image, il faudrait la mettre en arrière plan, donc en background. Dans le html avec l'attribut style

    <élément style="background: url("IMAGE");">Ton texte</élément>

    62
    Lou MinHee Profil de Lou MinHee
    Mardi 27 Mars 2012 à 18:50

    De rien Aimielisa ^^

    j'avais peur que ça soit brouillon mais c'est bon ;) je commmence à gerer en html/css moi 8)

    63
    Mercredi 28 Mars 2012 à 16:59

    j'ai mis ça dans mon html:

    <div id="coulissant" style="background: url("http://ekladata.com/b4wNFgGChix4vlVmyEyEyTCvbAM.png");">DU TEXTE; DES IMAGES...</div>

    sauf que quand je fais 'mettre à jour' puis 'enregistrer', j'essaye l'onglet coulissant, y a le texte mais pas l'image et quand j'reviens éditer le truc, sa donne (en html) :

    <div id="coulissant" style="background: url(;">DU TEXTE; DES IMAGES...</div>

    ; y a plus le url d'mon image :s

    --

    j'peux pas plutot mettre l'image en background dans le css ? (sauf si avec le html c'est plus simple)

    64
    Lou MinHee Profil de Lou MinHee
    Mercredi 28 Mars 2012 à 17:02

    oui, bien sûre, tu peux ^^

    65
    Mercredi 28 Mars 2012 à 18:52

    Sa dépend si tu veux l'image en fond dans tout tes onglet (dans ce cas c'est plus simple de la mettre dans le css) mais si tu ne veux la mettre que dans un seul onglet, je trouve ça plus simple de la mettre dans le html. Sauf si ça ne marche pas ^^'

    66
    Jeudi 29 Mars 2012 à 18:54

    et après on peut le cacher le module simple ????

    merci pour le tuto, j'ai REUSSI

    67
    Jeudi 5 Avril 2012 à 20:37

    ok et sinon, où est mon erreur dans le html ?

    68
    Lou MinHee Profil de Lou MinHee
    Vendredi 6 Avril 2012 à 17:42

    il me semble qu'il n'y en ai pas, après, c'est pas moi la pro xD

    69
    Dimanche 15 Avril 2012 à 20:25

    J'arrive pas a mettre un lien sur le menu ...

    70
    Dimanche 15 Avril 2012 à 21:41

    j'arrive à faire un onglet coulissant mais pas avec l'image en background avec les texte x:

    71
    Lou MinHee Profil de Lou MinHee
    Dimanche 15 Avril 2012 à 22:27

    Kristen, tu va dans ton menu simple, et là où y'a tout les mot que tu a mis pour le menu coulissant, tu met un mot et tu le lie avec la sorte d'icone chaine, normalement, ça marche, sinon, je vois pas, et fait bient attention a être DANS le code HTML pour le menu coulissant, et pas a l'exterieur...

    Groovie, je comprend pas, tu peux mieux espliquer ? ^^

    72
    Lundi 16 Avril 2012 à 11:03

    url('http://data0.ek.la/fashionhouse/mod_articles17958647_4f8bdfe76d039.jpg?4270') 100% 50%;">

    <div class="bout">VIP</div>

    <a href="#">Clique ICI</a></div>

     

    Voila mon code , quelqu'un peux me l'arranger pour que le lien aille ici :

    http://fashionhouse.ek.la/club-vip-c17958979

    Merci d'avance ! :)

    73
    Lundi 16 Avril 2012 à 11:34

    bin.. soit j'arrive à mettre l'image soit j'arrive à mettre le texte et moi j'veux les 2 avec l'image en background (donc le texte par dessus)

    ...j'sais pas si c'est clair xD

    74
    Lou MinHee Profil de Lou MinHee
    Lundi 16 Avril 2012 à 12:09

    Groovie, tu veux mettre l'image que pour un menu ? (ça, je sais pas faire >_>)

    Ou alors sur tout les menus, dans ce cas, c'est

    #coulissant: {backgroud: url(là, tu met ton url de l'image entre parenthèses); }

    Kristen, tu peux me donner tout ton code html s'il te plait ? comme ça, je verrais s'il n'y a pas d'erreurs ^^

     

    75
    Lundi 16 Avril 2012 à 12:33

    c'est le code ! :)

    Je dois y aller , je vais en bretagne !

    BONNE VACANCES !

    76
    Lou MinHee Profil de Lou MinHee
    Lundi 16 Avril 2012 à 13:45

    Bonnes vacances ^^

    Heu... mais c'est normal que tu n'y arrive pas ^^

    Il faut ajouter plein de trucs, voici un code qui devrais aller (après, ça dépend du nombre de menus coulissants, là, je te donne pour deux menus qui sont en haut) :

    <div id="coulissant" style="right: 210px;">CONTENU</div>

    <div id="coulissant"><a href="http://fashionhouse.ek.la/club-vip-c17958979"><img src="http://data0.ek.la/fashionhouse/mod_articles17958647_4f8bdfe76d039.jpg?4270'" alt="j" width="148" height="75" /></a></div>

     

    Voilà ^^

    77
    Lundi 16 Avril 2012 à 13:55

    en faites j'y suis arrivé avec ce que t'as mis avant, j'ai re-bidouillé le css et le html (pour le nombre d'onglets coulissants j'en voulais qu'un xD)

    merci de ton aide :3

    78
    Lou MinHee Profil de Lou MinHee
    Lundi 16 Avril 2012 à 14:05

    De rien :3

    Du coup, t'as mis le background en css et c'était bon ?

    79
    Lundi 16 Avril 2012 à 14:12

    oui c: après j'ai arrangé le truc niveau largeur (css) puis niveau texte (html).

    si tu veux voir -> http://fandemanga.eklablog.fr/

    80
    Lou MinHee Profil de Lou MinHee
    Mardi 17 Avril 2012 à 17:27

    J'adore le thème *o*

    81
    Mardi 17 Avril 2012 à 19:58

    mici (3

    82
    Jeudi 19 Avril 2012 à 19:25
    nessa94

    bonjour, on ne se connait pas mais j'ai trouvé ce tuto en cherchant sur le net , j'ai mis le lien dans mon dernier article ici http://0z.fr/Vm28s ainsi qu'un imprime écran de votre menu coulissant , encore bravo ce site est très beau :)

     

     

    83
    Samedi 12 Mai 2012 à 13:57

    Je ne sais pas si j'ai déjà laissé un commentaire, mais.. B.R.A.V.O xD

    84
    Dimanche 20 Mai 2012 à 14:20

    Bonjour, je voulais juste laisser un commentaire pour te remercier pour tout ces tutos qui rendent nos blogs plus jolies et plus intéractifs ! :) Bonne continuation à toi ! 

    Geist.

    85
    Samedi 26 Mai 2012 à 22:30

    bonsoir

    j'ai besoin de votre aide

    voila j'ai fait un copié coller de l'exemble personalisable  du css et du htlm

    j'aimerai savoir comment fair pour en mettre 2 de plus

    merci d'avance

    ps supére ton blog merci pour ton partage

     

     

    86
    Dimanche 27 Mai 2012 à 09:31

    coucou

    j'ai finalement réussi

    bonne journée

    87
    Samedi 2 Juin 2012 à 20:38

    Autre tuto sur le même principe avec de petites différences tout de même : http://le-blog-facile.ek.la/menu-lateral-coulissant-p374738

    88
    ♥ Princesse Peach ♥ Profil de ♥ Princesse Peach ♥
    Samedi 2 Juin 2012 à 21:28

    Je n'ai rien comprie ^^' je me suis perdu ^^'

    voila se que j'ai fait au juste ...... j'ai commencer par coller le code css dans "modifier theme" qui resemmble a sa =

    #coulissant {
    z-index: 99;
    position: fixed;
    height: Xpx;
    width: Xpx;
    left: -Xpx;
    top: Xpx;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }
    #coulissant:hover{
    left: -1px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s
    }

    J'ai biensur modifier les Xpx .........

    Ensuite j'ai crée une page et j'ai coller le code html qui est =

     <div id="coulissant">DU TEXTE; DES IMAGES...</div>
    <div id="coulissant" stlyle="top: Xpx">DU TEXTE; DES IMAGES...</div>
    <div id="coulissant" stlyle="top: Xpx">DU TEXTE; DES IMAGES...</div> <div id="coulissant" stlyle="top: Xpx">DU TEXTE; DES IMAGES...</div>

    Mais ensuite je ne sais plus quoi faire ........... j'ai mi l'url de mon image a la place de "DES IMAGES" mais sa ne me les fait pas arrèter .....

    Aider moi !! SVP !!!!

    Merci de vos réponce ^^

     

     

    89
    Samedi 2 Juin 2012 à 21:37

    Tu peux me montrer ton code avec les Xpx modiés s'il te plait?

    90
    ♥ Princesse Peach ♥ Profil de ♥ Princesse Peach ♥
    Samedi 2 Juin 2012 à 21:44

    oui ...............

     

    voila :

    #coulissant {
     z-index: 99;
     position: fixed;
    height: 20;
    width: 100;
    left: -80;
    top: 10;
    -webkit-transition-duration: 0.3s;
     -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }
    #coulissant:hover{
    left: -1px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s
     }

    J'ai mi sa ^^' c'est bon ou je me suis tromper ??

    91
    Samedi 2 Juin 2012 à 21:52

    Laisse les px, ça marchera beaucoup mieux ;)

    #coulissant {
    z-index: 99;
    position: fixed; 
    height: 20px
    width: 100px
    left: -80px
    top: 30px
    -webkit-transition-duration: 0.3s;
     -moz-transition-duration: 0.3s; 
    transition-duration: 0.3s; } 

    #coulissant:hover{ 
    left: -1px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s}

    Pour "top", j'ai modifié ta valeur à 30px, sinon le premier onglet est caché par la barre d'outil

    92
    ♥ Princesse Peach ♥ Profil de ♥ Princesse Peach ♥
    Samedi 2 Juin 2012 à 22:01

    Ok merci ^^

    et pour le code html tu peu m'expliquer stp ?

    93
    Samedi 2 Juin 2012 à 22:47

    HS : Princesse Peach -> c'est toi qui a fait ton avatar ?? *.*

    94
    ♥ Princesse Peach ♥ Profil de ♥ Princesse Peach ♥
    Samedi 2 Juin 2012 à 23:16

    Non je l'ai trouver pk ?? ^^

    95
    Dimanche 3 Juin 2012 à 13:22

    Peach est trop mignonne comme ça *w*

    96
    Dimanche 3 Juin 2012 à 14:07

    Nagalia, je te suggère une correction. Dans ton code, comme dans celui d'ex Eklatuces, il y a plusieurs id identiques. Même si ça fonctionne, le codage n'est pas conforme W3C. Les remplacer par des class serait meilleur ^^

    97
    ♥ Princesse Peach ♥ Profil de ♥ Princesse Peach ♥
    Dimanche 3 Juin 2012 à 14:28

    Merci groovie ^^

    98
    Dimanche 10 Juin 2012 à 13:29

    J'ai essayé mais mon onglet accueil est caché par un onglet où il y a marqué "TES IMAGES, TON TEXTE", ou un truc dans le genre >_>. J'ai utilisé exactement le même code que Nagalia, pour le CSS, et pour le HTML. Svp aidez moi je vais devenir folle x'D

    99
    Lou MinHee Profil de Lou MinHee
    Dimanche 10 Juin 2012 à 13:31

    Tu l'es déjà.

    100
    Dimanche 10 Juin 2012 à 13:31

    Ca m'aide merci =_=

    101
    Lou MinHee Profil de Lou MinHee
    Dimanche 10 Juin 2012 à 13:34

    Bref, regarde dans mes codes CSS sur mon blog : Accueil - (je te met la perm') Regarde dans modifier le thème CSS

     

    102
    Dimanche 10 Juin 2012 à 13:35

    XD

    Princesse Peach => de rien x)

    103
    Dimanche 10 Juin 2012 à 13:39

    Dans le html:

     <div id="coulissant">DU TEXTE; DES IMAGES...</div>

     <div id="coulissant" stlyle="top: Xpx">DU TEXTE; DES IMAGES...</div>

    Remplace le X rouge par la hauteur du 1er onglet + les marges éventuelles

    104
    Dimanche 10 Juin 2012 à 14:01

     

    <div id="coulissant">DU TEXTE; DES IMAGES...</div>

     <div id="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>

    t'avais écris "stlyle" xD

     

    105
    Dimanche 10 Juin 2012 à 15:17

    Sorry ^^'

    106
    Dimanche 10 Juin 2012 à 17:23

    Oh merci beaucoup Erenwë, Nagalia et Groovie !! Je suis vraiment trop stupide d'avoir fait une erreur pareille !! xD

    107
    Dimanche 10 Juin 2012 à 18:20

    de rien x3 j'ai pas fait grand chose xD

    108
    Dimanche 10 Juin 2012 à 18:26

    Bah je te remercie quand même xD

    109
    Dimanche 10 Juin 2012 à 18:27

    Bonjour!
    Merci bien pour le tuto! :)

    Par contre je rencontre un problème :
    • J'aimerais que les menus ne sois pas fixes, qu'il reste juste dans l'header (je ne peux pas utilisé les menus genre "déconnection [...]" car il sont deja pris! :/) Par quel mot dois-je remplacer "fixed"?

    Merci d'avance! :)

    110
    Dimanche 10 Juin 2012 à 18:37

    Kuroshitsuji => remierciements acceptés xD

    Sayabi => absolute

    111
    Dimanche 10 Juin 2012 à 18:38

    Merci beaucoup! :D

    112
    Dimanche 10 Juin 2012 à 18:39

    Kuroshitsuji => remierciements acceptés xD

    Sayabi => absolute mais si tes onglets sont sur ton menu t'as qu'à changer les valeurs que t'as mise

    Edit : désolé pour le flood j'voulais juste éditer mon comm x')

    113
    Dimanche 10 Juin 2012 à 18:58

    Par contre, est-ec qu'on peut accumuler deux menus, un à gauche et un à droite ?

    114
    Dimanche 10 Juin 2012 à 19:06

    bin oui suffira de faire 1 code pour chaque ("Si vous voulez les onglets à droiteremplacez "left" par "right"

    Si vous voulez les onglet en haut  gaucheinversez "top" et "left"
    Si vous voulez les onglets en haut à droiteremplacez "top" par "right" et "left" par "top"")

    115
    Dimanche 10 Juin 2012 à 19:12

    Ah okay ! Merci ! :D

    116
    Dimanche 10 Juin 2012 à 19:13

    de rien x)

    117
    Dimanche 10 Juin 2012 à 19:15

    Et maintenant j'ai un nouveau problème (et oui encore, je suis pas douée x'D). Quand je passe mon curseur sur un des 4 onglets, l'onglet sur lequel mon curseur est posé se déroule, et le premier onglet aussi. Ca me le faisait pas avant que je modifie un code, mais j'ai annulé la modification, enregistré, actualisé la page, et ça fait toujours pareil :/.

    118
    Dimanche 10 Juin 2012 à 19:17

    J'ai peut-être la solution:

    - Essais de mettre une plus grande marge entre tes onglets ...

    ou

    - Lance ton Ordinateur par la fenêtre ...

    Au choix.

    119
    Dimanche 10 Juin 2012 à 19:17

    Bin t'as bien fait un code pour chaque côté (niveau css ET html) ?

    120
    Dimanche 10 Juin 2012 à 19:18

    xD j'aime le "- Lance ton Ordinateur par la fenêtre ...

    Au choix."

    121
    Dimanche 10 Juin 2012 à 19:23

    xD en fait j'ai juste fait un menu pour le moment, je vais redémarrer l'ordi et si ça marche pas je le balance pas ! Il m'est trop précieux ♥ .

    122
    Dimanche 10 Juin 2012 à 19:26

    xD à un moment j'ai cru que t'avais marqué "si ça marche pas je le balance !" dommage <= j'déconne x)

    123
    Dimanche 10 Juin 2012 à 19:28

    @Kuroshitsuji -> Sur quel blog ?

    @Nagalia -> Je ré-itère ma remarque, plusieurs id avec le même nom dans une même page ne sont pas conformes w3c. Il serait souhaitable de les remplacer par des classes

    124
    Dimanche 10 Juin 2012 à 19:30

    Sur ce blog : http://brouillon.lo.gs/.

    Edit : j'ai redémarré mon ordinateur, suis allée sur mon blog et ça bug toujours :[.

    Réédit : j'ai trouvé, le problème venait d'un </div> que j'avais oublié, ça remarche !:D

    Rééédit : ça remarche plus --'

    Fin des édit : en effet un  </div> manquait et je l'avais pas mis à la bonne place, problème réglé ! :)

    125
    Dimanche 10 Juin 2012 à 20:39

    Papasti: J'avais pas vu ton commentaire ^^'
    Effectivement, je sais pourquoi j'ai mis des id, mais je comprend pas pourquoi ça marche quand même... 

    126
    Mardi 12 Juin 2012 à 22:02

    Coucou ! Je suis désolé si je te dérange, mais j'ai un problème avec le tutoriel :

    J'ai suivi à la lettre, aucun problème jusqu'à la deuxième partie (où il y a écrit "div class... DES TEXTES DES IMAGES etc...").

    Je voulais mettre des images en guise de cases, mais dès que j'entre l'URL sur le code HTML voilà ce que ça me fait :

    http://blog-test-misskirarin.lo.gs/

    Les liens apparaissent au lieu des images, il se chevauchent...

     

    Voilà les codes au cas-où (partie CSS)

    .coulissant {
    z-index99;
    positionfixed;      
    height176px;         
    width100px;          
    left-156px;              
    top180px;              
    -webkit-transition-duration0.3s;
    -moz-transition-duration0.3s
    transition-duration0.3s

    .coulissant:hover
    left-1px;
    -webkit-transition-duration0.5s;
    -moz-transition-duration0.5s;
    transition-duration0.5s

    Partie HTML

    <div class="coulissant">http://data0.eklablog.com/wonderworldgraph/perso/theme%20juillet/boite%20home.png</div>

    <div class="coulissant" style="top: Xpx;">http://data0.eklablog.com/wonderworldgraph/perso/theme%20juillet/boite%20livre%20d-or.png</div>

    <div class="coulissant" style="top: Xpx;">http://data0.eklablog.com/wonderworldgraph/perso/theme%20juillet/boite%20partners.png</div>

     

    Les URLS des images en guise de case (au cas où)

     

    -> http://data0.eklablog.com/wonderworldgraph/perso/theme%20juillet/boite%20partners.png

    -> http://data0.eklablog.com/wonderworldgraph/perso/theme%20juillet/boite%20livre%20d-or.png

    -> http://data0.eklablog.com/wonderworldgraph/perso/theme%20juillet/boite%20home.png

     

    Pourrai-tu m'aider s'il te plaît ?

    Merci d'avance, 

    Kira.

    127
    Mercredi 13 Juin 2012 à 08:03

    Kira, ton blog est protégé. On ne peut donc pas voir le menu.

    Ensuite, dans la partie HTML tu dois remplacer top:Xpx par des vraies valeurs. Exemple top:180px pour le premier div, top:280px pour le second etc.

    128
    Mercredi 13 Juin 2012 à 09:42

    Et pour voir les images:

    A la place du lien que tu as mis, met ce code:

    <img src="URL DE TON IMAGE"/>

    129
    Single Profil de Single
    Mardi 19 Juin 2012 à 09:03

    Bonjour !

    Je suis nouvelle sur eklablog, et grâce àce site mon blog est super !!! :]♥♥♥ Merci beaucoup !

    Mais... J'aimerais beaucoup faire ca, les modules sur le côté, mais je n'ai absolument rien compris à comment il fallait s'y prendre... Est-ce que quelqu'un pourrais le faire pour moi ? Ou Nagalia ?

    Parce que j'aimerais vraiment mais je n'y arrive pas !!! Si quelqu'un peut m'aider merci d'avance ! :'(

    130
    Mardi 19 Juin 2012 à 18:26

    Coucou Single ! Déjà, je pense qu'il est plus important de le comprendre que de se le faire faire. Alors, après je ne sais pas, il faut demander à Nagalia si elle peut te le faire, mais je peux me charger de t'exlpiquer ! Qu'est-ce qui ne marche pas au juste ? Qu'est-ce que tu n'as pas compris ?

    131
    Single Profil de Single
    Mardi 19 Juin 2012 à 18:45

    Et bien je n'ai pas compris tout ces petits codes comme 3.O s, ou Xpx, ...

    J'ai bien lu ce qu'il fallait marquer à la place, mais je ne comprend pas les mesures. --"

    Par exemple : -moz-transition-duration: 0.5s;  Je ne comprends absolument rien à ce codage... :$

    132
    Mardi 19 Juin 2012 à 19:20

    Alors il me semble que ce doit être le temps que ça met à se dérouler ! Xpx, c'est l'emplacement. Je n'ai toujours pas compris comment le trouver, du coup je te conseille de regarder sur l'exemple ! Tu veux le positionner où ton menu ?

    133
    Mardi 19 Juin 2012 à 19:25

    *s'incruste*

    "Top indique à combien de px du haut de la page sont placé les onglets

    Left est une marge négative servant à masquer l'onglet. Si vos onglets font 100px en largeur, mettez environ -80px à left, pour laisser dépasser 20px. 

    Au survol (hover) la valeur de left indique de combien de px dépasse l'onglet. Je vous conseil de laisser à -1px.

    Si vous voulez les onglets à droiteremplacez "left" par "right"
    Si vous voulez les onglet en haut  gaucheinversez "top" et "left"
    Si vous voulez les onglets en haut à droiteremplacez "top" par "right" et "left" par "top"

    "Je fais que citer xD

    134
    Single Profil de Single
    Mardi 19 Juin 2012 à 19:40

    Hmmm... Je pense que j'ai mieux compris. Est-ce que quelqu'un pourrait m'indiquer le code basique qu'on utilise ?

    135
    Mardi 19 Juin 2012 à 19:41

    Basiques ? Bin ils sont dans les 2 premiers cadres blancs de l'article 

    136
    Single Profil de Single
    Mardi 19 Juin 2012 à 20:38

    Nan, nan. Ce que je veux dire c'est par exemple le code avec les taille et les mesures déjà inscrites, car je n'arrive pas. Ca me met que le code n'est toujours pas bon ! --"

    137
    Mardi 19 Juin 2012 à 20:40

    Bin sinon dit moi où tu veux mettre tes onglets (ou ton onglet) par rapport à l'écran et dit moi ton code css x3

    138
    Mardi 19 Juin 2012 à 20:40
    139
    Single Profil de Single
    Mardi 19 Juin 2012 à 20:52

    En fait j'avais pensé à n truc un peu spécial... Mettre un seul onglet, super grand, avec une photo et une petit légende dessous. Sans lien ni rien, juste ca. Est-ce possible ?

    J'aimerais qu'il se trouve sur la gauche du blog à peu près au milieu de la longueur. :]

    Et c'est quoi le code Css x3 ?

    140
    Mardi 19 Juin 2012 à 21:03

    Tout est possible x) "Si vous voulez les onglet en haut  gaucheinversez "top" et "left""

    0_0 le code css c'est le code que tu mets dans... : apparence -> modifier le thème -> (tu descends en bas) Ajouter du CSS

    141
    Single Profil de Single
    Mercredi 20 Juin 2012 à 08:29

    J'aaaaaaarive pas ! Ca me met toujours que le code comporte une erreur... ><"

    Je réessaye une dernière fois alors... :$

    142
    Single Profil de Single
    Mercredi 20 Juin 2012 à 08:57

    Ca marcheeeeeeeee !

    Mais comment faire pour mettre de la bordure blanche autour par exemple ?

    143
    Mercredi 20 Juin 2012 à 09:02

    border: 2px solid #50B27C

    En rouge les choses que tu peux changer, à savoir l'épaisseur du contour et la couleur. Tu cherches la couleur dans la palette eklablog ou  :)

     

    144
    Single Profil de Single
    Mercredi 20 Juin 2012 à 09:09

    Ca ne marche pas. Ca me met seulement une bordure verte trop bizzare, et seulement sur le haut de l'image. J'ai essayé de la redmmensioner, mais la bordure est encore plus grande et seulement sur le haut de l'image. --"

    145
    Mercredi 20 Juin 2012 à 09:12

    Tu l'as mises où dans le code ? 

    146
    Mercredi 20 Juin 2012 à 09:46

    À moi de poser des questions maintenant èwé. Alors j'ai essayé deux menus, et ça me fait n'impooooorte quoi.

    Déjà de 1. je n'arrive pas à les placer à droite, enfin si, mais quand je passe le curseur ils se dupliquent et le duplicatat se téléporte tout à gauche. D: nous venons de faire la découverte du siècle ; le duplicatat d'onglets téléporteurs.

    De 2. Comment on fait pour mettre les menus dans le menu de droite et pas celui de gauche ? Ca me les met tous du même côté ! >w>

    147
    Mercredi 20 Juin 2012 à 10:01

     Si vous voulez les onglets à droiteremplacez "left" par "right"

    Si vous voulez les onglet en haut  gaucheinversez "top" et "left"

    Si vous voulez les onglets en haut à droiteremplacez "top" par "right" et "left" par "top"

    Top indique à combien de px du haut de la page sont placé les onglets

    Left est une marge négative servant à masquer l'onglet. Si vos onglets font 100px en largeur, mettez environ -80px à left, pour laisser dépasser 20px. 

    Au survol (hover) la valeur de left indique de combien de px dépasse l'onglet. Je vous conseil de laisser à -1px. "

     

     

    148
    Mercredi 20 Juin 2012 à 10:12

    Ca ne marche toujours pas, je ne sais pas ce que j'ai foutu avec ce code =__=. En plus maintenant j'ai rajouté le menu de gauche (je l'avais enlevé pour y voir plus clair) et les deux menus se confondent (j'ai mis le même contenu dans le HTML, je changerai après). Si tu veux aller voir ; http://brouillon.lo.gs/accueil-c18137487

    149
    Mercredi 20 Juin 2012 à 10:28

    en faite tu veux 2 menus alors faut pas avoir la même div dans le css ; pour ton premier menu, dans ton css on va dire que tu appelles .menu1 le 1er menu (celui de gauche pour ici) :

    .menu1 {
    z-index: 99;
    position: fixed;      
    height: Xpx;         
    width: Xpx;          
    top: -Xpx;              
    left: Xpx;              
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s; 
    transition-duration: 0.3s; 

    .menu1:hover{ 
    left: -1px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s
    }

    et du coup dans le html tu changes aussi le nom de la div ;

     <div class="menu1">DU TEXTE; DES IMAGES...</div>
     <div class="menu1" style="top: Xpx">DU TEXTE; DES IMAGES...</div>
     <div class="menu1" style="top: Xpx">DU TEXTE; DES IMAGES...</div>
    <div class="menu1" style="top: Xpx">DU TEXTE; DES IMAGES...</div> 

    et pareil pour le 2e menu.. et fait bien attention à inverser left et right pour ton menu de droite x3 (ce que j'ai appelé le 2e menu en faite xD)

    150
    Mercredi 20 Juin 2012 à 10:37

    Okay j'essaie ! :3

    151
    Mercredi 20 Juin 2012 à 10:45

    Il n'y a rien de plus simple que le CSS pour peu qu'on le comprenne un minimum.

    Pour ceux qui n'ont aucune notion, je leur conseille de lire le tuto du site du zero. C'est rapide et ça aide à comprendre les bases.

    Tuto ici:http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web-avec-html5-et-css3.html#part_13663

    152
    Mercredi 20 Juin 2012 à 10:45

    Ca marche ! Mais... Il se déplie plus ToT ! Je suis chiante désolée >w>. Voici le code : http://brouillon.lo.gs/le-code-css-a46975173 pour le css et le code http://brouillon.lo.gs/le-code-html-a46975521 pour le HTML. Je vais tuer l'ordi si ça ne marche pas è_é

    153
    Mercredi 20 Juin 2012 à 10:46

    D'habitude je me débrouille en CSS, mais c'est que là c'est un peu compliqué ._.

    154
    Mercredi 20 Juin 2012 à 12:39

    Dans quel menu ?

    .menu1 :hoverleft-2px
    -webkit-transition-duration1s;
    -moz-transition-duration1s
    transition-duration1s

    .menu2 :hoverleft-2px
    -webkit-transition-duration1s;
    -moz-transition-duration1s
    transition-duration1s

    Edit : Y a ça aussi :

    .menu2z-index99;
    positionfixed
    height80px
    width150px;
    left-130px;
    top:40px
    background#B7E5C7;
    border2px solid #0A0014
    box-shadow10px #0A0014inset 5px #0A0014;
    border-radius10px 10px 0;
    -webkit-transition-duration1s
    -moz-transition-duration1s;
    transition-duration1s
    }

    .menu1  z-index99;
    positionfixed
    height80px
    width150px;
    right-130px;
    top:40px
    background#B7E5C7;
    border2px solid #0A0014
    box-shadow10px #0A0014inset 5px #0A0014;
    border-radius10px 10px 0;
    -webkit-transition-duration1s
    -moz-transition-duration1s;
    transition-duration1s
    }

    155
    Mercredi 20 Juin 2012 à 12:45

    >,> en faite quand j'mets ma souris sur tes menus ça se déplie pas 0o

    156
    Mercredi 20 Juin 2012 à 19:37

    Bah oui, c'est ça le problème justement ils ne s'ouvrent pas x'D. Tu as vu le code ?

    157
    Mercredi 20 Juin 2012 à 19:43

    x') en faite pourquoi y a " #header {height:545px;background:tra " au début de ton css ?

    158
    Mercredi 20 Juin 2012 à 19:45

    o.O Faut que vous m'expliquiez comment vous en êtes arriver là...

    Voilà le code corriger XD (pourquoi y avait menu1 et menu2??)

    .menu1{ z-index: 99;

    position: fixed; 

    height: 80px; 

    width: 150px;

    left: -130px;

    top:40px; 

    background: #B7E5C7;

    border: 2px solid #0A0014; 

    box-shadow: 0 0 10px #0A0014, inset 0 0 5px #0A0014;

    border-radius: 0 10px 10px 0;

    -webkit-transition-duration: 1s; 

    -moz-transition-duration: 1s;

    transition-duration: 1s; 

    }

     

    .menu1:hover{ left: -2px; 

    -webkit-transition-duration: 1s;

    -moz-transition-duration: 1s; 

    transition-duration: 1s; 

    .bout { -webkit-transform: rotate(90deg); 

    -moz-transform: rotate(90deg); 

    -o-transform: rotate(90deg);

    transform: rotate(90deg); 

    float:right;

    margin-right: -10px; 

    height: 80px;

    line-height:80px; 

    font-size: 15px; 

    font-weight: bold;

    text-shadow: 1px 1px 3px #0A0014

    }

    HTML

    <div class="menu1" style="top: 40px; background-image: url('http://data0.lo.gs/brouillon/perso/cssmenu%20gauche%202.png'); text-align: center; background-position: 100% 50%; background-repeat: initial initial;">

    <div class="bout">Music</div>

    <strong><br />&Agrave; la fl&ucirc;te<br /> <strong>&Agrave;</strong>&nbsp;la guitare<br />Partitions<br />Mixpod&nbsp;</strong></div>

    <div class="menu1" style="top: 140px; background-image: url('http://data0.lo.gs/brouillon/perso/cssmenu%20gauche%203.png'); text-align: center; background-position: 100% 50%; background-repeat: initial initial;">

    <div class="bout">Graph'</div>

    <strong><br />Cr&eacute;ations<br />Tutoriaux<br />Ressources&nbsp;<br />Autres</strong></div>

    <div class="menu1" style="top: 240px; background-image: url('http://data0.lo.gs/brouillon/perso/css%20menu%20gauche%204.png'); text-align: center; background-position: 100% 50%; background-repeat: initial initial;">

    <div class="bout">Illust'</div>

    <strong><br />Au crayon<br />Encr&eacute;<br />Coloris&eacute;<br />Vocaloid</strong></div>

    <div class="menu1" style="top: 340px; background-image: url('http://data0.lo.gs/brouillon/perso/css%20menu%20gauche%205.png'); text-align: center; background-position: 100% 50%; background-repeat: initial initial;">

    <div class="bout">Litt&eacute;'</div>

    <strong><br />Lecture<br />Ecriture<br />Mangas<br />Citations&nbsp;</strong></div>

    <div class="menu1" style="top: 440px; background-image: url('http://data0.lo.gs/brouillon/perso/css%20menu%20gauche%205.png'); text-align: center; background-position: 100% 50%; background-repeat: initial initial;">

    <div class="bout">Photos</div>

    <p><strong><br />Paysages<br />Modifs'<br />Ma grotte<br />Autres</strong></p>

    </div>

    159
    Mercredi 20 Juin 2012 à 19:47

    bin Cloudy veut 2 menus ._. 

    160
    Single Profil de Single
    Mercredi 20 Juin 2012 à 20:03

    Coucou ! :]♥

    J'y suis maintenant arriver parfaitement, mais je n'érrive pas à redimenssioner mon image, soit elle est minuscule, soit elle est complétement déformé... --"

    Vous avez une astuce ou une soluce ? :$?

    161
    Mercredi 20 Juin 2012 à 20:05

    "Modifiez les Xpx

    Pour height, par la hauteur de vos onglets
    Pour width, par la largeur de vos onglets"

    162
    Mercredi 20 Juin 2012 à 20:25

    En fait Nagalia ça c'est mon code du début, mais j'essaie de faire deux menus, un à droite et un à gauche xD.

    163
    Mercredi 20 Juin 2012 à 20:29

    J'ai une idée *a* : prend ce code pour le 1er menu -> inverse top et left

    Pour le 2e : reprend celui-ci et remplace menu1 par menu2 ->  remplace left par right OU top par right et left par top

    164
    Mercredi 20 Juin 2012 à 20:35

    J'ai essayé et regarde ce que ça donne xD

    165
    Mercredi 20 Juin 2012 à 20:37
    166
    Mercredi 20 Juin 2012 à 20:40

    tu sais quoi ? on va faire menu par menu : commence par ton 1er menu >,> et on voit ce qui va pas

    167
    Mercredi 20 Juin 2012 à 20:51

    http://brouillon.lo.gs/


    .menu1z-index99;
    positionfixed
    height80px
    width150px;
    left-130px;
    top:40px
    background#B7E5C7;
    border2px solid #0A0014
    box-shadow10px #0A0014inset 5px #0A0014;
    border-radius10px 10px 0;
    -webkit-transition-duration1s
    -moz-transition-duration1s;
    transition-duration1s
    }
    .menu1 :hoverleft-2px
    -webkit-transition-duration1s;
    -moz-transition-duration1s
    transition-duration1s


    .menu1  z-index99;
    positionfixed
    height80px
    width150px;
    right-130px;
    top:40px
    background#B7E5C7;
    border2px solid #0A0014
    box-shadow10px #0A0014inset 5px #0A0014;
    border-radius10px 10px 0;
    -webkit-transition-duration1s
    -moz-transition-duration1s;
    transition-duration1s
    }

    168
    Mercredi 20 Juin 2012 à 21:02

    T_T tes onglets se déplient toujours pas

    Nagalia help

    169
    Mercredi 20 Juin 2012 à 21:09

    Ouais ToT

    170
    Single Profil de Single
    Mercredi 20 Juin 2012 à 21:17

    Coucou ! Je sais que ca n'a rien à voir avec le problème de Cloudy, mais j'ai déjà fait le redimenssionement, mais c'est l'image qui est trop petite ! --"

    171
    Mercredi 20 Juin 2012 à 21:21

    Ok, donc premier module:

    .menu1{ z-index: 99;
    position: fixed; 
    height: 80px; 
    width: 150px;
    left: -130px;
    top:40px; 
    background: #B7E5C7;
    border: 2px solid #0A0014; 
    box-shadow: 0 0 10px #0A0014, inset 0 0 5px #0A0014;
    border-radius: 0 10px 10px 0;
    -webkit-transition-duration: 1s; 
    -moz-transition-duration: 1s;
    transition-duration: 1s; 
    }

    .menu1:hover{ left: -2px; 
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s; 
    transition-duration: 1s; 

    Pourquoi tu as mis deux fois .menu1 à l'état normal? Un avant, et un après :hover? :P
    Pense  coller :hover à ton sélecteur:

    .menu1 :hover  .menu1:hover ;)

    @Single: change la taille de ton image via un quelconque logiciel de graph, ou:

    <img src="URL DE TON IMAGE" height="HAUTEUR DESIRE" width="LARGEUR DESIRE"/>

    172
    Mercredi 20 Juin 2012 à 21:32

    Nagalia, merci !!!! TTwTT !!! C'était juste un problème de :hover !!! xD ! (scuse me je suis émotive x'D) Et merci aussi beaucoup Groovie !!! *danse*

    173
    Mercredi 20 Juin 2012 à 21:34

    x'D de rien j'ai surtout cité Nagi' mais bon x3

    174
    Single Profil de Single
    Mercredi 20 Juin 2012 à 21:36

    Coucou Nagalia ! Je ne pense pas que ca change grand chose que je la redimmensione sur un logiciel. Passe voir ce que j'ai organiser à partir de ce Css, et tu verras que finalement c'est pas si simple ! --"

    Mais le code que tu m'a donne ne marche pas. Ca fait un gros truc bizzare.

    http://swagattitude.eklablog.com/

    175
    Jeudi 28 Juin 2012 à 14:25

    Salut,

    J'ai fait mon code (j'ai pris ton exemple sorry), et je me demandais comment faire si, par exemple, je voulais 5 onglets ?

    voila, merci d'avance.

    176
    Samedi 30 Juin 2012 à 00:27

    Tu rajoute une ligne comme ça

    <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>

    177
    Ayumin Profil de Ayumin
    Jeudi 5 Juillet 2012 à 19:40

    Bonjour, j'aimerais savoir comment faire pour mettre un lien directement sur le module, en fait, pour que le module soit "cliquable" ?

    178
    Mercredi 11 Juillet 2012 à 10:13

    Idem que Daaishi ! J'ai réussis à faire les onglets, mais je n'arrive pas à mettre un lien pour que dès qu'on clique sur l'onglet on va direct au lien... Help meee >w<

    179
    Lilou0143 Profil de Lilou0143
    Vendredi 13 Juillet 2012 à 09:24

    il faut surligner la phrase, puis faire : inserer/editer le lien et tu met l'URL !

    180
    Lilou0143 Profil de Lilou0143
    Vendredi 13 Juillet 2012 à 17:50

    comment met-ton des images dans les onglets ! j'ai essayer, mais je n'y arrive pas

    181
    Samedi 14 Juillet 2012 à 16:21

    Dans le contenu, rajoute:

    <img src="URL DE TON IMAGE"/>

    182
    Lilou0143 Profil de Lilou0143
    Samedi 14 Juillet 2012 à 18:08

    Le contenu ? c'est HTML ?

    183
    Samedi 14 Juillet 2012 à 18:13

    oui, dans le html

    <div class="coulissant">DU TEXTE; <img src="URL DE TON IMAGE"/>...</div>

     <div class="coulissant" style="top: Xpx">DU TEXTE;  <img src="URL DE TON IMAGE"/> ...</div>

     <div class="coulissant" style="top: Xpx">DU TEXTE;  <img src="URL DE TON IMAGE"/> ...</div>

    <div class="coulissant" style="top: Xpx">DU TEXTE;  <img src="URL DE TON IMAGE"/> ...</div> 

    184
    Lilou0143 Profil de Lilou0143
    Samedi 14 Juillet 2012 à 18:17

    ok merci et je met quoi a la place de Xpx ?

    185
    Samedi 14 Juillet 2012 à 20:25

    Tu ne remplace que le X

    Dans le deuxième onglet, tu met la hauteur de ton premier onglet + la taille des marge éventuelles
    Dans le troisième, la heuteur du premier onglet + la hauteur du deuxième onglet + les marges éventuelles

    Par exemple, si tu dis que tes onglets font 50px de haut, et que la marge du bas est à 5px, tu met dans le html:

     <div class="coulissant">DU TEXTE; <img src="URL DE TON IMAGE"/>...</div>

     <div class="coulissant" style="top: 55px">DU TEXTE;  <img src="URL DE TON IMAGE"/> ...</div>

     <div class="coulissant" style="top: 110px">DU TEXTE;  <img src="URL DE TON IMAGE"/> ...</div>

    186
    Lilou0143 Profil de Lilou0143
    Dimanche 15 Juillet 2012 à 12:04

     merci ! ^^

    187
    Vendredi 3 Août 2012 à 15:09

    Je sais qu'on s'en fiche, mais je fais quelque chose de plus simple (a mon gout) ! Mon css c'est :
    #menugauchecoulissant {
    background:linear-gradient(top right,#313131,#000000);
    border1px solid grey;
    boder-radius8px 0px 8px 8px;
    box-shadow0px 0px 3px white;
    positionfixed;
    width9px;
    height70px;
    top80px;
    left0px
    padding0px 0px 0px 6px;
    -webkit-transition-duration0.5s;
    -moz-transition-duration0.5s;
    transition-duration0.5s;
    #menugauchecoulissant:hover {
    width80px;
    -webkit-transition-duration0.5s;
    -moz-transition-duration0.5s;
    transition-duration0.5s;
    box-shadow0px 0px 8px white;}  

    Et mon HTML :

    <div id="menugauchecoulissant"><a href="LIENS VERS LA PAGE"><span style="color: #ffffff;"><img style="float: right;" src="URL DE L'IMAGE" alt="" /></span></a></div>

    Niveau CSS ça doit pas changer beaucoup, mais eu niveau HTML, je trouve que ça fait plus court ! Bon après je peux me tromper ! Voilà, c'est tout ce que je voulais dire, excusez moi si ce que j'ai dit n'ai pas plus court que ce qu'à dit Nagalia ! ;)

    188
    Vendredi 3 Août 2012 à 15:12

    Disons que tu as simplifié mon code ;)

    Je suis partit du principe que comme on peu mettre tout et n'importe quoi dans les onglets, je donne le code de base et vous personalisez après. Si c'est juste pour faire des liens originaux, ton code est en effet beaucoup plus simple que le mien ;)

    189
    Vendredi 3 Août 2012 à 15:25

    Ok ! :) J'ai appris à faire ça grace à un tuto de Vongola ! Elle expliqué avec ces codes donc quand j'ai voulu voir si tu donner le même code, j'ai trouver ça long. Surtout pour le code HTML ! ^^

    190
    Dimanche 5 Août 2012 à 14:16

    Wow ! C'est super compliqué ce truc ! Je cherche à savoir commant faire ce truc depuis super longtemps et enfin je trouve le tuto, mais j'y arrive pas !!!! :'(

    191
    Dimanche 5 Août 2012 à 14:28

    Non, c'est tout simple ! ;) Qu'est ce que tu n'arrive pas ? Au pire regarde mon comm (n° 187) et prend le code CSS. Ensuite tu prend le code HTML nque j'ai donné aussi et tu remplace les valeurs en rouge par les tiennent ! :)

    192
    Dimanche 5 Août 2012 à 14:41

    Merci de ton aide ! Mais où mets tu le code HTML ????

    193
    Dimanche 5 Août 2012 à 14:48

    Dans un module simple ! :) Pas la peine d'en creer un si tu as déjà un module "présentations" ou "stat's". Tuclisque sur le crayon pour éditer l'article et tu clique sur l'icone "HTML" et à la suite du codes qu'il doit déjà y avoir (si c'est présentations ou stat's) tu mets le code en modifiants les données en rouges ! En éspérants t'avoir aider ! ;)

    194
    Dimanche 5 Août 2012 à 14:55

    Ah oui ! Ca y'est ! J'ai réussi ! Mais une dernière question: comment tu fais pour que ce soit moins grand ? Enfin... va voir mon blog et tu vas voir, l'onglet est super grand !

    195
    Dimanche 5 Août 2012 à 15:11

    Ok, je vais voir ça ! ^^

    EDIT : Enfaites, il faut que tu modifie ton CSS ! Dit moi la taille (a peu prés) que tu veux et je te donnerais le code qui me semble être bon ! Dit moi aprés si ça fonctionne ! °v°

    196
    Dimanche 5 Août 2012 à 15:16

    alors je t'ai fais une perm. je voudrais environ la même taille que ton onglet de ton blog, si tu vois...

    197
    Dimanche 5 Août 2012 à 15:20

    t'as réussi ?

    198
    Dimanche 5 Août 2012 à 15:21

    Oui je vois ! Je vais voir ça ! Merci !

    199
    Dimanche 5 Août 2012 à 15:22

    ok ! non ! c'est moi qui doit te remercier !

    200
    Dimanche 5 Août 2012 à 15:23

    Ah oui ! PUIS tu peux écrire Accueil sur cet onglet s'il te plaît ?je te remercie vraiment beaucoup !!!

    201
    Dimanche 5 Août 2012 à 15:28

    C'est rien, et c'est mêmme normal d'aider les gens qui en on besoin ! ^^ Je te rajoute acceuil tout de suite !

    202
    Dimanche 5 Août 2012 à 15:28

    ok merci beaucoup ! Mais euuu.. désolée mais je vois toujours l'onglet aussi grand  :/

    203
    Dimanche 5 Août 2012 à 15:33

    Là, c'est bon j'ai rectifier ! ;) Si tu vois l'onglet toujours aussi grand, c'est normal, il faut que tu actualise ta page (appuie sur F5) pour voir les modifications !

    204
    Dimanche 5 Août 2012 à 15:52

    Haaaaaaaa !!!!!! Merrrrcccccccciiiiii !!!!!!!! *Trop contente* Merci Odd, merci !

    205
    Dimanche 5 Août 2012 à 15:56

    De rien ! ^^ C'est pas grand chose !

    206
    Dimanche 5 Août 2012 à 15:57

    Pour toi ! ^^ Mais pour moi c'est super! ^^ Et on peut en rajouter, juste en remettant le code HTML ? Genre mettre livre d'or, rubriques...

    207
    Dimanche 5 Août 2012 à 16:06

    Non, sinon tout les onglets sseront superposé. Il faut créer une nouvelle classe puis mettre un deuxiéme code HTML en remplaçant par les nouvelle données. Si tu veux, tu m'explique tout ça par MP et je te ferais ças ! ;)

    208
    Dimanche 5 Août 2012 à 16:09

    ok, ça marche, tu le feras hein ? parceque moi.... ù_ù. Je te refais la perm et te passe les URL des images que je voudrais mettre. Franchement, je te remercie.

    209
    Dimanche 5 Août 2012 à 16:16

    Y a pas de quoi ! ^^ et oui, ne t'inquiète pas, je vais le faire ! °u°

    210
    Dimanche 5 Août 2012 à 16:45

    Désolé de te contredire Odd, mais on peut rajouter des onglet sans avoir besoin de créer une nouvelle classe ;)

    <div class="coulissant">DU TEXTE; DES IMAGES...</div>

     <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>

     <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>

    <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>  

    Remplace le premier X par la hauteur d'un onglet + les marges éventuelles pour qu'ils ne se chevauchent pas ;)
    Pour le deuxièmes, par la hauteur de 2 onglet + les marges éventuelles x2 

    Et ainsi de suite ;)

    211
    Dimanche 5 Août 2012 à 16:50

    Oui, mais par rapport à comment je fais, c'était différent ! Mais je note qsu'il n'y a pas besoin de nouvelle classe ! Merci pour ta remarque Nagalia ! :)

    212
    Dimanche 5 Août 2012 à 16:54

    Avec ton code alors, c'est la même chose:

    <div id="menugauchecoulissant"><a href="LIENS VERS LA PAGE"><span style="color: #ffffff;"><img style="float: right;" src="URL DE L'IMAGE" alt="" /></span></a></div>
    <div id="menugauchecoulissant" style="top: 155px"><a href="LIENS VERS LA PAGE"><span style="color: #ffffff;"><img style="float: right;" src="URL DE L'IMAGE" alt="" /></span></a></div> 

    70px (hauteur de l'onglet)+ les 80px du "top" dans le css + 5px pour un espace entre deux onglets = 155px

    213
    Dimanche 5 Août 2012 à 17:04

    Ok, merci Nagalia senseï ! :)

    214
    Dimanche 5 Août 2012 à 17:38

    Odd, je suis désolée, je pensais t'avoir faite la perm ! :'(, maintenant c'est fait ! 

    215
    Samedi 18 Août 2012 à 15:46

    Je n'arrive pas!Je met le dernier code HTML et ca me mais  acceuil et galerie 

    qu'est ce que je fais?

    216
    Samedi 18 Août 2012 à 15:51

    Et bien tu supprimes Accueil et Galerie, et tu mets ce que tu veux. Accueil & Galerie, c'est le code de Nagalia.
    Donc, modifie-le pour qu'il soit comme tu le souhaites. 

    217
    Samedi 18 Août 2012 à 15:57

    Est ce que je peux ajouter d'autres?

    218
    Samedi 18 Août 2012 à 15:59

    Ce que tu veux. Ca peut devenir ton nouveau menu...
    Tu peux mettre des images, des liens, des textes...

    219
    Samedi 18 Août 2012 à 16:03

    merci mimille511!

    Je vais essayer sa!

    220
    Dimanche 19 Août 2012 à 12:04

    J'ai reussis a faire l'onglet,mais comment on fait pour mettre le lien dans l'images?(je ne veux pas mettre un texte :clique ici... mais je veux que le lien soit dans l'image)

    221
    Dimanche 19 Août 2012 à 16:14

    Et bien mets l'image, sélectionne-la et appuis sur le bouton lien, c'est ce que tu veux faire... J'ai pas vraiment compris...

    222
    Lundi 20 Août 2012 à 12:16

    sa vedir je  n'arrive pas a trouver ou je dois mettre le lien dans le code mais,je veux mettre le lien sans que je met un texte comme clique ici...

     

    223
    Lundi 20 Août 2012 à 21:20

    Tu veux que l'onglet soit un lien ?

    224
    Mardi 21 Août 2012 à 06:28

    j'ai reussi!

    225
    Mardi 28 Août 2012 à 22:59

    Bonjour, j'ai réussi à faire les menus coulissant, mais j'aimerais savoir comment supprimer le module simple qui apparait sur le blog qui contient les codes HTML sans supprimer les menus coulissant...

    C'est possible?

    Merci d'avance!

    226
    Mardi 28 Août 2012 à 23:40

    C'est simple : Tu ne créer pas un module simple exprés pour les onglets, mais tu mets le codes dans le module de stastistique ou de présentation !

    227
    Mercredi 29 Août 2012 à 10:39

    D'accord, merci ^^

     

    228
    Mercredi 29 Août 2012 à 10:41

     

    de rien ! :)

    229
    Samedi 3 Novembre 2012 à 14:57

    Je crois que le CSS et moi on sera jamais ami xomme moi et le C++ xDDDD

    230
    Lundi 5 Novembre 2012 à 10:47

    Beh en faites, moi j'ai tout compris, vu que je le fait plusieurs fois et ça marcher :). Mais bon, vous me connaissez, j'ai toujours des questions débiles à poser ;P. Comme si Nagalia n'avait pas assez de travaille, démerde toi SJ. Bref, voici ma question:

    Comment tu fait pour que le menu, il ne soit ni a gauche, ni a droite, mais en-dessous du menubar ? Me semble pas avoir lu cette question dans les commentaires, donc, je la pose :P. Je pense que t'as fait le menu avec le même code, non? Mais comment t'as fait pour qu'il soit sur le menubar?

    Désolée de toute mes questions, je ne suis pas aussi doué que toi question CCS & HTML x).

     

    Arigatoo !

     

    EDIT: Ok, je viens de me rendre compte que c'est sur le tuto 'contenu hors des articles' donc pour ça, c'est bon^^ Mais, je sais pas comment faire pour qu'il soit 'accorcher' au menubar, et, je sais pas comment ta mit les liens >.< ??????

    Gracias ! :D

     

     

    231
    Jeudi 18 Avril 2013 à 14:24

    BONJOUR

    SUPER TES CODES

    MAIS J'AIMERAIS LES METTRES EN HAUT SOUS LA BARRE COMME TOI

    J'ARRIVE PAS

    232
    Jeudi 18 Avril 2013 à 15:46

    Bonjour :)
    Change simplement les valeurs de position !
    [[[  .coulissant { z-index: 99;
    position: fixed;
    height: 80px;
    width: 150px;
    left: -130px;
    top: 40px;
    ... ]]]
    En espérant t'avoir aidé ;)
     
     

    233
    Jeudi 18 Avril 2013 à 15:50

    Tu dois modifier "Left" et "Top" pour les positionner où tu veux.

    234
    Jeudi 18 Avril 2013 à 15:51

    MERCI POUR VOTRE AIDE JE VAIS ESSAYER

     

    235
    Samedi 4 Mai 2013 à 17:01

    coucou ^^ alors après avoir passé des heures à faire mes onglets, je ne comprends pas pourquoi ils n'apparaissent pas dans tous mes liens. je m'expliques, quand on va sur l'accueuil, on voit bien les onglets à gauche, quand on clique sur l'un des onglets on va bien dans la rubrique que je veux mais on ne voit plus les onglets sur ma page par contre O_o on ne voit que les onglets lorsque l'on est sur l'accueil et ca m'embête XD car je voudrait qu'on les voit partout ^^

     

    je suis une débutante dans le css/html pour moi c'est pire que les maths, il m'a fallu un temps fou pour déchifrer tout ce basar XD

    merci d'avance 

    236
    Samedi 4 Mai 2013 à 17:50

    Mets le code HTML de tes onglets dans un module de menu et pas dans la page d'accueil.

    237
    Mercredi 26 Juin 2013 à 09:05

    ille merci pour ce code :)

    238
    Jeudi 27 Juin 2013 à 15:26

    Bonjour,

    J'aimerais savoir comment faire pour que mes onglets s'ouvrent vers la gauche et non vers la droite et pour les mettre horizontalement s'il te plaît.

    Merci d'avance

    239
    Lundi 1er Juillet 2013 à 02:47

    Remplace left par right dans le css

    .coulissant {
    z-index: 99;
    position: fixed;      
    height: Xpx;        
    width: Xpx;          
    right: -Xpx;              
    top: Xpx;              
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }

    .coulissant:hover{
    right: -1px;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    transition-duration: 0.5s
    }

    240
    Lundi 1er Juillet 2013 à 11:40

    Merci mais mon onglet se retrouve à l'envers, ce n'est pas la bonne partie qui dépasse.

    241
    Lundi 1er Juillet 2013 à 11:58

    C'est logique, tu l'ouvre dans l'autre sens ;)

    Si tu avais prévue des images, il faudrait les retourner

    242
    Lundi 1er Juillet 2013 à 14:23

    Non c'est surtout comment je fait pour mettre le titre de l'autre côté s'il te plaît ?

    243
    Lundi 1er Juillet 2013 à 17:04

    Par rapport à mon code d'exemple?
    Il faut inverser right et left, puisque tu veux que ton titre soit à gauche

    .bout { -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    float:left;
    margin-right: -10px;
    height: 80px;
    line-height:80px;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #D1FFE9
    }

    244
    Sweety ✖ Profil de Sweety ✖
    Mercredi 10 Juillet 2013 à 14:18

     La dernière version de Chrome c'est bien la 27 ?

    245
    Samedi 27 Juillet 2013 à 23:46

    Bonjour ! Est-il possible de faire dérouler ces menus depuis le bord de la page ?

    Donc en fait de les cacher derrière les articles pour qu'ils se déroulent du bord de ceux-ci.

    Merci ! :)

    EDIT : trouvé, désolée ^^'
    Pour ceux que ça intéresse, il faut faire varier la valeur de z-index : le mettre en négatif (par exemple -30) fera passer les modules derrière les articles :)

    246
    Dimanche 20 Octobre 2013 à 19:06

    Coucou, 

    J'ai un petit soucis, j'aimerais savoir comment aligner les titres ? Il n'y a que les deux premiers (que tu as donné) qui s'alignent o/

     

    247
    Dimanche 20 Octobre 2013 à 20:10

    Chalut.
    Tu dois modifier "Left" et "Top". Si par exemple, pour le premier, pour Left tu as mis 200, et le 2ème 500, et bien tu vas devoir mettre une valeur au dessus, 800 par exemple.
    J'espère ne pas mettre trompée.. ^^"

     

    248
    Dimanche 20 Octobre 2013 à 22:07

    Bonjour, comme le liens vers le blog ou il y a l'explication pour mettre le lien ne marche plus, j'aimerais savoir commen faire s'il vous plait. Merci.

    249
    Lundi 21 Octobre 2013 à 10:55

    Bonjour :)

    Tu peux toujours utiliser le code HTML proposé par Nagalia ! 

    <div class="coulissant">
    <img style="float: left;" src="http://data0.ek.la/test-blog/mod_articles646820_1.jpg?2008" />
    <div class="bout">Accueil</div>
    Bienvenu sur mon blog!
    </div>

    <div class="coulissant" style="top: 140px; background: url('http://data0.eklablog.com/merry0712/mod_article1651277_5.jpg?9340') 100% 50%;">
    <div class="bout">Galerie</div>
    <a href="#">Clique ICI</a>
    </div> 

    Il fonctionne de la même manière, il est juste un peu pus complexe ^^ Voilà, voilà !

    250
    Lundi 21 Octobre 2013 à 11:27

    Merci à vous deux, je vais tester ça =) 

    Yusumi, il suffit de mettre le code CSS dans ta partie CSS (logique) et le HTML sur un module simple, je te conseille "Statistiques", dans la partie HTML tu colle le codes donné et tu modifies le texte, le résultat ne se verra pas sur ton module mais sur ta page.

    Enfin, c'est comme ça que j'ai compris ta question o/

    251
    Lundi 21 Octobre 2013 à 12:47

    J'ai déjà mis les onglets. Ce que j'aimerais savoir c'est comment faire pour que quand on clique sur un onglet il nous dirige vers (par exemple) l'accueil ou autre. Merci à vous.

    252
    Lundi 21 Octobre 2013 à 13:09

    Dans le code HTML, tu rajoute un hyperlien.

    Si c'est une image, tu la selectionne puis tu clique sur insérer un hyperlien puis tu mets ton lien.

    Même chose pour le texte.

    Mais un onglet vide, c'pas top o/

    <div class="coulissant" style="top: 140px; background: url('http://data0.eklablog.com/merry0712/mod_article1651277_5.jpg?9340') 100% 50%;">
    <div class="bout">Galerie</div>
    <a href="#">Clique ICI</a>
    </div> 

    253
    Lundi 21 Octobre 2013 à 13:10

    Merci beaucoup :)

    254
    Samedi 16 Novembre 2013 à 18:55

    Et si moi je veux qu'il soit en haut et pas à gauche, je fais comment ?? (je veux en faire un qui ressemble un peu au tiens) 

    255
    Samedi 7 Décembre 2013 à 13:57

    Bonjour, j'ai lus chacun des 254 commentaires en cherchant une réponse à mon problème mais même en essayant tout ceux qui auraient pu m'aider je n'ai pas réussis alors je vous le demande.

    En fait, j'ai mis une image avec écrit "Galerie" dessus dans mon menu déroulant et j'aimerais que quand on clique dessus et bein on atterrisse dans cette rubrique mais je n'arrive pas y mettre le lien : /   

    En vous remerciant d'avance .

    256
    Samedi 7 Décembre 2013 à 14:20

    Pour créer un lien sur une image, il suffit d'entourer ton image avec les tag de lien :

    <div class="onglet"><a href="URL"><img src="URL DE L'IMAGE"/></a></div>

    Si ton image est un arrière plan, il faut spécifier qu'il s'agit d'un "bloc", et donc définir sa largeur et sa hauteur :

    .onglet { background : url(URL DE L'IMAGE);
                   display : block;
                   height : HAUTEUR DE L'ONGLET;
                   width: LARGEUR DE L'ONGLET;
    }

    <a href="URL"><div class="onglet"></div></a>

    257
    Samedi 7 Décembre 2013 à 14:32

    Merci beaucoup !!

    258
    Dimanche 5 Janvier 2014 à 14:46

    J'ai installé le css et le html. Mais elle n'apparaît que dans mon accueil là où j'ai mis mon HTML.

    259
    Dimanche 5 Janvier 2014 à 14:48

    Il faut mettre le code html dans un menu je pense. (:

    260
    Dimanche 5 Janvier 2014 à 14:51

    Je vais essayez merci !

    261
    Dimanche 5 Janvier 2014 à 14:51

    Merci sa marche !

    262
    Dimanche 5 Janvier 2014 à 15:15

    Pas de problème~

    263
    Mercredi 15 Janvier 2014 à 15:10

    Je crois avoir à peu près tout compris. Après, j'ai encore quelques questions : Comment faire si on veut avoir les onglets en haut au centre de la page ?

    Et une autre question : comment met-on des bordures ?

    264
    Mercredi 15 Janvier 2014 à 19:12

    Pour placer les onglets hors d'un module, je te renvoie à cet article :
    => http://fanstasy-graph.eklablog.net/contenu-hors-des-articles-a30141132

    Il faudra donc que tu crées une classe qui contient tes onglet, et que tu la mette en position : absolute (pour la placer center en haut, il faut bidouiller un peu avec top et left)

    Pour les bordure, il faut utiliser la propriété "border"
    => http://fanstasy-graph.eklablog.net/les-bordures-a5375534

    265
    Jeudi 16 Janvier 2014 à 19:37

    Merci beaucoup ! Là je vais manger mais j'essayerais dès que j'aurais le temps ^^

    266
    Jeudi 16 Janvier 2014 à 20:47

    J'ai réussi à mettre mes onglets en haut mais je n'arrive pas à les faire coulisser vers le bas. Il faut mettre truc à la place de "left: -1px", non ? Je ne sais pas par quoi le remplacer...

    267
    Vendredi 17 Janvier 2014 à 17:06

    En fait c'est bon, j'ai réussi ^^ Merci beaucoup pour ce code !

    268
    Vendredi 21 Février 2014 à 22:51

    Merci pour le code

    269
    Mardi 4 Mars 2014 à 22:25

    bonjours Odd Dellarobia tu a dit avoir mis un code html plus simple tu vois vers le haut de la conversation tu vois les menu coulissant c'étais pour te demander si on pouvais pas deplacer le menu tu vois 

    merci d'avance 

    270
    Jimakomo
    Lundi 17 Mars 2014 à 02:17

    Salut, j'ai suivi à la lettre le tuto est sa fonctionne pas de mon côter. j'essaie de faire un onglet coulissant avec tchat chatango à l'intérieur. comme ce genre de site : http://fairy-tail-streaming-vostfr-vf.blogspot.fr/p/episodes-vf_26.html .


     


     


     


    Mon éditeur de site c'est WIX. Merci d'avance pour la réponse de mon problem***


     


    <script src="chrome://hdv/content/hdv.js" type="application/javascript"></script>
    271
    Lundi 17 Mars 2014 à 08:24

    Le problème n'a pas l'air d'être du côté du script. Est-ce que je pourrais voir ton code pour les onglets ?

    272
    Jimakomo
    Samedi 22 Mars 2014 à 06:36

    bah j'ai essaiyé le meme genre de code que votre tuto, mais elle ne veut pas ce clipper sur le côté de la page. frown


    <script src="chrome://hdv/content/hdv.js" type="application/javascript"></script>
    273
    Jimakomo
    Samedi 22 Mars 2014 à 06:41

    Puis merci d'avoir répondu, je pensais que le site était un peu mort, haha x)

     

    ah puis j'ai changer mon éditeur de site, je suis rendu avec un blog Kazeo **

    <script src="chrome://hdv/content/hdv.js" type="application/javascript"></script>
    274
    Samedi 22 Mars 2014 à 12:29

    Ton HTML doit ressembler à ça :

    <div class="coulissant">
    <script id="sid0010000051174461051">// <![CDATA[
    (function() {function async_load(){s.id="cid0010000051174461051";s.src='http://st.chatango.com/js/gz/emb.js';s.style.cssText="width:180px;height:380px;";s.async=true;s.text='{"handle":"mondeimaginaire","styles":{"f":50,"i":49,"l":"999999","o":55,"p":"12","q":"999999","s":1,"v":0,"w":0}}';var ss = document.getElementsByTagName('script');for (var i=0, l=ss.length; i < l; i++){if (ss[i].id=='sid0010000051174461051'){ss[i].id +='_';ss[i].parentNode.insertBefore(s, ss[i]);break;}}}var s=document.createElement('script');if (s.async==undefined){if (window.addEventListener) {addEventListener('load',async_load,false);}else if (window.attachEvent) {attachEvent('onload',async_load);}}else {async_load();}})();
    // ]]></script>
    </div>

    Le script en bleu est fourni par chatango. Si tout ça est correct, il y a un problème avec ton CSS.

    275
    Mardi 8 Avril 2014 à 15:11

    Yop! Je viens demander ton aide car j'aide une amie avec les onglets. Chez moi sa marche impec mais, comme elle a rajouter des onglets sa fait bizarre tout donne vers le bas. Comment je peut faire? Voila se que sa donne en gros : http://puu.sh/80JYb.jpg

    276
    Mardi 8 Avril 2014 à 15:39

    je viens d'aller voir directement sur son blog, ça à l'air de marcher :

    => http://sekai-tsuki.eklablog.com/

    277
    Mardi 8 Avril 2014 à 15:42

     Je viens tout juste de trouver XD Je vais en profiter es que c 'est possible d'avoir deux menu de chaque côté?

    278
    Mardi 8 Avril 2014 à 16:23

    Bien sûr, il faut juste faire une nouvelle classe pour ce nouveau menu, et mettre la marge négative vers la droite.

    279
    Mardi 8 Avril 2014 à 16:25

    Oki merci beaucoup! *^*

    280
    Mardi 8 Avril 2014 à 17:24

    Merci beaucoup (^o^)

    281
    Mardi 8 Avril 2014 à 18:51

    Mais, j'aimerai avoir 7 onglets coulissant, comment faut'il faire ?

    282
    Mardi 8 Avril 2014 à 21:06

    Il faut ajouter des lignes au HTML : Chaque <div> correspond à un onglet

    <div class="coulissant">DU TEXTE; DES IMAGES...</div>
    <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>
    <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div>
    <div class="coulissant" style="top: Xpx">DU TEXTE; DES IMAGES...</div> 
    .
    .
    .
    x7

    283
    Mardi 8 Avril 2014 à 21:13

    D'accord, merci.

    284
    Jeudi 8 Mai 2014 à 16:31

    Mais où puis-je trouver un hebergeur de code ?

     

    Merci d'avance.^^

    285
    Jeudi 8 Mai 2014 à 17:39

    Qu'est-ce que tu appelles un hébergeur de code ?

    Sur Ekla, tu as accès au CSS (dans apparence => modifier le thème) et au HTML dans les articles et les modules

    286
    Vendredi 9 Mai 2014 à 16:35

    Non,mais en faite j'ai trouvé un moyen. En faite quand je perler d'hébergeur de code,c'était pour l'iframe,pour avoir le lien de la signature.Mais j'ai trouver comment faire.Désoler pour le dérangement.^^

    287
    Dimanche 11 Mai 2014 à 01:08

    Comment doit-on faire le code pour que dans l'onglet coulisant contenant le Tchat , le Tchat qui dépasse va vers le haut et non le bas?

     

    288
    Dimanche 11 Mai 2014 à 02:07

    Je n'ai pas bien compris ^^'

    Tu veux dire si l'onglet est placé en bas de la page et doit s'ouvrir vers le haut ?

    289
    Dimanche 11 Mai 2014 à 02:39

    bah le plus simple serait te montre ce que j ai fait ^^'

    290
    Dimanche 11 Mai 2014 à 02:47

    Ceci est mon blog test ---> http://jimakomo.eklablog.com/?246732

     

    291
    Dimanche 11 Mai 2014 à 02:49

    Comme tu peux le constater, les onglet rouge et bleu ne montre pas l intégralité du tchat... et j aimerais qu il affichent un peu plus vers le haut. ^^

    puis oui j ai pris le meme tchat pour les 3 pour pouvoir essayer avant ^^'

    292
    Dimanche 11 Mai 2014 à 14:47

    Il faut modifier la valeur de top au survol pour le déplacer vers le haut

    #coulissant2 {top: 300px;
          left: -200px;
          propriété : valeur;
    }

    #coulissant2:hover { top: 100px;
          left: -2px;
    }

    293
    Dimanche 11 Mai 2014 à 19:58

    ah d accord merci ^^

    294
    Dimanche 11 Mai 2014 à 20:34

    mais là j me retrouve avec un problem, les tchat coulissant fonctionne très bien mais il y a un onglet vide en dessous d eux qui suivent qu'il ne devrait pas se trouver là erf

    295
    Dimanche 11 Mai 2014 à 20:37

    bon ben c est pas grave je les ai cacher avec mes tchat coulissant, ni vue ni connu xd

    296
    Dimanche 1er Juin 2014 à 20:17

    Est-ce possible de mettre les onglets à droite et non à gauche ?

    297
    Dimanche 1er Juin 2014 à 21:12

    Il faudrait lire l'article en entier... 

    " Si vous voulez les onglets à droite, remplacez "left" par "right" "

    298
    Lundi 2 Juin 2014 à 04:16

    j ai de nouveau un problem... est-il possible de changer le z-index du contenu de l'onglet et non de l'onglet lui-même?

    299
    Lundi 2 Juin 2014 à 13:45

    Oui, mais je ne pense pas que tu arrives au résultat souhaité...  Qu'est-ce que tu essaie de faire ?

    300
    Lundi 2 Juin 2014 à 14:16

    bah j ai genre 2 onglet avec des contenu qui touche les autres onglet et je souhaite qu'il soit par-dessus des onglet qui depasse. j'ai beau changer le z-index des onglet, reste que le contenu d un des onglet risque d'avoir un onglet par-dessus x)

    301
    Lundi 2 Juin 2014 à 14:19

    sinon j'ai penser mettre un ''div'' pour le contenu des onglet mais j prefere te le demander avant de l'essayer pour rien ^^'

    302
    Dimanche 8 Juin 2014 à 07:37
    303
    Dimanche 15 Juin 2014 à 06:10

    Nagalia, tu es toujours vivante ?

    304
    Dimanche 15 Juin 2014 à 10:59

    (Je ne sais pas si ça va marcher)

    Dans le HTML que Nagalia propose tu peux remplacer par left ou right TOP

    <div class="coulissant" style="top: 140px; background: url('http://data0.eklablog.com/merry0712/mod_article1651277_5.jpg?9340') 100% 50%;">
    <div class="bout">Galerie</div>
    <a href="#">Clique ICI</a>
    </div> 

    305
    Dimanche 15 Juin 2014 à 11:16

    heum... non ça c'est pour changer le côté de l'écran où les onglets vont se positionner ^^

    Ça ne réglé pas mon problème.

     

    306
    Mercredi 26 Novembre 2014 à 17:51

    Bonjour !

    Comment faire pour installer seulement qu'un menu déroulant ? 

     

     Edit : J'ai trouvé ! uwu

    Merci quand même ^^

    307
    Lundi 12 Janvier 2015 à 16:51

    Bonjour, j'aimerais savoir comment faire pour que les onglets se positionnent en haut et non à droite ou à gauche.

    Merci de votre réponse ^^

    308
    Dimanche 18 Octobre 2015 à 22:35

    Coucou !

    Je voudrais savoir comment on fait des shoutbox coulissantes comme ton blog http://mondeimaginaire.eklablog.com/ ?

    Merci :)

    309
    Dimanche 18 Octobre 2015 à 22:55

    C'est comme pour ce tuto : la shoutbox est placée dans un onglet dans le HTML.

    <div class="coulissant">CODE SHOUTBOX</div>

    Celle de mon blog vient de smartchatbox

    310
    Dimanche 18 Octobre 2015 à 23:10

    D'accord, merci beaucoup ! P.S j'adore ton blog.❤️

    311
    Vendredi 23 Octobre 2015 à 18:41

    Recoucou !

    J'ai mis exactement le même code CSS, et mis dans le code source ce qu'il fallait avec le code de la shoutbox.
    Sauf que je ne comprends pas, ça me fait seulement un cadre bizarre qui coulisse.

    J'ai peut-être zappé quelques infos, mais quand je ne vérifie je ne vois pas.
    C'est sûr mon blog : http://ptiteschoses.ek.la/ 
    Je te montre un screen :
    http://zupimages.net/up/15/43/mlb8.png

    Peux-tu m'aider ?

    312
    Vendredi 23 Octobre 2015 à 19:03

    Je n'ai rien dit !

    313
    Dimanche 21 Février 2016 à 20:18

    Coucou, j'ai un gros souci, je voudrais mettre correctement le titre de mon coulissant au milieu. Et mon image agrandir un peu pour qu'elle puisse faire tout le coulissant mais je n'y arrive pas. J'ai voulu mettre aussi mon titre dans l'autre sens, en mettant Right comme j'ai bien vue mais ça ne marche pas. 

    .coulissant z-index99;
    positionfixed
    height170px
    width160px;
    left-130px;
    top70px
    background#2c020a;
    border2px solid #9d6972
    -webkit-transition-duration0.3s
    -moz-transition-duration1s;
    transition-duration1s
    }
    .coulissant:hoverleft-2px
    -webkit-transition-duration0.5s;
    -moz-transition-duration1s
    transition-duration1s

    .coulissant img {max-height70px;
    padding-top5px;
    margin-right4px;

    .bout -webkit-transformrotate(90deg)
    -moz-transformrotate(90deg)
    -o-transformrotate(90deg);
    transformrotate(90deg)
    float:left;
    margin-right-10px
    height80px;
    line-height:80px
    font-size15px
    font-weightbold
    text-shadow1px 1px 1px #D1FFE9 
    }

    314
    Jeudi 13 Octobre 2016 à 21:09

    super blog ^0^

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :