|
Page 4 sur 5
css positionnement
A ce niveau, on examinera un autre problème que vous pouvez rencontrer lors de l'utilisation de la proprièté "margin". Le constat est fait lorsque vous tentez d'afficher votre page web sous firefox (3.0.8) ou google chrome (1.0.154.53).
Voici un exemple de page simple qui affiche un bloc parent "conteneur" incluant un bloc fils "contenu". L'image suivante montre le résulat escompté:
Pour faire le test, créez une page html avec un éditeur tel que notepad++ . Placez le corps suivant entre les balises <body> et </body>:
<body>
<div id="conteneur">
<div id="contenu">Contenu</div>
</div>
</body>
Pour la définition des styles css, vous pouvez placer le code suivant entre les balises <head> et </head> de votre page html:
<head>
<style type= "text/css">
body {
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size: 20px; /* taille de police */
text-align: center; /* texte centré */
color: blue; /* texte de couleur bleue */
}
A ce niveau, on a défini les paramètres du texte pour toute la page (style de balise body). Les commentaires placés entre /* et */ permettent d'avoir un code plus lisible.
#conteneur {
width:960px;
min-height:300px; /* hauteur minimale */
background-color:#A9A9A9; /* fond coloré */
}
C'est la définition du bloc parent "Conteneur".
#contenu {
margin: 100px auto; /* bloc centré avec une marge en haut et en bas de 100 pixels */
width:300px;
height:100px;
background-color:#98FB98;
}
Le bloc fils "Contenu" est centré dans le bloc parent avec une marge en haut et en bas de 100 pixels.
</style>
</head>
Lorsque vous tentez d'afficher votre page sous internet explorer 7, l'affichage semble être correct. Cependant avec mozilla firefox ou google chrome, la proprièté margin semble être appliquée au bloc "conteneur" plutôt qu'au bloc fils!. L'image suivante:
montre le résultat obtenu et que vous pouvez, vous même, tester ici avec, bien entendu, mozilla firefox ou google chrome (versions précitées).
Pour corriger, vous devez définir une bordure de 1pixel pour le bloc parent "#conteneur". Ajoutez, pour cela, la ligne suivante à votre code css au niveau du style id "#conteneur":
border-top: 1px solid transparent;
La bordure choisie est de couleur transparente.
Affichez maintenant la page ainsi modifiée. L'affichage est maintenant correct avec firefox et google chrome.
|
