interface adaptative resolution client

**donnadieujulien** · 07/02/2009, 14h10

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**donnadieujulien** · 07/02/2009, 14h53

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Macmillenium** · 07/02/2009, 15h22

Bonjour,

Enlève :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**donnadieujulien** · 07/02/2009, 16h08

NICKEL!!!

Merci beaucoup!

C'est bien mieux comme ca!

Peux-tu m'expliquer pourquoi cela résoud mon problème?

**Macmillenium** · 07/02/2009, 16h28

Les feuilles de styles par défaut appliquent une marge sur le body, d'où le reset:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part