ENIGME CSS2

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : ENIGME CSS2

climzerland

bonjour, petit prob

alors, j'ai ca...(le tout en xhtml stict 1.0)

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">
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML strict 1.0 positionnement</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="global">
<div id="header">HEADER</div>
<div id="menu">MENU</div>
<div id="corps">CORPS</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>

Global : en bleu
Header : en rouge
Menu : en jaune
Corps : en orange
footer : en vert

CODE CSS:

html, body {
height: 100%;
margin: 0;
}

#global {
width: 750px;
margin: auto;
height:100%;
background-color:#3399FF;
}
#header {
width: 750px;
height: 150px;
background-color:#CC0000;
}

#menu {
height:80px;
width: 750px;
background-color: #ffff00;
}
#corps {
width: 750px;
background-color:#FF6633;
}
#footer {
width: 750px;
height: 30px;
background-color:#339933;
}

Je souhaite que mon CORPS (orange) s'étire pour remplir ma page meme si son contenu(text) ne prend pas toute la hauteur de celui ci...

le tout fonctionnant sous ie et firefox...

Publicité

olivthill

Voici une solution qui marche sous IE (je n'ai pas Firefox sous la main maintenant) :

<!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">
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML strict 1.0 positionnement</title>
<style type="text/css" />
html, body {
height: 100%;
margin: 0;
}

#global {
width: 750px;
margin: auto;
height:100%;
background-color:#3399FF;
}
#header {
width: 750px;
height: 150px;
background-color:#CC0000;
}

#menu {
height:80px;
width: 750px;
background-color: #ffff00;
}
#corps {
width: 750px;
height: 300px;
background-color:#FF6633;
}
#footer {
width: 750px;
height: 30px;
background-color:#339933;
}
</style>
</head>
<body>
<div align="center">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" height=100%>
<tr>
<td id="header">HEADER</td>
</tr>
<tr>
<td id="menu">MENU</td>
</tr>
<tr>
<td id="corps">CORPS</td>
</tr>
<tr>
<td id="footer">FOOTER</td>
</tr>
</table>
</center>
</body>
</html>

L'idié est d'uiliser une table dont la hauteur est 100% et de ne pas indiquer de hauteur pour la ligne du corps.

john8585

Citation :

Voici une solution qui marche sous IE (je n'ai pas Firefox sous la main maintenant) :

Non non et encore non !

Le html décrit la structure du document, les CSS sa forme.

Pour répondre a climzerland même s'il a surement trouvé la solution entre temps, ce code semble faire ce que tu souhaites.

Code :

html, body {
height: 100%;
margin: 0;
}
#global {
width: 750px;
margin: auto;
height:100%;
background-color:#3399FF;
}
#header {
width: 750px;
height: 150px;
background-color:#CC0000;
}
#menu {
height:80px;
width: 750px;
background-color: #ffff00;
}
#corps {
height:100%;
width: 750px;
background-color:#FF6633;
}
#footer {
width: 750px;
height: 30px;
background-color:#339933;
}

Message édité par john8585 le 12-02-2007 à 00:01:54

olivthill

Hélas, ça ne marche pas. Donc ce n'est pas la peine de critiquer les solutions qui marchent en disant "non". :sarcastic:
Mais c'était un bel essai, et s'il existe une solution sans utiliser de table, j'aimerais bien la connaître.

Message cité 1 fois

john8585

olivthill a écrit :

A moins d'avoir mal compris le souhait de la personne, ma proposition fonctionne parfaitement sous IE 6.0 (pas de 7 sous la main) et sous FF.

olivthill

J'ai aussi IE6.
J'ai fait un copié collé de la solution sans les tables, et je vois que la bande verte du "footer" est en dessous de la zone visible, qu'il faut scroller pour le voir. La zone orange a une hauteur qui est égale à toute la hauteur visible.
Le code que j'ai testé avec IE 6.0.2800.1106, SP1, est :

<!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">
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XHTML strict 1.0 positionnement</title>
<style type="text/css" />
html, body {
height: 100%;
margin: 0;
}

#global {
width: 750px;
margin: auto;
height:100%;
background-color:#3399FF;
}
#header {
width: 750px;
height: 150px;
background-color:#CC0000;
}

#menu {
height:80px;
width: 750px;
background-color: #ffff00;
}
#corps {
width: 750px;
height: 100%;
background-color:#FF6633;
}
#footer {
width: 750px;
height: 30px;
background-color:#339933;
}
</style>
</head>
<body>
<div id="global">
<div id="header">HEADER</div>
<div id="menu">MENU</div>
<div id="corps">CORPS</div>
<div id="footer">FOOTER</div>
</div>
</body>
</html>

Il y a le même problème avec mon Firefox dont la version est 1.0.7.

FORUM HardWare.fr

Programmation

HTML/CSS

ENIGME CSS2

Sujets relatifs
[CSS2] pourquoi ce n'est pas centré ??	différences css1 et css2 et compatiblilté avec les navigateurs ?
Système d'enigme !	ENIGME
Niveau php +++ -> enigme !!	Tri tableau ASP : énigme...
CSS2 Compatible a partir de quelle version de IE et de firefox?	enigme pour moi avec un controle
Énigme avec SQL !!	[CSS2] Erreur d'affichage (corrigé)
Plus de sujets relatifs à : ENIGME CSS2

Page générée en 0.086 secondes