> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Site Web

> HTML / CSS

> Faire un site compatible IE et FF

> CSS partie 2

> Lecture du tutoriel

CSS partie 2

Par

Sébastien de la Marck (Thunderseb)

Mise à jour : 12/05/2009

1 531 visites depuis 7 jours, dont 89 sur ce chapitre classé 85/786

Retour en haut

Sommaire du chapitre :

Background Bottom
Centrer le design
Fixons... la position !

Retour en haut

Background Bottom

J'ai trouvé, par hasard, il n´y a pas si longtemps un comportement étrange. Il concerne l´image d´arrière-plan que l'on place dans le bas de la page, via les CSS. D´après ce que je conclus, FF, Opera et les autres n´ont pas la même définition de la hauteur de body que IE.

Ce n´est pas facile à expliquer, alors, hop, un exemple :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Background Bottom Test 1</title>
<style type="text/css">
body {
        background: url(http://nayi.free.fr/design/v3/bas.jpg) no-repeat bottom left;
        margin: 0px;
}
</style>
</head>
<body>
</body>
</html>

Test du code

Testez ce code avec Firefox et IE

Je suppose que vous aurez constaté que IE s´en sort très bien, et que FF n´affiche strictement rien o_O

Je pense que l´explication est que Firefox n´applique pas par défaut une hauteur de page totale (de 100%). Faisons un autre test :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Background Bottom Test 2</title>
<style type="text/css">
body {
        background: url(http://nayi.free.fr/design/v3/bas.jpg) no-repeat bottom left;
        margin: 0px;
}
</style>
</head>
<body>
<p>La vie est un long fleuve de merde que l&rsquo;on traverse &agrave;  bouche ouverte !</p>
</body>
</html>

Test du code

Ben voilà, ça confirme

Firefox dit que la hauteur du body est égale à la hauteur du contenu. Chiant hein ? :lol:

(non, moi j'aime bien, ça me permet de faire des tutos

)

Une solution pourrait être de dire au navigateur que la page fait 100% de haut. Comme ceci :

Code : HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Background Bottom Test 3</title>
<style type="text/css">
html { height: 100%; }
body {
        background: url(http://nayi.free.fr/design/v3/bas.jpg) no-repeat bottom left;
        margin: 0px;
}
</style>
</head>
<body>
<p>La vie est un long fleuve de merde que l&rsquo;on traverse &agrave;  bouche ouverte !</p>
</body>
</html>

Test du code

OK. C´est bon. Mais ça ne va pas durer.

Que se passe t-il si le contenu est plus long que la hauteur de l´écran ?

Ben voilà, regardez ici. C´est le même code que ci-dessus, mais avec un beau lorem ipsum : http://nayi.free.fr/dev/xhtml-css/BackgroundBottom_4.html

Essayez de scroller la page. C´est embêtant. L´arrière-plan se situe bien dans le bas de la fenêtre navigateur, mais pas dans le bas de la page

Du coté d´IE, ça va toujours !

Le truc, c´est de mettre le contenu dans un div. C´est à ce div que nous allons appliquer l´image d´arrière-plan. Pour que l´image reste dans le bas, je vais appliquer un min-height egal à 100% :

Code : CSS

body { 
        margin: 0px; 
}
#all { 
        background: url(http://nayi.free.fr/design/v3/bas.jpg) no-repeat bottom left;
        min-height: 100%;
}

Test du code

Bien évidemment, rien ne va plus sous IE, car IE6 ne reconnait pas la propriété min-height.

Bon, je vais vous épargner les autres étapes, et vous donner le code final :

Code : CSS

body { 
        margin: 0px; 
        background: none !important;
        background: url(http://nayi.free.fr/design/v3/bas.jpg) no-repeat bottom left;
}
#all { 
        position: absolute; 
        background: url(http://nayi.free.fr/design/v3/bas.jpg) no-repeat bottom left !important;
        background: none;
        min-height: 100%;
}

Test du code

On définit l´arrière-plan pour IE dans le body. Dans #all, on le fait pour Firefox. J´utilise des !important pour assigner les bonnes propriétés aux bons navigateurs

Retour en haut

Centrer le design

IL n'est pas toujours facile de centrer son design suivant les navigateurs. Je vais vous expliquer ici comment le faire pour ne plus avoir de problèmes.

En réalité, centrer son design horizontalement est très simple. Il vous suffit, dans un premier temps, de mettre le contenu de votre page dans une balise div. Pour la commodité, je vais appeler la mienne #all :

Code : HTML

1
2
3

<div id="all">
  <!-- Contenu de votre page ici -->
</div>

Ensuite, il ne nous reste plus qu'à définir les marges de gauche et de droite. Nous allons leur attribuer la valeur auto (pour quelles soient équilibrées automatiquement). Il faut impérativement donner une largeur à #all. Si vous ne lui en donnez pas, il prendra toute la place (normal, c'est un élément de type bloc

) :

Code : CSS

#all {
        margin-left: auto; 
        margin-right: auto;
        width: 400px;
}

Mais il y a un petit problème ! IE 5 ne comprend pas ce code !

Mais ce n'est pas bien grave. Nous allons centrer #all en mettant text-align : center pour le body :

Code : CSS

1	body { text-align: center ; }

Eh, maintenant, le contenu de #all est centré aussi. Comment règler ça ?

Réfléchissez un peu

Il suffit d'attribuer un alignement à gauche pour le contenu de #all, comme ceci :

Code : CSS

#all {
        margin-left: auto; 
        margin-right: auto;
        width: 400px;
        text-align: left;
}

Test du code

Petite astuce en bonus

Si dans votre mise en page, vous utilisez des éléments positionnés (absolute et relative), les codes précédents ne marchent pas. Pour les faire fonctionner, il vous suffit d'attribuer une position relative à votre bloc conteneur #all

Code : CSS

#all {
        margin-left: auto; 
        margin-right: auto;
        width: 400px;
        text-align: left;
        position: relative;
}

Retour en haut

Fixons... la position !

IE6 ne gère pas la propriété CSS position si elle se voit attribuer la valeur fixed. C'est un fait, vous le saviez (enfin, je suppose

).

J'ai un peu cherché un moyen de contrer ce problème, mais je n'ai rien trouvé de bien
convaincant. J'ai trouvé beaucoup de solutions (souvent les mêmes en fait

) qui utilisaient des systèmes avec des div et des overflow, bref, des trucs pas très amusants à utiliser. Sans même le faire exprès, alors que je perdais espoir, j'ai finalement trouvé un petit truc bien pratique...

Considérons que notre élément fixe s'appelle #div. Voici le code miracle, à placer dans le HEAD de votre page :

Code : Autre - Exemple

<!--[if lte IE 6]>
<style type="text/css">
#div {
        position: absolute;
        top: expression(documentElement.scrollTop+body.scrollTop+60);
        left: expression(documentElement.scrollLeft+body.scrollLeft+60);
}
body {
        background: url(null) fixed;
}
</style>
<![endif]-->

Test du code

C'est une jolie expression conditionnelle

. #div est en position absolute, mais ses valeurs pour top et left sont propres à Internet Explorer.

expression(documentElement.scrollTop+body.scrollTop+60) est ce que l'on peut appeler, selon MSDN, une expression dynamique. En d'autres termes, c'est une valeur qui change constamment. Le code contenu entre les parenthèses est un Javascript. Dans ce cas-ci, scrollTop permet de connaître la distance entre le haut de la fenêtre navigateur et le haut du bloc (#div) en question. Comme nous voulons que l'élément soit fixé, il faut faire en sorte que la distance entre le haut du bloc et le haut de la fenêtre navigateur soit toujours la même. C'est ce que fait ce bout de code : il calcule en permanence la distance de façon à la garder constante, et donc, le bloc semble fixe. Par défaut, la distance est maintenue à 0. Pour décaler de 60 pixels nous ajoutons +30 derrière la deuxième fonction scrollTop.

Donc, si pour FF vous mettez top: 50px;, mettez top: expression(documentElement.scrollTop+body.scrollTop+50); pour IE

Et à quoi sert le url(null) fixed ?

