28173 sujets

CSS et mise en forme, CSS3

Problème de visibilité suite à marge négative avec blocs DIV

Bonjour à tous,
A partir de la feuille de style du fichier HTML ci-dessous (conforme W3c), j'ai pu résoudre le problème de centrage (H & V) de 2 blocs DIV contigus. Cela fonctionne très bien tant que la fenêtre a une taille supérieure ou égale à la taille des 2 blocs.

Problème : dès que la fenêtre a une taille inférieure à la taille des 2 blocs, ceux-ci disparaissent en partie (marges négatives), sans que les ascenseurs (sur IE en particulier) ne permettent de découvrir la partie cachée des blocs DIV.

Une solution serait la bien venue (JScript ?), merci à l'avance.

;+))

Pierre


<!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" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<title>Essais</title>
<style type="text/css">
<!--
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100%;
	color: white;
	background-color: black;
}
div#page {
	min-height: 100%;
}	
div #bg-menu {
	background: url(images/bg-menu.png);
	position:absolute;
	left: 50%; 
	top: 50%;
	width: 160px;
	height: 660px;
	margin-left: -498px;
	margin-top: -330px;
	color: white;
	background-color: black;
}
div #menu {
	position:relative;
	left: 20px; 
	top: 20px;
	width: 130px;
	height: 630px;
	color: white;
	background-color: black;
}
div #bg-affichage {
	background: url(images/bg-96-cont.png);
	position:absolute;
	left: 50%; 
	top: 50%;
	width: 836px;
	height: 660px;
	margin-left: -338px;
	margin-top: -330px;
	color: white;
	background-color: black;
}
div #affichage {
	position:relative;
	left: 30px; 
	top: 30px;
	width: 766px;
	height: 600px;
	color: white;
	background-color: black;
}
//-->
</style>
</head>
<body>
<div id="page">
	<div id="bg-menu"><div id="menu">Menu</div></div>
	<div id="bg-affichage"><div id="affichage">Affichage</div></div>
</div>
</body>
</html>
Bonjour,

Avant le JS essaye peut être ce bout de code

<!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" lang="fr">

<head>
		<title>Test</title>
<style type="text/css">

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100%;
	color: white;
	background-color: black;
}

div#page {
	min-height: 100%;
    width: 996px;;
	position: relative;
}	

div #bg-menu {

	background: blue;
	position: absolute;
	top: 0;
	left:0;
	width: 160px;
	height: 660px;
	color: white;
}

div #menu {
	margin: auto;
	width: 130px;
	height: 625px;
	color: white;
	background-color: green;
}

div #bg-affichage {
	background: yellow;
	width: 836px;
	margin-left: 160px;
	height: 660px;
	color: white;
}

div #affichage {
	width: 766px;
	height: 600px;
	margin: auto;
	color: white;
	background-color: orange;
}

</style>

</head>

<body>

<div id="page">

	<div id="bg-menu"><div id="menu">Menu</div></div>

	<div id="bg-affichage"><div id="affichage">Affichage</div></div>

</div>

</body>
</html>


Si ça peut t'aider
Stephan a écrit :
Bonjour Vosges et bienvenue sur ce forum Smiley lol

Centrer les éléments ou un site web en CSS



Merci pour la réponse si matinale !

L'infame pisseur de lignes que je suis aurait du parcourir plus attentivement l'excellent site de ce forum !

Mon problème est donc résolu pour le centrage horizontal, je peux donc aller me coucher (voir nouveau code ci-dessous) ...

Mais il faut que je me relève tout de suite car le problème de centrage vertical reste !
Au risque de paraître "intégriste" (sic) je me suis attelé à mettre mon site en conformité avec le W3C
<;+) que je suis !
Tout restant compatible IE de Micro$$oft (promis j'ai pas d'actions !) tout voulant adapter le système à mes besoins.

Bref mon problème de centrage vertical reste entier, et je crains qu'il n'y ait pas de solution pour IE<7 si j'ai bien compris !

Alors une bouteille à la mer ....

Et merci d'avance !

<!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" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<title>Essais</title>
<style type="text/css">
<!--
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100%;
	color: white;
	background-color: black;
}
div#page {
	background-color: blue;
	color: white;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 960px;
	height: 700px;
}
div #bg-menu {
	background-color: green;
	color: white;
	position:relative;
	left: 0px;
	width: 160px;
	height: 660px;
	float: left;
}
div #bg-affichage {
	background-color: gray;
	color: white;
	position:relative;
	width: 800px;
	height: 660px;
	float: right;
}
//-->
</style>
</head>
<body>
<div id="page">
	Page
	<div id="bg-menu">BG Menu</div>
	<div id="bg-affichage">BG Affichage</div>
</div>
</body>
</html>
ghost a écrit :
Bonjour,

Avant le JS essaye peut être ce bout de code

<!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" lang="fr">

<head>
		<title>Test</title>
<style type="text/css">

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	min-height: 100%;
	color: white;
	background-color: black;
}

div#page {
	min-height: 100%;
    width: 996px;;
	position: relative;
}	

div #bg-menu {

	background: blue;
	position: absolute;
	top: 0;
	left:0;
	width: 160px;
	height: 660px;
	color: white;
}

div #menu {
	margin: auto;
	width: 130px;
	height: 625px;
	color: white;
	background-color: green;
}

div #bg-affichage {
	background: yellow;
	width: 836px;
	margin-left: 160px;
	height: 660px;
	color: white;
}

div #affichage {
	width: 766px;
	height: 600px;
	margin: auto;
	color: white;
	background-color: orange;
}

</style>

</head>

<body>

<div id="page">

	<div id="bg-menu"><div id="menu">Menu</div></div>

	<div id="bg-affichage"><div id="affichage">Affichage</div></div>

</div>

</body>
</html>


Si ça peut t'aider


Bonjour,

Merci pour ta réponse, cela permet d'éviter la disparition liée aux marges négatives, mais cela postionnen les blocs DIV en haut à gauche de la fenêtre.

Le borné que je suis souhaite un centrage horizontal et vertical. Stephan m'a mis sur une piste me permettant de résoudre le centrage vertical (voir le code sur la réponse que je lui ai faite).

Mais le problème du centrage vertical reste entier sous IE
Sujet clos
Aller à