---------------------------- LECON 38 -------- la propriéré CSS " display " --------------------

 

 

382 - propriete : display -

 

une ligne d ecriture sans 'display'

une ligne d ecriture avec DISPLAY INLINE--

une autre ligne d ecriture avec 'display inline'

une derniere ligne d ecriture sans 'display'

 

une premiere ligne d'ecriture avec "display block

une deuxieme ligne avecavec un lien vers DISPLAY

 

une premiere ligne d ecriture"display:list-item"

une deuxieme ligne d ecriture"display:list-item"

une troisieme ligne d ecriture"display:list-item"

une troisieme ligne d ecriture"display:list-item"

 

une ligne d ecriture ordinaire avant une ligne "display_none"

une ligne d ecriture "display:none"

une ligne d ecriture ordinaire après une ligne "display_none"

une ligne d'écriture "invisibility"

une ligne decriture ordinaire aprsè une ligne "invisibility"

 

une premièreligne d ecriture en couleuravec "span"

une deuxieme ligne en "span avec "display:block" d ecriture

une troisieme ligne en "span" avec "inline-block" d ecriture

 

----------------- LECON 39 -------- Gerer le positionnement avec la propriete"position" --------------

 

391 - propriete : position:static

 

une premiere ligne d ecriture

une deuxieme ligne avec position:static

une troisieme ligne décalée, avec position:static

une 4ème ligne avec element "left"

 

392 - propriete : position:relative - texte

 

une premiere ligne d ecriture

une 2ème ligne décalée vers le bas

une 3eme ligne avec un texte décalé vers la droite

 

 

393 - propriete : position:relative - boites

 

 

394 - propriete : position:absolute - textes

 

une 1ere ligne d ecriture normale

une 2eme ligne "position:absolute" "top"

une 3eme ligne normale

 

395 - propriete : position:absolute - boites

 

 

 

396 - propriete : position:fixed - boites

le carré rouge reste fixe dans la page

 

 

397 - propriete :z-index - boites

-positionnement sans "z-index"-

 

-positionnement avec "z-index"-

 

398 - écrire dans une boite

 

----------------------------- LECON 40 -------- --LA PROPRIETE " float"-- --------------

 

 

401 - la propriete " float "

 

le texte doit etre assez long pour arriver au bout de la ligne vers le bord droit de la page pour ensuite revenir vers le bord gauche de la page ou pour dire plus exactement sur le bord de la boite beigequi se trouve sur le bord gauche de la page. Et ainsi de suite a chaque ligne.

 

4011 - SANS la propriete " float "

 

 

4012 - AVEC la propriete " float "

 

 

TEST insertion gif anime

 

 

4013 - AVEC et SANS la propriete " float "

 

 

4014 - Probleme de presentation avec la propriete " float "

 

LE RECTANGLE VERT DEBORDE DU "div"

 

LES RECTANGLES VERTS SE CHEVAUCHENT

402 - La propriete " clear "

 

 

 

LES BOITES SONT ALIGNEES avec la propriete "clear"

 

 

 

403 - La propriete " clear " avec la valeur "both"

 

la valeur 'both' est appliquee au 2eme conteneur

 

404 - le pseudo element "clairfix" (voir lecon 56)

 

le pseudo element"clairfix" evite que la boite de droite deborde du conteneur

 

405 - EXERCICE: Incrustations de boites