28173 sujets

CSS et mise en forme, CSS3

Bonjour,
j'ai comme vous vous en doutez un petit problème.
Le problème est que si le contenu affiché dans mon div dépasse le cadre de la page et que donc le scroll se met en place, si je descend, le background ne descend pas jusqu'en bas.
(Le problème ne se pose que sous firefox et IE7 étant donné qu'IE6 a une feuille dédiée à cause de la transparence des PNG)

Un lien sera je pense plus parlant : http://clan.nintendo.free.fr/alsacreations/lumiere_pulsee.php[/url]

Voici le code de ma page :
<!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></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		
		<!-- Ici un petit hack css pour permettre d'afficher convenablement le design
		Le premier hack cache style.css à IE
		Le deuxième hack montre ie.css à IE (feuille de style spécialement dédiée à IE6)
		Le troisième hack montre style.css à IE7-->
		
		<!--[if  !IE]> <-->
		<link href="style/style.css" rel="stylesheet" type="text/css" />
		<!--> <![endif]-->

		
		<!--[if lte IE 6]>
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style/ie.css" />
		<![endif]-->
		
		<!--[if IE 7]>
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style/style.css" />
		<![endif]-->
		
		<link href="style/menu.css" rel="stylesheet" type="text/css" />
		
		
	</head>

	<body>

		<div class="contenu">
		
			<div class="contenu_centre">
			

<div class="menu">

<table class="menu_tableau">
<tr>

<td class="cellule_menu">
<div class="presentation">
<a href="index.php"><img src="images/menu/transparent.gif"></a>
</div>
</td>

<td class="cellule_menu">
<div class="prestations">
<a href="prestations.php"><img src="images/menu/transparent.gif"></a>
</div>
</td>

<td class="cellule_menu">
<div class="aubade">
<a href="aubade.php"><img src="images/menu/transparent.gif"></a>
</div>
</td>

<td class="cellule_menu">
<div class="lumiere_pulsee">
<a href="lumiere_pulsee.php"><img src="images/menu/transparent.gif"></a>
</div>
</td>

<td class="cellule_menu">
<div class="contact">
<a href="contact.php"><img src="images/menu/transparent.gif"></a>
</div>
</td>

</tr>
</table>
	
</div>

<div class="logo">
		<!--[if  !IE]> <-->
		<img src="images/logo.png" />
		<!--> <![endif]-->
		
		<!--[if lte IE 6]>
		<img src="images/logo_ie.gif" /a>
		<![endif]-->
		
		<!--[if IE 7]>
		<img src="images/logo.png" />
		<![endif]-->

</div><div class="centre">

<center>
		<!--[if  !IE]> <-->
		<img src="images/categories/lumiere_pulsee.png" /><br />
		<!--> <![endif]-->
		
		<!--[if lte IE 6]>
		<img src="images/categories/lumiere_pulsee_ie.gif" /><br />
		<![endif]-->
		
		<!--[if IE 7]>
		<img src="images/categories/lumiere_pulsee.png" />
		<![endif]-->
</center>
	</div>

			
			</div>

			
		</div>
	
	</body>

</html>


Et le code css :
a img
{
border: 0px;
}

html
{
height: 100%;
}

body
{
height: 100%;
background-image: url(../images/background.png);
background-repeat: repeat-x;
background-color: rgb(10,0,1);
margin: 0px;
padding: 0px;
}

a
{
text-decoration: underline;
color: white;
font-size: 10pt;
}

a:hover
{
text-decoration: none;
}

.contenu
{
min-height: 100%;
width: 760px;
height: 100%;
background-image: url(../images/fond_contenu.png);
background-repeat: repeat-y;
margin:auto;
}

.contenu_centre
{
margin-left: 20px;
margin-right: 20px;
}

.centre
{
width: 700px;
margin: auto;
color: white;
font-family: verdana, arial, serif;
font-size: 10pt;
text-align: justify;
}


Merci d'avance Smiley biggrin
Modifié par kelkun789 (15 Dec 2007 - 19:24)
C'est bon ça marche.
Pour ceux que ça interesserait, j'ai du enlever le height:100% sur le div "contenu" car il faisait apparement réference à la hauteur de la fenêtre.