ENIGME CSS2

Marsh Posté le 06-02-2007 à 02:26:15

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

Reply

Marsh Posté le 06-02-2007 à 02:26:15

Reply

Marsh Posté le 06-02-2007 à 14:13:09

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.

Reply

Marsh Posté le 12-02-2007 à 00:01:02

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

Reply

Marsh Posté le 12-02-2007 à 07:31:51

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

Reply

Marsh Posté le 12-02-2007 à 10:24:30

olivthill a écrit :

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.

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.

Reply

Marsh Posté le 12-02-2007 à 21:28:23

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.

Reply

ENIGME CSS2

Sujets relatifs:

Leave a Replay