Bonjour,
D'accord avec
a écrit :
une incompréhension du positionnement absolu
On peut peut-être le répéter ?
Pour que ce positionnement corresponde à ce qu'on en attend, il faut que les éléments qui vont recevoir les blocs positionnés en “absolute” soient positionnés en “relative”.
On peut donc concevoir que ton choix peut fonctionner.
Mais il faut que tu adaptes.
Je te propose donc de créer un bloc (en “relative”) contenant l'image “pellicule.gif” (dont tu pourrais aussi adapter les dimensions).
Ensuite, dans ce bloc, un autre bloc (en “absolute") qui contiendra la vidéo.
Fais des essais avec
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Lecteur#2</title>
<style type="text/css">
html, body {
text-align : center;
}
#gauche {
float : left;
}
#droite {
float : right;
}
#separ {
clear : both;
}
img {
border : none;
border : 0;
}
.bloc_image_fond {
position : relative;
width : 421px;
height : 355px;
margin : 0;
padding : 0;
/*background : transparent url(http://jmcizo2.free.fr/pellicule.gif) left top no-repeat;*/
}
.bloc_video {
position : absolute;
width : 358px;
height : 254px;
left : 30px;
top : 52px;
background-color : #00f;
}
</style>
</head>
<body style="background-color: rgb(255, 102, 0);">
<div id="gauche">
<div class="bloc_image_fond">
<img style="width: 421px; height: 355px;" alt="pellicule" title="pellicule" src="http://jmcizo2.free.fr/pellicule.gif" /><br>
<div class="bloc_video">
<embed type="application/x-mplayer2" showcontrols="3" src="Allevard.wmv" autostart="false" height="254" width="358">
</div>
</div>
<div class="bloc_image_fond">
<img style="width: 421px; height: 355px;" alt="pellicule" title="pellicule" src="http://jmcizo2.free.fr/pellicule.gif" /><br>
<div class="bloc_video">
<embed type="application/x-mplayer2" showcontrols="3" src="Allevard.wmv" autostart="false" height="254" width="358">
</div>
</div>
</div>
<div id="droite">
<div class="bloc_image_fond">
<img style="width: 421px; height: 355px;" alt="pellicule" title="pellicule" src="http://jmcizo2.free.fr/pellicule.gif" /><br>
<div class="bloc_video">
<embed type="application/x-mplayer2" showcontrols="3" src="Allevard.wmv" autostart="false" height="254" width="358">
</div>
</div>
<div class="bloc_image_fond">
<img style="width: 421px; height: 355px;" alt="pellicule" title="pellicule" src="http://jmcizo2.free.fr/pellicule.gif" /><br>
<div class="bloc_video">
<embed type="application/x-mplayer2" showcontrols="3" src="Allevard.wmv" autostart="false" height="254" width="358">
</div>
</div>
</div>
<div id="separ"></div>
<!--
<p>Kev&Mat<br>
Allevard 2007</p>
<p><a href="../Video2.html">
<img style="width: 421px; height: 355px;" alt="pellicule" title="pellicule" src="http://jmcizo2.free.fr/pellicule.gif" /></a><br>
</p>
<div style="position: absolute; z-index: 1; width: 238px; text-align: left; height: 261px; top: 123px; left: 375px;">
<embed type="application/x-mplayer2" showcontrols="3" src="Allevard.wmv" autostart="false" height="254" width="358">
</div>
<div>
<a href="index.html">Retour Accueuil</a>
</div>
<p>
<a href="../Video2.html">
<img style="border: 0px solid ; left: 0px; top: 0px; width: 421px; height: 355px;" alt="pellicule" title="pellicule" src="http://jmcizo2.free.fr/pellicule.gif" /></a></p>
<div style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; text-align: left;">
<br>
<br>
<br>
</div>
<div style="position: absolute; text-align: justify; z-index: 1; width: 242px; height: 220px; top: 536px; left: 377px;">
<embed type="application/x-mplayer2" showcontrols="2" src="Maurice.wmv" autostart="false" height="254" width="358">
</div>
-->
<div>
Île Maurice 2007<br>
Réalisé au mois d'avril 2007 – Séquence sensation à l'Île Maurice
</div>
</body>
</html>
J'ai créé 2 colonnes en float pour que tu puisses vérifier que ça suit le redimensionnement.
On peut en voir
un exemple pendant quelques jours.
Je ne me suis pas attardé sur le contenu des <embed>.
À tester.
+ Le W3C rechignera quand-même à valider ton code.
Modifié par Gihef (26 Aug 2007 - 12:47)