28172 sujets

CSS et mise en forme, CSS3

[Résolu] Probleme affichage CSS et firefox

bonjour,
voici mon problème : je souhaite afficher le squelette de mon site sous Firefox en utilisant dans mon fichier CSS les pourcentages plutôt que les pixels pour une question de résolution.
L'affichage se passe bien sous IE 6 mais il ne se passe strictement rien sous Firefox alors qu'on rencontre e général le souci inverse.
Quelqu'un aurait-il une explication ?

Mon fichier CSS (styles.css):

body {
	position:relative;
	margin: 0 auto ;
	width:100%;
	height:100%;
}

div#entete
{
	position:absolute;
	top:0;
	height:10%;
	width:100%;
	background-color:green;

}

div#centre
{
	position:absolute;
	top:10%;
	right:0;
	width:80%;
	height:80%;
	background-color:Silver;
}


div#gauche
{
	position:absolute;
	top:10%;
	left:0;
	width:20%;
	height:80%;
	background-color:Black;
	
}

div#bas
{
	position:absolute;
	top:90%;
	height:10%;
	width:100%;
	background-color: red;
}


Mon fichier 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" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Nantes Web Mastering </title>
    <link href="styles.css" rel="Stylesheet" type = "text/css" /> 
</head>
<body>
    <div id="entete">
        entete   
    </div>
    <div id="gauche">
    gauche
    </div>
    <div id="centre">
    contenu
    </div>
    <div id="bas">
    pied de page
    </div>
</body>
</html>


En vous remerciant
Modifié par sadhaka (12 Feb 2008 - 15:57)
Bonjour,

Qu'est-ce à dire, «il ne se passe rien»? Tu as une page blanche, du vide intersidéral et on voit les étoiles briller et des nébuleuses, ou bien tu vois ton contenu affiché sans styles CSS, ou autre chose encore?

Si c'est un problème de CSS non appliqués, je chercherais du côté de:
<link href="styles.css" rel="Stylesheet" [#red]type = "text/css"[/#] />
Gare aux espaces en trop.
bonjour

pour y arriver, j'ai dû ajouter-corriger comme ceci :


html, body{height:100%;}
body {	
	margin: 0;
}
div#page{position:relative;min-height:100%;}


la div#page englobant les 4 éléments
En effet ça marche bien mais je n'ai pas compris pourquoi.
Que vient faire l'identifiant "html" dans la feuille de style ?
Merci Smiley biggrin
sadhaka a écrit :
Que vient faire l'identifiant "html" dans la feuille de style ?

Il n'y a pas d'identifiant "html" dans ces styles. Il y a un sélecteur CSS qui permet d'attribuer des styles (ici un height: 100% à l'élément HTML.

Pour rappel, l'élément racine d'un document HTML ou XHTML est nommé "html". Et on peut tout à fait lui attribuer des styles CSS.
Sujet clos
Aller à