probléme décalage de la balise DIV

Version imprimable

20/08/2007, 12h43
lenstoi

probléme décalage de la balise DIV

bjr,
je développe un site, et j'uilise des fois des balises DIV. voilà, moi je travail sur un pc avec un ecran 19 pouces, mais quand j'ai mis cette application sur mon portable (17 pouces), y a des décalages de toutes les balise DIV, ce qui entraine le chevauchement des DIV et des autres balises; bizzar!! j'utilise IE pour le développement.
est ce que vous pouvez me dire pouquoi ya ces décalages en changeant de résolution d'écran, et est ce qu'il ya un truc à faire pour éviter ca?
NB : pour les dimensions des DIV j'utilise des '%', et 'position:absolute'
merci bcp d'avance
20/08/2007, 12h56
beeboo

Salut,
Ca serait p'têt' bien de nous fournir un ch'tit bout de code ou un lien à ta page, histoire qu'on sache sur quoi on travaille.

voilà j'ai pris le code le plus petit, c'est une page : login+mot de passe :

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="STYLESHEET" href="monstyle.css" Type="text/css">
<title>intranet - Authentification</title>
</head>
 
<script>
function verifier(document) {
        if ((document.login.value.length < 1) || (document.password.value.length < 1)) {
        alert('Accès refusé');
        document.login.focus();
        return false;
        }
        
return true;
}
</script>
 
<body>
 
<form method="POST" action="menu_admin.php" onSubmit="return verifier(this)">
 
<div style="position:absolute; top:25%; left:25%;background-color:#3366FF; width:50%; height:50%;">
	<div style="position:absolute; top:0%; left:0%;background-color:#3366FF; width:100%; height:20%;"><br>
	<h2><p align="center"><font color=yellow>Service Central d'Authentification</font></p></h2>
	</div>
	<div style="position:absolute; top:20%; left:0%;background-color:#3366FF; width:100%; height:60%;">
		<div style="position:absolute; top:0%; left:0%;background-color:#3366FF; width:40%; height:100%;">
		<p align="center"><br><br><img src="images/key.jpg"></p>
		</div>
		<div style="position:absolute; top:0%; left:40%;background-color:#3366FF; width:60%; height:100%;">
		<table BORDER="0" CELLPADDING="5" CELLSPACING="0" WIDTH="80%" HEIGHT="40%" BGCOLOR="#3366FF">
		<tr>
		<td align="left">
		<label class="p1">Login : </label>
		</td>
		<td align="left">
		<input type=text name=login ID=id_login>
		</td>
		</tr>
		<tr>
		<td align="left">
		<label class="p1">Password : </label>
		</td>
		<td align="left">
		<input type="password" name=password ID=id_pass>
		</td>
		</tr>
		</table>
		<div style="position:absolute; top:45%; left:51%;background-color:#3366FF; width:20%; height:15%;">
		<input type="image" name="valider" src="images/login.jpg">
		</div>
		<div style="position:absolute; top:65%; left:0%;background-color:#3366FF; width:100%; height:20%;">
		<p align="center"><font size=2 color=white>Entrez vos Login et Mot de passe ci-dessus<br>puis cliquer sur le bouton Login pour continuer</font></p>
		</div>
		</div>
	</div>
 
</div>
 
</form>
 
</body>
</html>

merci d'avance

20/08/2007, 13h36
beeboo

Effectivement, le fait d'utiliser des pourcentage à tous tes éléments entraine un redimensionnement de ceux-ci en fonction de la taille de la fenêtre.
Donc sur une petite fenêtre, des éléments peuvent se retrouver déplacés ou recouverts par d'autres alor qu'ils sont correctement affichés dans une grande fenêtre.
Je te propose de juste donner une dimension fixe à l'élément englobant ton formulaire de manière à ce que ses sous éléments ne soient pas affectés par un changement de dimension.
20/08/2007, 14h26
lenstoi

ok, je vais faire comme ca, ca sera mieu.
merci beeboo