Titre: CSS2 et longueur relative de la page
Posté par: Chanchan le le 02-09-2003 a 19:39:09
Bonjour à tous ! :)
Etant toute nouvelle sur le forum, j'en profite donc pour dire bonjour à tout le monde.
Ensuite, j'aurais une toute petite question.
Je suis entrain d'élaborer un site en XHTML et CSS2 (grâce aux tutoriaux du site Open Web et Alsacréation).
J'aimerais créer un div de centrage et lui affecter une image d'arrière-plan qui se répèterait sur la longueur. Ce div devrait avoir une largeur de 770 pixel et une hauteur relative de 100 %.
Voici le code de ce div dans mon fichier CSS :
Code:
.centrer {
position: relative;
width: 770px;
height: 100%;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
background-image: url(img/fond_page.gif);
}
|
|
Et en voici sa déclaration dans le fichier HTML :
Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
<body>
<div class="centrer"></div>
</body>
</html>
|
|
Là où m'on problème intervient est dans l'interprétation du code par les navigateurs.
IE6 et Netscape 7 affiche l'image d'arrière plan sur toute la longueur de la page. Mozilla 1.3.1 l'ignore totalement :(
Pour que Mozilla affiche cette image d'arrière-plan, je suis obligée de définir une hauteur absolue en pixel.
Savez-vous donc si il existe un moyen pour faire afficher à Mozilla cette image d'arrière plan mais en hauteur relative ?
J'espère avoir été assez claire dans ma question.
D'avance je vous remercie pour toute aide apportée.
A bientôt !
:) |
Titre: Re:CSS2 et longueur relative de la page
Posté par: dominique_c le le 03-09-2003 a 09:40:22
Je pense que l'expert d'Alsacréations qui sévit ici ne tardera pas à répondre lui même à ta question. ;)
En attendant, je te propose modestement ce début de réponse
Pour ce que j'ai compris, ton calque "centrer" devra s'afficher en hauteur en fonction de son contenu. c'est bien ce que tu souhaites ?
Donc je pense que la hauteur à 100% ne sert à rien. Ensuite, quand il contient des données, il doit s'afficher normalement dans tous les navigateurs.
As tu essayé avec des données entre les balises div ? |
Titre: Re:CSS2 et longueur relative de la page
Posté par: Chanchan le le 03-09-2003 a 10:39:47
Bonjour Dominique_c,
Merci pour ton début de réponse.
Ce calque de centrage servira à centrer le design du site par rapport au navigateur. Ce calque contiendra d'autres calques tels que le header, la navigation et le texte.
Accessoirement, j'ai trouvé une autre solution en créant un arrière plan que j'ai intégré directement à body. Et ça marche dans tous les navigateurs ! (IE, Netscape et Mozilla)...
Je vais mettre le lien du gabarit que j'ai confectionné dans le forum "AVIS".
Du coup, ça serait sympa de me donner votre avis sur ce que j'ai déjà fait ;) :D |
Titre: Re:CSS2 et longueur relative de la page
Posté par: SIBELIUS le le 03-09-2003 a 10:46:44
En effet, en donnant du contenu à ton div, le fond apparaîtra, mais la hauteur de 100% ne fonctionne pas en posiition relative.
Mets ton div en position absolue ;) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|