Partagez | 
 

 [HTML/CSS] TOUT sur le centrage horizontal et vertical

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Eluknow

Doyen

Bons Points (BP) : 109

Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

MessageSujet: [HTML/CSS] TOUT sur le centrage horizontal et vertical   Sam 4 Nov - 12:05
Bonjour à tous !

Me revoilà avec un nouveau tutoriel adapté de mon site, en espérant qu'il soit utile à la communauté ici Wink.

TOUT sur le centrage horizontal et vertical


Bonjour !

Dans ce tutoriel, nous allons apprendre à centrer nos textes, nos balises, que ce soit verticalement ou horizontalement, quelque soit l'état de ces derniers ! En passant par les flexbox jusqu'aux positions absolues, nous verrons tout sur le centrage ! C'est parti èé !

Le centrage horizontal

Commençons donc notre tutoriel par le centrage horizontal. Le centrage horizontal consiste à centrer un élément dans le sens de la largeur. Etant donné que l'élément peut être de différentes natures, nous allons essayer de toutes les traiter ! A commencer par le centrage de texte.

Centrer horizontalement des textes

Pour centrer du texte horizontalement dans une balise, c'est simple au possible... Il suffit d'utiliser la propriété text-align de CSS, avec la valeur "center". Voici un exemple ! Prenons ce code :
Code:
<!DOCTYPE html>
<html lang="fr">
   <head>
     <meta charset="utf-8">
     <title>Centrages</title>
     <style type="text/css">
        #container{
           width: 600px;
           border: 1px solid black;
        }
     </style>
   </head>
<body>
   <p id="container">Moi je veux être centré :'(</p>
</body>
</html>
Regardons le résultat :

Pour centrer ce texte, nous utiliserons text-align: center; :
Code:
<!DOCTYPE html>
<html lang="fr">
   <head>
     <meta charset="utf-8">
     <title>Centrages</title>
     <style type="text/css">
        #container{
           width: 600px;
           border: 1px solid black;
           text-align: center;
        }
     </style>
   </head>
<body>
   <p id="container">Ca y est, je suis centré !</p>
</body>
</html>
Et regardons le résultat :

Notre texte est bien centré ! Enchainons avec le centrage d'une balise de type block en position statique !

Centrer horizontalement des balises blocks statiques

Dans ce cas, le centrage se fait de manière assez aisée avec la propriété margin utilisée avec la valeur auto ou 0 auto;. Utiliser cette propriété permettra de centrer horizontalement le bloc par rapport à sa balise parente.
Essayez ce code :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
      <title>Centrage</title>
   <meta charset="utf-8" />
   <style>
    #container{
       width: 600px;
       height: 200px; /** Pas obligatoire pour margin: auto car on centre horizontalement. Il faut donc savoir essentiellement la largeur du bloc, pas sa hauteur **/
       margin: auto;
       background: orangered;
    }
   </style>
</head>
<body>
   <p id="container">Tralalala</p>
</body>
</html>
Vous verrez que le bloc est bien centré dans sa balise parente, c'est à dire la balise body, c'est à dire centrée dans la page Wink. (puisque body englobe toute la page). Il est également possible de modifier le type de la balise qu'on veut centrer horizontalement en le mettant à inline-block et en attribuant la propriété text-align: center; à la balise parente comme suit :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
  <meta charset="utf-8" />
  <style>

     div{
        text-align: center;
        border: 4px solid green;
     }
    #container{
      width: 600px;
      height: 200px;
      background: orangered;
      display: inline-block;
    }
  </style>
</head>
<body>
   <div>
        <p id="container">Tralalala</p>
     </div>
</body>
</html>
Nous avons aussi le choix d'utiliser les flexbox (mais attention, cette technique ne fonctionne pas sur IE < 11). Pour cela, on attribue le type "flex" à la balise parente et on utilise la propriété "justify-content: center;".
Voici un exemple :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
      <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      display: flex;
      justify-content: center;
      border: 4px solid green;
   }
    #container{
       width: 600px;
       height: 200px;
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>
Et voilà pour cette partie !

Centrer horizontalement des balises blocks en position absolue pour relative

Essayons avec la technique du margin: auto :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
        <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 400px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       position: absolute;
       margin: auto;
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>
Le résultat n'est pas fameux :

Si on avait mis position: relative, on aurait obtenu ça :


Nous allons donc voir régler tout ça...
Commençons dans le cas où nous avons notre paragraphe qui est en position absolue. Là, nous devons mettre la balise parente par rapport à laquelle nous voulons centrer l'élément dans une position relative. Dans notre cas, on veut le centrer horizontalement par rapport à la div. On met donc la div en position relative. Du coup, les propriétés left, right, top et bottom s'opèreront par rapport à la div ! Pour continuer, il suffit maintenant d'attribuer un left à 50% sur le paragraphe, ainsi qu'une marge à gauche négative équivalente à la moitié de la largeur totale du paragraphe. Ainsi, cette technique implique de savoir la largeur du paragraphe ! (nous verrons juste après la technique dans le cas où nous ne la connaissons pas). Imaginons que notre paragraphe fasse 300px, la marge à gauche sera égale à -150px ! Du coup, voici le code qu'on a et son résultat :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
        <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      position: relative;
      width: 500px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       position: absolute;
       left: 50%;
       width: 300px;
       margin-left: -150px;
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>

Le paragraphe est bien centré ! Si maintenant le paragraphe est en position relative (ce qui est moins propre...), c'est plus simple : on n'a pas besoin de mettre la div en position relative :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
      <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 500px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       position: relative;
       left: 50%;
       width: 300px;
       margin-left: -150px;
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>

Dans le cas maintenant où ne ne connaissons pas la largeur du paragraphe, nous allons devoir utiliser un subterfuge ! Mettons notre paragraphe en position absolue et notre div en position relative. Il suffit alors de faire rotationner (hé oué) le paragraphe de -50%, après l'avoir déplacé à gauche de 50%
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      position: relative;
      width: 500px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>
Le résultat est bien celui voulu :


Et voilà !

Centrer horizontalement une balise de type block en position fixée

