28172 sujets

CSS et mise en forme, CSS3

Div par dessu la page sans scroll

Bonjour,

Je cherche a placé une div par dessu ma page qui scroll a la base, la div en question doit prendre la largeur/hauteur de l'écran sauf qu'il ne faut pas qu'il y est un scroll.

j'ai commencé par ça : 
	width:100%;
	height:100%;
	overflow:hidden;
	position:fixed;
	z-index:999999;


Mais le scroll y est toujours.

Le principe est sur http://www.allocine.fr/ les pub qui s'affiche avant de rentré sur le site.

Voila merci a l'avance Smiley cligne
c'est pas forcément un lightbox, mais juste du contenue qui viens par dessu le site qui prend la plein page mais sans scroll ... vous pouvez voir l'exemple sur le site allocine, le principe est tres répondue dans l'affichage de pub interstitiel Smiley smile
J'ignore si tu fais mention des scrollbar du navigateur ou du div plein écran

Donc je prend une chance avec ces instructions CSS »


html, body {
 width:100%;
 height:100%;
 margin:0;
 padding:0;
}
div#plan {
 width:100%;
 height:100%;
 background:#e1e1e1;
 font-family:sans-serif;
 font-size:100%;
 overflow:auto;
}
.contenu {
 height:auto;
 border:2px dashed #ff0000;
 margin-bottom:3px;
}
h1 {
 font-size:1em;
 margin-left: 12px;
}


Et le HTML pour un test »


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alsa Scroll</title>
<link rel="stylesheet" type="text/css" href="css/alsaScroll.css" />
</head>
<body>
<div id="plan">
 <div class="contenu"><h1>Contenu 1</h1></div>
 <div class="contenu"><h1>Contenu 2</h1></div>
 <div class="contenu"><h1>Contenu 3</h1></div>
 <div class="contenu"><h1>Contenu 4</h1></div>
 <div class="contenu"><h1>Contenu 5</h1></div>
 <div class="contenu"><h1>Contenu 6</h1></div>
</div>
</body>
</html>


Le overflow:auto est placer sur le div#plan.
Il est préférable que tu utilise overflow:auto et de bien contrôler ton contenu en interne de ce div. Plutôt que overflow:hidden. Car overflow:hidden cache ce qui dépasse.

Le but ici n'est pas de cacher mais de bien structurer et positionner ton contenu.

PS : de même pour le background:#e1e1e1. Il est placer sur div#plan.

..
Modifié par zardoz (26 Aug 2011 - 23:18)
Cependant je préfère ce genre d'instruction pour .contenu


.contenu {
 height:auto;
 border:2px dashed #ff0000;
 margin:10px 10px 10px 10px;
}


La seule différence c'est les instructions » margin:10px 10px 10px 10px. Plutôt que juste margin-bottom.

..
Sujet clos
Aller à