Probleme de disposition en CSS

Version imprimable

Bonjour,

J'ai un petit probleme concernant la disposition en CSS
Mon but est de créer une petite page avec les éléments suivants :
1 image
1 player
1 synopsis
1 cadre langue

J'aimerais ensuite les disposer de la manière :
L'image et le player sont l'un au dessus de l'autre puis le cadre du sypnosis et le cadre langue doit être l'un au dessus de l'autre sur une colonne à coté.

Voici le code qui permet de faire ceci :

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans titre</title>
<style type="text/css">
.image {
height: 180px;
width: 240px;
margin-left:115px;
margin-top: 70px;
float:left;
}
.synopsis {
width:350px;
height:240px;
margin-left:30px;
margin-top: 70px;
/*background-color:#FFFF00;*/
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
float:left;
}
.clearboth { clear: both; }
.video {
height: 320px;
width: 240px;
margin-left:45px;
margin-top: 15px;
float:left;
}
.langue {
width:350px;
height:240px;
margin-left:100px;
margin-top: 15px;
/*background-color:#FFFF00;*/
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
float:left;
}
</style>
<body background="fond_popup.png">
 
<div class="image">
<img name="img" src="test.png" alt="" border="2">
</div>
<div class="synopsis">
	<center><b>SYNOPSIS</b></center>
</div>
<br class="clearboth">
<div class="video">
<object type="application/x-shockwave-flash" data="player_flv.swf" width="320" height="240">
	<param name="movie" value="player_flv.swf" />
    <param name="FlashVars" value="flv=test.flv&amp;loop=1&amp;autoplay=1" />
</object>
</div>
 
<div class="langue">
	<input type="button" value="Fermer" onClick="window.close();" name="button">
</div>
 
</body>
</html>

Maintenant j'aimerais agrandir le cadre synopsis et diminuer le cadre langue.
Malheureusement lorsque j'augmente la taille du cadre synopsis, la vidéo est aussitôt décalée .

Comment puis je faire cela ?
Merci

Je ne connais pas flash mais si tu utilises un width="100%", le vidéo remplit-t-il synopsis?

Exemple du width :
Code:

1 2 3 4 5 <object type="application/x-shockwave-flash" data="player_flv.swf" width="100%" height="240"> <param name="movie" value="player_flv.swf" /> <param name="FlashVars" value="flv=test.flv&loop=1&autoplay=1" /> </object>
Je n'ai pas pu tester plus avant puisque je ne dispose pas du vidéo ni de/s images/s.

Bonsoir

Citation:

Envoyé par johnson95

Cette explication aurait put être plus précise... Ce que j'ai compris c'est que ton problème est que le fait d'augmenter la hauteur du cadre synopsis entraine le décalage vers le bas du cadre vidéo ?

Tu peut changer la structure de ta page ainsi alors :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Document sans titre</title>
<style type="text/css">
.image {
height: 180px;
width: 240px;
margin-left:30px;
margin-top: 70px;
 
background-color:#dddd00;
}
.synopsis {
width:350px;
height:340px;
margin-left:30px;
margin-top: 70px;
background-color:#FFFF00;
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
 
.clearboth { clear: both; }
 
.video {
height: 320px;
width: 240px;
margin-left:30px;
margin-top: 15px;
 
background-color:#aadd00;
}
.langue {
width:350px;
height:240px;
margin-left:30px;
margin-top: 15px;
/*background-color:#FFFF00;*/
border-left:1px solid #000000; /* couleur du cadre */
border-right:1px solid #000000;
border-bottom:1px solid #000000;
border-top:1px solid #000000;
}
</style>
<body background="fond_popup.png">
 
<div style="float:left;border:1px solid red;">
 
  <div class="image">image
<img name="img" src="img1.jpg" alt="" border="2">
  </div>
  <div class="video">video
<object type="application/x-shockwave-flash" data="player_flv.swf" width="320" height="240">
	<param name="movie" value="player_flv.swf" />
    <param name="FlashVars" value="flv=test.flv&amp;loop=1&amp;autoplay=1" />
</object>
</div></div>
 
<!--br class="clearboth"-->
 
<div style="float:left;border: 1px solid blue;">
  <div class="synopsis">synopsis
	<center><b>SYNOPSIS</b></center>
  </div>
 
 
  <div class="langue">langue
	<input type="button" value="Fermer" onClick="window.close();" name="button">
  </div>
</div>
 
</body>
</html>

Ceci te donne un modèle de structure, à toi d'adapter les détails...