Une grille uniforme de 1 pixel de large
| <style> |
|---|
| .ul li |
|---|
| { |
|---|
| width:33%; |
|---|
| height:50px; |
|---|
| float:left; |
|---|
| border:1px solid #ddd; |
|---|
| } |
|---|
| </style> |
|---|
On remarque que pour la grille ci-dessus, les bords au centre de la grille font 2px de largeur ; en effet comme une case fait 1px de largeur, 2 cases
qui se touchent donneront l'impression d'une bordure de 2px. Pour éviter cette bordure de 2px, vous devez ajouter une ligne de code :
margin: 0 -1px -1px 0;
Exemple:
| <style> |
|---|
| .ul li |
|---|
| { |
|---|
| width:33%; |
|---|
| height:50px; |
|---|
| float:left; |
|---|
| border:1px solid #ddd; |
|---|
| margin: 0 -1px -1px 0; |
|---|
| } |
|---|
| </style> |
|---|
Centrer un élément de type block
Pour centrer un élément block vous pouvez utiliser l'attribut "margin".
Exemple:
| <style> |
|---|
| #main{ |
|---|
| margin:10px auto; |
|---|
| } |
|---|
| </style> |
|---|
Cet exemple ajoute une marge de 10px en haut et en bas de l'élément et centre horizontalement l'élément.
Centrer un élément verticalement
S'il est facile de centrer un élément verticalement dans un tableau, il n'en est pas de même ailleurs. Pour centrer un élément
verticalement vous pouvez utiliserla propriété
line-height qui aura la même hauteur que son conteneur.
Exemple:
| <style> |
|---|
| ul li{ |
|---|
| line-height:20px; |
|---|
| height:20px; |
|---|
| } |
|---|
| </style> |
|---|
| |
|---|
| <ul> |
|---|
| <li>Lien 1</li> |
|---|
| ... |
|---|
| </ul> |
|---|
Sticky Footer
Le footer est toujours compliqué à afficher. Soit on aimerait le mettre en fixed, mais il occuperait tout le temps un espace trop important,
soit en absolute, mais si la page comporte un scrolling c'est imposible, et si on le met en relative, on aura un espace blanc en bas de page pour
les écrans les plus grand à moins d'imposer une hauteur minimum pour la page, mais ce n'est pas esthétique non plus.
Il existe cependant une astuce
CSS qui permet d'avoir un footer un bas de page proprement:
| <div id="wrap"> |
|---|
| Mon contenu |
|---|
| </div> |
|---|
| |
|---|
| <footer> |
|---|
| Mon footer |
|---|
| </footer> |
|---|
| html, body |
|---|
| { |
|---|
| height: 100%; |
|---|
| } |
|---|
| #wrap |
|---|
| { |
|---|
| min-height: 100%; |
|---|
| /* égal à la hauteur du footer */ |
|---|
| margin-bottom: -200px; |
|---|
| } |
|---|
| #wrap:after |
|---|
| { |
|---|
| display: block; |
|---|
| content: ""; |
|---|
| } |
|---|
| footer, #wrap:after |
|---|
| { |
|---|
| height: 200px; |
|---|
| } |
|---|
CSSW