interface adaptative resolution client

Version imprimable

07/02/2009, 13h10
donnadieujulien

interface adaptative resolution client
Bonjour,

je me prends la tête avec ce problème...

Je voudrais quequelque soit la résolution, mon interface soit acceptable...

En fait, mon premier objectif, c'est que garder l'interface de taille fixe, mais centrée au mileiu de l'écran.

Donc, pour l'instant je bosse en 1024*768. Mes images de fond fond cette taille.

Quand je passe en résolution supérieure, l'image déclarée en background css "center no repeat" se centre bien o milieu de l'écran, mais le reste est toujours collé en haut à guahc ede l'écran....

Toutes mes div,table,etc... sont avec des width,height,margin-top,margin-left, en px, pas de position absolues.

Donc, selon moi si mon html est comme ca :
Code:

1 2 3 4 5 6 <div id="a"> <div id="b"> </div> <div id="c> </div> </div>
Il suffit de caler bien la div "a" et les autres suivent? je pense, mais je me demande...

En fait, ma question est comment faire pour centrer mon interface à l'écran, sachant que les margin-top:auto,etc... ca marche pas...

Le but est de garder la meme taille des éléments qque soit la résolution, mais centrée à l'écran...

Pas facile, franchement, le CSS.....

zont pas pensé pe à un screen.width()....

Ca réoudrait bien des problèmes...

Merci

progres

Re, je tente de résoudre mon pb avec un petit exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@CHARSET "ISO-8859-1";
 
 
body{
	background: url("/data/images/fonds/foot.jpg") no-repeat center;
	width:990px;
	height:570px;
	margin-left: auto; 
	margin-top: auto;
}
 
div#page{
 
	 position: absolute;
     width: 990px;        /* selon la largeur voulue */
     margin-left: -495px; /* moitie de width */
     left: 50%;          /* constant, toujours 50% */
     height: 570px;       /* selon la quantite de texte */
     margin-top: -285px;   /* moitie de height */
     top: 50%;   
 
    border-width: 1px ;
	border-style: inset ;
	border-color: #60ffff; 
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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" lang="en_US" xml:lang="en_US">
	<head>
		<title>Login</title>
  		<link rel="stylesheet" type="text/css" href="/data/css/file.css">
 	</head>
 
 	<body>
 		<div id="page">
		BlaBlaBla	
		</div>
 	</body>
</html>

Alors : en 1024*768, IE est a peu pres bon, mais la div a un léger décalage vers le haut, pas très beau...
Mozilla, parfait..

En 12XX*960, la IE parfait, mais mozilla, l'image background est bien centrée horizontalemennt, mais pas verticalement....

En changeant body par html dans le code css, ca inverse à peu pres les problèmes.....

Ou est le bug??

Merci

Bonjour,

Enlève :

Code:

1
2
3
4
5
6
7
8
 
body{
	background: url("/data/images/fonds/foot.jpg") no-repeat center;
	width:990px;
	height:570px;
	margin-left: auto; 
	margin-top: auto;
}

Et essai :

Code:

1
2
3
4
5
6
7
 
html, body{
	background: url(/data/images/fonds/foot.jpg) no-repeat center;
	height:100%;
	padding:0;
	margin:0;
}

07/02/2009, 15h08
donnadieujulien

merci

NICKEL!!!

Merci beaucoup!

C'est bien mieux comme ca!

Peux-tu m'expliquer pourquoi cela résoud mon problème?
07/02/2009, 15h28
Macmillenium
Les feuilles de styles par défaut appliquent une marge sur le body, d'où le reset:
Code:

1 2 body { padding:0; margin:0; }
Ensuite pour que ton bloc se positionne bien au milieu quelque soit la résolution, il faut que html et body prennent une hauteur 100% de la zone d'affichage et d'où :
Code:

1 2 html, body { height:100% }
PS : Pense au tag [RESOLU] ;)