28173 sujets

CSS et mise en forme, CSS3

Background et scrollbar horizontale

Bonjour à tous !

Je suis confronté à un petit problème :

Je fais un div avec un background et ma page a une scrollbar horizontale comme sur l'image suivante : upload/11284-Image2.png

Si je scroll vers la droite, le background n'est pas pris en compte sur la partie qui était avant invisible : upload/11284-Image4.png

Existe-t'il un moyen pour contrer ceci ?

Antoine

ps : Ci-joint mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">	
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				width: 100%;
			}
			div{
				margin: 0;
				padding: 0;
				width: 100%;
				background-color: green;
				white-space: nowrap;
			}
		</style>
	</head>
	<body>	
		<div>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et
		</div>
	</body>
</html>


et l'url du fichier : http://www.potatos.fr/test_css/exemple17/exemple17.htm
Modifié par RockMakesMeSweat (12 Nov 2007 - 16:27)
Modérateur
bonjour,

le width:100% n'est pas necessaire.

Pour etendre le div avec son contenu pour Firefox , 2 solutions me viennent a l'esprit:

float:left;
ou 
display:table;


gc

<edit>

il y aussi 
display:inline;


display:table; est une alternative a display:inline-block; .

Dans IE pour passer en inline-block; un element de type block , il faut d'abord le passer en inline , puis lui conferer le layout avec une regle proprietaire microsoft:
zoom:1;
ce qui donnereait pour tes styles dans l'entete de page:

<style type="text/css" media="screen">

			body{
				margin: 0;
				padding: 0;

			}
			div{
				margin: 0;
				padding: 0;

display:table;
				background-color: green;
				white-space: nowrap;
			}
<style>
 <!--[ if IE]>
<style type="text/css" media="screen">
div {
display:inline;
zoom:1;
}
</style>
<![ endif]-->


</>
Modifié par gcyrillus (12 Nov 2007 - 16:50)
Sujet clos
Aller à