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 :
- <!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&loop=1&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
