Scroll dans DIV incompatible avec IE

Question

Larion

10 Mar 2006 à 07:45

Bonjour,

Cela fait 2 semaines que je travaille sur une page web.
Tout semble fonctionner sous IE et FireFox.
Le problème vient des liens ancrés lorsque l'on clique dessus : sous FireFoxe c'est OK, mais sous IE par moment toute la page remonte de la place de l'entête ???
Avez-vous une solution ?

A noter : si l'on supprime de Cadre droit, tout fonctionne bien.

Voici la page complete avec le CSS :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>VirtualDub Le Tuto</TITLE>
<META http-equiv=Content-Type content="application/xhtml+xml; charset=UTF-8"> 

<STYLE type="text/css">
/***********************************************************/
/*********** LAYOUT GAUCHE CENTRE DROIT HEAD FOOt **********/
/***********************************************************/
* {PADDING:0; MARGIN:0; BORDER-WIDTH:0;}

BODY,HTML { OVERFLOW:hidden; HEIGHT:100%; max-height:100%;}
HTML { FONT-SIZE:76%; BACKGROUND:#FFF; FONT-FAMILY:georgia,"palatino linotype","times new roman",serif; }

#head,#foot {POSITION:absolute; Z-INDEX:5; LEFT:0px; WIDTH:100%; BACKGROUND:#E9EEF2;}
#head {COLOR:#9D4E54; TOP:0px;   HEIGHT:80px; FONT-SIZE:4em; BORDER-BOTTOM:#9D4E54 1px dotted; TEXT-ALIGN:left;}
#foot {COLOR:#9D4E54; BOTTOM:0px;HEIGHT:25px;  FONT-SIZE:0.8em; TEXT-ALIGN:right; BORDER-TOP:#9D4E54 1px dotted;}

#Box_L,#Box_C,#Box_R {POSITION:absolute; HEIGHT:auto; TOP:0px; BOTTOM:0px; BORDER-TOP:#FFF 80px solid; BORDER-BOTTOM:#FFF 25px solid;}
#Box_L { Z-INDEX:4; LEFT:0px;  WIDTH:200px; MAX-WIDTH:200px; TEXT-ALIGN:left;}
#Box_C { Z-INDEX:2; LEFT:0px;  WIDTH:100%;                   TEXT-ALIGN:center; }
#Box_R { Z-INDEX:4; RIGHT:0px; WIDTH:200px; MAX-WIDTH:200px; TEXT-ALIGN:justify;}

#Menu_L,#Menu_C,#Menu_R {POSITION:relative; height:100%; OVERFLOW:auto; PADDING:0 10px 0 10px; }
#Menu_L {BACKGROUND:#EDE4D6; BORDER-RIGHT:#9D4E54 1px dotted; FONT-SIZE:12px;}
#Menu_C {BACKGROUND:#F3D9BC; MARGIN:0 200px 0 0; FONT-SIZE:12px;}
#Menu_R {BACKGROUND:#E5DAD4; BORDER-LEFT:#9D4E54 1px dotted; FONT-SIZE:11px;}


/**********************************/
/*********** LIENS LAYOUT *********/
/**********************************/
#Box_L p {MARGIN:9px 0 10px 0;}
#Box_L h2{MARGIN:0 0 2px 0; FONT-SIZE:18px; FONT-WEIGHT:bold; COLOR:#444; BORDER-BOTTOM:#FFF 1px solid;}
#Box_L a:link				{ color:#525C88; text-decoration:none; display:block;  PADDING:0; }
#Box_L a:visited,#Box_L a:active	{ color:#336699; text-decoration:none; background:#F3EDE3; display:block;  font-style:italic; PADDING:0;}
#Box_L a:hover				{ color:#336699; text-decoration:none; background:#DEDFE7; PADDING:0 0 0 5px;}

#Box_R p{MARGIN:9px 0 15px 0;}
#Box_R h2{MARGIN:0 0 2px 0; FONT-SIZE:17px; FONT-WEIGHT:bold; COLOR:#444; TEXT-ALIGN:center; BORDER-BOTTOM:#FFF 1px solid;}
#Box_R a:link				{ color:#525C88; text-decoration:none; FONT-WEIGHT:bold; MARGIN:5px 0 0 0; display:block; PADDING:0; }
#Box_R a:visited,#Box_R a:active	{ color:#336699; text-decoration:none; FONT-WEIGHT:bold; MARGIN:5px 0 0 0; display:block; font-style:italic; PADDING:0;}
#Box_R a:hover				{ color:#336699; text-decoration:none; FONT-WEIGHT:bold; MARGIN:5px 0 0 0; background:#DEDFE7; PADDING:0 0 0 5px;}

#Box_C p:first-letter {FONT-WEIGHT:bold;}
#Box_C p{text-indent:15px; MARGIN:5px 5px 5px 5px; TEXT-ALIGN:justify;}
#Box_C .chapitre{MARGIN:0 2% 55px 2%;TEXT-ALIGN:left;display:block;width:auto;BACKGROUND:#F9DFC2;} 
#Box_C h2:first-letter {FONT-SIZE:17px}
#Box_C h2{MARGIN:10px 2% 8px 2%; PADDING:2px 0 2px 25px; FONT-SIZE:15px; FONT-WEIGHT:bold; letter-spacing:10px; COLOR:#333; BACKGROUND:#E9C5A1; TEXT-ALIGN:left; BORDER-TOP:#FFF 1px solid; BORDER-BOTTOM:#FFF 1px solid;}
#Box_C h3{MARGIN:10px 0px 8px 0px; PADDING:0px 25px 0px 25px; FONT-SIZE:14px; FONT-WEIGHT:bold; letter-spacing:5px;  COLOR:#333; BACKGROUND:#E9C5A1; TEXT-ALIGN:left; BORDER-BOTTOM:#FFF 1px solid; display:inline;}
#Box_C a:link				{ color:#800080; }
#Box_C a:visited,#Box_C a:active	{ color:#C800C6; font-style:italic;}
#Box_C a:hover				{ color:#C800C6; }

#Box_C .lien1{TEXT-ALIGN:center; display:block; BORDER-BOTTOM:#F9DFC2 5px solid;}
#Box_C .lien1 a:link	{display:block;color:#525C88; text-decoration:none; }
#Box_C .lien1 a:visited {display:block;color:#336699; text-decoration:none; }
#Box_C .lien1 a:active	{display:block;color:#336699; text-decoration:none; }
#Box_C .lien1 a:hover	{display:block;color:#FFFFFF; text-decoration:none; }

#head a:link,#head a:visited,#Box_C a:active { color:#9D4E54; text-decoration:none;}
#head a:hover { color:#C67A7A; text-decoration:none;}

/**********************************/
/********** LAYOUT CENTRE *********/
/**********************************/
PRE{PADDING:0 0 0 10px; MARGIN:5px 5px 5px 5px; BORDER-STYLE:dotted; BORDER-COLOR:#FFF; BORDER-WIDTH:1px; }
PRE:first-line{FONT-WEIGHT:bold; text-decoration:underline;}

/* Inset 3D Raised */
.raised { background:transparent; width:auto;  margin:10px auto; TEXT-ALIGN:center; } 
.raised h1 {font-size:2em; color:#FBF0E5; letter-spacing:5px; margin:0 10px;}
.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; height:1px; overflow:hidden;}
.raised .b2 {background:#DDB187; border-left:1px solid #FBF0E5; border-right:1px solid #EBB37D;}
.raised .b3 {background:#DDB187; border-left:1px solid #FBF0E5; border-right:1px solid #DD8B52;}
.raised .b4 {background:#DDB187; border-left:1px solid #FBF0E5; border-right:1px solid #A16327;}
.raised .b4b{background:#DDB187; border-left:1px solid #EBB37D; border-right:1px solid #915923;}
.raised .b3b{background:#DDB187; border-left:1px solid #DD8B52; border-right:1px solid #915923;}
.raised .b2b{background:#DDB187; border-left:1px solid #A16327; border-right:1px solid #915923;}
.raised .boxcontent {display:block;  background:#DDB187; border-left:1px solid #FBF0E5; border-right:1px solid #915923;}
.raised .b1 {margin:0 5px; background:#FBF0E5;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#915923;}

/**********************************/
/********** LAYOUT HEADER *********/
/**********************************/
#head H1{MARGIN:0 0 0 5px; FONT-SIZE:45px; FONT-WEIGHT:bold;}
#head H2{MARGIN:0 0 0 5px; FONT-SIZE:11px}
#head #Cadre1{MARGIN:5px 0 0 5px; TEXT-ALIGN:center; WIDTH:300px}

/**********************************/
/********** LAYOUT FOOT   *********/
/**********************************/
#foot p{ MARGIN:5px 5px 0 0}

</STYLE>

<!--[if IE]>
<STYLE type="text/css">
#BOX_C,#BOX_R {HEIGHT:100%;}
</STYLE>
<![endif]-->

</HEAD>

<BODY>


<DIV id=Box_C >
<DIV id=Menu_C >


<DIV class=raised><B class=top><B class=b1></B><B class=b2></B><B class=b3></B><B class=b4></B></B>
<DIV class=boxcontent><H1>VirtualDub : L'&Eacute;dition Vidéo</H1></DIV>
<B class=bottom><B class=b4b></B><B class=b3b></B><B class=b2b></B><B class=b1b></B></B></DIV>


<A name=introduction></A>
<H2>PR&Eacute;HAMBULE</H2>
<DIV class=chapitre >
<P>VirtualDub est un logiciel d'édition et de capture audio et vidéo. Gratuit, léger et de bonne qualité, virtualdub est indispensable à tout amateur de manipulation vidéo.
- Les différentes versions : VirtualDub, Nandub, VirtualDubMod ... 

<P>
Après la création de VirtualDub, logiciel faisant référence dans le domaine de l'audio/vidéo, 
une succession de programme dérivé a donné naissance. Voici les plus représentatifs : 

<P>
<U>VirtualDub</U> : VirtualDub est un programme conçu pour le traitement rapide et puissant d'AVI/ASF/MPEG vers AVI. 
Vous pouvez améliorer l'image par de nombreux filtres. Le flux audio peut être extraite, ou être inséré. 
VirtualDub a la capacité de couper/coller un Avi sans recompression VirtualDub permet de capturer la vidéo. 

<P>
<U>VirtualDubMod</U> : identique à VirtualDub mais permet de créer et de gérer des Ogm 
Et gère de multiple flux audio exotique : Ogg, Mp3 Cbr&amp;Vbr, Ac3 
On peut également créer plusieurs pistes audio 

<P>
<U>VirtualDub VCR + SYNC</U> : dédié à la capture vidéo via votre carte d'acquisition 

<P class=lien1>
<A href="#joindre">Joindre avec VirtualDub</A>
<A href="#supprimer">Supprimer avec VirtualDub</A>
<A href="#extraction">Extraction Audio avec VirtualDub</A>
<A href="#multiplexer">Multiplexer l'Audio et la Vidéo avec NanDub</A>
<A href="#recompresser">Recompression Audio Vidéo avec VirtualDub</A>
<A href="#conteneur">Conversion de Conteneur avec VirtualDubMod</A>
<A href="#synchroniser">Synchronisation avec VirtualDub</A>
<A href="#restaurer">Correction des erreurs vidéo avec VirtualDub</A> 
<A href="#info">Info vidéo avec VirtualDub</A>
<A href="#automatiser">Automatiser avec VirtualDub</A>
<A href="#ameliorer">Améliorer le visuel avec VirtualDub</A>
<A href="#capture">Acquisition carte vidéo avec VirtualDub</A>
</P>
</DIV>


<A name=joindre></A>
<H2>JOINDRE DEUX VID&Eacute;O</H2>
<DIV class=chapitre>
<P>Voici la procédure pour coller deux fichiers *.avi sans recompression : 
<PRE>
Avec Virtualdub procédez de la manière suivante
» File / Open video file 
» File / Append AVI segment... 
» Vidéo / Direct stream copy 
» Audio / Direct stream copy 
» File / Save as AVI...
</PRE>
</DIV>


<A name=supprimer></A>
<H2>SUPPRIMER UNE SC&Egrave;NE</H2>
<DIV class=chapitre>
<H3>Supprimer A/V</H3>
<P>...

<H3>Supprimer Video</H3>
<PRE>
Avec Virtualdub
» File / Open video file 
» Audio / Direct stream copy 
» Video / Direct stream copy 
» Video / Select range 
- Length : renseigner dans Time(ms) la durée de la vidéo que vous désirer garder 
- Offset audio to maintain a/v syn : cocher 
- Cut off audio when video stream ends : décoché 
» File / Save as AVI... 
</PRE>

<H3>Supprimer Audio</H3>
<P>...

<H3>Supprimer le générique de fin en gardant la bande son</H3>
<P>...
</DIV>



<A name=extraction></A>
<H2>EXTRACTION AUDIO</H2>
<DIV class=chapitre>
<P>On peut extraire d'un clip tout les formats audio possible : 
<PRE>
Avec Virtualdub
» File / Open video file 
» File / Save WAV...
</PRE>
</DIV>


<A name=multiplexer></A>
<H2>MULTIPLEXER AUDIO &amp; VID&Eacute;O</H2>
<DIV class=chapitre>
<P>Avec VirtualDub, mais surtout avec VirtualDubMod et NanDub, on peut facilement fusionner un fichier *.avi avec un fichier audio multiformat : 
<PRE>
Avec VirtualDub
» File / Open video file 
» Audio / WAV Audio... 
» Vidéo / Direct stream copy 
» Audio / Direct stream copy 
» File / Save as AVI...
</PRE>
</DIV>


<A name=recompresser></A>
<H2>RECOMPRESSER AUDIO VID&Eacute;O</H2>
<DIV class=chapitre>
<P>Votre flux audio et/ou vidéo n'est pas compressé, voici sous virtualdub les procédures pour compresser le flux : 
<H3>Compression Audio</H3>
<PRE>
Avec VirtualDub
» File / Open video file 
» Video / Direct stream copy 
» Audio / Full processing mode 
» Audio / Conversion 
» Audio / Compression 
» File / Save as AVI... 
</PRE>

<H3>Compression Vidéo</H3>
<PRE>
Avec VirtualDub
» File / Open video file 
» Audio / Direct stream copy 
» Video / Full processing mode 
» Video / Compression 
» File / Save as AVI... 
</PRE>

<H3>Compression Audio/Vidéo</H3>
<PRE>
Avec VirtualDub
» File / Open video file 
» Audio / Full processing mode 
» Audio / Conversion 
» Audio / Compression 
» Video / Full processing mode 
» Video / Compression 
» File / Save as AVI... 
</PRE>
<P>
Lors du choix de la fréquence dans "Audio / Conversion", veillez à sélectionner un codec de même fréquence dans "Audio / Compression". 
Sinon VirtualDub créera une piste audio avec un son accéléré ou plus lent.

</DIV>



<A name=synchroniser></A>
<H2>SYNCHRONISER</H2>
<DIV class=chapitre>
<H3>Synchroniser 1</H3>
<P>
- Le symptôme : Au début du film, tout se passe bien. Mais au fur et à mesure que le temps se déroule, 
un décalage de plus en plus important se fait ressentir, entre le son et l'image. 
On a à faire à une désynchronisation classique. 

<P>
- La cause : Le flux audio et vidéo ne dure pas exactement de la même durée. Cela provient généralement pendant la recompression audio. 
Le CoDec DivX Audio, par exemple, donne une piste plus longue que prévue. 
- Le principe : avec virtualdub, on devra modifier le nombre d'image par seconde (25fps en principe). 
Si on diminue ce ratio, la piste vidéo s'allongera et inversement, si on augmente, le flux vidéo s'écourtera. 

<PRE>
Procédure Automatique sous VirtualDub
» Video / Frame Rate... 
Puis sélectionner (fps calculer par Virtualdub) 
Change so video and audio durations match 
» Video / Direct stream copy 
» Audio / Direct stream copy 
» File / Save as AVI... 
</PRE>

<PRE>
Procédure Manuelle avec VirtualDub
» Video / Frame Rate... 
Puis sélectionner et paramètrer (par exemple) 
Change to [24.999] frames per second 
» Video / Direct stream copy 
» Audio / Direct stream copy 
» File / Save as AVI... 
</PRE>

<H3>Synchroniser 2</H3>
<P>
- Le symptôme : Dés le début de la visualisation du film, on note un décalage entre le son et l'image. 

<P>
- La cause : Généralement, lorsque cela se produit, un logo est visible au début du film. Lors du rip, l'audio du logo a été oublié. 
De sort que le son du film commence dés la diffusion du logo et non après. 

<P>
- Le principe : Avec virtualdub retarder la diffusion de la piste sonore en provocant un retard sur ce dernier. 

<PRE>
Procédure Manuelle avec VirtualDub
Dans Audio / Interleaving... 
Configurer "Delay audio track by" 
</PRE>
<P>
Cette valeur est en millième de seconde (1000ms=1s) et peut être négative ou positive ... 


<H3>Synchroniser 1&amp;2</H3>
<P>
- Le symptôme : On a les deux défauts vus au-dessus. C'est à dire que dés le début on note un décalage entre le son et l'image, 
décalage qui s'accentue en s'approchant de la fin du film. 

<P>
- La Procédure Manuelle : se reporter à la procédure "Synchroniser 2" pour synchroniser le début 
puis se référer à la procédure "Synchroniser 1" pour synchroniser la fin.


<H3>Cas du décalage sur les Vbr</H3>
<P>...
</DIV>


<A name=restaurer></A>
<H2>RESTAURER UNE VID&Eacute;O</H2>
<DIV class=chapitre>
<P> CORRECTION DES ERREURS :
Certain clip (*avi) plante au plein milieu lors de sa visualisation. Pour régler ce problème sous virtualdub, 
suivre la procédure suivante : 

<PRE>
Avec VirtualDub
» File / Open video file 
» Video / Scan video stream for errors... 
» Vidéo / Direct stream copy 
» Audio / Direct stream copy 
» File / Save as AVI...
</PRE>
</DIV>


<A name=info></A>
<H2>INFO</H2>
<DIV class=chapitre>
<P>Pour connaître toutes les information concernant les flux audio et vidéo avec virtualdub : 
<PRE>
Avec VirtualDub
» File / Open video file 
» File / File Information...
</PRE>
</DIV>



<A name=automatiser></A>
<H2>AUTOMATISER</H2>
<DIV class=chapitre>
</DIV>


<A name=ameliorer></A>
<H2>AM&Eacute;LIORER</H2>
<DIV class=chapitre>
<P>
Comment installer : 
- VirtualDub possède une quantité de filtre que vous pouvez visualiser dans [Vidéo] [Filters...] [Add] 
- Mais vous pouvez compléter cette liste en téléchargant d'autre filtre "Donald Graft" 
- Pour les utiliser sous VirtualDub, placer les filtres dans le répertoire "plugins" de VirtualDub 

<P>
Quels filtres pour VirtualDub : 
- Filtre "Deinterlacer" pour déentrelacer : concerne les résolutions supérieure à 352*288. 
- Filtre "Chroma Noise Reduction" pour Vhs : supprime les anomalies visuelles liés à ce support 
- Filtre "Smart Smoother" pour ajouter un flou 
- Filtre "Smart Resize" pour réduire : il ne sert à rien de faire un divx en 720*576 
- Filtre "Null Transform" pour couper : permet d'enlever les bandes noires par exemple 

<P>
Remarque sur l'ordre d'enchaînement des filtres : 
- En terme de qualité : il faut mieux utiliser le filtre "Deinterlacer" avant "Smart Resize". 
- En terme de rapidité : il faut mieux faire un "crop" avant tout autre filtre.

</DIV>


<A name=conteneur></A>
<H2>CONVERSION DE CONTENEUR</H2>
<DIV class=chapitre>
<PRE>
Avec VirtualDubMod
» File / Open video file 
» File / Save as... 
- Nom du fichier 
- Type : *.mkv 
- Video mode : Direct stream copy 
- Enregister
</PRE>
</DIV>


</DIV>
</DIV>



<DIV id=foot >
<DIV style="position:absolute;left:5px;top:4px">
<A href="http://validator.w3.org" target='_blank'><IMG src="html2.png" ALT="Valid Html"></A>
<A href="http://jigsaw.w3.org/css-validator" target='_blank'><IMG src="css2.png" ALT="Valid CSS"></A>
</DIV>
<p>Copyright &copy;2006 HorizonPc ~ All rights reserved.
</DIV>




<DIV id=head >
<DIV id=Cadre1 >
<H1><A href="../index.html">HorizonPc</A></H1>
<H2><A href="../index.html">Le monde de l'Audio/Vidéo</A></H2>
</DIV>
</DIV>


<DIV id=Box_R >
<DIV id=Menu_R >

<P>
<H2>Du même Thème</H2>
<A href=01>» CoDec &amp; Conteneur</A>
<A href=02>» Graver sur CD</A>
<A href=03>» Lecteur</A>


<script type="text/javascript">
google_ad_client = "pub-4911732011339700";
google_ad_width = 160;
google_ad_height = 90;
google_ad_format = "180x90_0ads_al";
google_ad_channel ="";
google_color_border = "FDEFD2";
google_color_bg = "FDEFD2";
google_color_link = "0000CC";
google_color_url = "008000";
google_color_text = "000000";
</script>
<SCRIPT type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></SCRIPT>

<P>
<H2>Téléchargement</H2>
<A href="http://sourceforge.net/project/showfiles.php?group_id=9649" target='_blank'>» VirtualDub</A>
<A href="http://trad-fr.com/htm/trad/video.htm" target='_blank'>» VirtualDub (Fr)</A>
<A href="http://sourceforge.net/project/showfiles.php?group_id=65889" target='_blank'>» VirtualDubMod</A>
<A href="http://www.divx.com/?lang=fr" target='_blank'>» CoDec DivX</A>


<P>
<H2>F.A.Q</H2>
<A href="http://horizonpc.phpnet.org/phpBB2/virtualdub-vt622.html#1888" target='_blank'>» Forum</A>
<A href=22>» faq. 1</A>


<P>
<H2>Mises à jour</H2>
» 28/02/2006 : Création de la Page

</DIV>
</DIV>


<!--[if IE]>
<script>
document.getElementById('Menu_C').style.width="100%";
</script>
<![endif]-->
</BODY>
</HTML>

Modifié par Larion (11 Mar 2006 - 16:54)

Alan

10 Mar 2006 à 08:20

Bonjour Larion,

Tu devrais remplacer dans body, html

OVERFLOW:hidden;

par

overflow: auto;

Ce n'est qu'une rustine concernant ce problème. Sinon je pense qu'il doit y avoir pas mal d'erreurs sur ta page. Tu devrais la passer au validateur.

Bonne continuation Smiley smile

Modifié par Alan (10 Mar 2006 - 08:25)

Larion

11 Mar 2006 à 13:34

Bonjour Alan,

Merci pour cette reponse rapide. Smiley cligne

J'ai suivi ton conseil : mon code est maintenant valide "HTML 4.01".
J'ai mis à jour le code de mon premier poste.
J'ai toujours le même problème en cliquant sur les liens ancrés.

Sinon "overflow: auto;" semble fonctionné mais ne me convient pas puisque je souhaite caché ce scroll. (Je vais encore cherché dans cette direction).

Si vous avez une solution fiable et compatible sur tous navigateurs, je suis preneur.

Cordialement.

Alan

11 Mar 2006 à 13:52

Salut,

En copiant collant ton code, j'ai remarqué que la partie droite était inaccessible sour Firefox et Opera : je n'arrive à cliquer sur aucun lien.

Sinon j'ai lu l'autre jour que les ancres dans une zone srollable (via overflow) ne fonctionnait pas du tout avec Safari (cf ce ce message)
Modifié par Alan (11 Mar 2006 - 13:52)

Larion

11 Jun 2006 à 19:33

Bonjour,

J'ai réglé mon problème en supprimant "POSITION:relative;"
Chez moi, je n'ai plus aucun problème sous IE6 et FireFox1.5.
Et pour vous, et avec un autre navigateur ?

Cliquer Ici pour voir la maquette

Sujet clos

CSS et mise en forme, CSS3

Scroll dans DIV incompatible avec IE