Erreurs d'affichage sur petits écrans

**tembe** · 25/04/2013, 15h10

Bonjour,
J'ai codé mon page dans un grand écran, et sur mon petit pc il s'affiche pas correctement.
Je suis nulle en html mais voici mon code:

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
<HTML>
<HEAD>
<title>tara.fr</title>	
	<STYLE>
#een{
	background-image: url("immage/een.png");
    background-repeat: no-repeat;
	float: left;
	margin-left: 260px;
	width: 20%;
	margin-top:50px;
	clear: both;
}
#twee{
    background-image: url("immage/twee.png");
	background-repeat: no-repeat;
	width: 20%;
	float: left;
	margin-top:50px;
}
#drie{
	background-image: url("immage/drie.png");
	background-repeat: no-repeat;
    margin-top:50px;
    width: 35%;
    float: left;
}
#vier{
	background-image: url("immage/vier.png");
	background-repeat: no-repeat;
	float: left;
	margin-left: 260px;
	width: 20%;
	margin-top: 50;
	clear: both;
}
#vijf{
	background-image: url("immage/vijf.png");
	background-repeat: no-repeat;
	width: 20%;
	float: left;
	margin-top: 50px;
}
#zes{
	background-image: url("immage/zes.png");
	background-repeat: no-repeat;
	margin-top: 50px;
	width: 35%;
	float: left;
}
#zeven{
	background-image: url("immage/zeven.png");
	background-repeat: no-repeat;
	float: left;
	margin-left: 260px;
	width: 20%;
	margin-top: 50;
    clear: both;
}
#acht{
	background-image: url("immage/acht.png");
	background-repeat: no-repeat;
	width: 20%;
	float: left;
	margin-top: 50px;
}
#negen{
	background-image: url("immage/negen.png");
	background-repeat: no-repeat;
	margin-top: 50px;
	width: 35%;
	float: left;
}
	</STYLE>
</HEAD>
<BODY bgcolor="#000000">
 
   	<div id="een"><img src="immage/een.png"></div>
    <div id="twee"><img src="immage/twee.png"></div>
    <div id="drie"><img src="immage/drie.png"></div>
    <div id="vier"><img src="immage/vier.png"></div>
    <div id="vijf"><img src="immage/vijf.png"></div>
    <div id="zes"><img src="immage/zes.png"></div>
    <div id="zeven"><img src="immage/zeven.png"></div>
    <div id="acht"><img src="immage/acht.png"></div>
    <div id="negen"><img src="immage/negen.png"></div>                            
 
</BODY>
</HTML>

comment je peux faire pour être sur que ma page s'affiche correctement en tout résolution?

**NoSmoking** · 25/04/2013, 22h41

Bonsoir,

et sur mon petit pc il s'affiche pas correctement.

je dois admettre que c'est un peu léger comme explication du dysfonctionnement!

Question au passage, pourquoi une image en background de DIV identique à l'image contenue dans la même DIV?

**rodolphebrd** · 25/04/2013, 23h14

Bonjour,

Je pense que vous ne comprenez pas bien :
- l'utilisation de la cascade en Css;
- la propriété float qui est mal utilisée avec des clear.

Je vous propose cette solution pour bien positionner vos éléments en fonction des largeurs d'écran.

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
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
<!doctype html>
<html>
    <HEAD>
    <meta charset="UTF-8">
    <title>tara.fr</title>
    <STYLE>
#een {
	width: 20%;
	background: #060;
}
#twee {
	width: 20%;
	background: #C33;
}
#drie {
	width: 35%;
	background: #FC9;
}
#vier {
	width: 20%;
	background: #09F;
}
#vijf {
	width: 20%;
	background: #939;
}
#zes {
	width: 35%;
	background: #0FC;
}
#zeven {
	width: 20%;
	background: #339;
}
#acht {
	width: 20%;
	background: #C60;
}
#negen {
	width: 35%;
	background: #F69;
}
.container{
	margin-top:50px;
	margin-left:260px;
}
.box{
	display:table;
	width:100%;
}
#een, #twee, #drie, #vier, #vijf, #zes, #zeven, #acht, #negen {
	display:table-cell;
}
</STYLE>
    </HEAD>
   <BODY >
<div class="container">
 <div class="box">
	  <div id="een"><img src="immage/een.png">1</div>
	  <div id="twee"><img src="immage/twee.png">2</div>
	  <div id="drie"><img src="immage/drie.png">3</div>
    </div>
 <div class="box">
      <div id="vier"><img src="immage/vier.png">4</div>
      <div id="vijf"><img src="immage/vijf.png">5</div>
      <div id="zes"><img src="immage/zes.png">6</div>
    </div>
 <div class="box">
      <div id="zeven"><img src="immage/zeven.png">7</div>
      <div id="acht"><img src="immage/acht.png">8</div>
      <div id="negen"><img src="immage/negen.png">9</div>
    </div>
  </div>
  </BODY>
</html>

**reverb94** · 10/05/2013, 15h42

Bonjour,
Pour commencer, je serais toi, je séparerai ton code CSS de ton code html ( tu t'en sortiras mieux par le suite).
Pour ce faire, commence à créer un nouveau fichier qui se nommera par exemple : 'CSS.css'

si tu code en utf8 rajoute en tout premier dans ton document :

Code css :

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

1
2
@charset "utf-8";
/* CSS Document */

puis tu transfert toutes tes données css dedans ( un copier/coller ^^ simple )

ça te donnera :

Code css :

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
@charset "utf-8";
/* CSS Document */
 
#een {
	width: 20%;
	background: #060;
}
#twee {
	width: 20%;
	background: #C33;
}
#drie {
	width: 35%;
	background: #FC9;
}
#vier {
	width: 20%;
	background: #09F;
}
#vijf {
	width: 20%;
	background: #939;
}
#zes {
	width: 35%;
	background: #0FC;
}
#zeven {
	width: 20%;
	background: #339;
}
#acht {
	width: 20%;
	background: #C60;
}
#negen {
	width: 35%;
	background: #F69;
}
.container{
	margin-top:50px;
	margin-left:260px;
}
.box{
	display:table;
	width:100%;
}
#een, #twee, #drie, #vier, #vijf, #zes, #zeven, #acht, #negen {
	display:table-cell;
}

et ensuite dans ta page html :

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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>tara.fr</title>
<link href="CSS.css" rel="stylesheet" type="text/css"> /*tu fait appel à ton fichier css*/
</head>
 <body> //attention au espace tu en avais un apres body
<div class="container">
 <div class="box">
	  <div id="een"><img src="immage/een.png">1</div>
	  <div id="twee"><img src="immage/twee.png">2</div>
	  <div id="drie"><img src="immage/drie.png">3</div>
    </div>
 <div class="box">
      <div id="vier"><img src="immage/vier.png">4</div>
      <div id="vijf"><img src="immage/vijf.png">5</div>
      <div id="zes"><img src="immage/zes.png">6</div>
    </div>
 <div class="box">
      <div id="zeven"><img src="immage/zeven.png">7</div>
      <div id="acht"><img src="immage/acht.png">8</div>
      <div id="negen"><img src="immage/negen.png">9</div>
    </div>
  </div>
  </body>
</html>

Cordialement.

Erreurs d'affichage sur petits écrans

HTML

Vue hybride

Discussions similaires

Partager

Partager