Là, la balise sera forcément centrée horizontalement par rapport à la balise body, donc centrée horizontalement dans la page, puisque de position fixe. Mais pour arriver à cela, il faut quand même utiliser les mêmes techniques que précédemment :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <meta charset="utf-8" />
   <style>

   div{
      width: 500px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       position: fixed;
       left: 50%;
       width: 300px;
       margin-left: -150px;
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Tralalala</p>
   </div>
</body>
</html>
Même s'il est enfant de la div, il se centre par rapport à la taille du navigateur. Bien, passons maintenant au centrage vertical !

Le centrage vertical

C'est souvent celui-ci qui pose problème !
Comme précédemment, nous allons d'abord voir le centrage vertical des balises de type inline, donc des textes généralement.

Centrer verticalement des textes

Dans le cas où nous connaissons les dimensions des balises, cela simplifie le travail car nous ne travaillerons pas sur le type des balises. Dans le cas contraire, nous y serons contraints ! Commençons donc par la technique lorsqu'on sait les dimensions ! Pour cette méthode, il suffit d'attribuer à la balise qu'on veut centrer verticalement la propriété line-height qui a pour valeur la même que la valeur de la propriété height de la balise parente (ou de cette balise, mais il est rare d'attribuer des tailles aux balises de type inline) !
Par exemple, si on a un span compris dans une div qui fait 200px de haut, hé bien on fera :
Code:
span{line-height: 200px}
Sachez qu'il est également possible d'attribuer ce line-height directement à la balise parente ! Regardez les deux codes :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 500px;
      height: 200px;
      border: 5px solid green;
      line-height: 200px;
   }
    #container{
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <span id="container">Lorem ipsum dolor sit amet.</span>
   </div>
</body>
</html>
Et :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 500px;
      height: 200px;
      border: 5px solid green;
   }
    #container{
       background: orangered;
       line-height: 200px;
    }
   </style>
</head>
<body>
   <div>
      <span id="container">Lorem ipsum dolor sit amet.</span>
   </div>
</body>
</html>
Le résultat est le même et les deux codes sont valides aux normes W3C !

Si par contre, on avait des valeurs inconnues pour les dimensions, par exemple avec des pourcentages comme dans ce code :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   #wrapper {
      height: 300px;
      background-color: purple;
   }

   #wrapper div{
      width: 500px;
      height: 20%;
      border: 5px solid green;
      line-height: 100%;
   }
    #container{
       background: orangered;
    }
   </style>
</head>
<body>
   <div id="wrapper">
      <div>
         <span id="container">Lorem ipsum dolor sit amet.</span>
      </div>
   </div>
</body>
</html>
Le résultat n'est pas celui attendu :

Du coup, les deux solutions quand on n'a pas les dimensions sont :
- Se débrouiller pour les avoir (dans l'exemple au dessus, on peut faire 300 * (20/100), ce qui donne 60px. C'est donc la hauteur de la div, et donc on peut mettre un line-height 60px, ça fonctionne très bien).
- Modifier le type de la balise parente : il existe une propriété CSS qui permet de centrer verticalement, il s'agit de vertical-align. Mais cette propriété ne fonctionne qu'avec les tableaux HTML... Du coup, la technique consiste à modifier le type de la balise parente pour qu'elle soit considérée comme un tableau, de manière à utiliser vertical align qui fonctionnera alors sur la balise enfante qu'on veut centrer !
Du coup, on va attribuer le type "tableau" à notre balise parente grâce à display: table-cell;, puis on va utiliser vertical-align: middle; :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 400px;
      height: 100px;
      border: 5px solid green;
      display: table-cell;
      vertical-align: middle;
   }
    #container{
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <span id="container">Lorem ipsum dolor sit amet.</span>
   </div>
</body>
</html>
Et le résultat est parfait !

Néanmoins attention avec cette technique, car tous les éléments dans la div seront centrés verticalement ensuite, quel que soit leur type. Essayez donc ce code :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 400px;
      height: 100px;
      border: 5px solid green;
      display: table-cell;
      vertical-align: middle;
   }
    #container{
       background: orangered;
    }
   </style>
</head>
<body>
   <div>
      <span id="container">Lorem ipsum dolor sit amet.</span>
      <span style="background: blue;">Deuxième span.</span>
      <div style="background: grey; width: 80%; height: 20%;">Une div dans la div.</span>
   </div>
</body>
</html>

Voilà !

Centrer verticalement des balises blocks statiques

La première technique consiste à utiliser, comme avec les balises inline, le display table cell :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 400px;
      height: 100px;
      border: 5px solid green;
      display: table-cell;
      vertical-align: middle;
   }
    #container{
       background: orangered;
       width: 300px;
       height: 80px;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis sagittis massa, tristique vulputate nisl. Donec non leo quis purus egestas porta euismod vel diam. </p>
   </div>
</body>
</html>
La deuxième consiste à utiliser les flexbox (attention, elles ne sont supportées qu'à partir de IE11). On attribue le type flex à la balise parente et on utilise la propriété align-items avec comme valeur "center". On obtient :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 400px;
      height: 100px;
      border: 5px solid green;
      display: flex;
      align-items: center;
   }
    #container{
       background: orangered;
       width: 300px;
       height: 80px;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis sagittis massa, tristique vulputate nisl. Donec non leo quis purus egestas porta euismod vel diam. </p>
   </div>
</body>
</html>
Et le paragraphe est bien centré :


Centrer verticalement des balises blocks en position absolue ou relative

Dans ce cas, les techniques sont les mêmes qu'avec le centrage horizontal sauf qu'on n'utilisera non pas left, mais top, et non pas translateX mais translateY. On a alors, dans le cas où on connait les dimensions des balises :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Centrage</title>
  <meta charset="utf-8" />
  <style>

  div{
      width: 300px;
      height: 150px;
      border: 5px solid green;
  }
    #container{
      position: relative;
      top: 50%;
      width: 200px;
      height: 100px;
      margin-top: -50px;
      background: orangered;
    }
  </style>
</head>
<body>
  <div>
      <p id="container">Tralalala</p>
  </div>
</body>
</html>
Et dans le cas où on les connait pas :
Attention à ne pas oublier le margin:0;
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Centrage</title>
  <meta charset="utf-8" />
  <style>

  div{
      width: 300px;
      height: 150px;
      border: 5px solid green;
      position: relative;
  }
    #container{
      position: absolute;
      top: 50%;
      width: 200px;
      height: 100px;
      margin: 0;
      background: orangered;
      transform: translateY(-50%);
    }
  </style>
</head>
<body>
  <div>
      <p id="container">Tralalala</p>
  </div>
</body>
</html>
Et le résultat :


Et voilà, le tutoriel est terminé ! En espérant que celui-ci vous aura été utile !

Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussigné, Eluknow, accepte qu'un directeur reposte le présent tutoriel "[HTML/CSS] TOUT sur le centrage horizontal et vertical" tel que je l'ai rédigé.
___________________



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar
En ligne

Agnïeszka

Vive le fromage

Bons Points (BP) : 1525

Voir le profil de l'utilisateur

MessageSujet: Re: [HTML/CSS] TOUT sur le centrage horizontal et vertical   Lun 6 Nov - 16:12
Coucou Elu'

Merci pour le partage Very Happy

Tu connais le système, comme chaque fois, on relit et ensuite on le postera Smile
___________________


Les coups de coeur des Sopiens

Attention, ces sites présentent parfois des contenus mature
Art Of Title  
avatar

Eluknow

Doyen

Bons Points (BP) : 109

Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

MessageSujet: Re: [HTML/CSS] TOUT sur le centrage horizontal et vertical   Lun 6 Nov - 16:57
Coucou Agn',