Vous devez spécifier un arrière-plan image pour votre page (ici, comme je n'ai pas d'arrière-plan, je mets null) pour éviter un horrible effet de sautillement quand vous faites défiler la page.

Quelques liens utiles

Retour en haut

Retour en haut

5 commentaires pour "CSS partie 2"

Note moyenne : 3.58 / 4 (26 votes)

Pseudo

Commentaire

k3bab

# Posté le 31/03/2007 à 21:43:42

Que du bonheur ! Vraiment sympa les icônes.
Bon courage et merci !
C'est vraiment très utile, moi même j'ai déjà poster pour des problemes de mise en page IE / MF eu FF

pour Ubuntu !

2ni

# Posté le 21/08/2007 à 22:00:23

Saloutess

Études : IUT Limoges

merci merci merci merci merci !!! 1000 merci
Le truc pour centrer sous firefox me sauve la vie !!!
Des jours et des jours que je cherchais !!!!

Maintenant mon site multi-design va être parfait !
http://gratuit-du-web.teria.fr

MERCIIIIIIIIIIIII

cot

# Posté le 14/09/2007 à 10:59:19

Sea, Sex and Fun
Avatar

Études : SUPINFO Aquitaine à Bordeaux

Pour moi ca sera 20/20 !
C'est un tuto qui devrait etre obligatoire avant de commencer un site web. La compatibilité est quelque chose de primordiale.
Je voudrai tout de meme précisé mon désarrois face à IE

Pourquoi ne pas suivre les standards ? Pourquoi ne pas faire comme tout le monde ?!!! :colere:

Microsoft se veut de simplifier la tache de tous les développeurs, quand est-il du web ..!

" Les Voies du Seigneur sont impénétrables, mais son Cul ? "

Nab

# Posté le 06/06/2008 à 00:24:26

KISS

Blog
Twitter

Salut,

Je ne comprends pas ton utilisation du min-height : pourquoi ne pas l'appliquer au html comme tu l'a fait pour le height au départ ?
IE ne comprendrai pas le propriété, pas de problème vue que son comportement par défaut est adapté ; et Firefox, connaissant min-height va le respecter et faire la même chose que ton div, sans le hack pour IE.

Code : CSS

html { min-height: 100%; }
body {
        background: url(http://nayi.free.fr/design/v3/bas.jpg) no-repeat bottom left;
        margin: 0px;
}

J'ai quand-même vérifié, mais sous Firefox ça passe, et bien que n'ayant pas testé sous IE, je ne vois pas pourquoi cela poserai problème ?

Cordialement

Père Sonne

# Posté le 03/11/2009 à 00:00:35

Avis : Très bon

Études : IUT Paris

Problème dans la partie sur le background bottom. Ou alors je comprends pas. Sur http://nayi.free.fr/dev/xhtml-css/BackgroundBottom_6.html, on voit que tout fonctionne. Cependant, le texte ne va pas jusqu'en bas. J'ai moi même testé le code sur mon site, mais ce n'a pas l'air de marcher avec plus de texte que 100%… Pourquoi ?

Pour les plus doués, le V-cube plutôt que le Rubik's cube.
Pour se détendre et/ou pour rire, écoutez Reflets d'Acide.

Mes avatars :

Voir tous les commentaires

Les cours phares

Tous les cours par catégories

Autres

Programmation (263 Cours)

Graphisme (29 Cours)

Bureautique (27 Cours)

Jeux Vidéo (18 Cours)

Matériel (7 Cours)

Dernières annonces

Recrutement à Bac / Bac +1

Recrutement à Bac +2

Recrutement à Bac +3 / Bac +4

Recrutement à Bac +5

Dynamisez vos sites web avec JavaScript

Créez des applications pour iPhone, iPad et iPod Touch

Cours

Nouveau ?

Nouveautés

Site Web

Programmation

Bases de données

Mobiles

Systèmes d'exploitation

Graphisme

Infographie 3D

Bureautique

Réseaux

Matériel

Mapping

CSS partie 2

Petite astuce en bonus

Quelques liens utiles

Partager