Problème d'affichage avec zoom

**sachaaa** · 16/05/2011, 11h27

Bonjour
J'ai fais plusieur site en HTML
j'ai centré ma page pour qu'elle soit au milieu de mon navigateur
mais si je fais un zoom avec Internet Explorer (ex : 125 %)
ma page ne s'affiche pas integralement

voila mon css (en pense que c'est le div global qui casse tout, je l'ai peut etre mal fait)

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
66
67
68
69
70
71
72
73
74
75
76
@charset "utf-8";
/* CSS Document */
 
* {
	margin: 0;
	padding: 0;
 
}
 
body {
background-color: #000000;
color: #000000;
font-size: 20px;
text-align: center;
}
 
#global {
position:absolute;
left: 50%;
top: 50%;
width: 800px;
height: 630px;
margin-top: -315px; /* moitié de la hauteur */
margin-left: -400px; /* moitié de la largeur */
font-weight: bold;
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
background-image: url("fond.gif");
background-repeat : no-repeat; 
 
}
/*Tableau*/
body table {
	color: #FFF;
	font-size: 15px;
}
/* GLOBAL */
#centre {
         margin-left:auto;
         margin-right:auto;
         height: 630px;
         width: 800px;
         margin-top: 30px; 
}
 
/* CONTENU */
 
/* SITE */	
#contenu {
	text-align: left;
	height: 380px;
	padding-top: 0px;
	margin-left: 20px;
	margin-top: 0px;
 
 
}
 
#text {
	font-size: 15px;
	margin-right: 10px;
	font-weight: normal;
	color: #FFFFFF;
}
/* PIED de page */
#pied { 
	margin-bottom: 10px;
	font-weight: normal;
	font-size: 12pt;
}
 
/*blanc en haut*/
#haut {
	margin-top: 0px;
	height: 603px; 
}

**sachaaa** · 17/05/2011, 15h49

merci de me dire s'il est possible de voir ma page s'affiche integralement
ou s'il faut que je pose cette question dans un autre endroit
merci

**vaneck** · 17/05/2011, 17h04

Qu'entend du par "ne s'affiche pas integralement".
La page peut elle être zoomé avec un autre navigateur? De surcroît , avec un brin cynisme j'aurais tendance a dire, et alors?
Tant pis pour handicapée visuel qui s'acharne a utiliser internet explorer , alors que ce navigateur est si connu pour avoir longtemps fait obstruction a l’évolution d'html , en grande partie destiné a facilité l'accessibilité!

**sachaaa** · 17/05/2011, 18h59

oui mais je veux que tout le monde puisse le voir
et sur d'autre site j'ai mis un numero de telephone en haut et si la personne est en zoom elle le voit pas

photo sans zoom

photo avec zoom 150%

**vaneck** · 17/05/2011, 19h21

Vraiment, j'arrive pas a voir la différence entre les deux

**sachaaa** · 17/05/2011, 19h40

Dans la 1er photo je vois tout le site
dans la 2eme photo (zoom 150%) je n'ai pas le haut et je ne peux pas monter la barre pour voir le haut
je t'envoie un MP
merci

**vaneck** · 17/05/2011, 20h44

tu as oublié de préciser que pour tes screens tu as rajouté un bloc blanc pour cacher sa provenance (sinon on comprend pas trop).
Bon malheureusement je ne pourrais pas trop t'aider, n'ayant pas internet explorer. Mais bon ,c'est vraiment un cas très particulier sur un navigateur loin d’être fiable. Je doute que cela puisse vraiment te pénaliser!

**sachaaa** · 17/05/2011, 21h11

je viens de faire le test
alors probleme avec le zoom sur les navigateurs :
Avant Browser, FlashPeak SlimBrowser, Flock, Google Chrome, Lunascape6, Maxthon, Mozilla FireFox, Opera, Safari, SRWare Iron, Internet Explorer

probleme similaire sur un Nokia N 8

**vaneck** · 18/05/2011, 13h33

Oki , j'ai enfin compris ton problème de zoom. En fait c'est que ton div principal #global est positionné en absolue , est donc n'est pas pris en compte par ton navigateur qui l'exclura sans problème si l'affichage est trop petit.
La seule solution est du supprimer le position absolute , pour remettre l’élément dans le flux:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
#global {
 
margin-left: auto;
margin-right: auto;
width:800px;
height:630px;
font-weight: bold;
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
background-image: url("fond.gif");
background-repeat : no-repeat; 
}

Cependant tu perds le seul moyen de centrer verticalement ton bloc en css. Ce n'est pas bien grave , mais cependant si tu tiens absolument a récupérer cette possibilité , il vas te falloir recréer la solution en javascript (avec les dangers d'incompatibilité , et de lourdeur que çà peut occasionner).

**sachaaa** · 18/05/2011, 15h42

il y a des script pour detecter le navigateur
et il n'y a pas de script pour voir le zoom du navigateur ?

**vaneck** · 18/05/2011, 17h07

Que veux tu dire?
Comme je te l'ai précisé précédemment , le problème ne vient pas du zoom , mais de l'espace d'affichage. Comme le corps de ton site est positionné en absolute, il n'est pas positionné dans le flux. Le navigateur ne le considère pas comme "important". Si jamais la résolution est plus faible que l'espace d'affichage de ton site , celui ci disparaît , et le zoom diminue virtuellement la surface d'affichage.
Le css que je t'ai donnée repositionne ton site dans le flux pour rattraper le problème.

**sachaaa** · 18/05/2011, 18h56

ok merci
il faut que je test
mais avec ton global
ma page est centré de gauche a droit mais pas de haut en bas

Problème d'affichage avec zoom

CSS

Discussions similaires

Partager

Partager