En
CSS les éléments qui ont la propriété
display:inline; sont affichés les uns à la suite des autres alors
que les éléments ayant la propriété
display:block; amène un retour à la line après leur affichage.
Par défaut les éléments
<a>,
<b>,
<i>,
<span>, etc.
sont des éléments inline contrairement à
<div> ou
<p>,
<form> etc.
Relative Block
Les éléments de type
Block occupe tout l'espace de la ligne et impose un retour à la ligne
pour l'élément qui suit.
| <style> |
|---|
| .div1 |
|---|
| { |
|---|
| background-color:yellow; |
|---|
| } |
|---|
| .div2 |
|---|
| { |
|---|
| background-color:gray; |
|---|
| } |
|---|
| </style> |
|---|
| <div class="div1">DIV 1</div> |
|---|
| <div class="div2">DIV 2</div> |
|---|
Résultat:
Relative Inline
Les éléments de type
Inline quand à eux se suivent les uns les autres. L'élément
span est d'ailleurs
complètement invisible par défaut.
| <style> |
|---|
| .span1 |
|---|
| { |
|---|
| background-color:yellow; |
|---|
| } |
|---|
| .span2 |
|---|
| { |
|---|
| background-color:gray; |
|---|
| } |
|---|
| </style> |
|---|
| <div class="span1">SPAN 1</div> |
|---|
| <div class="span2">SPAN 2</div> |
|---|
Résultat:
SPAN 1
SPAN 2
Absolute
Un élément qui a la propriété
position:absolute; sera placé dans son conteneur ( qui a une
position:relative; )
aux coordonnées qu'on lui définit.
Exemple:
| <style> |
|---|
| #container |
|---|
| { |
|---|
| position:relative; |
|---|
| border:1px dashed #ccc; |
|---|
| } |
|---|
| #absolute_div |
|---|
| { |
|---|
| position:absolute; |
|---|
| background-color:yellow; |
|---|
| top:60px; |
|---|
| left:30px; |
|---|
| height:30px; |
|---|
| width:100px; |
|---|
| } |
|---|
| </style> |
|---|
| <div class="container"> |
|---|
| <div class="absolute_div"></div> |
|---|
| </div> |
|---|
Résultat:
Fixed
Un élément qui a la propriété
position:fixed; sera toujours visible sur l'écran à condition que les coordonnées
qu'on lui donne soit sur l'écran. Le menu en haut de page de ce site a cette propriété. Lorsque l'on scroll celui-ci reste au top
de la fenêtre.
UNE QUESTION SUR L'ARTICLE?
CSSW