probléme décalage de la balise DIV

**lenstoi** · 20/08/2007, 12h43

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

**beeboo** · 20/08/2007, 12h56

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.

**lenstoi** · 20/08/2007, 13h21

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

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

**beeboo** · 20/08/2007, 13h36

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.

**lenstoi** · 20/08/2007, 14h26

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

probléme décalage de la balise DIV

HTML

Vue hybride

Discussions similaires

Partager

Partager