28172 sujets

CSS et mise en forme, CSS3

Bonjour,
J'ai un calque contenant "id = "page"" qui a un autre calque "id="slider"" à l'intérieur. Le calque contenant a un overflow:hidden. Le slider a un margin-top négatif, ce qui fait qu'une partie est cachée. Comment faire pour que cela soit également le cas sous IE6? J'ai l'impression que le overflow:hidden n'est pas pris en compte.
Quelqu'un peut m'aider?
Merci d'avance
David

Voici le 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=UTF-8">
<title></title>
<style type="text/css">
body{
	background-color:#FFF;
}
#page {
	margin-left:50%;
	left:-300px;
	border:1px solid blue;
	width:600px;
	height:400px;
	margin-top:300px;
	overflow:hidden !important;
}
#slider {
	position: relative;
	background-color:#ff0000;
	width: 300px;
	height: 159px;
	margin-top: -141px;
	margin-left:30px;
}
</style>
</head>
<body>
<div id="page">
  <div id="slider">
    <p>Texte</p>
  </div>
</div>
</body>
</html>

Modifié par dleibzig (05 Nov 2008 - 16:11)
Hello dleibzig et bienvenue Smiley smile ,

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).

upload/1-code.gif

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 donc courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile
Yes, j'ai trouvé.....

En fait il faut juste ajouter un position:relative; au calque contenant (#page)

A bientôt