18043 sujets

Questions générales et questions de débutants

[Résolu] Marges négatives et résolution 800*600

Bonjour à tous,

J'ai utilisé la solution des marges négatives pour centrer un site verticalement. Tout marche bien sous IE, Mozilla et Opera dans les résolutions supérieures ou égales à 1024*768. Le problème se pose en 800*600, le header est coupé.
Je sais qu'utiliser des marges négatives peut poser ce genre de problème.
Je voudrais savoir s'il existe une solution alternative pour centrer un site verticalement, et si, non, que puis-je faire pour qu'en 800*600 on voit le site dans sa globalité?
Merci pour votre aide.
Modifié par MissGG (15 Jun 2007 - 14:53)
LooL

J'ai bien lu la FAQ avant de poser ma question.
Le problème étant que j'ai 4 blocs principals. Un header et un footer en fixed. Un contenu et menu en overflow et fond fixed.
D'où, je ne vois que la solution des marges négatives.
Petite précision de grande importance : mon header et mon footer ne font pas parti de mon conteneur.
Utiliser un tableau avec un peu de vertical-align. Un joli tableau de mise en page, qui ne posera aucun problème d'accessibilité, et pas de problème de maintenance du code non plus.

Petit exemple :
<!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=UTF-8" />
	<title>Test centrage vertical</title>
	<style type="text/css">
	html, body {
		margin: 0;
		padding: 0;
		height: 100%;
	}
	table#global {
		width: 100%;
		height: 100%;
		border-spacing: 0;
	}
	td#global-td {
		vertical-align: middle;
	}
	div {
		width: 500px;
		height: 200px;
		margin: 10px auto;
		background: red;
	}
	</style>
</head>
<body>
	<table id="global">
		<td id="global-td">
			<div>...</div>
		</td>
	</table>
</body>
</html>

Donne une hauteur de 2000px à la div pour voir le comportement quand la page est trop haute.

En passant, cette méthode permet de faire des pages de hauteur dynamique (donc permettant par exemple l'agrandissement des caractères !) mais centrées verticalement lorsque le contenu est court.

À noter que, si le centrage vertical n'est pas indispensable sur IE, on pourra faire la même chose avec deux conteneurs div en display: table et display: table-cell.
Bonjour Florent V.,

Décidément, c'est toujours toi qui m'apporte les réponses à mes questions tordues, lool. Merci encore.
Je viens de tester ta solution. Ca règle bien le problème du header coupé en 800*600, par contre c'est bien centré horizontalement mais pas verticalement. Le site est en haut.
J'ai dû faire une erreur, mais je ne vois pas.
Voici un bout de mon css avec les principaux blocs.

html, body{
	background: #000000;
	font-family: "Trebuchet MS", helvetica, sans-serif;
	padding: 0;
	margin: 0;
	height: 100%;
}
table#global{
	width: 100%;
	height: 100%;
	border-spacing: 0;
}
td#global-td {
	vertical-align: middle;
}
div#global-div{
	width: 761px;
	height: 563px;
	margin: 0 auto;
}
/*HEADER */
div#header{
	background: no-repeat left top;
	width: 761px;
	height: 90px;
	margin: 0 auto;
	}
/*CONTENEUR*/
div#conteneur1, div#conteneur2 {
	width: 761px;
	height: 435px;
	margin: 0 auto;
      }
      div#conteneur1 {
      	position : relative;
		background: url(img/milieu.gif) no-repeat left top;
      }
      div#conteneur2 {
      	overflow : auto;
      }
	/*CONTENU */
		div#contenu{
			float: left;
			width: 492px;
			height: 435px;
			left: 0;
			padding: 0;
			margin-left: 10px;
		}
	/*MENU */
		div#menu {
			float: right;
			width: 160px;
			height: 307px;
			right: 0;
			margin-right: 30px;
			padding: 0;
		}
/*FOOTER */
	div#footer{
		background: url(img/foot.gif) no-repeat left bottom;
		height: 38px;
		width: 761px;
		margin: 0 auto;
		/*texte*/
		color: #FFFFFF;
		text-align: right;
		font-size: 0.67em;
	}

et voici mon index, si ça peut aider.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
  <head>
	<title>...</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="styles.css" rel="stylesheet" type="text/css">
  </head>
  <body> 
	<table id="global">
	  <td id="global-td">
		<div id="global-div">
		  <?PHP include("haut.html")?>
		  <div id="conteneur1">
			<div id="conteneur2">
				<div id="contenu">
					<H1>...</H1>
					<p>....</p>
				</div>
			  <?PHP include("menu.html")?>
			</div>
		  </div>
		  <div id="footer">copyright</div>
		</div>
	  </td>
	</table>
  </body>
</html>

Si quelqu'un est motivé, n'hésitez pas.
Je peux faire un lien au site si ça peut aider.
Merci d'avance.
Modifié par MissGG (15 Jun 2007 - 13:52)
MissGG a écrit :
par contre c'est bien centré horizontalement mais pas verticalement.

L'exemple dont j'ai donné le code marche très bien. Ensuite, il faut voir ce que tu en as fait...

On peut voir la page en ligne ? Ça sera plus simple pour débusquer le problème. Smiley smile
J'ai juste modifié la page index.
L'erreur ne vient pas du code que tu proposes, je pense que mon code n'est pas propre et trop chargé, mais mon site n'est pas complètement fini. Smiley cligne

OUpss: Rectification : ça semble marcher.
J'vais modifier les pages, si c'est ok avec le scroll, je rajouterai un petit résolu.
Merci beaucoup Florent V.
Modifié par MissGG (17 Jun 2007 - 00:50)
Sujet clos
Aller à