C'est quoi "bout" ?

arrigatou gosaimasu !! ♥

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.

Tantan-kun c'est toi?

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

ah ok %D

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

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?

Merci !

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/

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

Voilà mon code :

#coulissant { z-index: 99;
position: fixed; 
height: 80px; 
width: 150px;
left: -130px;
top: 40px; 
background: #FFD6F3;
font-family: monotype corsiva;
text-align: center; 
font-size: 15px;
text-shadow: 0px 0px 3px white;
border: 3px double black; 
box-shadow: 0 0 10px white, inset 0 0 5px white;
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: 17px;
font-weight: bold; 
text-shadow: 1px 1px 1px white;
text-align: center;
font-weight: bold;
} 

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

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

Te laisser regarder? C'est à dire?

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

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

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.

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

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>

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

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

je n'ai rien compris

This is a joke ?

j'ai rien compris >_>

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

D'accord je vais voir.Merci!

Hepl me TAT

J'y arrive pas ;A;

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

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

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*

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

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-index: 99;
position: fixed;      
height: 150px;         
width: 80px;          
top: 130px;              
right: 40px;              
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s; 
transition-duration: 0.3s; 
} 
#coulissant:hover{ 
bottom: -1px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.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 ? >_<

Merci!Ca marche!

Okey ^^'

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

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> 

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
}

Nag' is not connected .__.'

okey ^^

J'viens de capter xD

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

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

j'ai vu ça xD

c'est quoi ".bout" ?

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

okey =)

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:

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

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-index: 99;

text-align:  center;

 font-family: NOM DE LA POLICE;

  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
 } 

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

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

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

Bonsoir,

Merci infiniment Erenwë

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

Bonne semaine à tous

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

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

De rien Aimielisa ^^

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

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)

oui, bien sûre, tu peux ^^

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

merci pour le tuto, j'ai REUSSI

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

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

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

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

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

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

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

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

c'est le code ! :)

Je dois y aller , je vais en bretagne !

BONNE VACANCES !

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

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

De rien :3

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

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

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

J'adore le thème *o*

mici (3

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

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.

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

coucou

j'ai finalement réussi

bonne journée

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

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

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

Ok merci ^^

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

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

Non je l'ai trouver pk ?? ^^

Peach est trop mignonne comme ça *w*

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

Merci groovie ^^

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

Tu l'es déjà.

Ca m'aide merci =_=

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

XD

Princesse Peach => de rien x)

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

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

t'avais écris "stlyle" xD

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

de rien x3 j'ai pas fait grand chose xD

Bah je te remercie quand même xD

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

Kuroshitsuji => remierciements acceptés xD

Sayabi => absolute

Merci beaucoup! :D

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

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

bin oui suffira de faire 1 code pour chaque ("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"")

Ah okay ! Merci ! :D

de rien x)

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

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

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

Au choix."

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

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

@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

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

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-index: 99;
position: fixed;      
height: 176px;         
width: 100px;          
left: -156px;              
top: 180px;              
-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
} 

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.

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.

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

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 ?

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

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 ?

*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 à 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"

"Je fais que citer xD

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

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

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

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

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 ?

Tout est possible x) "Si vous voulez les onglet en haut  gauche, inversez "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

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

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

Ca marcheeeeeeeee !

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

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 là  :)

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

Tu l'as mises où dans le code ? 

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

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

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

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

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)

Okay j'essaie ! :3

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

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

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

Dans quel menu ?

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

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

Edit : Y a ça aussi :

.menu2{ 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  { z-index: 99;
position: fixed; 
height: 80px; 
width: 150px;
right: -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; 
}

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

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

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

bin Cloudy veut 2 menus ._. 

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

"Modifiez les Xpx

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

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

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

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

x'D

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

http://brouillon.lo.gs/

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

.menu1  { z-index: 99;
position: fixed; 
height: 80px; 
width: 150px;
right: -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; 
}

T_T tes onglets se déplient toujours pas

Nagalia help

Ouais ToT

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

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*

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

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/

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.

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

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<

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

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

Le contenu ? c'est HTML ?

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

 merci ! ^^

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);
border: 1px solid grey;
boder-radius: 8px 0px 8px 8px;
box-shadow: 0px 0px 3px white;
position: fixed;
width: 9px;
height: 70px;
top: 80px;
left: 0px; 
padding: 0px 0px 0px 6px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;} 
#menugauchecoulissant:hover {
width: 80px;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
transition-duration: 0.5s;
box-shadow: 0px 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 ! ;)

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

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

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

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

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

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 !

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°

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

t'as réussi ?

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

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

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

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

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

• Nom / Pseudo :
  
  E-mail (facultatif) :
  
  Site Web (facultatif) :
  
  Commentaire :
  
  Me prévenir par mail en cas de réponse
  

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 !

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

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

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

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

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.

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

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

Ok, merci Nagalia senseï ! :)

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

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

qu'est ce que je fais?

Est ce que je peux ajouter d'autres?

merci mimille511!

Je vais essayer sa!

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)

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

j'ai reussi!

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!

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 !

D'accord, merci ^^

de rien ! :)

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

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

BONJOUR

SUPER TES CODES

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

J'ARRIVE PAS

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

MERCI POUR VOTRE AIDE JE VAIS ESSAYER

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 

ille merci pour ce code :)

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

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

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

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

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

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/

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.

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

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/

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.

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> 

Merci beaucoup :)

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) 

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 .

Merci beaucoup !!

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

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

Je vais essayez merci !

Merci sa marche !

Pas de problème~

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 ?

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

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

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

Merci pour le code

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 

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

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.

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

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

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

Oki merci beaucoup! *^*

Merci beaucoup (^o^)

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

D'accord, merci.

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

Merci d'avance.^^

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

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?

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

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

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

ah d accord merci ^^

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à

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

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

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?

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)

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

???

Nagalia, tu es toujours vivante ?

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

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.