28219 sujets

CSS et mise en forme, CSS3

[Résolu] Comment faire descendre le fond jusqu'en bas du document ?

Bonjour,
J'ai fait une recherche mais les résultats obtenus ne correspondaient pas à ce que je voulais.
Ma question est donc celle-ci : sur ce design, comment faire en sorte que la partie centrale descende jusqu'au bout du document ? J'ai pensé à la balise body, mais elle est déjà occupée par le fond en hachures..

Voici mon html, ainsi que mon CSS :

<body>

<div id="conteneur">
<div id="header"></div>

	<div id="menu">
	<ul>
	  <li><a href="#">Accueil</a></li>
	  <li><a href="#">Notre entreprise</a></li>
	  <li><a href="#">Nos services</a></li>
	  <li><a href="#">Devis gratuit</a></li>
	  <li><a href="#">Contact</a></li>
   </ul>
	</div>

	<div id="corps">
	<h1>Accueil</h1>
	<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus
vehicula. Etiam tempor est quis wisi imperdiet rutrum. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Nulla adipiscing pede pharetra leo. Duis sollicitudin,
mauris vel aliquet congue, leo turpis luctus mauris, quis blandit leo
sem a dolor. Aliquam consequat. Nunc lorem quam, vestibulum a, bibendum
eu, convallis at, dui. Vestibulum imperdiet est nec nibh. Nam imperdiet
condimentum ante. Aliquam purus mauris, nonummy id, fringilla eget,
convallis vitae, massa.
	</p>
	</div>
	
</div>
</body>



body
{
	background: url(images/background.jpg) repeat;
	margin:auto;
	border: none;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
* html body /* Pour aligner les rainures sur IE */
{
		margin-left: -3px;
}
#header
{
	width: 448px;
	height: 80px;
	background: url(images/header.jpg) no-repeat;
	margin: auto;
}

#conteneur
{
	width: 448px;
	height: 200%;
	background: url(images/corps.jpg) repeat-y;
	margin: auto;
}

#menu
{
	width: 440px;
	height: 20px;
	background: #009835;
	margin: auto;
	margin-bottom: 20px;
	padding: 0;
}

#menu ul /* toutes les listes du menu */
{
	margin: 0;
	padding: 0;
	white-space : nowrap; /* il dit : "to prevent the items of the list from wrapping around when the screen is to small".. 
je sais pas, je fais ce qu'il dit! */
}

#menu ul li /* chaque élément des listes du menu */
{
	display: inline;
   padding-left : 0.3em;
   padding-right : 0.3em;
	font-size: small;
}

#menu ul li a /* tous les liens dans les listes */
{
	color: white;	
	text-decoration: none;
}

#menu ul li a:hover /* tous les liens survolés dans les listes */
{
	text-decoration: underline;
}

#corps
{
	width: 448px;
	padding: 10px;
	width: 428px;
}

h1:first-letter
{
	color: #009835;
}

p
{
	text-align: justify;
}

p:first-letter
{
font-size: 3em;
font-weight: bold;
color: #009835;
display: block;
float: left;
}


Merci d'avance, et désolé si ce sujet a déjà été traité.. Smiley confused
Modifié par kev1 (19 Aug 2005 - 15:39)
Ouuups! Désolé, je suis allé faire un tour sur la page des FAQ et c'est bon, j'ai trouvé :
height:100% au html, body et à mon conteneur ... Smiley lol
désolé désolé désolé.....
Sujet clos
Aller à