Discussion :

[guismoman33]

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

[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).

[guismoman33]

J'ai déja mis les mesures dans le html...

[osia1]

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

[guismoman33]

Code :

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

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 :

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

[Mr Pink Eyes]

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

[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