Oui pas de soucis Wink.

Je vais en proposer d'autres durant les prochains jours/semaines, mon forum n'est plus actif et les tutoriels seront donc bien plus utiles ici. De plus j'ai quelques idées pour de nouveaux tutoriels alors si ça peut aider !
___________________



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar
En ligne

Agnïeszka

Vive le fromage

Bons Points (BP) : 1525

Voir le profil de l'utilisateur

MessageSujet: Re: [HTML/CSS] TOUT sur le centrage horizontal et vertical   Jeu 9 Nov - 17:39
Arf, dommage pour ton forum :/

En tout cas, c'est gentil de les partager ici ^^

Et n'oublie pas qu'on recrute toujours des codeurs :yeux:
___________________


Les coups de coeur des Sopiens

Attention, ces sites présentent parfois des contenus mature
Art Of Title  
avatar

Eluknow

Doyen

Bons Points (BP) : 109

Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

MessageSujet: Re: [HTML/CSS] TOUT sur le centrage horizontal et vertical   Mar 2 Jan - 14:10

Dernière édition par Eluknow le Ven 5 Jan - 12:05, édité 1 fois
Les techniques pour centrer horizontalement


Bonjour !

Dans ce tutoriel, nous allons apprendre à centrer horizontalement nos textes, nos balises ou n'importe quel autre élément, de manière simple et accessible à tous ! Le centrage horizontal consiste à centrer un élément dans le sens de la largeur. Etant donné que l'élément peut être de différentes natures, nous allons essayer de toutes les traiter ! A commencer par le centrage de texte.

Si tu as envie d'apprendre à centrer verticalement, tu peux aller voir du côté de ce tutoriel : [Les techniques pour centrer verticalement]

Prérequis :
  • Connaitre les bases du HTML et certaines balises (div, p, span...) ainsi que leur type (block, inline)
  • Être familiarisé avec les class/id
  • Maitriser le positionnement en CSS ainsi que les propriétés de base (border, height, width, padding, margin...)


Centrer horizontalement des textes

Centrer horizontalement des textes dans une balise block est vraiment simple. Il suffit d'utiliser la propriété text-align de CSS, avec la valeur "center".
Voici un exemple pour mieux comprendre !

Code:
<!DOCTYPE html>
<html lang="fr">
   <head>
     <meta charset="utf-8">
     <title>Centrages</title>
     <style type="text/css">
        #container{
           width: 600px;
           border: 1px solid black;
        }
     </style>
   </head>
<body>
   <p id="container">Moi je veux être centré :'(</p>
</body>
</html>
Regardons le résultat de ce code HTML/CSS qui contient un paragraphe dans lequel il y a un texte (très recherché !) :

Comme on peut le voir, le texte n'est pas centré. Pour qu'il le devienne, il suffit d'utiliser la propriété CSS énoncée juste avant : text-align: center;.

Modifions alors notre code :
Code:
<!DOCTYPE html>
<html lang="fr">
   <head>
     <meta charset="utf-8">
     <title>Centrages</title>
     <style type="text/css">
        #container{
           width: 600px;
           border: 1px solid black;
           text-align: center;
        }
     </style>
   </head>
<body>
   <p id="container">Ca y est, je suis centré !</p>
</body>
</html>
Et regardons le résultat :
Notre texte est bien centré ! Enchainons avec le centrage d'une balise de type block en position statique !

Centrer horizontalement des balises blocks statiques

Formules mathématiques compliquées
Des balises blocks statiques ? Serait-ce une formule de mathématiques compliquée ? Embarassed kleenex
Ne t'inquiète pas ! Ce nom (peut être un petit peu... barbare ?) ne cache rien de bien méchant.
Les balises blocks statiques sont des balises de type blocks (logique me diras-tu) qui n'ont pas vu leur position (en CSS) modifiée ! C'est à dire qu'elles ont pour propriété CSS : position: statique;. Cette propriété est attribuée automatiquement à toute balise de type block ! C'est plus clair maintenant ?

Bref, dans ce cas, le centrage se fait de manière assez aisée avec la propriété margin utilisée avec la valeur auto ou 0 auto;. Utiliser cette propriété permettra de centrer horizontalement le bloc par rapport à sa balise parente.
Une balise dite "parente" est une balise qui contient la balise cible.
Exemple balise enfant/parent:
 


Essaie le code suivant :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
      <title>Centrage</title>
   <meta charset="utf-8" />
   <style>
    #container{
       width: 600px;
       height: 200px; /** Pas obligatoire pour margin: auto car on centre horizontalement. Il faut donc savoir essentiellement la largeur du bloc, pas sa hauteur **/
       margin: auto;
       background: orangered;
    }
   </style>
</head>
<body>
   <p id="container">Lorem ipsum</p>
</body>
</html>
Tu verras que le bloc (ici, le paragraphe) est bien centré dans sa balise parente (ici, la balise body). Or, la balise body représentant toute la page, le paragraphe est centré dans la page Wink.

Il existe une seconde technique pour centrer horizontalement une balise block statique qui consiste à modifier le type de cette balise en le mettant à inline-block et en attribuant la propriété text-align: center; à sa balise parente comme suit :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
  <meta charset="utf-8" />
  <style>

     #container{
        text-align: center;
        border: 4px solid green;
     }

    p{
      width: 600px;
      height: 200px;
      background: orangered;
      display: inline-block;
    }
  </style>
</head>
<body>
   <div id="container">
        <p>Lorem ipsum</p>
     </div>
</body>
</html>

Cette dernière technique résulte davantage de "bidouille" que de vraie technique. Autrement dit, préfère utiliser la propriété margin plutôt que le changement de type pour centrer horizontalement un block statique.

Il existe encore une autre technique, plus moderne, pour atteindre notre but : l'utilisation des flexbox (mais attention, cette technique ne fonctionne pas sur Internet Explorer < 11). Les flexbox (en français, boites flexibles) sont de plus en plus utilisées : elles permettent de positionner facilement et rapidement les balises, sans se soucier de leur type/taille etc.
Je ne vais pas m'étaler trop sur le sujet dans ce tutoriel, car il en existe un : [Positionner facilement ses balises avec les flexbox]. Voici néanmoins comment utiliser cette technique pour centrer horizontalement notre balise block statique.
Comme à chaque fois qu'on utilise les flexbox, on attribue le type "flex" à la balise parente. Et enfin, dans notre cas, il nous suffit simplement d'utiliser la propriété "justify-content: center;" sur la balise qu'on veut centrer !
Voici un exemple :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   #container{
      display: flex;
      justify-content: center;
      border: 4px solid green;
   }
   p{
       width: 600px;
       height: 200px;
       background: orangered;
    }
   </style>
</head>
<body>
   <div id="container">
      <p>Lorem ipsum.</p>
   </div>
</body>
</html>
Et voilà pour cette partie !

Centrer horizontalement des balises blocks en position absolue ou relative

