Probleme de disposition en CSS

**johnson95** · 24/09/2008, 15h38

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 :

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

**Laplix** · 26/09/2008, 21h33

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

Exemple du width :

Code :

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

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&amp;loop=1&amp;autoplay=1" />
</object>

Je n'ai pas pu tester plus avant puisque je ne dispose pas du vidéo ni de/s images/s.

**12monkeys** · 26/09/2008, 22h42

Bonsoir

Envoyé par johnson95

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

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 :

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

Probleme de disposition en CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager