[HTML] Problème de mise en page lors de la première ouverture

Version imprimable

08/04/2008, 13h12
guismoman33

[HTML] Problème de mise en page lors de la première ouverture

Bonjour j'ai un petit problème dans ma mise en page...Quand j'ouvre un lien la photo n'est pas à la bonne taille et mon footer est decaller si je reclique sur le même lien tout ce met très bien.... Avez vous une idée...
08/04/2008, 14h08
MasterOfChakhaL

Salut,

Il est possible que lorsque tu affiches la page pour la première fois, ton image n'étant pas dans le cache, le navigateur ne sait pas quelles dimensions donner à ton image.
Le reste de la mise en page se fait malgré cette inconnue, ce qui pourrait expliquer l'écart par rapport à ce que tu attends.

Si le problème vient bien de là, il te suffira de définir explicitement les dimensions de ton image.
Soit en html avec les attributs width et height (ne pas mettre d'unité), soit en css, avec les règles width et height (mettre les unités pour les dimensions).
08/04/2008, 14h10
guismoman33

J'ai déja mis les mesures dans le html...
08/04/2008, 14h13
osia1

envoi nous ton code html et css pour que l'on puisse analyser exactement le problème s'il te plaît.

Code:

1
2
3
4
5
6
7
8
9
<h2>ahah</h2>
<img src="image\5.jpg" height=50% width=50%>
<br>
Voici la page qui affichera les donnée
 
<h2>Les Machines</h2>
<img src="image\6.jpg" height=45% width=45%>
<br>
Description machine.

et le css

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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
html, body {
        font-size : 14px;
	height: 100%;
	margin: 0;
	background: #fff url(img/bg.jpg);
	font: 90% Arial;
 
	}
 
div#global {
	min-height: 100%;
	width: 750px;
	padding: 0 10px;
	margin: 0 auto;
	position: relative;
	padding: 0 10px;
	background: url(img/global.png) center repeat-y;
	}
 
a {
	color: #023592;
	font-weight: bold;
	}
a:hover {
	color: black;
	}
 
div#header {
	background: #7fcf2e url(img/header.jpg) no-repeat;
	color: #fff;
	height: 201px;
	position: relative;
	}
 
div#header h1 {
    margin: 0;
	position: absolute;
	bottom: 10px;
	left: 30px;
	font: Lucida Sans Unicode;
	}
 
div#center {
	padding-bottom: 50px;
	overflow: auto;
}
 
div#content {
	float: left;
	width: 530px;
	margin-left: 10px;
	}
 
div#content h2 {
	padding-left: 35px;
	background: #fff url(img/titre.png) left center no-repeat;
	color: #023592;
	}
 
div#content h3 {
	color: #023592;
	font-variant: small-caps;
	}
 
 
 
ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
 
ul#menu li a {
	display: block;
	height: 30px;
	line-height: 15px;
	background: url(img/fond_lien.png) no-repeat right top;
	padding-left: 30px;
	margin: 2px 0;
	border-bottom: 1px solid #023592;
	color: #023592;
	font: small-caps 1.1em/30px Lucida Sans Unicode,serif;
	text-decoration: none;
}
ul#menu li a:hover {
	background-position: left bottom;
	color: yellow;
        background-color : blue
}
 
div#sidebar {
	float: right;
	width: 200px;
	background: url(img/fond_side.gif) no-repeat bottom;
	}
 
div#sidebar h3, div#footer p, div#sidebar p  {
	padding: 0 10px;
	}
 
div#footer {
	position: absolute;
	width: 97.4%;
	bottom: 0;
	background: #7fcf2e url(img/footer.png) repeat-x;
	color: #fff;
	margin: 2px 0;
	font-size: 0.9em;
	text-align: right;
	}

08/04/2008, 14h49
Mr Pink Eyes

Citation:

Envoyé par MasterOfChakhaL

Si le problème vient bien de là, il te suffira de définir explicitement les dimensions de ton image.
Soit en html avec les attributs width et height (ne pas mettre d'unité), soit en css, avec les règles width et height (mettre les unités pour les dimensions).

Ce que tu fais c'est que tu mets width=50% c'est à dire que tu indique que ton image ne doit s'afficher qu'à 50% de sa taille réelle. Ce qui ne change pas le problème que le navigateur ne connait pas la dimension. Pour une image 200px*200px (à titre d'exemple), tu dois marquer width=100 height=100
08/04/2008, 14h55
osia1

exact il faut que tu fixe la taille selon ton image, si tu veux le faire "automatiquement" il faut que l'image soit déja dans le cache comme l'a dit Mr Pink eyes