Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

CSS : Positionnement et mise en page

Aborder les exclusions et ses propriétés

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Détaillez les diverses propriétés des exclusions. Au lieu de travailler avec du remplacer et du rechargement de page, utilisez un peu de JavaScript de manière automatique.
05:28

Transcription

Plutôt que d’explorer une à une en changeant manuellement les diverses valeurs de la propriété wrap-flow ici, ce que je vous propose de faire c’est de mettre en place un petit javascript qui pourra être utilisé. D’ailleurs je vous invite après à le faire pour le text-align, si vous le souhaitez, vous pourez l’adapter pour le text-align il a été commenté, ce qui veut dire que chaque fois qu’on voudra modifier la valeur de text-align il faudra venir la modifier dans le code. Alors ce javascript qui va nous permettre de gérer le changement de propriété est relativement simple. Donc ici on se base sur ce html-là qui contient un article id=container. Au sein de l’article on a une figure id=boîte qui va contenir une image et un fig-caption tout simplement, et puis en dehors de l’article on a un input-curseur de type et un select de type id=flow-type qui va permettre de sélectionner le type de la valeur de la propriété wrap-flow que l’on va pouvoir appliquer, à savoir auto, start, both, end, clear, un maximum, minimum. Donc ce javascript va au chargement de la page mémoriser deux variables qu’on va réutiliser, même trois qui sont boîtes, curseur et largeur f. Dans le curseur on va mémoriser le curseur, la boîte la boîte, on n’a pas besoin de mémoriser le flow-type, c’est le sélecteur ici, cet élément va être réutilisé de manière interactive, mais une fois qu’on aura placé un écouteur il n’y aura plus besoin de faire quoi que ce soit avec lui. Et donc on va récupérer la largeur de référence qui correspond à la largeur du container, à laquelle on va retrancher ici la largeur de la boite. Donc ici on sait qu’on a la largeur de référence sur laquelle on va pouvoir se promener. On va la voir juste après. On va placer maintenant un inspecteur ici qui a pour valeur false qui va être simplement une sorte de pointeur vers cette intervalle qu’on va mettre en place. Le curseur, chaque fois qu’on va appuyer dessus on va déplacer deplaceDebut et peu importe dès qu’on va retirer la souris vers le haut , peu importe où l’on soit, qu’on soit toujours vers le curseur ou pas on va faire un deplaceFin tout simplement. Ce qui veut dire qu’au moment où on va faire un déplace début, on va lancer un interval toutes les 300 millisecondes qui évoque encore la fonction deplace. Et dès qu’on relève la souris on invoque un deplaceFin , on le voit, et on arrête d’évoquer la fonction déplace. Ce que l’on va faire de la fonction déplace, on va vérifier la valeur du curseur, n’oublions pas que le curseur est le champ de type input, champ de type html 5. Donc on va récupérer cette valeur et on va calculer la position x qui sera la position curseur fois la largeur référence fois 100. On fait simplement une règle de trois pour connaître où positionner notre boîte et donc on va positionner le style-left de la boîte sur cette valeur. Chaque fois qu’on va changer le flow-type ici, on avait vu qu’au départ on récupérait un flow-type et on plaçait un écouteur de type change ici, chaque fois qu’on va modifier la valeur de ce sélecteur on lui dit qu’on va récupérer la valeur que tu as, n’oublions pas que la valeur correspond aux valeurs de propriétés en fait, on va lui dire que tu l’appliques à la valeur de propriété wrap-flow de la boîte tout simplement. Voilà donc ici il suffit de se placer dans un navigateur. Attention de type Microsoft Internet Explorer ou Edge, n’oublions pas le préfixe ms et le navigateur, et ici on va pouvoir déplacer notre boîte en fonction de ces éléments. N’oublions pas qu’on a levé la largeur offset de la boîte pour être sûr de la bloquer en butée et ici. Si on place une valeur both ici, on sait que le flux va passer des deux côtés. Si on place une valeur maximum on sait qu’on va avoir une valeur maximum. On va se demander qu’elle va être la différence entre une valeur maximum, entre end, par exemple si je prends end, c’est pareil, sauf qu’end je le force à passer de ce côté-là, que ce soit le maximum ou pas. Alors que maximum va chercher le maximum. Regardez ici, je suis en end, si je viens ici je continue à passer de ce côté. Sauf que si je demande le maximum maintenant, forcement je vais passer de l’autre côté, puisque le maximum est de là. Vous avez la possibilité d’avoir auto, où il ne se passe rien, both des deux côtés, start au début, end on passe à la fin, end maximum ou minimum, on passe d’un côté ou de l’autre. Alors vous avez vu ici il n’y a que maximum, il n’y a pas minimum, tout simplement parce que j’ai modifié cette valeur ici, avant de l’enregistrer. Si j’enregistre cette partie-là et surtout que je réactualise dans le navigateur, maintenant la valeur minimum apparait. Pour vous montrer que tout ce lecteur peut être interactif et s’adapter au contexte. C’est là où je vous invite si vous voulez à créer deux trois boutons qui vont dire regardez le texte est justifié, le texte est à gauche ou à droite, au centre. Regardez, si je viens dans la partie, déjà je vais placer ma boîte à ce niveau-là, et si je lui dis tu passes par le start, on passe bien de ce côté, mais c’est pas très joli de ce côté, et c’est vrai qu’il faudrait venir dans le texte ici lui demander d’avoir un text-align, soit de justify soit aligné à droite, je l’enregistre en justify de façon à ce que lorsque l’on passe dans le texte pour avoir cette bordure qui soit épousée au lieu d’avoir une sorte d’édentation-là. Voilà donc, des propriétés multiples qui correspondent à un choix et à un besoin de flottaison sur le côté maximum côté minimum, début ou fin, mais je vous invite maintenant à passer sur les shapes pour mieux voir justement toutes ces nouvelles approches de l’exclusion qui pourraient faire partie d’une recommandation Shape and Exclusion.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !