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 comentaires
  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

LE POSITIONNEMENT EN CSS

La propriété CSS position

On va pouvoir gérer le positionnement de nos éléments HTML en CSS grâce à la propriété CSS position. Cette propriété est à nouveau une propriété très puissante.

Grâce à position, nous allons pouvoir positionner nos différents éléments HTML de façon absolue ou relativement par rapport à d’autres éléments HTML ou par rapport à leur place d’origine entre autres.

La propriété CSS position supporte quatre valeurs différentes que nous allons étudier dans cette partie :

  • static ;
  • relative ;
  • fixed ;
  • absolute.

Nous allons utiliser la propriété position conjointement aux propriétés top, right, bottom et left afin de positionner précisément nos éléments.

Ces quatre propriétés vont pouvoir prendre des valeurs en pixels qui vont indiquer un déplacement d'un élément par rapport à sa position initiale sur un certain bord.

Position : static

La valeur static correspond au positionnement par défaut des éléments HTML dans une page.

Tout élément positionné de façon « static » ne pourra pas être affecté par les propriétés top, right, bottom et left.

Positionnement static des éléments HTML

Top, left, bottom et right n’ont aucn effet avec position : static

Notre paragraphe possède un positionnement static par défaut

Essayer ce code

Comme vous pouvez le voir dans l’exemple ci-dessus, les propriétés top et left n’ont aucun effet sur un élément positionné avec position:static.

Position : relative

Un élément positionné grâce à position:relative va être repositionné relativement par rapport à sa position par défaut.

Par exemple, si on positionne un élément HTML de façon relative et qu’on lui ajoute left:50px, l’élément sera déplacé de 50 pixels vers la droite par rapport à sa position par défaut.

On déplace un élément HTML par rapport à sa position par défaut grâce à position : relative

Notre paragraphe a été déplacé de 50 pixels vers la droite grâce à position : relative

Essayer ce code

Position : fixed

Un élément HTML possédant un positionnement « fixed » va toujours rester à la même place, même si l’un de vos visiteurs descend ("scroll") dans la page.

Cette valeur est très utile pour conserver un élément constamment visible, comme un menu ou un sommaire par exemple.

Test de la valeur fixed de la propriété CSS position

On applique une position fixed à notre titre h1

Notre titre conserve sa position même lorsque l’on descend dans la page grâce à position : fixed

Essayer ce code

Ici, nous avons appliqué une position:fixed à notre titre et l’avons placé en haut de notre page, à 200 pixels vers la droite. Notez que nous avons ajouté des espaces dans notre page pour tester la propriété CSS position.

Comme vous pouvez le voir, lorsque l’on descend dans la page, notre titre h1 conserve sa position.

Position : absolute

La valeur absolute de la propriété position va nous permettre de positionner un élément de façon relative par rapport à son parent le plus proche auquel on a appliqué un positionnement spécifique (relative, fixed ou absolute).

Attention : si l’élément auquel on applique position:absolute ne possède pas d’élément parent positionné spécifiquement, celui-ci va se positionner par rapport à la page entière.

Faîtes bien attention à l’utilisation de cette valeur, car si vous ne maitrisez pas parfaitement la propriété position vous risquez d’arriver assez vite à un comportement non désiré, car la valeur absolute sort totalement un élément HTML du flux normal de la page web.

On utilise position : absolute dans différents contextes

Test de la propriété CSS position avec sa valeur absolute

Nos éléments ont été positionnés de façon absolue dans la page

Essayer ce code

Le z-index

La propriété position nous permet de modifier et de casser le flux normal des éléments HTML dans la page en les positionnant où l’on souhaite dans la page.

Parfois, en modifiant la position des éléments ou pas, certains vont pouvoir se chevaucher. Par défaut, l’élément positionné en dernier apparaitra par dessus les autres.

Cependant, on peut choisir quel élément va apparaître au dessus de quel autre grâce à la propriété z-index.

La propriété z-index va prendre un nombre en valeur : un nombre plus grand positionnera un élément devant un autre ayant un z-index plus petit.

Prenons un exemple pour illustrer le fonctionnement de la propriété z-index.

On crée une page HTML avec des éléments qui se chevauchent

On place notre div par dessus notre h1 grâce à la propriété CSS position

Notre titre h1 se trouve sous notre élément HTML div

Ci-dessus, on s’est arrangé pour que notre titre h1 et notre élément div se chevauchent. Sans z-index, c’est le dernier élément positionné qui sera « par dessus » l’autre. C’est donc bien le div qui est devant notre h1.

On peut inverser l’ordre de ces éléments en indiquant un z-index avec une valeur plus grande pour notre h1 que pour notre div comme ceci :

On utilise la propriété z-index afin de gérer l’ordre d’affichage de nos éléments

Grâce au z-index, notre élément HTML h1 s’affiche par dessus notre élément div

Essayer ce code

La propriété z-index va être particulièrement utile dans le cas d’un menu déroulant (afin que les rubriques s’affichent devant le reste de la page) ou pour l’affichage de produits dans le cas d’un site e-commerce complexe par exemple dans lequel de nombreux div et autres éléments HTML risquent de se chevaucher.

Chapitre précédent

Chapitre suivant