5568 sujets

Sémantique web et HTML

Problème de background qui ne se répète pas

bonjour,
j'ai un petit problème. Effectivement après avoir essayé de trouver une solution pour faire afficher correctement à IE6 la transparence des png 24bits j'ai finalement trouvé une solution alternative qui fonctionne presque mais pas encore totalement Smiley lol
Le problème c'est que si le contenu affiché 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.
Je pense qu'un lien parlera plus :-° : http://clan.nintendo.free.fr/exemple/site/
Ca marche sous IE6 mais pas sous FF ni IE7

voici le code xhtml :
<!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" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style/style.css" />		
	</head>

	<body>

		<div class="fond">

		<div class="haut">
		ici c'est le contenu
		<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</div>

		</div>
	
	</body>

</html>


et le code css :
body
{
background-image: url(../images/background.png);
background-repeat: repeat-x;
background-color: rgb(10,0,1);
margin: 0px;
padding: 0px;
}

.fond
{

width: 760px;
background-image: url(../images/fond2.png);
background-repeat: repeat-y;
margin:auto;
}

.haut
{
width: 760px;
height: 526px;
background-image: url(../images/fond1.png);
background-repeat: no-repeat;
padding-left: 30px;
padding-right: 30px;
}

Modifié par Florent V. (31 Oct 2007 - 11:29)
Bonjour,

Globalement, tu as besoin d'afficher div.fond au minimum sur toute la hauteur de la zone de visualisation du navigateur. Cela se fait ainsi pour la plupart des navigateurs (il faudra ruser pour IE6):
html, body {
height: 100%;
margin: 0; padding: 0;
}
div.fond {
min-height: 100%;
}

Par ailleurs, tu devrais utiliser min-height: 526px; et pas height: 526px qui fige la hauteur du bloc à la taille demandée (sauf avec IE6, là encore).

Un peu de lecture (zapper la partie sur le pied de page):
http://web.covertprestige.info/test/16-page-sur-toute-la-hauteur-et-pied-de-page-1.html
Sujet clos
Aller à