CSS2 et longueur relative de la page - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  CSS2 et longueur relative de la page

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: CSS2 et longueur relative de la page (Lu 628 fois)

CSS2 et longueur relative de la page
« sur: le 02-09-2003 a 19:39:09 »

Chanchan
Invité

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">

</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 !

Rapporter au modérateur

Re:CSS2 et longueur relative de la page
« Répondre #1 sur: le 03-09-2003 a 09:40:22 »

dominique_c
P'tit nouveau

Hors-Ligne

Sexe: Male

Messages: 170

Restons .... cool !!!

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 ?

Rapporter au modérateur

De Anthelme Brillat-Savarin,
Heureux chocolat, qui après avoir couru le monde, à travers le sourire des femmes, trouve la mort dans un baiser savoureux et fondant de leur bouche.

Re:CSS2 et longueur relative de la page
« Répondre #2 sur: le 03-09-2003 a 10:39:47 »

Chanchan
Invité

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

Rapporter au modérateur

Re:CSS2 et longueur relative de la page
« Répondre #3 sur: le 03-09-2003 a 10:46:44 »

SIBELIUS
Superactif

Hors-Ligne

Sexe: Male

Messages: 789

Un Boulay sinon rien

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

Rapporter au modérateur

Le livre d'Alsacréations sur XHTML et les CSS :
"CSS2 Pratique du design web"