COURS HTML / CSS
Différence HTML / CSS
Le rôle principal d'HTML est de décrire le contenu : titre, sous-titre, formulaire,
champ, lien, abréviation, citation, passage important...
Axel Chalon – Cours HTML/CSS H1 P2018
Différence HTML / CSS
Le rôle du CSS est de mettre en forme ce contenu : couleur, image de fond, police de
caractère, bordures, agencement...
Axel Chalon – Cours HTML/CSS H1 P2018
<h1>Mon site</h1> Différence HTML / CSS
<h2>Présentation</h2>
<p>Bienvenue sur <strong>mon site</strong> ! Je suis un étudiant à
<abbr title="Hautes études des technologies de l'information et de
la communication">HETIC</abbr>. Leur slogan est <q>Rien n'est fait
s'il reste encore à faire</q>. Je vous conseille de visiter le <a
href="http://hetic.net">site officiel de l'école</a> dont le logo
est <img src="hetic.png" alt="logo hetic" />.</p>
<blockquote>
<p>Première grande école du web, la pluricompétence est au coeur
de notre pédagogie. Choisir HETIC, c'est [...]</p>
<p>Les Héticiens trouvent sans mal le poste de leur choix en
entreprise. [...]</p>
</blockquote>
<p>Les trois grands axes sont : </p>
<ul>
<li>Communication et création multimédia</li>
<li>Technologies de l'information</li>
<li>Connaissance du monde et des entreprises</li>
</ul>
<h2>Contact</h2>
Axel Chalon – Cours HTML/CSS H1 P2018
Différence HTML / CSS
Axel Chalon – Cours HTML/CSS H1 P2018
Différence HTML / CSS
En utilisant un reset CSS qui annule les effets de la feuille de style du
navigateur en mettant toutes les marges à zéro, etc. (conseillé : Meyer
CSS Reset), résultat :
Conseillé de tout le temps utilisé un reset. Permet d'avoir un site qui
s'affiche de la même manière sur tous les navigateurs et permet
d'éviter de s'embrouiller avec les propriétés CSS ajoutées par le
navigateur.
Axel Chalon – Cours HTML/CSS H1 P2018
Différence HTML / CSS
Axel Chalon – Cours HTML/CSS H1 P2018
Différence entre HTML et CSS
http://www.csszengarden.com/
Axel Chalon – Cours HTML/CSS H1 P2018
Différence entre HTML, CSS, Javascript et PHP
http://www.csszengarden.com/
Axel Chalon – Cours HTML/CSS H1 P2018
Différence entre HTML, CSS, Javascript et PHP
http://www.csszengarden.com/
Axel Chalon – Cours HTML/CSS H1 P2018
Différence entre HTML, CSS, Javascript et PHP
http://www.csszengarden.com
Axel Chalon – Cours HTML/CSS H1 P2018
HTML5 / CSS3
HTML5 : entre autres, nouvelles balises qui décrivent encore plus le contenu
(<article>, <header>, etc.)
CSS3 : animations, effets 3D, dégradés, ombres...
Source : www.alsacreations.com
Axel Chalon – Cours HTML/CSS H1 P2018
Les commentaires
HTML CSS JavaScript PHP
<!-- une ou /* une ou /* une ou plusieurs /* une ou plusieurs
plusieurs plusieurs lignes */ lignes */
lignes --> lignes */
// une ligne // une ligne
<p>Hi</p> <!-- On div { color: blue; } /* le /* /*
affiche "Hi" --> texte sera en bleu */ Blabla Blabla
Utilité : servir d'exemple */ Utilité : servir d'exemple */
// cette ligne initialise a à 2 $a=2; // initialise a à 2
var a=2; // initialise a à 2
Axel Chalon – Cours HTML/CSS H1 P2018
Liens absolus et relatifs
mon_site
index.html contact.html images style
logo_hetic.png design.css
Axel Chalon – Cours HTML/CSS H1 P2018
Liens absolus et relatifs
mon_site
index.html contact.html images style
images/logo_hetic.png
<img src="images/logo_hetic.png" alt="" />
logo_hetic.png design.css
Axel Chalon – Cours HTML/CSS H1 P2018
Liens absolus et relatifs
mon_site
index.html contact.html images style
../
../images/logo_hetic.png
background: url(../images/logo_hetic.png);
logo_hetic.png design.css
Axel Chalon – Cours HTML/CSS H1 P2018
Types de balise HTML
Balises ouvrantes et fermantes <balise>contenu</balise>
<p>Du contenu ici. <a href="http://google.fr">Google</a>.</p>
<div>Du contenu ici</div>
...
Balises autofermantes <balise />
<br />
<img src="logo.png" alt="logo" />
<meta charset="utf-8" />
...
Axel Chalon – Cours HTML/CSS H1 P2018
Structure d'une page HTML
html
<!doctype html>
<html> head
title
<head>
<title>Bonjour</title>
</head> body
<body>
div
<div id="header">
h1
<h1>Titre de la page</h1>
<ul id="menu">
<li>Accueil</li> li li li li
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li> p
</ul>
</div>
<p>Ceci est une page d'exemple.</p>
</body>
</html>
Axel Chalon – Cours HTML/CSS H1 P2018
Structure d'une page HTML
<!doctype html> html
<html>
<head> head body
<title>Bonjour</title>
</head>
<body> title div
<div id="header"> h1 ul
<h1>Titre de la page</h1>
p li li li li
<ul id="menu">
<li>Accueil</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<p>Ceci est une page d'exemple.</p>
</body>
</html>
Axel Chalon – Cours HTML/CSS H1 P2018
Sélecteurs CSS
li { color: blue; }
html
div h1 { font-size: 40px; }
head body
div li { color: blue; }
title div
ul li, h1, p { color: blue; }
<!doctype html> h1 ul
<html>
<head>
<title>Bonjour</title>
</head> p li li li li
<body>
<div id="header">
<h1>Titre de la page</h1>
<ul id="menu">
<li>Accueil</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<p>Ceci est une page d'exemple.</p>
</body>
</html>
Axel Chalon – Cours HTML/CSS H1 P2018
Sélecteurs CSS
ul li, h1, p { color: blue;}
html
head body
ul li { color: blue; }
h1 { color: blue; }
title div
p { color: blue; }
<!doctype html> h1 ul
<html>
<head>
<title>Bonjour</title>
</head> p li li li li
<body>
<div id="header">
<h1>Titre de la page</h1>
<ul id="menu">
<li>Accueil</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
<p>Ceci est une page d'exemple.</p>
</body>
</html>
Axel Chalon – Cours HTML/CSS H1 P2018
Sélecteurs CSS
h1 + p { font-weight: bold; } = tous les p directement précédés d'un h1
body > p { color: red; } = tous les p dont le 1er parent (le parent le plus proche) est un body
<!doctype html>
<html>
<head>
<title>Bonjour</title>
</head>
<body>
<h1>Titre</h1>
<p>Premier paragraphe (sera en gras, en rouge)</p>
<p>Deuxième paragraphe (sera en rouge)</p>
<h1>Titre</h1>
<p>Premier paragraphe (sera en gras, en rouge)</p>
<p>Deuxième paragraphe (sera en rouge)</p>
<div>
<p>Bonjour.</p>
<p>Bonsoir.</p>
</div>
</body>
</html>
Axel Chalon – Cours HTML/CSS H1 P2018
Insérer du CSS
Fichier externe (surtout si plusieurs pages utilisent le même CSS)
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
Dans le fichier style.css :
body { background: black; }
Axel Chalon – Cours HTML/CSS H1 P2018
Insérer du CSS
Balise <style> (pour un CSS utilisé que sur une page)
<!doctype html>
<html>
<head>
<title>Titre de la page</title>
<style>
div#content { width: 960px; margin: auto; }
</style>
</head>
<body>
<div id="content">
(blablabla)
</div>
</body>
</html>
Axel Chalon – Cours HTML/CSS H1 P2018
Insérer du CSS
Appliqué directement à l'élément (déconseillé)
<p style="color: red;">Bonjour.</p>
Axel Chalon – Cours HTML/CSS H1 P2018
CSS box model
→ exemple
Axel Chalon – Cours HTML/CSS H1 P2018
display: block;
Block :
- Hauteur par défaut en fonction du contenu
- Largeur par défaut maximale (largeur de
l'élément parent)
- Largeur (width), hauteur (height), margin modifiables
- Elements disposés verticalement
élément bloc sans css
width: 50px;
height: 50px;
width: 50px;
height: 50px;
Source : www.alsacreations.com
Axel Chalon – Cours HTML/CSS H1 P2018
display: block;
Axel Chalon – Cours HTML/CSS H1 P2018
display: block;
Axel Chalon – Cours HTML/CSS H1 P2018
display: inline;
Inline :
- Hauteur en fonction du contenu
- Largeur en fonction du contenu
- width, height et margin non modifiables
- Elements disposés côte à côte ("en ligne")
(Souvent des morceaux de paragraphe)
Source : www.alsacreations.com
Axel Chalon – Cours HTML/CSS H1 P2018
display: inline-block;
Inline-block :
- Hauteur en fonction du contenu
- Largeur en fonction du contenu
- width, height, margin modifiables
- Elements disposés côte à côte ("en ligne") et sont indivisibles
→ exemple
Axel Chalon – Cours HTML/CSS H1 P2018
display: inline-block;
Axel Chalon – Cours HTML/CSS H1 P2018
display: inline-block;
Axel Chalon – Cours HTML/CSS H1 P2018
display
Axel Chalon – Cours HTML/CSS H1 P2018
display
Rouge = block
Bleu = inline
Violet = inline-block
Axel Chalon – Cours HTML/CSS H1 P2018
Balises HTML
Elements de type bloc par défaut :
Des éléments inline ne peuvent
<h1>Titre</h1> que contenir des éléments inline.
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>
<h4>Sous-sous-sous-titre</h4>
<h5>Sous-sous-sous-sous-titre</h5>
<h6>Sous-sous-sous-sous-sous-titre</h6>
<div>Bloc</div>
<p>Paragraphe</p>
Elements de type en ligne (inline) par défaut :
<span>Contenu ici.</span>
<em>Passage important.</em>
<strong>Passage encore plus important.</strong>
<a href="http://hetic.net">Site d'HETIC</a>
<img src="images/logo.png" alt="logo du site" />
Axel Chalon – Cours HTML/CSS H1 P2018
Pas d'espace ni d'accent
dans les noms d'id et de
classes. Ils ne doivent pas
non plus commencer par un
ID et classes chiffre.
id : Unique, permet d'identifier l'élément (Max 1 id par élément ; deux éléments
ne peuvent pas avoir le même id)
<div id="content">Bonjour.</div>
#content { background: blue; }
div#content { background: red; }
class : permet de catégoriser un élément (plusieurs éléments peuvent avoir les
mêmes classes ; un élément peut avoir plusieurs classes)
<p class="commentaire">Super !</p>
<p class="commentaire">Génial !</p>
.commentaire { background: blue; }
p.commentaire { background: red; }
Si une propriété a des valeurs différentes dans plusieurs règles appliquées à
l'élément, c'est la valeur de la règle qui a le sélecteur le plus précis qui l'emportera.
Ex: "body li.positif" est plus précis que "li.positif". Dans les exemples du haut, la
<div> et les <p> auront un fond rouge.
Axel Chalon – Cours HTML/CSS H1 P2018
CSS
#commentaires { background: blue;} html body div#content ul#commentaires { background: blue;}
ul#commentaires li { color: black; font-weight: bold; }
ul#commentaires li.positif { color: green; }
ul#commentaires li.negatif { color: gray; }
ul#commentaires li.admin { border: 1px solid green; }
ul#commentaires li.admin.positif { border: 2px solid green; }
html
<!doctype html>
<html> head body
<head>
<title>Bonjour</title>
</head> div
<body> title
<div id="content">
<ul id="commentaires"> h1 ul
<li class="positif">Génia! (vert, gras)</div>
<li>Pas mal. (noir, gras)</div>
<li class="negatif">c nul (gris, gras)</div> p li li li li li
<li class="negatif">LOLOLOLOL (gris, gras)</div>
<li class="positif admin">Merci à tous ! (vert, gras, bordure 2px vert)</div>
</ul>
</div>
</body>
</html>
Axel Chalon – Cours HTML/CSS H1 P2018
Propriétés CSS : texte
color: #FF0000;
font-family: Droid, Impact, Tahoma, Arial, serif;
font-size: 14px;
font-weight: normal;
bold;
text-decoration: none;
underlined;
font-style: normal;
italic;
Axel Chalon – Cours HTML/CSS H1 P2018
Propriétés CSS : texte
"serif" dans font-family = police à empattements par défaut
de la machine
"sans-serif" dans font-family = police sans empattements
par défaut de la machine
Axel Chalon – Cours HTML/CSS H1 P2018
Centrer horizontalement une balise de type bloc
margin: auto;
(Calcule automatiquement les marges de gauche et de droite pour être centré)
Ne pas oublier de spécifier la largeur du bloc, sinon il prend toute la largeur !
width: 250px;
margin: auto;
Axel Chalon – Cours HTML/CSS H1 P2018
Centrer horizontalement du contenu en ligne (balise inline
ou inline-block)
text-align: center;
Permet de centrer le contenu d'un élément.
Comme dans les logiciels de traitement de texte, on applique la justification ou
l'alignement à un paragraphe, et pas à un mot, ou bien ça n'a pas de sens ! Donc ne
pas utiliser un text-align sur un élément inline, ça ne marchera pas !
L'élément (block/inline-block) en bleu a un text-align: center;
Axel Chalon – Cours HTML/CSS H1 P2018
Les pseudo-classes
:hover activé au survol de la souris
a:hover { background: pink; }
:link (liens non visités)
:visited (lien déjà visité)
:hover (survol)
:focus (champ de formulaire actif)
:active (au moment du clic sur un lien)
C'est un cas particulier où vous devez faire attention à l'ordre :
- :hover doit être après :link et :visited
- :active doit être après :hover
Cela est dû au fait que a:link, a:visited, a:hover et a:active ont la même
précision, donc en cas de propriétés avec des valeurs différentes dans ces
règles CSS, ce sera la dernière règle CSS qui sera appliquée. Quand on est
en train de cliquer sur un lien (:active), on a aussi la souris au-dessus du lien
(:hover), mais c'est le :active qui doit prédominer, on met donc :active
après :hover. Quand on passe la souris au-dessus (:hover) d'un lien non-
visité (:link) ou visité (:visited), c'est le :hover qui doit prédominer ; on met
donc :hover après :link et :visited.
Axel Chalon – Cours HTML/CSS H1 P2018
Les pseudo-classes
:first-child pour le premier élément enfant
:last-child pour le dernier élément enfant
ul#menu li:first-child { color: blue; }
ul#menu li:last-child { color: red; }
<ul id="menu">
<li>Accueil</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
Axel Chalon – Cours HTML/CSS H1 P2018
Les pseudo-éléments
<q>On peut tromper mille
fois une personne...</q>
q:before {
content: "Citation : << ";
}
q:after {
content: " >>";
}
Citation : << On peut tromper
mille fois une personne... >>
Axel Chalon – Cours HTML/CSS H1 P2018
Les pseudo-éléments
<q>On peut tromper mille
fois une personne...</q>
q:before { content: "Citation : "; font-style: italic;}
q:first-letter { font-weight: bold; }
q:first-line { color: red; }
Citation : On peut tromper
mille fois une personne
Axel Chalon – Cours HTML/CSS H1 P2018
overflow
overflow: visible; (défaut) (le contenu qui dépasse s'affiche, mais hors du flux)
hidden; (le contenu qui dépasse ne sera pas affiché)
scroll; (barres de défilement ajoutées, même si le contenu ne dépasse pas)
auto; (barres de défilements ajoutées si nécessaire)
Axel Chalon – Cours HTML/CSS H1 P2018
overflow
Axel Chalon – Cours HTML/CSS H1 P2018
visibility: hidden VS display: none
Propriété appliquée au bloc en rose :
(visibility: visible) visibility: hidden display: none
Axel Chalon – Cours HTML/CSS H1 P2018
Les "super-propriétés"
border-left-width: 1px;
border-left: 1px solid black; border-left-type: solid;
border-left-color: black;
Axel Chalon – Cours HTML/CSS H1 P2018
Les "super-propriétés"
border-left-width: 1px;
border-left-type: solid;
border-left-color: black;
border-right-width: 1px;
border-right-type: solid;
border: 1px solid black; border-right-color: black;
border-top-width: 1px;
border-top-type: solid;
border-top-color: black;
border-bottom-width: 1px;
border-bottom-type: solid;
border-bottom-color: black;
Axel Chalon – Cours HTML/CSS H1 P2018
Les "super-propriétés"
margin-top: 20px;
margin: 20px; margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-top: 20px;
margin: 20px 5px; margin-right: 5px;
margin-bottom: 20px;
margin-left: 5px;
margin-top: 20px;
margin: 20px 5px 10px; margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
margin-top: 5px;
margin: 5px 10px 15px 20px; margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
Axel Chalon – Cours HTML/CSS H1 P2018
Les "super-propriétés"
background: #000000 url(fond.png) right bottom no-repeat;
background-color: #000000;
background-image: url(fond.png);
background-position: right bottom;
background-repeat: no-repeat;
background: blue url(hetic.png) right bottom no-repeat;
Axel Chalon – Cours HTML/CSS H1 P2018
Les "super-propriétés"
background: #000000 url(fond.png) right bottom no-repeat;
background-color: #000000;
background-image: url(fond.png);
background-position: right bottom;
background-repeat: no-repeat;
Vous n'êtes pas obligé de donner les valeurs de
chacune des propriétés (couleur, URL de l'image,
position, répétition) dans la "super-propriété" background: white;
background. Par contre, pour la "super-propriété" border: 1px solid black;
border, vous devez impérativement donner les trois
valeurs (épaisseur, type de bordure, couleur).
Axel Chalon – Cours HTML/CSS H1 P2018
background-repeat
background: white url(point.png) center center no-repeat;
Axel Chalon – Cours HTML/CSS H1 P2018
background-repeat
background: url(point.png) repeat;
Axel Chalon – Cours HTML/CSS H1 P2018
background-repeat
background: url(degrade.png) repeat-x;
Axel Chalon – Cours HTML/CSS H1 P2018
background-repeat
background: url(degrade.png) repeat-y;
Axel Chalon – Cours HTML/CSS H1 P2018
Positionnemenent en CSS
position: static;
Par défaut. L'élément est dans le flux.
position: relative;
L'élément reste dans le flux à la position initiale. Il sert de bloc de référence pour le
positionnement de blocs enfants en position: absolute;
Possibilité de déplacer le bloc relativement à sa position initiale avec top, left, right,
bottom.
position: absolute;
Sort du flux et peut se positionner comme demandé relativement à la plus proche
balise parente qui est en position: relative, fixed, ou absolute ; ou, s'il n'y a pas de
balise parente hors du flux, le positionnement se fera relativement au document.
position: fixed;
Sort du flux et est positionné relativement à la fenêtre. (restere au même endroit
même quand on fait défiler la page)
Axel Chalon – Cours HTML/CSS H1 P2018
<div>
<div></div> Positionnement absolu
<div></div>
<div></div>
<div></div>
</div>
position: absolute; position: relative; position: absolute;
top: 0; top: 0;
left: 0; right: 0;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; right: 10px;
Axel Chalon – Cours HTML/CSS H1 P2018
<div>
<div></div> Positionnement absolu
</div>
position: relative;
position: absolute;
top:30px;
bottom: 0;
left: 30px;
right: 0;
Axel Chalon – Cours HTML/CSS H1 P2018
Positionnement relatif
position: relative;
top: -5px;
left:-5px;
Axel Chalon – Cours HTML/CSS H1 P2018
<body>
<div>
<div></div>
</div> Positionnement relatif
</body> div verte en position: absolute; left: 0; top: 0;
En bleu foncé, le fond de votre page web.
position: relative;
Axel Chalon – Cours HTML/CSS H1 P2018
z-index
z-index: 100;
Plus le z-index est élevé, plus l'élément sera "au-dessus", sera au premier plan.
Ne s'applique qu'aux éléments hors du flux (position: relative, fixed ou absolute)
Mieux avec des grands pas (0, 10, 20, 30) au cas où il y a des ajouts : si on a des
éléments qui ont un z-index de 1, 2, 3, 4, 5 et 6, et qu'après-coup on veut ajouter
un élément qui soit placé entre l'élément de z-index 3 et l'élément de z-index 4, il
faudra déplacer toute la suite d'un cran. On n'aurait pas eu ce problème si les z-
index avaient été 10, 20, 30, 40, 50, 60 (on aurait donné au nouvel élément un z-
index entre 30 et 40).
Axel Chalon – Cours HTML/CSS H1 P2018
Les float
Axel Chalon – Cours HTML/CSS H1 P2018
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>
Les float
Notez comment le flottant a été "ingéré" par l'élément qui le suit.
Lorem ipsum dolor sit amet,
Element consectetur adipiscing elit. In in arcu
en adipiscing, tristique turpis at,
float: left; malesuada urna. Nam eget ipsum sed
velit interdum fringilla eget at ante.
Nunc ut nisl turpis. Nam aliquet
tristique tellus, sit amet ullamcorper odio lobortis
malesuada. Cras cursus egestas ante, at consectetur
quam dignissim vel. Nunc molestie, erat eget vulputate
venenatis, quam enim consectetur nisi, eu rhoncus risus
libero in nunc.
Axel Chalon – Cours HTML/CSS H1 P2018
<div>Element en float: left;</div>
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>
Les float
On peut mettre plusieurs flottants les uns à la suite des autres
(utile pour les mosaïques ; ou on peut utiliser des inline-block).
Lorem ipsum dolor sit
Element Element consectetur
en en adipiscing, tristique
float: left; float: left; malesuada urna.
velit interdum fringilla
Nunc ut nisl turpis.
Nam aliquet tristique tellus, sit amet ullamcorper odio
lobortis malesuada. Cras cursus egestas ante, at
consectetur quam dignissim vel. Nunc molestie, erat eget
vulputate venenatis, quam enim consectetur nisi, eu
rhoncus risus libero in nunc.
Axel Chalon – Cours HTML/CSS H1 P2018
<div>Element en float: left;</div>
<div>Element en float: right;</div>
<p>Lorem ipsum... </p>
Les float
On peut mettre plusieurs flottants les uns à la suite des autres
(utile pour les mosaïques ; ou on peut utiliser des inline-block).
Lorem ipsum dolor sit
Element amet, consectetur Element
en adipiscing elit. In in en
float: left; arcu adipiscing, sic float: right;
tristique turpis at, in
dolor sit amet, consectetur adipiscing elit. In in arcu elit
adipiscing, tristique turpis at, malesuada urna. Nam eget
ipsum sed velit interdum fringilla eget at ante. Nunc ut
nisl turpis. Nam aliquet tristique tellus, sit amet dolor
ullamcorper odio lobortis malesuada. Cras cursus quam
egestas ante, at consectetur quam dignissim vel.
Axel Chalon – Cours HTML/CSS H1 P2018
<div>Element en float: left;</div>
<p>Lorem ipsum... </p> Les float
Une marge appliquée à l'élément suivant le flottant (ici un <p>).
Permet de faire un design en colonnes. (On peut aussi utiliser
plusieurs flottants sans marges, ou des inline-block, ou (déconseillé
d'un point de vue sémantique) un tableau <table>).
Lorem ipsum dolor sit amet,
Element consectetur adipiscing elit. In in arcu
en adipiscing, tristique turpis at,
float: left; malesuada urna. Nam eget ipsum sed
velit interdum fringilla eget at ante.
Nunc ut nisl turpis. Nam aliquet
tristique tellus, sit amet ullamcorper
odio lobortis malesuada. Cras cursus
egestas ante, at consectetur quam
margin-left: 200px; dignissim vel. Nunc molestie, erat eget
vulputate venenatis, quam enim
consectetur nisi, eu rhoncus risus
libero in nunc.
Axel Chalon – Cours HTML/CSS H1 P2018
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>
<p>Lorem ipsum... </p>
<p>Lorem ipsum... </p> Les float
Lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum.
Element
en
float: left; Lorem ipsum lorem ipsum lorem ipsum.
Lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.
Axel Chalon – Cours HTML/CSS H1 P2018
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>
<p>Element en clear: both </p>
<p>Autre élément quelconque... </p> Les float
Lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum.
Element
en
float: left;
Element en clear: both;
Autre élément quelconque qui suit. Lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum...
Axel Chalon – Cours HTML/CSS H1 P2018
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>
Les float
Lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum.
Element
en
float: left;
Les éléments flottants (tout comme les éléments
avec position: absolute; ou position: fixed) ne font
plus partie du flux. Donc ils ne peuvent pas être pris
en compte pour calculer la hauteur du bloc dans
lequel ils sont par exemple. Le bloc bleu ciel ne va
pas adapter sa hauteur en fonction du float: left car le
float: left est hors du flux.
Axel Chalon – Cours HTML/CSS H1 P2018
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>
<div>Element en clear: both;</div>
Les float
Lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum.
Element
en
float: left;
Element en clear:both;
Un élément en clear: both permet de régler le problème.
Axel Chalon – Cours HTML/CSS H1 P2018
<div>Element en float: left;</div>
<p>Lorem ipsum... </p>
<div></div>
Les float
Lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum.
Element
en
float: left;
L'élément en clear: both peut être vide.
Axel Chalon – Cours HTML/CSS H1 P2018
Merci !
Axel Chalon – Cours HTML/CSS H1 P2018
