====== Css Hacks ======

Les hacks css sont un ensemble de techniques qui permettent de contourner les problèmes d'affichages récurrents. Ils sont assez bien connus, et souvent bien documentés sur les blogs.


===== Clearfix =====

La technique du clearfix permet de corriger un comportement qui peut paraître étrange dans les navigateurs du type webkit (Chrome, Safari...) et Gecko (Firefox, Flock, Camino...).

==== Symptôme ====

Le background d'un élément ne s'affiche pas, ou la border n'encadre pas ce qu'on voudrait.

Par exemple : le résultat de gauche souhaité n'est pas obtenu (à droite, c'est le bug).

{{:ressources:html:clearfix_bg_result.png?200|}}{{:ressources:html:cearfix_bg_bug.png?200|}}

==== Contexte ====

Dans un élément #container, on met plusieurs éléments en float left. Ce #container nous est utile pour mettre un background ou un border, et celui-ci ne s'affiche pas

<code html>
<div id="container">
	<div class="block">block #1</div>
	<div class="block">block #2</div>
	<div class="block">block #3</div>
</div>
</code>


<code css>
body{
	font: italic normal normal 1.2em Times, "Times New Roman", serif;
	color:#000;
}

#container{
	width:920px;
	border:1px dashed #ccc;
}

.block{
	float:left;
	width:200px;
	margin:10px;
	padding:5px;
	background-color:#eee;
}
</code>

Ce qu'on s'attend à voir, c'est un #content qui encadre ses 3 blocks en float left.

{{:ressources:html:clearfix_result.png|}}

Ce qu'on a à la place, c'est ceci :

{{:ressources:html:clearfix_bug.png|}}


==== Solution ====

Quand on a un élément (souvent une div) qui ne contient que des éléments en float (left de préférence), elle a 0 pixels de hauteur.

Il faut forcer un clear:both pour que le #container s'étende jusqu'en dessous des éléments float.

La solution la plus simple, c'est d'ajouter une div vide qui a pour class .clearfix au même niveau que les éléments en float.

<code html>
<div id="container">
	<div class="block">block #1</div>
	<div class="block">block #2</div>
	<div class="block">block #4</div>
	
	<div class="clearfix"></div>
	
</div>
</code>

Et dans le CSS, on spécifie pour la classe .clearfix l'attribut clear:both.

<code css>
.clearfix{
	clear:both;
}
</code>

Voir par exemple la modification à effectuer dans le blog "Celebrating life"

{{:ressources:html:celebrating_clearfix.zip|}}



===== Dancing floats =====

#FIXME finish da hax

Parfois, les éléments float ne se casent pas
vérifier 
  * les width
  * les margin
  * les padding (voir [[#Padding space]])


===== Padding space =====

#FIXME finish da hax

Firefox risque d'augmenter la largeur des éléments lorsqu'on spécifie un padding.

===== Margin space =====

#FIXME finish da hax

Deux éléments ont un espace vertical entre eux alors qu'on a bien spécifié les margin et les paddings à 0

Ca vient de la margin d'un élément intérieur qui se propage (souvent un h1 ou un p)