28221 sujets

CSS et mise en forme, CSS3

Prolongement d'un menu jusqu'au footer

Bonjour,
Apres plusieurs recherches sur ce forum sans résultat, je vous expose mon problème :
j'ai une page avec un header, un menu, un cadre texte et un footer (le tout dans un cadre conteneur) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>page 1</title>
</head>

<body>
<div id="main">

<div id="header"></div>
<div id="title">TITRE</div>

<div id="menu">
<h1>Rubrique</h1>
<a href="#">Llliiieeennn</a><br />
<a href="#">Llliiieeennn</a><br />
<a href="#">Llliiieeennn</a><br />
<a href="#">Llliiieeennn</a><br />
<a href="#">Llliiieeennn</a><br />
<a href="#">Llliiieeennn</a><br />
<h1>Rubrique</h1>
<a href="#">Llliiieeennn</a><br />
<a href="#">Llliiieeennn</a><br />
<a href="#">Llliiieeennn</a><br />
<a href="#">Llliiieeennn</a><br />
<a href="#">Llliiieeennn</a><br />
<a href="#">Llliiieeennn</a><br />
</div>

<div id="text">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla blou.
</div>

<div id="footer"></div>

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

Voici le fichier css :

body
{
	cursor: default;
	background-color: #eeeeee;
	margin: 0;
	padding: 0;
}
a
{
	color: #555555;
}
a:hover
{
	color: #ff0000;
}
div#main
{
	position: absolute;
	width: 700px;
	left: 50%;
	margin-left: -350px;
}
div#header
{
	height: 40px;
	background: no-repeat url(header.gif);
}
div#title
{
	width: 698px;
	height: 40px;
	border-left: solid 1px #aaaaaa;
	border-right: solid 1px #aaaaaa;
	background-color: #ffffff;
	text-align: center;
	font-weight: bold;
	font-size: 30px;
}
div#menu
{
	position: absolute;
	width: 200px;
	border-left: solid 1px #aaaaaa;
	background: #ffffff;
	left: 0;
}
div#menu h1
{
   height: 20px;
	width: 200px;
	font-size: 16px;
	font-weight: normal;
	background: no-repeat url(titlebg.jpg);
	padding-left: 5px;
	margin-bottom: 5px;
}
div#menu a
{
	text-decoration: none;
	color: #555555;
	margin-left: 15px;
}
div#menu a:hover
{
	color: #000000;
	text-decoration: underline;
}
div#text
{
	margin-left: 200px;
	width: 399px;
	background: #ffffff;
	border-right: solid 1px #aaaaaa;
	padding-left: 50px;
	padding-right: 50px;
}
div#footer
{
	background-image: url(footer.gif);
	width: 700px;
	height: 40px;
}

Le problème est que mon menu ne prolonge pas jusqu'au footer.
Comment faire pour y remédier?
merci d'avance.
Modifié le 23 Jan 2005 - 11:15
the_penguin a écrit :

div#title
{
width: 698px;
height: 40px;
border-left: solid 1px #aaaaaa;
border-right: solid 1px #aaaaaa;
background-color: #ffffff;
text-align: center;
font-weight: bold;
font-size: 30px;
}


Ça tu peux l'ecrire comme ça : 

width: 698px;
	height: 40px;
	border: solid 1px #aaaaaa;
	background-color: #ffffff;
	text-align: center;
	font: bold 30px;

Mais à la place de 30px pour la taille de ton texte, choisi une unité comme l'em.
Sujet clos
Aller à