html problème avec résolution de l'écran ?

**mourad2032** · 27/02/2011, 22h42

salut ..
j'ai pas mal lus ici dans le forum ou cherche Alleur mais j'ai trouvé ou pas compris ,je débute avec les site web et j'ai fais une page mais j'ai un gros problème dans le résolution de l'écran avec ma page web , j'explique , j'ai fais ma page avec Dreamweaver 8 en mode affichage 1024x768 , mais quand je met mon site au résolution supérieure je vois un grand vide sur le coté droite , j'ai testé au niveau de js ou modifier css mais rien marche , pour info j'ai fais ma page pixel , voila je vous expose mon code html et je vous merci ..

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>** </title>
<style type="text/css">
<!--
body {
        background-image: url(fond.jpg);
}
#Layer1 {
        position:absolute;
        width:585px;
        height:124px;
        z-index:1;
        left: 2px;
}
#Layer2 {
        position:absolute;
        width:367px;
        height:861px;
        z-index:2;
        left: 629px;
        top: 14px;
}
#Layer3 {
        position:absolute;
        width:470px;
        height:34px;
        z-index:3;
        left: 55px;
        top: 188px;
}
#Layer4 {
        position:absolute;
        width:602px;
        height:436px;
        z-index:4;
        left: 12px;
        top: 273px;
}
#Layer5 {
        position:absolute;
        width:516px;
        height:64px;
        z-index:1;
        left: -609px;
        top: 729px;
}
#Layer6 {
        position:absolute;
        width:103px;
        height:92px;
        z-index:5;
        left: 495px;
        top: 727px;
}
#Layer7 {
        position:absolute;
        width:617px;
        height:42px;
        z-index:1;
        left: 161px;
        top: 757px;
}
#Layer8 {
        position:absolute;
        width:558px;
        height:21px;
        z-index:1;
        left: 239px;
        top: 605px;
}
.Style2 {
        font-size: medium;
        font-weight: bold;
}
.Style3 {color: #FF6633}
-->
</style></head>
 
<body>
<div id="Layer1"><img src="Slogant.png" alt="" width="584" height="145" /></div>
<div id="Layer2"><img src="Cote--Droit.png" width="366" height="860" />
  <div id="Layer5"><img src="Banner2.jpg" width="516" height="63" /></div>
</div>
<div id="Layer3"><a href="http://www.monsite.com"><img src="Home.jpg" width="100" height="33" border="0" /></a> <a href="http://www.monsite.com/contact.html"><img src="Contact.jpg" width="100" height="33" border="0" /></a> <a href="http://http://www.monsite.com"><img src="Upload.jpg" width="200" height="33" border="0" /></a> <img src="Suite-Boutons.png" width="55" height="33" /></div>
<div id="Layer4"><img src="Gauche-PC.png" width="603" height="441" />
  <div id="Layer8">
    <p align="left" class="Style2"><span class="Style2">Copyright &copy;          2011  Tous droits r&eacute;serv&eacute;s 2 PRINT-DZ.COM&reg; -<a href="http://www.monsite.com" class="Style3">Design By **</a></span></p>
  </div>
</div>
<div id="Layer6"><img src="Repere.png" width="113" height="96" /></div>
</body>
</html>

**NoSmoking** · 28/02/2011, 18h55

Bonjour,
en premier utilises un DOCTYPE Strict le rendu sera meilleur sur les différents navigateurs, dans ton cas apparemment.

Code html :

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

1
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

en deuxième mets l'ensemble de ta page dans une DIV contenante de width 1024px et en margin auto pour que le centrage soit efficace et ce quelque soit la grandeur de la fenêtre, et non de la résolution écran, ce sont 2 choses différentes.

Petit exemple :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>** </title>
<style type="text/css">
html, body{
  height : 100%;
  margin : 0;
  font-family : Verdana;
  font-size : 1em;
}
#main_page {
  position : relative;
  width : 1024px;
  height : 100%;
  margin : auto;
  background-color : #e0e0e0;
}
p {
  margin : 15px;
}
</style>
</head>
<body>
<div id="main_page">
  <div>
    <p>Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur.</p>
    <p>Coactique aliquotiens nostri pedites ad eos persequendos scandere clivos sublimes etiam si lapsantibus plantis fruticeta prensando vel dumos ad vertices venerint summos, inter arta tamen et invia nullas acies explicare permissi nec firmare nisu valido gressus: hoste discursatore rupium abscisa volvente, ruinis ponderum inmanium consternuntur, aut ex necessitate ultima fortiter dimicante, superati periculose per prona discedunt.</p>
    <p>Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.</p>
    <p>Tous les textes ont &eacute;t&eacute; g&eacute;n&eacute;r&eacute;s al&eacute;atoirement &agrave; partir de <a href="http://www.faux-texte.com/">Lorem Ipsum </a></p>
  </div>
</div>
</body>
</html>

**mourad2032** · 28/02/2011, 21h02

bonsoir

d'abord je vous merci de votre réponse

, effectivement mon site a centralisé , mais il me reste un petit problème , images devient petites sur l'écran en résolution supérieur

??? , il y a un moyen de régler ça ?

**polymorphisme** · 01/03/2011, 08h11

Bonjour,

généralement, on fixe la résolution des images à 72 dpi pour l'écran.

**NoSmoking** · 01/03/2011, 15h27

Envoyé par mourad2032

bonsoir

d'abord je vous merci de votre réponse

, effectivement mon site a centralisé , mais il me reste un petit problème , images devient petites sur l'écran en résolution supérieur

??? , il y a un moyen de régler ça ?

pas sûr de bien comprendre, mais plus la résolution est élevée plus une image de dimension donnée paraitra petite.

Une solution, à voir le rendu qu'en même, est de mettre une largeur en pourcentage à tes images.

**mourad2032** · 01/03/2011, 15h48

oui j'ai essaie de mettre image 72dpi mais ça marche pas , et aussi mettre width 100% mais c'est la même chose , je pense que c'est position absolute ?

- ce que je veux dire, le site s'adapte a l'écran des visiteur ?

**polymorphisme** · 01/03/2011, 16h16

Re,

le mieux pour toi serais certainement de comprendre d'abords les relations qu'il existe entre dimension, résolution, pixels et dpi, par exemple sur Wikipédia où tu trouvera de très bonnes explications

html problème avec résolution de l'écran ?

HTML

Vue hybride

Discussions similaires

Partager

Partager