Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

FLOAT ET CLEAR

La propriété float

La propriété float va nous permettre de faire « flotter » des éléments HTML à gauche ou à droite dans une page web.

On utilisera généralement soit la valeur right (l’élément ciblé flotte à droite), soit left (l’élément ciblé flotte à gauche) avec cette propriété.

La propriété float va faire sortir un élément du flux normal de la page. Il y a trois choses à retenir lorsque l’on utilise cette propriété :

  1. Les éléments suivants un élément flottant vont se positionner à côté de celui-ci par défaut. Nous allons pouvoir annuler ce comportement grâce à la propriété clear ;
  2. Les élément positionnés de façon absolue avec position:absolute ignoreront la propriété float (ils ne pourront pas flotter) ;
  3. Un élément flottera toujours dans les limites (en terme de largeur) de son élément parent conteneur.

Utilisation de la propriété float

On fait flotter nos différents éléments HTML grâce à la propriété CSS float

Nos éléments HTML flottent à gauche ou à droite grâce à float

Essayer ce code

Ci-dessus, on fait flotter notre élément HTML h1 sur la gauche de la page. Ainsi, s’ils ont la place nécessaire, les éléments suivants l’élément h1 viendront se positionner par défaut à côté de celui-ci.

On fait ensuite flotter notre élément div sur la droite. Celui-ci se positionne donc bien par défaut sur la « même ligne » (imaginaire) que h1 mais à droite de notre page.

Finalement, on fait flotter notre premier paragraphe à droite dans notre div. Cela a pour effet de placer notre deuxième paragraphe sur la même ligne que le premier… et sur sa gauche !

Arrêter le flottement avec clear

La propriété clear va nous permettre de contrôler le comportement d’éléments flottants.

Plus précisément, cette propriété va nous permettre d’empêcher des éléments de venir se positionner aux côtés d’éléments flottants.

Cette propriété peut prendre les valeurs suivantes :

  • Left : neutralise l'effet d'un float:left ;
  • Right : neutralise l'effet d'un float:right ;
  • Both : neutralise l'effet d'un float:left et d'un float:right ;

Faîtes bien attention à appliquer le clear à l’élément qui va venir flotter par défaut autour de l’élément flottant, pas à celui qui possède la propriété float.

Par défaut, les éléments après un élément flottant vont venir se placer à côté de celui ci

Notre div se place autour de notre h1 flottant

Nos élément div et h1 sont au même endroit, superposés

Essayer ce code

Dans l’exemple ci-dessus, nous avons fait flotter notre titre h1 sur la gauche. Par défaut, le div en dessous du h1 dans notre code HTML va venir se placer sur la même ligne que notre titre et donc se placer autour de notre h1.

Pour éviter ce comportement, on va spécifier un clear:left à notre élément div, afin de l’empêcher de venir flotter autour de notre h1.

On utilise clear pour empêcher un élément de venir flotter autour d’un autre

Grâce à clear, notre div est en dessous de notre élément HTML h1

Essayer ce code

Gestion du débordement (l’overflow)

Vous devez faire bien attention en utilisant la propriété float car celle-ci va également sortir complètement un élément HTML du flux normal de notre page web.

Ainsi, si un élément flottant est plus grand que son élément parent conteneur, celui-ci va déborder de son conteneur verticalement.

Afin d’éviter ce comportement, on peut utiliser la propriété overflow qui va nous permettre de cacher (ou pas) ce qui va dépasser.

Cette propriété peut prendre les valeurs suivantes :

  • Visible : valeur par défaut (rien ne sera coupé) ;
  • Hidden : ce qui dépasse sera coupé ;
  • Scroll : coupe de qui dépasse et ajoute une barre de défilement afin d’avoir accès à tout le contenu ;
  • Auto : Laisse le navigateur décider du meilleur choix ;
  • Initial et inherit.

Voyons immédiatement quelques exemples utilisant ces différentes valeurs. Commençons déjà par constater le problème avec un overflow:visible par défaut.

Un élément flottant peut dépasser de son container

Par défaut, l’overflow sera visible

Nos paragraphes flottant dépassent du div parent

Observons maintenant la différence avec un overflow:hidden. Tout ce qui dépasse va être coupé et caché.

Utilisation d’overflow hidden pour cacher le contenu qui dépasse

La propriété overflow en CSS permet de cacher du contenu qui dépasse

Essayer ce code

Finalement, regardons à nouveau le comportement avec un overflow:auto (qui correspond généralement, en cas de dépassement, à overflow:scroll pour des navigateurs modernes).

Utilisation d’overflow auto pour cacher le contenu qui dépasse

Overflow auto en CSS correspond à overflow scroll

Essayer ce code

Comme vous pouvez le voir, dans ce dernier exemple, une barre de défilement est apparue nous permettant d’avoir accès à tout le contenu caché.

Chapitre précédent

Chapitre suivant