POSITIONNEMENT EN CSS
POSITIONNEMENT EN CSS
II. POSITIONNEMENT AVEC LA PROPRIETE Display
II. POSITIONNEMENT AVEC LA PROPRIETE Display
La plupart des balises peuvent être ranger dans l’une des catégories suivantes :
-
inline : une balise de type inline se trouve à l'intérieur d'une balise block. Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne :
- La largeur et la hauteur dépendent du contenu, c’est-à-dire qu’une telle balise n’occupe que l’espace nécessaire ;
- La hauteur, la largeur et les marges ne sont pas modifiables ;
- une balise de type block sur votre page web crée automatiquement un retour à la ligne avant et après :
- Elle occupe toute la largeur disponible ;
- La hauteur dépend du contenu ;
- La largeur, hauteur et les marges sont modifiables.
Votre page web sera en fait constituée d'une série de blocs les uns à la suite des autres. Une balise de type block occupe toute la largeur disponible.
Avec la propriété Display, il est possible de transformer n'importe quel élément de votre page d'un type vers un autre. Cette propriété peut prendre une des valeurs suivantes :
- inline : les éléments d’une ligne. Les éléments de type inline se placent les uns à côté des autres.
- Block : Eléments en forme de blocs. Se placent les uns en-dessous des autres et peuvent être redimensionnés.
- Inline-block : Eléments positionnés les uns à côté des autres (comme les inlines) mais qui peuvent être redimensionnés (comme les blocs).
- None : Eléments non affichés. Par exemple head
Essayons de voir chaque valeur avec un exemple concret
Exemple 1
Exemple 1
Les liens vers les principaux points d’un cours de mathématiques
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation</title>
</head>
<body>
<a href="#LI" class="titre1">I. EQUATION DU PREMIER DEGRE A UNE INCONNUE </a>
<a href="#LI1" >I.1 Définitions </a>
<a href href="#LI11">I.1.1 Equation </a>
<a href href="#LI112">I..1.2 Equation à une inconnue </a>
<a hrefhref="#LI13" >I.1.3 Equation du premier degré </a>
<a href href="#LI14">I.1.4 Equation du premier degré à une inconnue </a>
<a href href="#LI2">I.2 Résolution </a>
<a hrefhref="#LI21" >I.2.1 1ere méthode </a>
<a href="#Ex1" >Exemple 1 </a>
<a href="#LI22" >I.2.2 2e méthode </a>
<a href="#Ex3" >Exemple 3 </a>
<a href="#LI3" >I.3 Equations particulières </a>
<a href="#Ex4" >Exemple 4 </a
</body>
</html>
Les liens s’affichent les uns à côté des autres :
Pour faire en sorte qu’ils (les liens) se placent les uns en dessous des autres, on peut utiliser <br/>, mais avec cette balise, les liens seront toujours de type inline et il n’y aura pas moyen de les redimensionner. La meilleure solution est de les transformer en type block : avec cette transformation, ils vont se placer les uns en dessous des autres et nous auront la possibilité de les redimensionnées.
a
{
display:block;
}
Résultat:
Essayez d’ajouter des bordures, vous verrez qu’elles occuperont toute la largeur car les liens sont maintenant de type block.
Exemple 2
Exemple 2
Deux paragraphes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation en HTML et CSS</title>
</head>
<body>
<p class="para1">C’est un groupe formé essentiellement de meilleurs étudiants de nos groupes d’étude et d’encadrement
qui se sont fixés plusieurs objectifs dont le premier est celui du partage de la connaissance en Informatique et en
mathématique. </p>
<p class="para2">
Albert Einstein a dit : « Il ne faut pas faire de l’intelligence un dieu,
car si celleci est douée de muscles puissants, elle n’a pas de personnalité » …<br/>
Parfois, il n’existe pas de gens plus intelligents que les autres, mais c’est le travail qui nous différencie.
Pour bâtir haut, il faut creuser profond et tu seras fort dans ce que tu te donnes. </p>
</body>
</html>
Comme vous le savez, les deux paragraphes vont se placer l’un en dessous de l’autre même si on modifie leurs largeurs :
Pour qu’ils se placent l’un à la suite de l’autre, il suffit de transformer leur type en inline.
Exemple 3
Exemple 3
Table de matières sous forme des liens
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Formation en HTML et CSS</title>
</head>
<body>
<a href="#LI">I. EQUATION DU PREMIER DEGRE A UNE INCONNUE</a> <br/>
<section class="sous">
<a href="#LI1" >I.1 Définitions </a> <br/>
<a href="#LI11">I.1.1 Equation </a> <br/>
<a href="#LI112">I..1.2 Equation à une inconnue</a> <br/>
<a href="#LI13" >I.1.3 Equation du premier degré</a> <br/>
<a href="#LI14">I.1.4 Equation du premier degré à une inconnue</a> <br/>
<a href="#LI2">I.2 Résolution </a> <br/>
<a href="#LI21" >I.2.1 1ere méthode</a> <br/>
<a href="#Ex1" >Exemple 1</a> <br/>
<a href="#LI22" >I.2.2 2e méthode</a> <br/>
<a href="#Ex3" >Exemple 3 </a> <br/>
<a href="#LI3" >I.3 Equations particulières</a> <br/>
<a href="#Ex4" >Exemple 4 </a> <br/>
</section>
<a href ="#LII">II. EQUATIONS REDUCTIBLES AU PREMIER DEGRE </a> <br/>
<section class="sous">
<a href="#LII1" >II.1 EQUATIONS PRODUITS A. B . C … = 0 </a> <br/>
<a href="#Ex5" >Exemple 5 </a> <br/>
<a href="#Ex6" >Exemple 6 </a> <br/>
<a href="#Ex7" >Exemple 7 </a> <br/>
<a href ="#LII2">II.2. EQUATIONS FRACTIONNAIRES </a> <br/>
<a href="#Ex8" >Exemple 8 </a> <br/>
<a href="#Ex9" >Exemple 9 </a> <br/>
<a href="#LII3" >II.3 EQUATIONS CONTENANT DES VALEURS ABSOLUES </a> <br/>
<a href="#Ex10" >Exemple 10 </a> <br/>
<a href="#Ex11" >Exemple 11 </a> <br/>
</section>
< a href="#LIII" >III. PROBLEMES DONT LA RESOLUTION CONDUIT A UNE EQUATION DU PREMIER DEGRE A UNE INCONNUE </a> <br/>
<section class="sous">
<a href="#Ex12" >Exemple 12 </a> <br/>
<a href="#Ex13" >Exemple 13 </a> <br/>
</section>
<a href ="#LIV">IV. EXERCICES RESOLUS </a> <br/>
</body>
</html>
J’aimerai afficher au départ seulement les quatre principaux points et cacher les sous points :
.sous
{
display: none;
}
Résultat:
Pour faire apparaître ces éléments (les sous points pour notre exemple) par la suite, on devra faire appel à JavaScript par exemple.
Exemple 4
Exemple 4
Même fichier html de l’exemple 2, on avait obtenu le résultat suivant :
Pour que les deux blocs se positionnent l’un à côté de l’autre et qu’on ait la possibilité de les redimensionner (leur donner des tailles précises), on doit les transformer en type inline-block.
.para1
{
display: inline-block;
border: 2px blue solid;
width: 40%;
}
.para2
{
display: inline-block;
border: 2px blue solid;
width: 40%;
}
Résultat:
Vous avez sans doute remarqué que les deux éléments se sont alignés sur une même ligne de base (appelée baseline). Lorsque les éléments sont transformés en inline-block, nous avons la possibilité de modifier leur alignement vertical grâce à la propriété vertical-align. Voici quelques-unes des valeurs possibles pour cette propriété :
- baseline : aligne de la base de l'élément avec celle de l'élément parent (par défaut).Voir exemple ci-dessus.
- top : aligne en haut ;
.para1, .para2
{
display: inline-block;
vertical-align: top;
border: 2px blue solid;
width: 40%;
}
Résultat:
- middle : centre verticalement ;
- bottom : aligne en bas ;
- (valeur en px ou %) : aligne à une certaine distance de la ligne de base (baseline).
Retrouvez ce cours en format pdf II. POSITIONNEMENT AVEC LA PROPRIETE Display
III. POSITIONNEMENT AVEC FLEXBOX
III.1 Généralités
III.2 Propriétés liées à display : flex
III.2.1 La propriété flex-direction
III.2.2 La propriété flex-wrap
III.2.3 La propriété align-items
III.2.4 La propriété order
IV. LE POSITIONNEMENT ABSOLU
V. LE POSITIONNEMENT FIXE
VI. POSITIONNEMENT RELATIF
VII. POSITIONNEMENT MULTI COLONNE