Comme précédemment, nous allons d'abord essayer avec la propriété margin: auto.
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   #container{
      width: 400px;
      height: 200px;
      border: 5px solid green;
   }
   p{
      position: absolute;
       margin: auto;
       background: orangered;
   }
   </style>
</head>
<body>
   <div id="container">
      <p>Lorem ipsum.</p>
   </div>
</body>
</html>
Le résultat n'est pas celui espéré :
Resultat du code (position absolue):
 
Il en aurait été de même en positionnant le paragraphe de manière relative (position: relative) :
Résultat du code (position relative):
 

On voit donc que cette technique ne fonctionne pas lorsque la balise a une position modifiée...

Voyons alors quelles sont les solutions !

Commençons dans le cas où nous avons notre paragraphe qui est en position absolue.
A chaque fois qu'on utilise ce type de position, on doit définir la balise (parente *) par rapport à laquelle on veut que notre élément se place, en lui attribuant la propriété position: relative. Dans notre cas, on veut centrer horizontalement notre paragraphe par rapport à la div. On lui attribue donc la fameuse propriété, ainsi, les propriétés left, right, top et bottom s'opèreront par rapport à la div !
Code à l'état actuel:
 
Pour continuer, il suffit maintenant d'attribuer un left à 50% sur le paragraphe, ainsi qu'une marge à gauche négative équivalente à la moitié de la largeur totale du paragraphe (un peu de mathématiques...). Imaginons que notre paragraphe fasse 200px, la marge à gauche sera égale à -100px !
Du coup, voici le code qu'on a et son résultat :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
    <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   #container{
      position: relative;
      width: 400px;
      height: 200px;
      border: 5px solid green;
   }
   p{
      position: absolute;
      left: 50%;
       width: 200px;
       margin-left: -100px;
       background: orangered;
   }
   </style>
</head>
<body>
   <div id="container">
      <p>Lorem ipsum.</p>
   </div>
</body>
</html>
Le paragraphe est bien centré !

Et ça fonctionne pareil si notre paragraphe est en position relative... Du moins, presque. On n'est plus obligé d'attribuer la position: relative à la balise div parente :
Le code correspondant:
 
On peut également tout simplement utiliser display:inline-block; et text-align: center; comme vu avant :
Code correspondant:
 

Super ! Mais cela peut nous laisser perplexe... En effet, on ne connait pas forcément la taille de notre paragraphe !
Nous allons donc devoir utiliser un subterfuge ! Mettons notre paragraphe en position absolue et notre div en position relative. Il suffit alors de translater le paragraphe de -50%, après l'avoir déplacé à gauche de 50% :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   #container{
      position: relative;
      width: 400px;
      height: 200px;
      border: 5px solid green;
   }
   p{
       position: absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
       background: orangered;
   }
   </style>
</head>
<body>
   <div id="container">
      <p>Lorem ipsum.</p>
   </div>
</body>
</html>
Le résultat est bien celui voulu :

Une fois de plus, ces techniques fonctionnent et sont utilisées mais dans une optique de progression dans le web, le mieux reste d'utiliser les flexbox là aussi. Je te renvoie au tutoriel sur ce sujet : Tutoriel sur les flexbox
Voici comment on aurait fait avec les flexbox :
Avec les flexbox:
 

Mais certains navigateurs, à l'heure actuelle, n'assimilent pas très bien cette technique (notamment safari).

Centrer horizontalement une balise de type block en position fixée

Et voici la dernière partie de ce tutoriel !

Là, la balise sera forcément centrée horizontalement par rapport à la balise body, donc centrée horizontalement dans la page, puisque de position fixe. Mais pour arriver à cela, il faut quand même utiliser les mêmes techniques que précédemment :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <meta charset="utf-8" />
   <style>

   #container{
      width: 400px;
      height: 200px;
      border: 5px solid green;
   }
   p{
       position: fixed;
       left: 50%;
       width: 200px;
       margin-left: -100px;
       background: orangered;
   }
   </style>
</head>
<body>
   <div id="container">
      <p>Lorem ipsum</p>
   </div>
</body>
</html>
Même s'il est enfant de la div, le paragraphe se centre par rapport à la taille du navigateur.
Si sa taille n'était pas connue, nous aurions utilisé les propriétés transform: comme vu précédemment.

Ici, utiliser les flexbox ne serait pas judicieux. En effet, le paragraphe se centre par rapport à la page entière, il aurait donc fallu attribuer display:flex à la balise <body>, ce qui est problématique car toutes les balises blocks de la page auraient été affectées.

Tu veux maintenant tout savoir sur le centrage vertical ? Alors je t'attends sur ce tutoriel : Les techniques pour centrer verticalement !

Tu rencontres un souci avec ce tutoriel ? Viens poser votre question [ici].

Idea N'oublie pas de lire et de suivre les [règles de la section].



Je soussigné, Eluknow, accepte qu'un directeur reposte le présent tutoriel "[HTML/CSS] Les techniques pour centrer horizontalement" tel que je l'ai rédigé.
___________________



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar

Eluknow

Doyen

Bons Points (BP) : 109

Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

MessageSujet: Re: [HTML/CSS] TOUT sur le centrage horizontal et vertical   Jeu 4 Jan - 14:44
Les techniques pour centrer verticalement


Bonjour !

Dans ce tutoriel, nous allons apprendre à centrer verticalement tout élément HTML, quel que soit son type (inline, block...). En effet, le centrage vertical pose souvent des problèmes car contrairement au centrage horizontal (besoin de centrer horizontalement ? [Tutoriel sur les techniques de centrage horizontal]), il n'existe que peu de propriétés "toutes faites" pour nous mener à notre but... Mais pas de panique, ce tutoriel est là pour vous donner tous les trucs et astuces !

Prérequis :
  • Connaitre les bases du HTML et certaines balises (div, p, span...) ainsi que leur type (block, inline)
  • Être familiarisé avec les class/id
  • Maitriser le positionnement en CSS ainsi que les propriétés de base (border, height, width, padding, margin...)


Centrer verticalement des textes

Dans de nombreux cas, les textes sont centrés verticalement dans leur balise block parente.
Une balise dite "parente" est une balise qui contient la balise cible.
Exemple balise parent/enfant:
 
En effet, tout le monde a déjà vu ce genre de barre de navigation :
On remarque bien que les textes (home, news...) sont centrés verticalement dans leur balise parente :

Voyons ensemble comment arriver à ce résultat !
Dans le cas où nous connaissons la hauteur de la balise parente, c'est très simple, il suffit d'utiliser la propriété CSS line-height. On attribuera à cette propriété la valeur de la hauteur de la balise parente.
Regardons avec cet exemple :

Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   #container{
      width: 200px;
      height: 50px;
      border: 5px solid green;
      line-height: 50px;
   }

   </style>
</head>
<body>
   <p id="container">
      Lorem ipsum dolor sit amet.
   <p>
</body>
</html>
Nous avons un super résultat :

Bien, maintenant imaginons que notre texte soit dans une balise de type inline (un span, une balise de mise en valeur etc). Hé bien, c'est exactement pareil, sauf qu'on peut attribuer la propriété line-height aussi bien à la balise parente qu'à la balise de type inline !
Code avec line-height sur la balise parente:
 
Code avec line-height sur la balise inline:
 
Le résultat est le même et les deux codes sont valides aux normes W3C !

Bon, tout ça est bien beau mais comment faire quand on ne connait pas les dimensions de la balise parente Surprised ?
Ca arrive lorsqu'on utilise des dimensions en pourcentage... On pourrait penser qu'il faille utiliser : line-height: 100% comme dans ce cas par exemple :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   #wrapper {
      height: 300px;
      background-color: purple;
   }

   #wrapper div{
      width: 500px;
      height: 20%;
      border: 5px solid green;
      line-height: 100%;
   }
   #wrapper div span{
       background: orangered;
   }
   </style>
</head>
<body>
   <div id="wrapper">
      <div>
         <span>Lorem ipsum dolor sit amet.</span>
      </div>
   </div>
</body>
</html>
Mais le résultat n'est pas celui attendu :
Ainsi, nous avons deux solutions :
- Se débrouiller pour avoir les dimensions (dans l'exemple au dessus, on peut faire 300 * (20/100), ce qui donne 60px. C'est donc la hauteur de la div, et donc on peut mettre un line-height 60px, ça fonctionne très bien, tu peux essayer !).
- Modifier le type de la balise parente : il existe une propriété CSS qui permet de centrer verticalement, il s'agit de vertical-align. Mais cette propriété ne fonctionne qu'avec les tableaux HTML... Du coup, la technique consiste à modifier le type de la balise parente pour qu'elle soit considérée comme un tableau, de manière à utiliser vertical align qui fonctionnera alors sur la balise enfante qu'on veut centrer !
Néanmoins, je ne te montrerai pas cette technique. C'est de la bidouille plus qu'autre chose et d'autres méthodes plus récentes font très bien le travail ! Mais sache qu'elle existe.

Ce n'est pas très convaincant tout ça Eluk'... Et en plus, même quand je connais les dimensions, j'ai un problème : quand j'ai plusieurs lignes de texte dans ma balise, j'obtiens un résultat plutôt laid...
Le résultat plutôt laid:
 

En effet... Heureusement, j'ai la réponse à tous nos maux ! En fait, il existe une troisième solution (Oui... j'ai menti tout à l'heure), beaucoup plus utilisée, propre, respectant les normes, pratique, divine, qui fait rêver et j'en passe. Il s'agit de l'utilisation des flexbox ! (mais attention, cette technique ne fonctionne pas sur Internet Explorer < 11). Les flexbox (en français, boites flexibles) sont de plus en plus utilisées : elles permettent de positionner facilement et rapidement les balises, sans se soucier de leur type/taille etc.
Je ne vais pas m'étaler trop sur le sujet dans ce tutoriel, car il en existe un : [Positionner facilement ses balises avec les flexbox]
Mais voici comment on fait avec ce drôle de truc ! On attribue le type flex à la balise parente avec display:flex; ainsi que la propriété align-items: center; !
Ca règle notre problème de balise avec des dimensions inconnues :
Code + résultat:
 

Mais aussi notre problème de texte quand on a plusieurs lignes !
Code + résultat:
 

Magique, n'est-ce pas ?

Allez, si tu as survécu à ce paragraphe, le reste te paraitra d'une simplicité enfantine !

Centrer verticalement des balises blocks statiques

Encore un nom étrange, je l'admets. Mais pourtant, c'est souvent dans ce cas que tu te trouveras !
Les balises blocks statiques sont des balises de type blocks (logique me diras-tu) qui n'ont pas vu leur position (en CSS) modifiée ! C'est à dire qu'elles ont pour propriété CSS : position: statique;. Cette propriété est attribuée automatiquement à toute balise de type block ! C'est plus clair maintenant ?

Bref, pour centrer ces balises, on a plusieurs techniques :
- L'utilisation de display: table-cell; comme énoncé dans la partie d'avant. Encore une fois, je n'en parlerai pas : c'est de la bidouille plus qu'autre chose et des nouvelles technologies compatibles avec la quasi-totalité des navigateurs permettent de faire la même chose, en mieux.
- L'utilisation d'autres bidouilles que je n'expliquerai pas (pourquoi se compliquer la vie ! Sachez juste qu'il existe des dizaines de façons de centrer)
- L'utilisation des... flexbox (un petit tour sur le [tutoriel sur les flexbox] ?). C'est pour ça que je t'ai dit que si tu avais compris la première partie du tutoriel, la suite te paraitrait simple comme bonjour !
En effet, ça fonctionne exactement pareil qu'avec du texte. On attribue le type flex avec display:flex sur la balise parente ainsi que align-items:center; !
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
   <title>Centrage</title>
   <meta charset="utf-8" />
   <style>

   div{
      width: 400px;
      height: 100px;
      border: 5px solid green;
      display: flex;
      align-items: center;
   }
    #container{
       background: orangered;
       width: 300px;
       height: 80px;
    }
   </style>
</head>
<body>
   <div>
      <p id="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis sagittis massa, tristique vulputate nisl. Donec non leo quis purus egestas porta euismod vel diam. </p>
   </div>
</body>
</html>
Et le paragraphe est bien centré :

Allez, et puisque je suis dans une bonne journée, voici une deuxième façon d'utiliser les flexbox dans notre cas :
On attribue le type flex à la balise parente et on met un margin: auto sur la/les balises à centrer verticalement !
Code correspondant:
 
Si tu veux simplement centrer verticalement, il faut utiliser :margin: 0 auto; au lieu de margin: auto;

Centrer verticalement des balises blocks en position absolue, relative ou fixée

Pour réaliser ce genre de centrage, on a là encore plusieurs possibilités. La première, qui fonctionnent très bien et qui est très pratique (notamment pour les positions fixées), consistent à utiliser des translations : on applique un top de 50% et on translate selon l'axe Y (la verticale) de -50% !
Code avec position fixée:
 

Faisons pareil avec l'exemple classique d'une balise en position absolue dans une balise parente en position relative :
Code correspondant:
 
Le résultat n'est pas celui attendu... Tout cela est dû aux marges appliquées automatiquement à tout élément de type block (dans notre cas, les marges de notre balise qu'on veut centrer). On a juste à les enlever avec margin: 0 et le problème est réglé èé !
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Centrage</title>
  <meta charset="utf-8" />

  <style>

     #container{
        position: relative;
         width: 300px;
         height: 150px;
         border: 5px solid green;
     }

    #container p{
         position: absolute;
         top: 50%;
         width: 200px;
         height: 100px;
       transform: translateY(-50%);
       margin: 0;
         background: orangered;
    }

  </style>

</head>
<body>
  <div id="container">
      <p>Lorem ipsum.</p>
  </div>
</body>
</html>

Dans le cas où on connait les dimensions de nos éléments, on peut aussi utiliser la technique du margin-top négatif qui vaut la moitié de la hauteur de balise à centrer (au lieu de la translation négative). Exemple (tu peux essayer, ça marche très bien) :
Exemple avec margin négatif:
 

Et voilà, le tutoriel est terminé ! Tu veux centrer tes balises horizontalement maintenant ? Alors direction le tutoriel sur [les techniques pour centrer horizontalement] !

Tu rencontres un souci avec ce tutoriel ? Viens poser votre question [ici].

Idea N'oublie pas de lire et de suivre les [règles de la section].



Je soussigné, Eluknow, accepte qu'un directeur reposte le présent tutoriel "[HTML/CSS] Les techniques pour centrer verticalement" tel que je l'ai rédigé.
___________________



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

avatar

Eluknow

Doyen

Bons Points (BP) : 109

Voir le profil de l'utilisateur http://a-toi-de-coder.forumactif.org/

MessageSujet: Re: [HTML/CSS] TOUT sur le centrage horizontal et vertical   Ven 5 Jan - 13:38

Positionner facilement ses balises avec les flexbox



Bonjour à toi, codeur (et/ou curieux ?) en quête de savoir ! Tu viens de tomber dans la caverne d'Alibaba du code. Dans ce tutoriel, tu apprendras à utiliser les flexbox, ces "boites flexibles" compatibles avec la quasi-totalité des navigateurs qui simplifient le travail de tous les développeurs web et qui offrent enfin une façon unifiée/sans bidouilles pour placer les éléments dans sa page (et en plus, c'est pratique pour le Responsive WebDesign, c'est à dire l'adaptation de ton design à toute taille d'écran) !
Maintenant que tu es convaincu de l'utilité des flexbox, c'est parti pour apprendre à s'en servir !

Prérequis :
  • Connaitre les bases du HTML et certaines balises (div, p, span...) ainsi que leur type (block, inline)
  • Être familiarisé avec les class/id
  • Maitriser le positionnement en CSS ainsi que les propriétés de base (border, height, width, padding, margin...)
  • Avoir déjà touché à la propriété display de CSS
  • Avoir des notions sur les [Media queries]


Pour mieux comprendre : tableaux vs flexbox


Avant de comprendre comment utiliser les flexbox, on va essayer de comprendre vraiment à quoi elles servent.
On va commencer par prendre ce que tout utilisateur de FA qui essaie de coder un peu son forum connait : les tableaux.
Voici donc un forum dans une catégorie ! (un peu simplifiée, certes)
Code de cette catégorie:
 
On voit bien que pour un résultat peu complexe, on a un code assez compliqué (un tableau, des lignes, des colonnes...) ! En plus, on a surtout un code un peu vieux et déprécié...
Voyons donc ce que ça donne avec les flexbox !
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
     <title>Flexbox</title>
     <meta charset="utf-8" />

     <style>
        div{
           width: 500px;
           border: 1px solid black;
           display: flex;
        }

        div p{
           padding: 0;
           margin: 0;
           border: 1px solid red;
        }

        p:first-child, div p:last-child{
           font-weight: bold;
           flex: 1;
        }

        div p:nth-child(2){
           flex: 3;
           text-align: center;
        }

     </style>

</head>
<body>
     <div>
        <p>New</p>
        <p>Description du forum</p>
        <p>Dernier message</p>
     </div>
</body>
</html>

Je n'ai pris que des balises compréhensibles par FA.
Certes, on n'a pas l'écart entre les bordures qu'on avait avec les tableaux... Mais bon, si c'est vraiment important, voilà le code (j'ai simplement mis une marge de 1px) :
Code avec flexbox et marge:
 

Tu as mieux compris à quoi servaient les flexbox ? Dans ce cas... La clé de la réussite avec ces boites flexibles se situe juste après !

Premiers pas : en ligne !


Il faut savoir que flexbox est un nouveau type de balise. Actuellement, tu en connais au moins 2 : block et inline.
Du coup, pour attribuer ce type à une balise, il faut utiliser la propriété display.
En attribuant ledit type à une balise parente, tous ses enfants de premier ordre seront positionnés avec des propriétés liées aux flexbox.
-Une balise dite "parente" est une balise qui contient la balise cible.
- Un enfant de premier ordre est une balise contenue dans sa balise parente souhaitée directement, c'est à dire sans qu'elle ne soit contenue dans d'autres balises elles-mêmes enfants.

Exemple balise parente/enfante:
 
Exemple enfant de premier ordre:
 

Quand on attribue le type flex à une balise, tous ses enfants de premier ordre seront par défaut mis "côte à côte", comme des balises auxquelles on aurait modifié le type en inline-block.
Ainsi, c'est très pratique pour les listes par exemple !
Prenons cette liste simple :
Liste:
 

Pour mettre tous les éléments en ligne, il suffit d'attribuer à la balise <ul> la propriété display:flex ! (et un petit lest-style-type:none; pour supprimer les puces)
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
     <meta charset="utf-8" />
     <title>Flexbox</title>
     <style>
        ul{
            display:flex;
            list-style-type:none;
        }
     </style>
</head>
<body>
     <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">A propos</a></li>
        <li><a href="#">Mystère</a></li>
      </ul>
</body>
</html>

Super ! Bon, pour la suite du tutoriel nous allons continuer d'utiliser cette liste mais on va dire que c'est une barre de navigation et on va la styliser un peu !
On va utiliser ce code :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
     <meta charset="utf-8" />
     <title>Flexbox</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
     <style>
        nav, ul, li{
            margin: 0;
            padding: 0;
        }
        nav{
            height: 50px;
            width: 500px;
            background: #FAFFB8;
        }
        ul{
            display:flex;
            height: 100%;
            list-style-type:none;
        }
        li{
            border: 1px solid green;
            width: 100px;
            height: 100%;
        }
        nav ul li:hover{
            background: #17B978;
        }

        nav ul li a{
            color:#17B978;
            text-decoration:none;
            font-size: 1.2em;
            font-family: 'Roboto', sans-serif;
        }

        nav ul li:hover a{
            color: #071A52;
        }
     </style>
</head>
<body>
  <nav>
     <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">A propos</a></li>
        <li><a href="#">Mystère</a></li>
      </ul>
  </nav>
</body>
</html>
Ce qui nous donne : (les bordures noires sont faites pour bien repérer les éléments li de la liste)

Bon, comme tu peux le voir, le résultat n'est pas fameux. Les éléments ne sont pas centrés aussi bien verticalement que horizontalement. Du coup, voyons comment faire !

Plaçons nos éléments


Nous allons d'abord regarder comment centrer horizontalement nos éléments.
Il existe une propriété CSS liée au flexbox qui est justify-content qui permet d'indiquer comment on veut que nos éléments soient alignés.
  • Si on veut que nos éléments soient alignés à gauche (par défaut, et c'est ce que nous avons dans notre code précédent), alors on utilisera justify-content:flex-start;
  • Si on veut que nos éléments soient alignés à droite, on utilisera justify-content: flex-end;
    flex-end:
     
  • Si on veut que nos éléments soient alignés avec un espace égal entre chacun d'eux, on utilisera justify-content: space-between;
    space-between:
     
  • Si on veut que nos éléments soient alignés avec un espace autour d'eux, on utilisera justify-content: space-around;
    space-around:
     
  • Et enfin si on veut que nos éléments soient centrés dans leur balise parente, on utilisera justify-content: center;
    center:
     


Dans notre exemple, je veux que tout soit centré. Je vais donc utiliser : justify-content:center;
Centrage horizontal:
 

Occupons-nous maintenant du centrage vertical. Là encore, une propriété toute prête existe, il s'agit de align-items.
Il suffit d'attribuer cette propriété à la balise parente qui contient l'élément qu'on veut centrer verticalement, comme pour justify-content. Cette propriété permet de faire exactement comme justify-content, mais sur l'axe vertical cette fois : elle nous permet d'indiquer comment on veut placer nos éléments par rapport à l'axe vertical.
  • Si on veut que nos éléments soient alignés en haut (valeur par défaut), on utilisera align-items:flex-start;
    flex-start:
     
  • Si on veut que nos éléments soient alignés en bas, on utilisera align-items: flex-end;
    flex-end:
     
  • Si on veut que nos éléments fassent la hauteur entière de la balise parente, on utilisera align-items:stretch;
    stretch:
     
  • Si on veut que nos éléments soient centrés verticalement, on utilisera align-items: center;
    center:
     


On veut dans notre exemple que les textes soient centrés verticalement et horizontalement dans leur balise respective... Il faut donc attribuer le type flex à leur balise parente (les <li>) et également les deux propriétés align-items:center; et justify-content:center; :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
     <meta charset="utf-8" />
     <title>Flexbox</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
     <style>
        nav, ul, li{
            margin: 0;
            padding: 0;
        }
        nav{
            height: 80px;
            width: 500px;
            background: #FAFFB8;
        }
        ul{
            display:flex;
            justify-content:center;
            height: 100%;
            list-style-type:none;
        }
        li{
            display:flex;
            justify-content:center;
            align-items:center;
            border: 1px solid green;
            width: 100px;
        }
        nav ul li:hover{
            background: #17B978;
        }

        nav ul li a{
            color:#17B978;
            text-decoration:none;
            font-size: 1.2em;
            font-family: 'Roboto', sans-serif;
        }

        nav ul li:hover a{
            color: #071A52;
        }
     </style>
</head>
<body>
  <nav>
     <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">A propos</a></li>
        <li><a href="#">Mystère</a></li>
      </ul>
  </nav>
</body>
</html>
Et le résultat :

Super ! Maintenant nous allons voir toute la puissance des flexbox en touchant au RWD (Responsive WebDesign) !

Flexbox et Responsive WebDesign


Nous allons donc voir comment rendre notre barre de navigation Responsive ! Voici le résultat à atteindre :
Résultat à atteindre :
 
Résultat à atteindre :
 
Résultats découpés:
 

La première chose qu'on va faire c'est ajouter notre logo et placer nos éléments :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
      <meta charset="utf-8" />
      <title>Flexbox</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
      <style>
        header, div, nav, ul, li{
            margin: 0;
            padding: 0;
        }
        header{
            display:flex;
            justify-content:space-between;
            background: #FAFFB8;
        }

        header div, header nav{
            border: 1px solid red;
        }

        div{
            display:flex;
            align-items:center;
            box-sizing: border-box;
            padding-left: 20px;
            font-size: 20px;
            font-family: 'Roboto', sans-serif;
        }

        nav{
            height: 50px;
        }
        ul{
            display:flex;
            height: 100%;
            list-style-type:none;
        }
        li{
            display:flex;
            justify-content:center;
            align-items:center;
            border: 1px solid green;
            height: 100%;
            width: 100px;
        }
        nav ul li:hover{
            background: #17B978;
        }

        nav ul li a{
            color:#17B978;
            text-decoration:none;
            font-size: 1.2em;
            font-family: 'Roboto', sans-serif;
        }

        nav ul li:hover a{
            color: #071A52;
        }
      </style>
</head>
<body>
  <header>
      <div>LOGO</div>
      <nav>
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">A propos</a></li>
            <li><a href="#">Mystère</a></li>
        </ul>
      </nav>
  </header>
</body>
</html>

Besoin d'explications ?:
 

Maintenant, réfléchissons... Ce qu'on veut quand on est sur mobile, en fait, c'est que le logo (la div) et la barre de navigation (la nav) ne soient plus "en-ligne", mais en colonne. Et les flexbox nous permettent de faire ça, grâce à la propriété CSS : flex-direction :
  • Si on veut que nos éléments soient en ligne (valeur par défaut), on utilisera flex-direction: row;
    row:
     
  • Si on veut que nos éléments soient en ligne dans l'ordre inverse, on utilisera flex-direction: row-reverse;
    row-reverse:
     
  • Si on veut que nos éléments soient en colonne, on utilisera : flex-direction:column;
    column:
     
  • Si on veut que nos éléments soient en colonne et dans l'ordre inverse, on utilisera flex-direction: column-reverse;
    column-reverse:
     


Ce qu'il nous faut utiliser, c'est flex-direction:column quand on est sur mobile. On va donc utiliser les media-queries (tutoriel sur les media-queries donné dans les prérequis) et flex-direction:column !
Code:
@media screen and (max-width: 800px) {
            header {
              flex-direction:column;
            }
        }
(la valeur 800px n'est pas la bonne pour afficher sur mobile, c'est juste plus simple pour moi sur PC pour faire les screens des résultats :p)

On place nos éléments maintenant, rien de bien compliqué :
Éléments placés sur mobile:
 

Et voici notre code final, fonctionnel et Responsive ! Merci les flexbox !
Code final:
 

Mais ce n'est pas tout.. Les flexbox nous réservent encore bien des surprises ! Voyons ça !

Organisons nos éléments


On va encore agrémenter notre barre de navigation d'un élément supplémentaire : une petite description du site !
On va donc se fixer un nouvel objectif : arriver au résultat qui suit :
Résultat sur PC:
 
Résultat sur mobile:
 
Résultats découpés:
 

Si on regarde bien notre maquette découpée, on voit que nos deux premiers éléments (logo + nav) n'ont pas bougé. On ne changera donc pas leur type et on ne rajoutera pas de balise pour les englober.
Du coup, c'est vraiment en jouant avec les flexbox qu'on va arriver à notre fin ! (ou faim, il est actuellement 12h32 chez moi à l'heure où je rédige ce tutoriel...)

La première chose qu'on va faire c'est rajouter notre description.
Rajout de la description:
 
Vu que c'est une div aussi, on doit différencier le style de la div qui contient le logo de celle-ci (on utilise la pseudo-classe :first-child (besoin d'un petit coup de pouce pour les pseudo-classe ? [Ciblons avec les sélecteurs CSS]))
Code modifié:
 

Bon, maintenant, reprenons ce que nous savons sur la description :
- Elle fait partie de la balise header -> on en déduit que le type flex lui est attribué
- Elle fait toute la largeur de la balise header
- Elle est en dessous des deux premiers éléments

La première idée qui peut nous venir est d'utiliser la propriété flex-direction:column. Malheureusement, cela mettrait aussi la balise nav et le logo en colonne...
Du coup, on va commencer par écrire en CSS ce qu'on a écrit en français : la description doit faire 100% de la largeur du header.

Etant donné qu'on utilise les flexbox, on ne pourra pas écrire width: 100%. Heureusement, on a une propriété bien utile qui s'appelle flex ! Elle est la forme réduite de 3 autres propriétés :
  • flex-grow : elle définit comment l'élément est "gros" par rapport aux autres. Par défaut, elle est à 0 : tous les éléments sont aussi gros les uns des autres. Et c'est pratique : c'est pour ça que lorsqu'on met display:flex à une balise, tous ses enfants prennent la même place !
  • flex-shrink : elle définit si un élément peut se contracter (j'y reviendrai dans la dernière partie du tutoriel). Par défaut, elle est à 1 : tous les enfants d'une balise qui a le type flex se contractent pour que tous rentrent en ligne quelque soit la largeur de la balise parente.
  • flex-basis : elle définit la largeur que prend un enfant d'une balise qui a le type flex (équivalent de width avec les flexbox)


Avec la propriété raccourcie flex, voici ce qu'on écrit :
Code:
.name{
flex: flex-grow flex-shrink flex-basis;
}
Explications supplémentaires flex:
 

Maintenant, comment l'utiliser dans notre cas ?
Hé bien, on veut qu'il fasse 100% de la balise header... Rien de plus simple !
Code:
header div:last-child{
            flex: 100%;
        }
On stylise un peu tout ça et voilà ce qu'on obtient au final (avec le responsive) :
Code final:
 
Malheureusement, si on essaie... On voit que le code pour PC ne fonctionne pas :


Pourquoi ? Hé bien... Parce qu'on n'a pas dit que la description devait à la ligne... Rappelons-nous que le type flexbox essaie par défaut de tout mettre en ligne, quitte à écraser un peu notre structure.
On va arranger ça dans la partie d'après !

Place aux lignes entières


Ce qu'on aimerait, c'est que notre code ne cherche pas à tout mettre sur une ligne lorsque celle-ci est déjà complète.
Pour cela, il existe une propriété liée aux flexbox qui dit : si la ligne est entière/complète, dans ce cas va à la ligne. Il s'agit de flex-wrap.
Par défaut, elle est à flex-wrap: nowrap; mais si on veut qu'il y ait la mise à la ligne, alors on va utiliser flex-wrap: wrap; comme suit :
Code:
header{
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            background: #FAFFB8;
        }

Pas besoin de spécifier flex-wrap quand on utilise flex-direction:column

Sache qu'il existe une propriété nommée flex-flow qui est une propriété raccourcie de flex-direction et flex-wrap. Elle s'utilise comme suit :
Code:
.name{
flex-flow: flex-direction flex-wrap;
}
Exemple :
Code:
.name{
flex-flow: row wrap;
}

Notre code final est donc :
Code:
<!DOCTYPE html>
<html lang="fr">
<head>
      <meta charset="utf-8" />
      <title>Flexbox</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
      <style>
        header, div, nav, ul, li{
            margin: 0;
            padding: 0;
        }

        header{
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            background: #FAFFB8;
        }

        div, nav, footer{
            border:1px solid red;
        }

        div:first-child{
            display:flex;
            align-items:center;
            box-sizing: border-box;
            padding-left: 20px;
            font-size: 20px;
            font-family: 'Roboto', sans-serif;
        }

        nav{
            height: 50px;
        }
        ul{
            display:flex;
            justify-content:center;
            height: 100%;
            list-style-type:none;
        }
        li{
            display:flex;
            justify-content:center;
            align-items:center;
            width: 100px;
        }
        nav ul li:hover{
            background: #17B978;
        }

        nav ul li a{
            color:#17B978;
            text-decoration:none;
            font-size: 1.2em;
            font-family: 'Roboto', sans-serif;
        }

        nav ul li:hover a{
            color: #071A52;
        }

        header div:last-child{
            flex: 100%;
        }

        header div:last-child hr{
            width: 40%;
        }

        header div:last-child p{
            text-align:center;
        }
        @media screen and (max-width: 800px) {
            header {
              flex-direction:column;
              flex-wrap:nowrap;
            }

            header div:first-child{
              justify-content:center;
              padding: 0;
            }
            nav{
              display:flex;
              justify-content:center;
              align-items: center;
            }

            header div:last-child{
              flex: 0;
            }

            header div:last-child hr{
              width: 90%;
            }
        }
      </style>
</head>
<body>
  <header>
      <div>LOGO</div>
      <nav>
        <ul>
            <li><a href="#">Accueil</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">A propos</a></li>
            <li><a href="#">Mystère</a></li>
        </ul>
      </nav>
      <div>
        <hr />
        <p>Une description de mon site</p>
      </div>
  </header>
</body>
</html>

Il existe une autre propriété intéressante avec les lignes entières : align-content. Elle permet de définir comment on va placer les lignes entre elles. C'est l'équivalent de align-items:center; mais pour les lignes de contenu entre elles ! Ca marche exactement pareil que align-items (si tu es curieux : documentation sur align-content)

Et voilà, ce tutoriel est désormais terminé ! Tu en sais beaucoup sur les flexbox ! Mais si tu as encore des questions, n'hésite pas à les poser [ici].

Idea N'oubliee pas de lire et de suivre les [règles de la section].



Je soussigné, Eluknow, accepte qu'un directeur reposte le présent tutoriel "[HTML/CSS] Positionner facilement ses balises avec les flexbox" tel que je l'ai rédigé.
___________________



Cadeau de Noël


Mon dipl'homme:
 

Avatars et signas cadeaux':
 

 

[HTML/CSS] TOUT sur le centrage horizontal et vertical

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» mettre à l'heure d'un autre pays
» [Annulée] Demande une page HTML
» [résolu] Lien dans image survolée vers page html
» Marcher tout en étant bourré
» ♠ Tout est relatif, seul la Vodka est Absolut

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Proposer un tutoriel-
Sauter vers:  
Espace Admin du site

©2008-2018 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants