Tutorial CSS n°3

Position 'fixed' pour un element

Les elements positionnés de manière fixe ne défilent pas avec le document, mais reste au mème endroit sur la page.
Ils sont positionnées par rapport aux bords de la zone d'affichage (fenètre du navigateur). De plus ils sont totalement retiré du flux du document

La valeur fixed permet donc à l'element de collé a la fenètre du navigateur, mème si on scroll le document, celà peut ètre interesant pour fabriquer de fausses pop-up, fixer un menu ou aussi pour afficher un message (pub) par dessus le contenu de votre page.
Malheureusement, une fois de plus internet explorer 6 (et precedant) n'en font qu'à leur tète et ignore tout simplement cette propriété !

Le fonctionnement de cette page

J'ai fixé une boite en haut a droite, avec un petit deport. Il s'agit d'une petite boite d'informations qui apparait au chargement de la page.
Losque vous cliquez dessus, elle disparait (grace un un tout petit bout de javascript)
Les possibilités sont nombreuses, à vous d'en faire bon usage !

Le CSS utilisé, valable pour tout navigateur sauf ie6 (et precedant)

Dans cet exemple, on va regler la propriété position: fixed; pour la div "box" qui contient donc notre message.

div#box {
	position: fixed;
	background: #EFEFEF;
	right: 10px;
	top: 10px;
	width: 300px;
	height: 50px;
	z-index: 600;
	padding: 10px;
	border: 2px solid gray;
}

Alors vous constaterez que j'ai ajouté d'autre propriètés a notre boite:

background: #EFEFEF; : pour fixer une couleur de fond différente
right: 10px; top: 10px; : En fixed, il faut obligatoirement specifié a partir de quels bord notre boite va s'accrocher, par la mème occasion on peut lui ajouter un petit deport, de 10px
width: 300px; height: 50px; : on fixe les dimensions de la boite
z-index: 600; : facultatif, c'est pour s'assurer que notre boite s'affichera bien par dessus le reste de la page
padding: 10px; border: 2px solid gray; : Juste pour donner un peu de style

Contournement, pour le fonctionnement sous ie6

Etant donné que cette propriété est ignoré sous ie, nous allons utilisé un peu de javascript couplé a notre css pour combler cette lacune, de manière totalement transparente pour le visiteur.

Nous allons donc appeler une fonction javascript depuis notre css, qui va se charger de réecrire les coordonnées de l'element.
Ici j'inclus le script directement dans la page, mais vous pouvez le charger dans un .js externe egalement.

<script type="text/javascript">
	// <![CDATA[
	function fixed_top(select,offS){
		return Number(offS+document.documentElement.scrollTop+document.body.scrollTop)+'px';
	}
	function fixed_left(select,offS){
		return Number(offS+document.documentElement.scrollLeft+document.body.scrollLeft)+'px';
	}
	function fixed_bottom(select,offS){
		return Number(-offS+document.documentElement.clientHeight-select.offsetHeight+document.documentElement.scrollTop+document.body.scrollTop)+'px';
	}
	function fixed_right(select,offS){
		return Number(-offS+document.documentElement.clientWidth-select.offsetWidth+document.documentElement.scrollLeft+document.body.scrollLeft)+'px';
	}
	// ]]>
</script>

Bon je ne vais pas detaillé le fonctionnement de ce script, mais en gros il calcul la distance entre le bord de la fenètre du navigateur, et la distance de scroll.

Et voici donc la partie css propre a ie6. J'ai inclus le css directement dans la page, en utilisant un commentaire conditionnel qui interprète le script que pour les versions inferieur a ie7.

<!--[if lt IE 7]>
<style type="text/css">
	<!--
	div#box{
		position: absolute;
		top:expression(fixed_top(this,10));
		left:expression(fixed_right(this,10));
	 }
	 -->
</style>
<![endif]-->

Les propriétés:

position: absolute; : OBLIGATOIRE, celà permet de pouvoir utiliser notre hack javascript ci après.
top:expression(fixed_top(this,10)); : On utilse l'expression fixed_top(this,10), qui signifie que l'on va accrocher l'element en haut de la fenètre, et 10 c'est le deport de 10px.
left:expression(fixed_right(this,10)); : Mème principe, sauf qu'etant donné que l'on veux fixer la boite sur la droite, on utilise fixed_right(this,10) au lieu de fixed_left(this,10).

Navigation

Retour sur le blog