• 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
    Novalia
    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
    Novalia
    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
    Novalia
    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
    Novalia
    Vendredi 16 Mars 2012 à 15:37

    Okey ^^'

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

    46
    Novalia
    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
    Novalia
    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
    Novalia
    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
    Novalia
    Vendredi 16 Mars 2012 à 17:13

    j'ai vu ça xD

    53
    Novalia
    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
    Novalia
    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
    Novalia
    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
    Novalia
    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
    Novalia
    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
    Novalia
    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
    Novalia
    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
    Novalia
    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
    Novalia
    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
    Novalia
    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
    Novalia
    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
    Novalia
    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
    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.

    84
    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

     

     

    85
    Dimanche 27 Mai 2012 à 09:31

    coucou

    j'ai finalement réussi

    bonne journée

    86
    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

    87
    ♥ 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 ^^

     

     

    88
    Samedi 2 Juin 2012 à 21:37

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

    89
    ♥ 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 ??

    90
    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

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

    Ok merci ^^

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

    92
    Samedi 2 Juin 2012 à 22:47

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

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

    Non je l'ai trouver pk ?? ^^

    94
    Dimanche 3 Juin 2012 à 13:22

    Peach est trop mignonne comme ça *w*

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

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

    Merci groovie ^^

    97
    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

    98
    Novalia
    Dimanche 10 Juin 2012 à 13:31

    Tu l'es déjà.

    99
    Dimanche 10 Juin 2012 à 13:31

    Ca m'aide merci =_=

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

     

    101
    Dimanche 10 Juin 2012 à 13:35

    XD

    Princesse Peach => de rien x)

    102
    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

    103
    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

     

    104
    Dimanche 10 Juin 2012 à 15:17

    Sorry ^^'

    105
    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

    106
    Dimanche 10 Juin 2012 à 18:20

    de rien x3 j'ai pas fait grand chose xD

    107
    Dimanche 10 Juin 2012 à 18:26

    Bah je te remercie quand même xD

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    108
    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! :)

    109
    Dimanche 10 Juin 2012 à 18:37

    Kuroshitsuji => remierciements acceptés xD

    Sayabi => absolute

    110
    Dimanche 10 Juin 2012 à 18:38

    Merci beaucoup! :D

    111
    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')

    112
    Dimanche 10 Juin 2012 à 18:58

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

    113
    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"")

    114
    Dimanche 10 Juin 2012 à 19:12

    Ah okay ! Merci ! :D

    115
    Dimanche 10 Juin 2012 à 19:13

    de rien x)

    116
    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 :/.

    117
    Dimanche 10 Juin 2012 à 19:17

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

    118
    Dimanche 10 Juin 2012 à 19:18

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

    Au choix."

    119
    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 ♥ .

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

    121
    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

    122
    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é ! :)

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

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

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

    126
    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"/>

    127
    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 ! :'(

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

    129
    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... :$

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

    131
    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

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

    133
    Mardi 19 Juin 2012 à 19:41

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

    134
    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 ! --"

    135
    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

    136
    Mardi 19 Juin 2012 à 20:40
    137
    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 ?

    138
    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

    139
    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... :$

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

    Ca marcheeeeeeeee !

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

    141
    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  :)

     

    142
    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. --"

    143
    Mercredi 20 Juin 2012 à 09:12

    Tu l'as mises où dans le code ? 

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

    145
    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. "

     

     

    146
    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

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

    148
    Mercredi 20 Juin 2012 à 10:37

    Okay j'essaie ! :3

    149
    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

    150
    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 è_é

    151
    Mercredi 20 Juin 2012 à 10:46

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

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

    153
    Mercredi 20 Juin 2012 à 12:45

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

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

    155
    Mercredi 20 Juin 2012 à 19:43

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

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

    157
    Mercredi 20 Juin 2012 à 19:47

    bin Cloudy veut 2 menus ._. 

    158
    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 ? :$?

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

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

    161
    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

    162
    Mercredi 20 Juin 2012 à 20:35

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

    163
    Mercredi 20 Juin 2012 à 20:37
    164
    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

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

    166
    Mercredi 20 Juin 2012 à 21:02

    T_T tes onglets se déplient toujours pas

    Nagalia help

    167
    Mercredi 20 Juin 2012 à 21:09

    Ouais ToT

    168
    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 ! --"

    169
    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"/>

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

    171
    Mercredi 20 Juin 2012 à 21:34

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

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

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

    174
    Samedi 30 Juin 2012 à 00:27

    Tu rajoute une ligne comme ça

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

    175
    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" ?

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

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

    178
    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

    179
    Samedi 14 Juillet 2012 à 16:21

    Dans le contenu, rajoute:

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

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

    Le contenu ? c'est HTML ?

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

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

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

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

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

     merci ! ^^

    185
    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 ! ;)

    186
    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 ;)

    187
    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 ! ^^

    188
    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 !!!! :'(

    189
    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 ! :)

    190
    Dimanche 5 Août 2012 à 14:41

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

    191
    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 ! ;)

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

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

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

    195
    Dimanche 5 Août 2012 à 15:20

    t'as réussi ?

    196
    Dimanche 5 Août 2012 à 15:21

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

    197
    Dimanche 5 Août 2012 à 15:22

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

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

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

    200
    Dimanche 5 Août 2012 à 15:28

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

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

    202
    Dimanche 5 Août 2012 à 15:52

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

    203
    Dimanche 5 Août 2012 à 15:56

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

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

    205
    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 ! ;)

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

    207
    Dimanche 5 Août 2012 à 16:16

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

    208
    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 ;)

    209
    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 ! :)

    210
    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

    211
    Dimanche 5 Août 2012 à 17:04

    Ok, merci Nagalia senseï ! :)

    212
    Dimanche 5 Août 2012 à 17:38

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

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

    214
    Samedi 18 Août 2012 à 15:57

    Est ce que je peux ajouter d'autres?

    215
    Samedi 18 Août 2012 à 16:03

    merci mimille511!

    Je vais essayer sa!

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

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

     

    218
    Mardi 21 Août 2012 à 06:28

    j'ai reussi!

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

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

    221
    Mercredi 29 Août 2012 à 10:39

    D'accord, merci ^^

     

    222
    Mercredi 29 Août 2012 à 10:41

     

    de rien ! :)

    223
    Samedi 3 Novembre 2012 à 14:57

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

    224
    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

     

     

    225
    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

    226
    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é ;)
     
     

    227
    Jeudi 18 Avril 2013 à 15:51

    MERCI POUR VOTRE AIDE JE VAIS ESSAYER

     

    228
    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 

    229
    Mercredi 26 Juin 2013 à 09:05

    ille merci pour ce code :)

    230
    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

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

    232
    Lundi 1er Juillet 2013 à 11:40

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

    233
    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

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

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

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

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

    237
    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 :)

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

     

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

    240
    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à !

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

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

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

    244
    Lundi 21 Octobre 2013 à 13:10

    Merci beaucoup :)

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

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

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

    248
    Samedi 7 Décembre 2013 à 14:32

    Merci beaucoup !!

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

    250
    Dimanche 5 Janvier 2014 à 14:48

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

    251
    Dimanche 5 Janvier 2014 à 14:51

    Je vais essayez merci !

    252
    Dimanche 5 Janvier 2014 à 14:51

    Merci sa marche !

    253
    Dimanche 5 Janvier 2014 à 15:15

    Pas de problème~

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

    255
    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

    256
    Jeudi 16 Janvier 2014 à 19:37

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

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

    258
    Vendredi 17 Janvier 2014 à 17:06

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

    259
    Vendredi 21 Février 2014 à 22:51

    Merci pour le code

    260
    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 

    261
    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>
    262
    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 ?

    263
    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>
    264
    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>
    265
    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.

    266
    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

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

    268
    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é?

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

    270
    Mardi 8 Avril 2014 à 16:25

    Oki merci beaucoup! *^*

    271
    Mardi 8 Avril 2014 à 17:24

    Merci beaucoup (^o^)

    272
    Mardi 8 Avril 2014 à 18:51

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

    273
    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

    274
    Mardi 8 Avril 2014 à 21:13

    D'accord, merci.

    275
    Jeudi 8 Mai 2014 à 16:31

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

     

    Merci d'avance.^^

    276
    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

    277
    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.^^

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

     

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

    280
    Dimanche 11 Mai 2014 à 02:39

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

    281
    Dimanche 11 Mai 2014 à 02:47

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

     

    282
    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 ^^'

    283
    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;
    }

    284
    Dimanche 11 Mai 2014 à 19:58

    ah d accord merci ^^

    285
    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

    286
    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

    287
    Dimanche 1er Juin 2014 à 20:17

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

    288
    Dimanche 1er Juin 2014 à 21:12

    Il faudrait lire l'article en entier... 

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

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

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

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

    292
    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 ^^'

    293
    Dimanche 8 Juin 2014 à 07:37
    294
    Dimanche 15 Juin 2014 à 06:10

    Nagalia, tu es toujours vivante ?

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

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

     

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

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

    299
    Dimanche 18 Octobre 2015 à 22:35

    Coucou !

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

    Merci :)

    300
    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

    301
    Dimanche 18 Octobre 2015 à 23:10

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

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

    303
    Vendredi 23 Octobre 2015 à 19:03

    Je n'ai rien dit !

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

    305
    Jeudi 13 Octobre 2016 à 21:09

    super blog ^0^

    306
    Jeudi 20 Mai 2021 à 12:26

    Coucou, superbe tutoriel.

    je voudrais bien ce style d'onglet tout en haut juste en dessous de la barre? Comment dois-je faire ?

    Merci d'avance :)

      • Samedi 22 Mai 2021 à 16:07

        Modifie "width", "height", "top" et "left" pour gérer la taille et la position de l'onglet. Une fois positionné comme tu veux, sur le hover, il faut remplacer "left" par "top" pour que le déplacement se fasse vers le bas.

      • Samedi 22 Mai 2021 à 16:47

         

         Coucou Nagalia, j'ai réessayé de les mettre comme je voulais ça ne fonctionne pas.

        J'aimerais que les onglets coulissants  soit à l'horizontal, en dessous de la barre et fixe.

        Bon dimanche bisous :)

    307
    Samedi 22 Mai 2021 à 16:37

    Coucou Nagalia, merci pour ta réponse.

    çà ne fonctionne pas.

    Aurais-tu les bon chiffres ?

    J'aimerai avoir comme sur ce blog http://tara-tara.eklablog.com/ mais en dessous de la bar de navigation.

    308
    Samedi 26 Juin 2021 à 18:18

    Bonjour, désolée mais j'ai une question...


    En fait sur mon blog, j'ai mis un menu coulissant à gauche (grâce à ton code :3), mais je n'arrive pas à le monter sur le bord de la page  pour qu'il soit plus en hauteur sur le côté et aussi pour qu'on voit le bas du texte, (j'explique très mal...)


    Du coup je voulait savoir comment faire pour le monter vers le haut de la page, svp

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :