Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Slideshow full CSS3 sans :target !

    Partagez
    FémininAge : 22Message(s) : 5018

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    10/10  (10/10)
    NyoTheNeko
    le Sam 12 Juil 2014 - 17:27

    Slideshow full CSS3





       
    Ceci est un tuto, optimal pour une PA, crée suite à la Demande d'SatoruMasao, ici.
    Notez, en tant que petit disclaimer, que je ne sors pas tout ça de mon chapeau. Vous trouverez en lien le slideshow que j'ai prit en base, qui montrait comment ne pas utiliser les :target mais plutôt les input et label (ce qui évite de faire comme une "nouvelle page" et permet de cliquer sur le bouton de "précédent" du navigateur pour vraiment aller sur la page précédente et non pas l'id du slide précédent.


    Toutes versions ▬ CSS3 & HTML5 ▬ Code mit sous hide & explications en claire ▬ Ce que ça donne


       
    Notez que je vais donc vous montrer comment faire autant le slideshow simple, que les personnages avec la petite bulle qui apparait au passage de la souris! Cependant, vous n'êtes pas obliger de mettre forcément des render de personnages et des petits bulles, mais pouvez très bien remplir d'autres choses! En gros, cela dépend fortement de votre imagination et de vos compétences. Le cas échéant, la section des problèmes est là pour vous aider!




    Le slideshow de base


    Avant de commencer à s'amuser à mettre les petites bulles d'informations sur les personnages ou même quoi que ce soit d'autres, il faudrait tout d'abord commencer à créer le slideshow de base, c'est à dire, le conteneur, les slides (de simples div pour l'instant) et les flèches avec l'animation qui devrait y avoir.

    Je vais aller étape par étape, mais tout de même montrer tout le HTML avant de montrer tout le CSS. Cependant, il est à noter que sans le CSS, le HTML risque d'être très moche (et surtout de ne rien faire!).

    Le HTML


    Alors, tout d'abord, commençons par le commencement!
    Nous allons créer notre toute première div qui va contenir tous le slideshow. Vous pouvez l’appeler comme vous le voulez, mais ici, elle sera appelée "slideshow". Elle contiendra alors tout ce qui a un rapport avec le slider: les slides, les boutons pour aller d'un slide à l'autre, etc. Donc la voici:

    C'est très simple n'est-ce pas?

    Maintenant, nous allons rajouter des balises input de type radio. Ces balises, ce sont normalement ce qu'on utilise dans le formulaires, pour choisir une option ou une autre. Un exemple simple est sur ForumActif, plus précisément sur NeverUtopia: quand vous créez un sujet, sous "Icône de sujet" vous avez à côté de chaque icône un petit rond qu vous pouvez cocher. Eh bien c'est ça les input de type radio d'un formulaire!
    Mais pourquoi utiliser ça, mais surtout, à quoi ça sert? Eh bien plutôt que d'utiliser des liens et d'utiliser ensuite le pseudo-élément :target, ici nous allons utiliser les input et leur pseudo-élément :checked, qui regarde si un input est coché ou non. Cela permet donc de ne pas ouvrir un "nouveau lien" à chaque slide, mais bel et bien de toujours avoir le même lien dans la barre de navigation.

    Nous allons donc mettre autant d'input que nous voulons de slides, ici 5:


    Pour rester dans le thème des input, parlons tout de suite comment et pourquoi ils seront utilisé: les flèches qui "contrôlent" le slideshow, et décident quel input est checked ou non. Pour cela, nous utilisons des labels.
    On va d'ailleurs mettre ces labels dans un id que vous pouvez nommer comme vous le voulez mais que je nomme "controls". Cela nous permettra alors de placer les flèches et de faire certains effets dessus dans le CSS, mais aussi de les sélectionner correctement grâce au CSS (dont je parlerais plus tard)

    Comme vous pouvez le constater, chaque slide a son propre label, et c'est l'attribut for qui dit pour quel label est chaque input. En effet, si vous cliquez sur un label qui est for un certain input, alors cet input sera coché. Je suppose donc que vous comprenez à présent un peu mieux comment ça marche: on clique sur une flèche qui est en fait un label pour un certain input d'un slide, et ce slide sera alors coché, ce qui permettra, grâce au CSS, à aller au slide correspondant!
    Remarquez cependant que le for doit avoir le même nom que l'id de l'input correspondant.

    Donc jusqu'à présent, on a ça:

    Ce n'est pour l'instant pas grand chose, cependant: c'est le plus important. en effet, bien que vous n'avez pas encore les slides à proprement parler, vous avez déjà la plus grosse partir du HTML, et ce qui va faire marcher tout le slideshow. Cependant, vu qu'un slideshow n'est rien sans slides, il nous faut les ajouter!

    Nous allons donc créer une div qui va contenir tous nos slides, que l'on mettra entre les inputs et les controls (l'importance de ceci est expliquée plus tard) qui sera de la taille de tous les slides additionnés (que je nommerais inner), mais également un autre div, qui contiendra inner et qui permettra de cacher les slides en trop (à l'aide d'un overflow: hidden) de telle sorte à afficher un seul slide à la fois. Je le nommerais slides.
    Nous avons donc ceci:


    Je vais alors ajouter mes cinq slides dans inner, en leur donnant à chacun la classe a_slide (que vous pouvez appeler comme vous le voulez) qui me permettra de mettre la taille aux slides, mais aussi d'appliquer les effets nécessaires. J'ai donc ceci:


    À présent, pour que l'on puisse tout de suite tester les slides, j'ai mit dans chaque slide une image (le render) avec une class selon où je les veux positionnés, entourés d'un lien. En effet, je veux alterner entre le render à gauche et le render à droite, cependant, vous pouvez créer autan de positions que vous voulez (au milieu, un peu à droit,e un peu à gauche, etc), u même placer à l'aide d'id plutôt que de classe chaque image indépendamment. De même, vous pouvez mettre autre chose dans chaque slide qu'une image!


    Et voilà! Le HTML est terminé! En résumé, nous avons ceci (HTML complet pour l'étape du slideshow simple):


    Le CSS


    Si vous envoyez à présent le HTML sans le CSS sur votre PA, vous verrez très vite que ça ne ressemble pas à grand chose... En effet, vu que nous avons que des class et des id, les div n'ont aucune hauteur ou largeur et donc, rien ne s'affiche. Enfin, mis à part les input (donc les boutons de type radio) dont le premier est coché... Et comme vous le voyez dans le résultat final, ces derniers ne sont même pas présents! Mais pas de panique: le CSS3 et sa magie va bientôt opérer, et vous aurez bientôt un superbe slideshow!

    Cependant, nous avons beaucoup de choses à voir, alors là aussi je vais utiliser quelques titres pour les séparer un peu mieux!

    Mise en place du bloc du slideshow


    Tout d'abord, nous allons masquer les input, c'est à dire, faire en sorte qu'ils n'apparaissent pas. En effet vu que pour l'instant c'est la seule chose qui apparaisse mais que c'est la seule chose qu'on ne veut PAS voir apparaître, il suffit de faire en srte qu'ils ne s'affichent pas à l'aide d'un display: none;
    Nous avons donc ceci:


    Maintenant que nous avons un "tableau blanc" sur lequel travailler, il est donc temps de commencer par le commencement: la balise qui entoure notre slideshow, à laquelle j'avais donné plus tôt l'id "slideshow". Nous allons donc tout de suite lui donner une largeur et une hauteur, mais aussi un position relative. C'est important, notamment pour positionner les flèches, ou tout autre élément que vous voudriez jouter aux slideshow (autre que les slides et les flèches).
    Nous avons donc ceci:


    Maintenant, dans l'ordre logique des choses, je vais m'occuper des slides. Je vais donc commencer par la div à laquelle j'ai donné plus tôt l'id "slides", qui me permettra d'afficher un seul slide à la fois. Je vais donc lui donner la taille d'un seul slide (qui pour moi est la même taille que le slideshow en entier), le positionner de manière absolue tout en haut du slideshow (avec une position absolute) et un overflow: hidden, ce qui va me permettre de cacher tout ce qui dépasse de là, et donc, vous l'aurez compris, de cacher toutes les autres slides. En plus de cela, vu que mon slideshow aura une image de fond fixe et que seul des render vont passer par-dessus, j'ai mit une image de fond.


    Maintenant que nous avons ceci, nous allons regarder la première div fille de slides, qui n'est autre que la div à la class "inner". C'est donc lui qui va avoir tous nos slides. Je lui donne donc la bonne taille (donc pour qu'il contienne 5 slides). Rien de spécial donc... mis à part donner une largeur!


    On a donc les deux conteneurs des slides, mais maintenant, il faudrait mettre en forme les slides eux-même! On va donc leur donner une taille (la même que #slides), mais également une position relative (pour pouvoir positionner les choses en absolu dedans, notamment les images et, bien plus tard, les bulles, que l'on verra dans la seconde partie) et enfin un float: left;


    Et c'est presque fini! en effet, à présent, il y a le code pour le déplacement des slideshow à faire! Et là, on en aura terminé pour le bloc "brut" du slideshow!
    Voici donc la partie la plus importante du code, qui est aussi présente sur le slider dont je me suis inspirée pour faire celui-ci:


    Vous pouvez à présent envoyer votre code et voir... une image fixe! Et oui! Il n'y a pas encore les contrôles, donc les flèches, qui nous permettront de cocher les différents input! Du coup, eh bien... rien ne bouge! Il va donc falloir lire la suite pour mettre en place les flèches et, donc, ce qui nous permettra de contrôler le slideshow et de passer d'une slide à l'autre!

    Mise en place des contrôles (flèches)


    Les codes pour les contrôles est en réalité vraiment très "simple" dans le sens où, il n' a pas beaucoup de lignes, cependant, il peut être difficile à comprendre! Cependant, pas de panique: je suis là pour ça!

    Commençons par le plus simple, qui est, le placement des flèches. Comme vous pouvez le voir, les flèches dépassent du slideshow. Ce n'est pas un problème, et d'ailleurs, vous pouvez bien sûr changer ça selon comment vous voulez avoir votre slideshow (avec les position: absolute de #slides et de #controls).
    Quoiqu'il en soit, à l'aide du div d'id "controls" on va positionner les flèches au milieu de notre slideshow (à l'aide du top: 45%), et lui donner comme hauteur la taille des images que l'on va utiliser pour nos flèches. En plus de cela, il faut lui donner un z-index de 0 (ou en tout cas un z-index plus petit que celui de #slides) pour qu'ils soit derrière slides.
    Notez cependant que si vous voulez que les flèches soient par-dessus votre slide, il va falloir changer ça, et même peut-être, avoir à placer chaque flèche individuellement! (car il faudrait que le z-index soit plus grand que celui des slides pour que les flèches apparaissent et soient cliquables, cependant, sur toute la longueur et hauteur de controls, les slides ne seraient plus cliquables (et n'auraient plus d'effet au passage de la souris).
    Bref, en gros, voici le code:


    Assez simple n'est-ce pas? Mais pour l'instant, on a toujours pas les flèches! En effet, nous voulons que les flèches s'affichent toujours, mais soient par rapport au bon label, c'est à dire, que lorsque le slide1 est coché, qu'il y ait la flèche de droite qui aille vers le slide2, et la flèche de gauche qui aille vers le slide5 (le dernier slide). Du coup, il faut une manière de cacher TOUS les labels, sauf le bon label correspondant au slide précédent et au slide suivant (et les bons qui plus est). Il faut donc tout d'abord mettre ce code:

    Donc ici, on cache tous les label et on leur donne la taille de l'image. MAintenant, passons au code compliqué!



    Nous avons donc à présent les flèches et le slide en pleine état de marche, cependant, sans les animations, eh bien, c'est un peu moche... Mais pas de soucis, les animations arrivent dans la partie suivante!

    Animer les slides et effets sur les flèches


    Nous allons tout d'abord faire l'animation sur les flches. Tout simplement parce que, eh bien, c'est le plus simple! En effet, comme vous pouvez le voir, le seul effet sur mes flèches est un changement d'opacité. Très simple donc, et un changement qu'il suffit d'appliquer sur le CSS #controls label en ajoutant de l'opacité, et en faisant un changement au passage d ela souris grâce à la pseudo-classe :hover!
    Je vous donne donc le code, qui n'a vraiment rien de compliqué !


    Voilà donc qui est fait pour les flèches! Maintenant, il est temps de passer au slides, pour qu'ils se déplacent de façon fluide. Le code est assez court (deux lignes), mais vraiment très condensé: je vous explique cependant tout!


    Et maintenant, tout est bon! Nous n'avons plus qu'à placer les images correctement (comme je l'ai prévu dès le départ à gauche et à droite de chaque slide) et on en aura fini de cette première partie pour la création du slideshow!

    Mise en place des images


    Maintenant que nous avons tout le slideshow, il est temps de placer les images au bon endroit, comme j'avais dit lorsque j'ai écrit le HTML, j'ai prévu d'en mettre certaines à gauches et certaines à droites.
    Je vais tout d'abord commencer par mettre toutes les images en position absolue. Je vais aussi faire en sorte qu'elle ne dépassent pas la hauteur du slideshow, donc les redimensionner à une hauteur de 400px.


    Maintenant, on va placer toutes les images avec la classe left à gauche


    Et toutes les images avec la classe right à droite!


    Vous pourriez très bien utiliser les bottom, top, left et right pour placer les images ailleurs, et donc avoir plus de classes ou même des id pour chaque image si chacune doit être mise à un endroit spécifique! En somme, vous pouvez utiliser la position absolue comme vous le voulez pour placer les images!

    Maintenant, il est temps de passer à la deuxième étape si vous voulez placer des bulles d’informations au passage de la souris sur les images!


    Dernière édition par NyoTheNeko le Mar 3 Mar 2015 - 10:16, édité 4 fois


    FémininAge : 22Message(s) : 5018

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    10/10  (10/10)
    NyoTheNeko
    le Dim 13 Juil 2014 - 18:07

    Rajouter les bulles d'informations


    Il est donc temps de rajouter les bulles d'informations, cependant, je vous préviens tout de suite: c'est différent des infobulles, et en réalité, il ne faudrait pas avoir de liens ou de trucs qui nécessitent la souris, car dès que vous retirez votre souris de l'image et allez sur la bulle (même si elle est collée à l'image), si la souris n'est pas SUR l'image, alors la bulle disparaîtra. Pour les infobulles, allez voir mon autre tuto, sur ces dernières! Elles devraient donc être utilisées pour, par exemple, donner des informations sur le lien vers lequel ils mènent.

    Le HTML


    Il n'y a rien qui change dans le HTML de base, mais on va rajouter des choses. En effet, on va utiliser le fait que l'on ait apprit à utiliser le sélecteur ~ pour l'utilisr. Vous l'aurez deviné, nous donnerons à notre image (ou plutot notre lien qui entoure l'image), un "frère", qui ne sera autre que nos bulles.

    Nous avions donc, pour chaque slide, ceci:


    Nous allons donc rajouter une div de classe "info_slide" à la suite de chacun des liens. Cependant, en plus de cela, je vais rajouter un id pour chacun d'entre eux. En effet, plus tard, je voudrais avoir un mouvement "particulier" pour chacune des bulles: je voudrais qu'elle parte de la bouche du personnage sur l'image, jusqu'à une position quelconque sur les slides. Pour cette première bulle, je donne l'id "minato"

    Maintenant, pour avoir la forme de bulle avec le petit triangle, je rajoute un div de classe "bubble". De plus, je donne une deuxième classe: bubble_left (ou bubble_right pour les bulles qui seront pour les personnages positionnés à droite). En effet, quand on met un espace dans les guillemets de l'attribut class, cela veut dire qu'il y a plusieurs classes. Donc class="bubble bubble_left" signifie que ce div est à la fois de la classe bubble et de la classe bubble_left. C'est très utile, et beaucoup utilisé sur FA, donc vous rencontrerez très souvent ce genre de notations Wink


    Maintenant, j'aimerais mettre au sein de mes bulles un titre, ainsi qu'un petit texte. Il me suffit alors de les ajouter avec les bonnes baises:


    Et voilà qui est fait!

    Notez cependant que le texte ne doit pas dépasser la hauteur de la bulle! En effet, il ne sera pas possible de faire un overflow: auto, vu que la souris ne pourra pas aller sur la bulle sans que cette dernière ne disparaisse! Ici, je prévois donc que toutes les bulles auront la même taille, cependant, vous pouvez donner une id à chaque bulle pour changer sa taille dans le CSS!

    Le CSS


    Le CSS est donc ce qui va nous permettre de faire apparaitre et disparaitre cette petit bulle! Rien de très compliqué en réalité, mais je vais tout de même vous montrer tout le processus!

    Donc en premier, on va commencer par le div qui a été rajouté en premier: infos_slide. Celui-ci n'a pas de couleur de fond, vu qu'il ne va que contenir la bulle. En effet, vu que je veux faire le petit triangle "comme si il parlait" il me faut absolument une bulle en absolue pour la cntenir, et c'est sur elle que se fera le mouvement. Cependant, je vais donner à chaque id individuellement le mouvement à faire, car je veux que chaque bulle ait un mouvement particulier: qu'il aille de la bouche du personnage à un endroit quelconque sur la PA. Cependant, vu que je veux que toutes les bulles aient la même taille, je fixe une taille précise!
    Si je voulais que chaque bulle ait une taille spécifique, je devrais mettre la taille dans l'id spécifique (par exemple #minato), mais aussi utiliser cette id pour donner une taille à la bulle DANS l'id. Je donnerais un exemple plus tard.

    Vous remarquerez en plus de cela le visibility: hidden et l'opacity: 0; En effet, je ne veux pas que la bulle s'affiche tant qu'on ne passe pas la souris sur l'image! Cependant, avant de passer à l'affichage, je vais m'occuper des autres div que contient infos_slide, mais surtout, en tout premier, l'id!

    Ici, je prends comme exemple l'id minato: je lui donne une certaine position absolue, qui correspond la bouche du personnage sur mon premier slide pour le côté en bas à gauche de ma bulle, vu que c'est là que j'aurais le petit triangle qui fera comme si Minato "parle"

    Notez que chacune de mes id aura donc une position spéciale, mais que seul cela change! Si je voulais cependant que la bulle ait une taille spéciale, je devrais plutôt écrire ceci:

    Et retirer le width et le height dans infos_slide!

    Maintenant pour la bulle! Rappelez-vous que nous avons deux classes: bubble et bubble_left ou bubble et bubble_right, selon quel côté est mon personnage. Minato étant à gauche, pour lui c'est bubble et bubble_left!

    Commençons par bubble: cette classe va contenir tout ce qui est commun à TOUTES les bulles: la taille, la couleur de fond, les bords arrondis, etc.
    Vous remarquerez aussi que bubble est en position: relative! C'est pour mettre ensuite le petit triangle pour parler.


    Maintenant, si vous voulez avoir qu'une ou plusieurs caractéristiques soient différentes pour chaque bulle, il faudrait utiliser l'id d'info_slides pour changer cela, tout en supprimant les effets de .bubble (quitte à supprimer totalement la classe). Cependant, n'oubliez alors pas de le mettre pour chaque bulle!
    Voilà ce qu'il faudrait faire:


    Maintenant, mettons le petit triangle pour les bulles des perosnnages de gauche Pour cela, nous utilisons .bubble.bubble_left, cela indique que c'est tout objet de classe bubble ET bubble_left qui aura ceci! On en fera de même avec bubble_right, dont je donnerais le code sans explication plus tard!
    Notez cependant que on le place TOUJOURS en bas à gaiche de la bulle! si vous voulez modifier ça, il faudra, encore une fois, utiliser l'id de la bulle comme plus tôt sans oublier l'espace entre l'id et les classes. En effet, les bulles ne sont PAS à la fois de l'id minato et de leurs classes, mais les FILLES de l'id minato! (j'ai exliqué plus tôt le principe de paternité, donc je m'étale as là-dessus!)

    Bref, voici le code pour bubble_left:


    Voici donc le même code mais pour les bulles des personnages qui sont à droite grâce à bubble_right:


    Maintenant qu'on a ça, parlons un peu de la façon d'afficher au passage de la souris sur l'image la bulle. D'abord, on va vouloir afficher infos_slide:


    Maintenant que nous avons ceci, il est assez clair de comment le déplacement va se faire sur la bulle: on va utiliser le même sélecteur, mais sur la bulle qui est à la fois de la bonne id et de la bonne classe. Du coup, pour l'infos_slide d'id minato on aurait:

    Et voilà! Vous avez tout ce quil vous faut pour votre bulle et la faire apparaitre!

    Mais peut-être vous demandez-vous encore comment j'ai fait l'intérieur, avec mon joli titre (h1) et mon petit paragraphe (p).

    Pour les titres: rien de compliqué! Tout d'abord, j'annule tous les effets qui sotn déjà dans FA pour ne pas avoir de problèmes, et après, je leur donne quelques propriétés qui devraient vous êtres connues: couleur, couleur de fond, taille, police, etc. Bref, rien de bien sorcier! Le border.radius va d'ailleurs me permettre de suivre la forme de la bulle (bu que je ne peux pas mettre d'overflow: hidden, ou on ne verra pas le petit triangle...)


    Pour les paragraphes: c'est le meme principe. On enlèves quelques trucs de FA qui sont déjà là de base, et ensuite, on met en forme. De plus, je donne une taille bien précise pour ne pas que ça ne sorte de la bulle et pas d'overflow: auto vu que la souris ne peut pas atteindre les bulles! J'ai donc un overflow: hidden juste pour faire sûr!


    Et voilà! Notre slideshow est terminé!
    Cependant, si vous voulez mettre autre chose que juste ds images et des bulles dans votre slideshow, je vous conseille de lire ce qu'il suit!

    Mettre autre chose dans son slideshow


    Imaginons donc maintenant que je veux un slideshow où chaque slide a une image différente (pourquoi pas une image panoramique) et aussi des contenus en div. Il y a quelques changements à faire non? En gros quelque chose comme ça (mais ici, je n'ai fait que la première slide).

    Le HTML


    Pour le HTML, à vrai dire, pas grand chose ne change, si ce n'est que l'on va remplacer l'intérieur des slides (qui étaient que des images et une div de bulle je le rappelle) par plusieurs (ou même une seule) div et rajouter des id des slides. Mais allons par étape...

    Tout d'abord, vous vous rappelez que notre slideshow "de base" avait ce code HTML:


    Jusqu'ici, rien ne change. Je vais cependant ajouter un id à chaque slide, vu que je veux que chaque slide ait son propre fond!


    Et maintenant, il suffit d'ajouter ce que je veux dedans! Je vais tout de même vous montrer ce que j'ai fait pour le premier slide. Tout d'abord, j'ai ajouté un titre:


    Ensuite, j'ai décidé de couper en deux parties: celle de droite (qui contiendra les prédéfinis) et celle de gauche, qui contiendra le contexte et le texte d'accueil:


    Et maintenant, dans la partie de gauche, j'ajoute l'accueil et le contexte:


    Et bien sûr je remplis tout ça avec les bons textes et images. Pour le contexte et l'accueil, je les entoure de la balise pour les paragraphes. Vous comprendrez dans le CSS très vite pourquoi!


    Et voilà qui est terminé pour le HTML! Passons au CSS!

    Le CSS


    Encore une fois pour rappel, voici le CSS de base: remarquez cependant que j'ai SUPPRIMÉ le background-image de #slides, étant donné que je veux que chaque slide ait son image de fond!


    Maintenant, il est temps d'ajouter les fond à chacun! Pour moi, ce n'est qu'une seule et même image, que je vais déplacer à l'aide du background-position. Et grâce au background-size dont nous avons parlé plus tôt, je vais le mettre à la bonne taille. Vu que j'ai 5 slides de 800px, cette bonne taille est de 4000px (5*8*100). Pour donc faire appel à ceci, je fais comme plus tôt: les slides à la fois de class a_slide et d'une certaine id auront ce fond. Si je fais cela, c'est au cas où ailleurs sur le forum, il y aurait un id first ou second, vu que ce sont des mots assez "usuels".


    Et voilà! Vous avez donc une slideshow avec "un fond par slide"! Cependant, pour ce tuto ce n'est pas encore tout à fait terminé: comme promis, je vous montre comment j'ai fait l'intérieur de ce premier slide!

    Commençons par le titre! Tout d'abord, j'ai retiré toutes les marges et donné une taille prédéterminée. En effet, je ne voulais pa que mon titre prenne trop de place, pour avoir de la place en dessous de lui et "coller" mes autres div à lui. Vu que les titres ont un overflow visible de base, ce n'est pas un problème ici: on verra le texte même s'il dépasse la hauteur souhaité! Sinon, je crois que le reste du code est tout à fait compréhensible (PS: notez que je n'ai pas supprimé tous les effets de FA ici, vu que ça ne gêne pas mon titre dans ce cas. Cependant, c'est une bonne pratique de le faire! J'ai juste eu la flemme à vrai dire.... faites pas comme moi je vous en prie!)


    Maintenant, il est temps de placer le div qui contiendra tout ce qui est à gauche, et celui des predefs. Tous deux seront mis côte-à-côte grâce à un display inline-block, et je leur donne une certaine taille et une marge pour qu'ils ne soient pas collés l'un à l'autre. #gauche n'aura pas de couleur de fond, mais #predefs oui vu que c'est un bloc "seul". De plus, j'ajouter un padding à predefs (ce qui m'oblige à raccourcir la hauteur, car padding+hauteur = hauteur réelle) car j'ai remarqué plus tard que les images étaient trop collées en haut.


    Maintenant que c'est fait, je peux m'occuper des deux blocs dans #gauche. Ceux-ci auront plus ou moins les même caractéristiques que #predefs, mais le display: inline-block en moins et, bien sûr, avec une autre taille! Vous remarquerez que, pour cette dernière, j'ai d'ailleurs utilisé des pourcent. Ce n'est bien sûr pas obligatoire et vous auriez pu tout mettre en pixels, ou même, un pourcentage pour la largeur et des pixels pour la hauteur ou vice-versa!


    Maintenant que je me suis occupée de tous mes blocs, je vais m'occuper des paragraphes dans les deux de gauches. Je vais donc donner une certaine hauteur et une certaine largeur à ces paragraphes, ainsi que les centrer dans mes blocs: comme ça, j'aurais un joli overflow qui ne détruit pas la "rondeur" de mon bloc.


    Et enfin, je m'occupe des images de prédéfinis: je les veux rondes, et plus petites que 100px, avec une marge entre elles. Vous remarquerez cependant qu'ici, mes prédéfinis ne sont que des images. La plupart d'entre vous rajouteraient cependant des infobulles, ou au moins un lien autour de chaque image. Bien sûr, c'est possible, mais je ne l'ai pas fait ici, vu que j'ai un autre tuto sur les infobulles qui vous l'explique très bien et que ce n'est pas le propos!



    Et voilà, vous avez votre slideshow (ou presque vu qu'il vous manque encore les quatre autres slides, mais je vous fais confiance pour y arriver Wink )!
    Ce fût long, mais j'espère assez compréhensible! Merci de votre attention et à bientôt!


    Dernière édition par NyoTheNeko le Mer 16 Juil 2014 - 17:53, édité 1 fois


    FémininAge : 22Message(s) : 5018

    Les Guildes
    Guilde des Conteurs:
    0/10  (0/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    10/10  (10/10)
    NyoTheNeko
    le Mer 16 Juil 2014 - 12:49
    Et voilà! Ce tuto est enfin terminé!
    N'hésitez pas à poster à la site pour voir les codes, et surtout, à me dire ce qui ne serait pas clair tant que ce tuto est dans les propositions! Comme ça, je pourrais éclaircir tout ce qui ne va pas! (parce que bon, il est long, alors il est facile, tout autant pour vous de vous perdre, que pour moi de me perdre dans mes explications!)
    Bonne lecture!


    MasculinAge : 22Message(s) : 23
    SatoruMasao
    le Mer 16 Juil 2014 - 22:38
    Wow merci infiniment Nyo t'es une pro ! Je vais essayer de reproduire le tuto en espérant y arriver parce que sa ma l'air long x)
    FémininAge : 24Message(s) : 213
    shala
    le Jeu 7 Aoû 2014 - 14:56
    merci ^^


    FémininAge : 21Message(s) : 5
    Youmu
    le Sam 9 Aoû 2014 - 19:22
    Merci beaucoup !
    MasculinAge : 22Message(s) : 142

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Databar
    le Sam 30 Aoû 2014 - 23:56
    merci :3
    FémininAge : 17Message(s) : 75
    Fleurine
    le Mer 10 Sep 2014 - 12:12
    Merci!! =D
    MasculinAge : 21Message(s) : 2102

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Alzufen
    le Mer 10 Sep 2014 - 12:25
    Merci du partage Nyo, c'est le genre de technique que j'appelle moi "Triche" et que j'adore :)

    Pourquoi triche ? Parce que là on fait ce qu'on désire avec quelque chose qui n'est pas prévu pour ça... Pour le coup, avec cette technique on peut aussi faire un jeu d'onglet sans target et sans JS non ? Ca me donne envie de tester Razz


    MasculinAge : 31Message(s) : 31698

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    5/10  (5/10)
    Guilde des Architectes:
    3/10  (3/10)
    Okhmhaka
    le Mer 10 Sep 2014 - 12:32
    Superbe tuto ! Un grand merci, le résultat est magnifique je trouve.

    Je déplace dans la section du coup^^


    MasculinAge : 17Message(s) : 167

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    tamanegeek
    le Sam 20 Sep 2014 - 17:56
    Merci bien !
    FémininAge : 22Message(s) : 54
    Miyoshi
    le Lun 22 Sep 2014 - 10:03
    Un grand merci !
    FémininAge : 20Message(s) : 75
    mini-mimi
    le Sam 27 Sep 2014 - 14:17
    merci !
    FémininAge : 26Message(s) : 761

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Chocolakato
    le Jeu 2 Oct 2014 - 13:34
    ah tiens, on peut faire ça o_o
    Tu as égayé ma journée, merci !


    FémininAge : 25Message(s) : 1173

    Les Guildes
    Guilde des Conteurs:
    3/10  (3/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    0/10  (0/10)
    Rozenbrez
    le Lun 6 Oct 2014 - 21:04
    Enfin un tuto sur le slideshow totalement détaillé! Merci Nyo' pour ce travail titanesque qui vas bien me servir <3


    MasculinAge : 33Message(s) : 339

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    skyfighter
    le Jeu 16 Oct 2014 - 12:48
    merci




    FémininAge : 26Message(s) : 103
    Amaluna
    le Ven 17 Oct 2014 - 6:39
    Omg. Depuis le temps que je cherches ce code !! Very Happy
    Merci beaucoup !!
    En plus grâce à toi j'ai compris un truc que j'avais tenter de faire des millions de fois!
    FémininAge : 27Message(s) : 149
    Nalex
    le Ven 24 Oct 2014 - 20:58
    Je viens de découvrir que ma demande de codage s'appelle "slideshow". Et du coup je suis tombée sur ton tuto! Je vais voir si j'arrive faire quelque chose avec tes explications. Merci du partage :)


    FémininAge : 26Message(s) : 118
    Celuna
    le Mer 5 Nov 2014 - 0:49
    Super tuto... merci bcp
    FémininAge : 22Message(s) : 83

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    zbou
    le Mer 5 Nov 2014 - 9:14
    Merci beaucoup :3
    MasculinAge : 99Message(s) : 91

    Les Guildes
    Guilde des Conteurs:
    2/10  (2/10)
    Guilde des Illusionnistes:
    0/10  (0/10)
    Guilde des Architectes:
    2/10  (2/10)
    Fangs
    le Mar 11 Nov 2014 - 13:59
    Merci beaucoup *-* C'est génial Very Happy
    FémininAge : 26Message(s) : 50
    kreou
    le Mar 11 Nov 2014 - 20:36
    Han merci de ce tuto, il est géniale *___*
    Depuis le temps que je cherchais comment faire !
    FémininAge : 21Message(s) : 43
    Daisukai
    le Dim 16 Nov 2014 - 14:32
    Merci
    FémininAge : 27Message(s) : 32
    Xona
    le Lun 1 Déc 2014 - 16:50
    Merci beaucoup :)
    FémininAge : 23Message(s) : 82
    MLD
    le Dim 28 Déc 2014 - 19:34
    c'est vraiment très pratique, merci énormément! =)
    Contenu sponsorisé
    Aujourd'hui à 16:40

      La date/heure actuelle est Sam 3 Déc 2016 - 16:40