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

ALIGNEMENT EN CSS

Aligner des éléments HTML grâce au CSS

Il existe différentes méthodes en CSS nous permettant d’aligner horizontalement ou de centrer des éléments HTML.

Dans cette dernière partie consacrée au modèle des boîtes, nous allons voir trois manières couramment utilisées pour aligner ou centrer des éléments HTML dans une page :

  • En utilisant la propriété margin ;
  • En utilisant la propriété position ;
  • En utilisant la propriété float.

Cette partie de comporte pas de nouvelles propriétés CSS. Nous allons voir ou revoir comment exploiter à leur maximum des propriétés déjà vues précédemment.

Centrer horizontalement avec margin

Nous avons déjà vu comment centrer horizontalement un élément HTML en utilisant la propriété CSS margin avec sa valeur auto. Ceci ne devrait donc être qu’un rappel.

On va indiquer deux valeurs à la propriété margin : une valeur pour les marges haute et basse (au choix) et la valeur auto pour les marges gauche et droite, ce qui va avoir pour effet de centrer notre élément HTML.

Attention cependant : rappelez vous que l’élément à centrer doit être de type block et posséder une largeur définie pour pouvoir être centré correctement.

On peut centrer horizontalement un élément de type block grâce à la propriété margin

On utilise margin : auto en CSS pour centrer un élément HTML

Notre élément HTML de type block a bien ét centré grâce à margin auto

Essayer ce code

Notez bien que lorsque vous centrez un élément de type block horizontalement dans une page, c’est bien l’élément en soi (c’est-à-dire tout le bloc) qui est centré dans la page.

Pour centrer le contenu de l’élément dans le bloc (par exemple le texte de notre élément h1), nous devrons en plus utiliser la propriété CSS text-align.

Aligner horizontalement un élément HTML grâce à la propriété CSS position

On peut également aligner horizontalement un élément HTML grâce à la propriété position utilisée conjointement avec les propriétés left et right.

Pour cela, on va utiliser la valeur absolute de la propriété position. Encore une fois, cela nous avons déjà vu cela précédemment.

Lorsque vous centrez des éléments HTML de cette façon, pensez bien à effectuer un « reset CSS », sur votre page, c’est-à-dire à définir des marges intérieures et extérieures sur votre élément body égales à 0px afin d’éviter des différences d’affichage entre navigateurs.

On peut aligner des éléments avec la propriété position

On utilise position en CSS pour aligner nos éléments dans la page

Une petite astuce : vous pouvez également centrer horizontalement un élément en utilisant la propriété position. Pour cela, il vous suffit d’attribuer la même valeur, en pourcentage, aux propriétés left et right.

Cependant, afin que cela fonctionne parfaitement, pensez cette fois à ne pas donner de largeur définie à l’élément HTML ciblé (celui-ci va se recadrer de lui-même selon la valeur attribuée à left et à right et la place disponible).

Centrer horizontalement un élément avec position

On centre nos éléments HTML avec position et une valeur en %

Essayer ce code

Aligner horizontalement en utilisant float

On peut également très simplement aligner un élément sur la gauche ou la droite de la page en utilisant la propriété float et ses valeurs left et right.

Comme pour la propriété position, la propriété float perturbe le flux normal de la page. Pensez donc bien à effectuer un reset CSS des marges intérieures et extérieures sur l’élément body lorsque vous l’utilisez.

On utilise float pour aligner des éléments HTML

Nos éléments flottent les uns à côté des autres grâce à float

Essayer ce code

Chapitre précédent

Chapitre suivant