Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Faire flotter les images dans le texte

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Voyez comment réaliser deux classes CSS permettant de faire flotter les images, soit à gauche, soit à droite du texte.

Transcription

Avant de passer à la mise en forme de la zone suivante, nous allons parler un petit peu de la problématique de ces images que l'on rencontre dans le texte. Donc vous voyez ici l'image de l'ordinateur qui alignée à gauche avec du texte qui l'enrobe par la droite. Et puis on va partir du principe que la situation inverse est envisageable également c'est à dire des images qui sont sur la droite, avec du texte qui les enrobent par la gauche. Je vais pour cela retourner dans ma feuille de style et ajouter ici deux sélecteurs, donc je vais copier-coller ceci : « mainContent article ». Je m'adresse aux images qui sont dans cet élément. Certaines d'entre elles seront à gauche, d'autres seront à droite. J'ai donc besoin de deux classes. Une que je fais appeler par exemple « alignLeft » comme ceci. Et puis je vais dupliquer cette ligne de code avec Control ou Command D, et je vais créer ma deuxième classe : « alignRight » comme ceci. Alors je vais mettre ici une seule propriété CSS. Ce sera un « float left ». Et puis dans l'autre classe, la même propriété CSS, mais ce sera ici un « float right ». Une fois que ces deux classes sont créées, je vais retourner dans mon code HTML. Voici l'image en question, donc je vais maintenant lui mettre par exemple, la classe « align right ». Je sauvegarde, je reviens dans le navigateur. Je rafraichis ma page, et vous voyez ici que la photo se met bien à droite. Je vais revenir dans mon code HTML, et au niveau de mon code HTLM, je vais changer une petite chose, c'est « align left » comme ceci, je sauvegarde, je reviens dans mon navigateur, et regardez mon image est maintenant sur la gauche. Alors il y a encore un tout petit truc à régler ici, c'est tout simplement que je n'ai pas d'espace entre mon image le texte. Donc pour ça, je vais retourner dans ma feuille de style. Et je vais rajouter à ces deux classes, une petite marge. Quand l'image est sur la gauche, la marge du dessus est à 0 pixel, la marge de droite est à, mettons, 10 pixels. La marge du bas à 10 pixels et la marge de gauche à 0 pixel, comme ceci. Tandis que quand l'image flotte à droite, la marge du dessus est toujours à 0 pixel, la marge de droite à 0 pixel également, la marge du bas à 10 pixels et la marge de gauche à 10 pixels, comme ceci. Je sauvegarde, je reviens dans le navigateur, je rafraichis. Et voilà, vous avez donc ici un petit espace, vous le voyez, entre l'image et le texte.

Créer une page web interactive depuis une maquette Photoshop avec HTML5 et CSS

Passez d’une maquette au format Photoshop vers une page web interactive en HTML5 et CSS. Découvrez des outils et des techniques indispensables dans votre travail d’intégrateur.

3h16 (43 vidéos)
Aucun commentaire n´est disponible actuellement
 

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 !