CSS _ Positionement

7/26/2019 CSS _ Positionement

1/28

display position float

CSS : positionnement

Universite Lille 1 Technologies du Web CSS : les selecteurs 1


2/28


Flux de traitement

Rappels :



3/28


Flux de traitement

Rappels :

a tout element de larbre DOM est associe une bote



4/28


Flux de traitement

Rappels :


le navigateur parcourt (en continu) larbre DOM pour calculerlaffichage et le positionnement deselements flux normal du navigateurparcours en profondeur dabord et de gauchea droite



5/28


Flux de traitement

Rappels :


le navigateur parcourt (en continu) larbre DOM pour calculerlaffichage et le positionnement deselements flux normal du navigateurparcours en profondeur dabord et de gauchea droite

des proprietes CSS influencent ce flux de traitementdisplay, position, float


fl


6/28


au programme...

1 display

2 position

3 float


di l iti fl t


7/28


au programme...

1 display

2 position

3 float


di l iti fl t


8/28


display

La propriete display definit le mode de gestion de la bote dunelement dans le flux de rendu.

Plusieurs valeurs possibles : none, block, inline, inline-block,

etc.




9/28


none

none

la bote a une taille nulle lelement nest pas affiche.




10/28


none

none


different de la propriete visibilityavec la valeur hidden:




11/28


none

none


different de la propriete visibilityavec la valeur hidden:lelement est cache ( transparent ) mais sa place est reservee.Les descendants avec visibility : visible sont affiches.




12/28


block

blockLes elements de type block

peuvent contenir dautres elements block, inline ou du texte

ont par defaut la largeur de leur conteneur (element pere)

sempilent verticalement les uns au-dessus des autres dans lordredu flux normal au sein de leur conteneurimposent un retoura la ligne dans le flux de texte

Il est possible de fixer leur largeur et leur hauteur.




13/28

p y p

block






Cest le mode par defaut deselements de flux, de titres et sectionnant.




14/28

block






Cest le mode par defaut deselements de flux, de titres et sectionnant.

NB : Les marges hautes et basses deselements block fusionnent. Lataille de la marge finale est le max des tailles des marges qui

fusionnent.Universite Lille 1 Technologies du Web CSS : les selecteurs 7



15/28

inline

inline

Leselements de type inline

ne peuvent contenir que dautreselements inlineou du texte

ont par defaut une largeur et hauteur definies par leur contenu

secoulent les unsa la suite des autres selon le flux de texte naturel

Il nest pas possible de fixer leur largeur et leur hauteur.




16/28

inline

inline

Leselements de type inline

ne peuvent contenir que dautreselements inlineou du texte

ont par defaut une largeur et hauteur definies par leur contenu

secoulent les unsa la suite des autres selon le flux de texte naturel

Il nest pas possible de fixer leur largeur et leur hauteur.

Cest le mode par defaut deselements de phrase.




17/28

inline-block

Un mode hybride .

inline-block

Les elements de type inline-block

peuvent contenir dautres elements block, inline ou du texteont par defaut une largeur et hauteur definies par leur contenu

secoulent les uns a la suite des autres selon le flux de texte naturel


ex-display.html




18/28

au programme...

1 display

2 position

3 float




19/28

au programme...

1 display

2 position

3 float




20/28

Positionnement relatif

position

La propriete position permet dagir sur le positionnement des botes.Par defaut, sa valeur est static.




21/28

Positionnement relatif

position

La propriete position permet dagir sur le positionnement des botes.Par defaut, sa valeur est static.

position : relative

permet de decaler la position de la bote par rapporta sa positionattribuee par le flux normal translation

translation determinee par proprietes left, top, right, bottomleft:10px = ajoutez une marge a gauche de 10px = d ecalage vers la droite

les autres botes ne sont pas influencees

des chevauchements sont possibles(propriete z-index)

ex-position.htmlUniversite Lille 1 Technologies du Web CSS : les selecteurs 12



22/28

Positionnement absolu

position : absolute

la bote est retiree du flux normalsa position est determinee par rapport au conteneur :

un parent positionne en absolute ou relative,le conteneur initial (=element ) si aucun.

decalage de marges determine par proprietes left, top, right,bottom

ex-absolute.html




23/28

Positionnement fixe

position : fixed

la bote est retiree du flux normal

sa position est determinee par rapport a la fenetre du navigateur

decalage de marges determine par proprietes left, top, right,bottom

la position dans la page ne depend plus de sa position dans lecode html

ex-fixed.html




24/28

au programme...

1 display

2 position

3 float




25/28

au programme...

1 display

2 position

3 float




26/28

Mode flottant

propriete float

La propriete float permet de creer des botes flottantes .

Une bote flottante

est retiree du flux normal

est positionnee sur la gauche (float:left) ou la droite(float:right) de son conteneur, le reste du contenu saffiche en secoulant autour

acquiert automatiquement la propriete display:block

doit posseder une largeur

Des blocs flottants consecutifs se juxtaposent.

ex-float1.html ex-float2.html




27/28

Empecher le flottement

clear

la propriete clearpermet dinterdire le flottement sur unelement bloc.

Les valeurs possibles sont :

none flottement autorise

left flottement interdit sur la gauche

right flottement interdit sur la droite

both flottement interdit a gauche comme a droite

ex-float3.html




28/28

a suivre...

CSS : petits complements


CSS _ Positionement

Documents

Transcript of CSS _ Positionement