28173 sujets

CSS et mise en forme, CSS3

[Résolu]

Bonjour !!!
Je souhaite créer une div qui en masque une autre. Voilà mon code :

<html>
<style>
#contenu{
	width:680px;
	height:560px;
	margin-top:0px;
	margin-left:0px;
	overflow:auto;
	float:left;
	position:relative;
	background-color:yellow;
}
#masquage
{
	height:100%;
	width:95%;
	height:100%;
	position:absolute;
	float:left;
	z-index:2;
	background-color:red;
}
</style>
</head>
<body>
<div id="contenu">
<div id="masquage"></div>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
</div>
</body>
</html>

Le problème est que la div "masquage" ne masque pas toute la hauteur. Comment faire ???
Merci de votre aide.
A bientôt.
Modifié par pcmanprogrammeur (03 Jul 2007 - 14:09)
Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Si j'en ai un :
<!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">
Hello,

Comme ça, ça marche :
<!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>
	<title>Test</title>
	<style type="text/css">
	#contenu {
		position: relative;
		width: 680px;
		height: 560px;
		background-color: yellow;
	}
	#contenu-bis {
		height: 100%;
		overflow: auto;
	}
	#masquage {
		position: absolute;
		z-index: 2;
		height: 100%;
		width: 95%;
		background-color: red;
	}
	</style>
</head>

<body>
	<div id="contenu">
		<div id="masquage"></div>
		<div id="contenu-bis">
		test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
		</div>
	</div>
</body>
</html>

Mais c'est pas terrible ergonomiquement, tout de même. Les barres de défilement internes (via hauteur fixe et overflow: auto), ça serait plutôt à éviter autant que possible.

À noter qu'on aurait pu se passer de height: 100% pour div#masquage, et utiliser position: absolute; top: 0; bottom: 0;... si c'était compris par IE. Smiley cligne
Sujet clos
Aller à