Methode height=100%, pas encore parfaite

Question

K007

15 Oct 2006 à 18:39

Bonjour à tous,
je me permet de poser une question sur l'utilisation de la techniques sur les height=100% (cet article)

En effet, le bloc reprend bien le 100% appliqué aux blocs parents html et body, mais dans mon cas, il y a un header au dessus de ces blocs, et les blocs soumis au 100% ont a eux tous seuls une hauteur d'écran.

Enfin bon, un exemple vaut mieux que des xplications imprécises, voilà : http://yaelmgob.free.fr/opv3/index2.php

et le code pour mieux comprendre

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">
	<head>
	<title>Yakitate France v2 :: Votre source n°1 sur Yakitate!! Ja-pan</title>
	<meta name="description" content="Yakitate France - Votre source n°1 sur le manga Yakitate!! Ja-pan">
	<meta name="keywords" content="mangas, manga, yakitate, japan, ja-pan, yakitate ja-pan, yakitate fr, yakitate-fr, yakitate france, scans, shogakukan, akata, delcourt, akata-delcourt, takashi, hashiguchi, achat manga, japon, anime">
	<meta name="subject" content="Yakitate!! Ja-pan :: site non-officiel - actu, infos, etc.">
	<meta name="author" content="Yakitate-fr, Lone², Kakashi007">
	<meta name="identifier-url" content="http://www.yakitate-fr.com">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="content-style-type" content="text/css" />
	<meta http-equiv="Content-Language" content="fr">
	<link title="style" rel="stylesheet" href="style.css" type="text/css" />
	</head>
<body>
<div class="bg">

<div class="header"></div>
<div class="menu">
<div class="lien"><a href="">&nbsp;<img src="design/puce.gif" style="border:0px;" alt="puce" />&nbsp;&nbsp;Super lien</a></div>
<div class="lien"><a href="">&nbsp;<img src="design/puce.gif" style="border:0px;" alt="puce" />&nbsp;&nbsp;Super lien</a></div>
<div class="lien"><a href="">&nbsp;<img src="design/puce.gif" style="border:0px;" alt="puce" />&nbsp;&nbsp;Super lien</a></div>
<div class="lien"><a href="">&nbsp;<img src="design/puce.gif" style="border:0px;" alt="puce" />&nbsp;&nbsp;Super lien</a></div>
<div class="lien"><a href="">&nbsp;<img src="design/puce.gif" style="border:0px;" alt="puce" />&nbsp;&nbsp;Super lien</a></div>
</div>
<div class="content">
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a 
</div>

</div>
</body>
</html>

et CSS

html, body
{
	width: 843px;
	margin: auto;
	background-color:#B20505;
	border:none;
	font-size : 11px;
	font-family : verdana, arial, sans-serif;
	color : #0D5EAD;
	height: 100%;
}

a:link
{
	font-size : 11px;
	font-family : verdana, arial, sans-serif;
	color : #91B4DC;
	text-decoration: none;
}

a:visited
{
	font-size : 11px;
	font-family : verdana, arial, sans-serif;
	color : #91B4DC;
	text-decoration: none;
}

a:hover
{
	font-size : 11px;
	font-family : verdana, arial, sans-serif;
	color : #FC7203;
	text-decoration: none;
}

a:active
{
	font-size: 11px;
	font-family: verdana, arial, sans-serif;
	color: #FC7203;
	text-decoration: none;
}

.header
{
	width: 843px;
	height: 309px;
	background-image: url(img/ban1.jpg);
}

.left
{
	background-image: url(img/left.gif);
	width: 74px;
	height: 100%;
	float: left;
}

.menu
{
	width: 181px;
	height: 100%;
	background-image: url(img/menu.gif);
	float : left;
	font-family: verdana, arial, sans-serif;
	color: #000000;
}

.content
{
	width: 515px;
	height: 100%;
	float: left;
	background-color: white;
	margin: auto;
}

.right
{
	background-image: url(img/right.gif);
	width: 73px;
	height: 100%;
	float:left;
}

.lien
{
	background-image: url(design/lien.gif);
	vertical-align: middle;
	color: #000000;
	width: 175px;
	height: 18px;
	margin: 0px;
	padding: 0px;
	font-family: verdana, arial, sans-serif;
	display: block;
	margin-bottom: 3px;
}

.lien a:link
{
	color: #000000;
	text-decoration: none;
}

.lien a:visited
{
	color: #000000;
	text-decoration: none;
}

.lien a:hover
{
	color: #7B0D0D;
	text-decoration: none;
}



.lien a:active
{
	color: #7B0D0D;
	text-decoration: none;
}

en esperant que quelqu'un trouve une solution Smiley biggrin

Modifié par K007 (15 Oct 2006 - 18:40)

Vikchill

16 Oct 2006 à 10:05

As-tu regardé dans la FAQ? Si non, tu devrais Smiley cligne

K007

16 Oct 2006 à 15:38

et bien oui j'y ai cherché avant de poster, mais je n'y ai pas trouvé de solution pour mon probleme, vu que j'utilise justement la technique de la faq. Ou alors il y a quelque chose que je n'y ait pas compris Smiley sweatdrop

Sujet clos

CSS et mise en forme, CSS3

Methode height=100%, pas encore parfaite