Qui sera complétée par la suite…

Sélecteurs CSS

Pour cibler vos blocs HTML en CSS, vous avez à votre disposition plusieurs syntaxes :

article {}	sélection par type de balise : ici toutes les balises <article>...</article> seront ciblées
#texte1	sélection par identifiant : ici le bloc html qui a l’identifiant « texte1 » sera sélectionné ex : <div id="texte1">...</div> Attention, un identifiant ne sert qu’une et unique fois côté HTML !
.rouge{}	sélection par classe : toutes les balises avec la classe « rouge » seront sélectionnées ex : <div class="rouge">...<div> <p class="rouge">...</p>

Vous pouvez ensuite combiner ces 3 syntaxes pour faire des phrases plus précises :

nav li {}	les <li>...</li> qui sont DANS un bloc <nav>..</nav> – l’espace entre 2 mots indique une imbrication de blocs
nav, li {}	les <li>...</li> ET les <nav>...</nav> – la virgule signifie ET

Quelques exemples :

#demo1 div {} /* toutes les div, à l'intérieur de la balise qui a id="inline-block" */
nav .page-active {} /* le/les bloc(s) qui ont class="active" DANS le bloc nav */
.zone-texte div { les div DANS un bloc qui a class="zone-texte" */

p, h1, h2, h3 {} /* les p ET les h1 ET les h2 ET les h3 */

Attention, en cas de conflit CSS, la phrase la plus longue (la plus précise) va toujours gagner…

Ecoulement de la page

Par défaut la plupart des balises HTML sont des rectangles, qui prennent toute la largeur et créent un retour à la ligne :

Il y a quelques exceptions : les images, les liens, le texte (quand il n’est pas dans un paragraphe ou un h1, h2, …) :

D’une manière générale les blocs HTML s’empilent donc naturellement de haut en bas, ne se superposent pas et se « repoussent » les uns les autres.

Aller de gauche à droite avec inline-block

Une méthode simple pour empiler des blocs de gauche à droite, c’est display:inline-block (un mélange du « block » normal, et du « inline » des images) :

Par défaut les blocs sont alignés par le bas.
Vous pouvez facilement changer ça :

#masection article {
   display: inline-block;
   width:300px; /* par défaut l'article ferait 100% malgré le inline-block... */
   vertical-align: top; /* ou bottom, ou middle, pour gérer l'alignement des blocs entre eux */
}

Dans tous les cas vous allez avoir une petite marche latérale en chaque bloc, qu’on ne peut pas retirer (c’est un héritage des balises « inline »…).
Pour éviter cette marge il vaut mieux utiliser la technique suivante :

Aller de gauche à droite avec float:left

Plus précis que inline-block, ici pas de marge ni de pixel perdu : idéal pour une mise en page très précise.

Problème : vos blocs en float:left vont « emporter » avec eux le bloc suivant (même s’il n’est pas en float:left).

Il faut donc toujours créer un bloc vide après votre série de float-left, et lui appliquer la classe « clear » (définie dans votre feuille de style).

<div>...</div> 
<div>...</div> 
<div>...</div> 
<div class="clear"></div>

.clear { clear:both; float:none; } /* à utiliser après des float:left */

A noter, il existe la variante float:right; qui va inverser l’ordre de vos blocs et les aligner à droite… c’est parfois pratique.

Centrage horizontal

Si les blocs à centrer sont en display:inline-block, alors c’est facile il suffit d’utiliser text-align:center; sur le bloc parent :

Pour centrer un bloc « normal » (en display:block, le comportement par défaut) on va utiliser les marges latérales :

Il faut que le bloc ait une largeur attribuée en css, sinon il prend toute la largeur de la page… et on n’a pas besoin de le centrer.

« Position » pour créer des calques

Par défaut le flux de la page est « plat », en 2d.
Tous les éléments HTML sont en position:static par défaut.

Pour « sortir » un élément graphique et le positionner par-dessus la page, on utilise la propriété position: absolute;

L’élément « sort » du flux normal de la page et passe devant le reste.
Les autres morceaux de la page se placent comme si l’élément en absolute n’était plus là.

position:fixed;
fait la même chose, mais le bloc « fixed » restera en place quand on scrolle la page.
C’est pratique pour un menu par exemple.

Dans les 2 cas, on doit aussi placer notre élément absolute/fixed par rapport aux côtés de la fenêtre.
Horizontalement avec au choix :
left: 20px;
right: 20px;

Verticalement, au choix :
top: 20px;
bottom: 20px;

Le mode « triche »

Dans la famille position il y a aussi position:relative;

Celui-là ne change rien au flux de la page, l’élément HTML reste à sa place d’origine.
Mais vous aller pouvoir le déplacer visuellement sans qu’il viennent « heurter » les autres blocs HTML, par rapport à sa place d’origine.

Combiner relative et absolute

Par défaut un bloc absolute est placé par rapport aux bords de la fenêtre.
Mais il est possible de placer un bloc absolute par rapport à un de ses parents, si ce parent est en relative.

Avec un schéma c’est plus clair :

Le « papa » est en relative
L’enfant est en absolute
-> alors l’enfant restera « attaché » au parent, et les coordonnées left/right et top/bottom sont relatives à la place du parent… ça va demander un peu de pratique.

A suivre !