18041 sujets

Questions générales et questions de débutants

[Résolue] Problème de regénération de page contenant des vidéos !

Bonjour,
J'ai dernièrement refait le site web de l'entreprise ou je travail:
www.grouperybeaudoin.com

Mon problème est dans toutes mes pages contenant des vidéos. Voyez par vous-même:
http://www.grouperybeaudoin.com/2012/godet_tamiseur.html

Le problème est sous Internet Explorer seulement, quand je défile ma page, mes vidéos ''bug'' on dirai qu'il ne suive pas le défilement, autrement dit, le contenue de mon site overwrite mes vidéos. Pour la ramené à la normal, soit j'Actualise la page ou encore je la réduit puis la réouvre et le tout est correct.

Mes vidéos provienne directement de youtube via l'intégration.

Comment puis-je régler ce problème d'affichage ?

ps. désoler si le message n'est pas claire, j'espère que vous comprendrez en le voyant par vous même.


Merci
Modifié par jb_gryb (14 Sep 2012 - 19:08)
Je vous relance avec mon problème, je n'est toujours pas trouver d'explication et de solution à mon problème. Je précise que ce bug se produits seulement sur internet explorer, tester sur version 6 et plus.

Merci j'attend vos réponse.
Salut,

Difficile à dire...
Ce qui est bizarre, c'est que tu utilises des balises html5 (section, header, article) avec un doctype XHTML transitionnel.
Du coup, ce qui est sûr, c'est que IE doit avoir du mal à leur appliquer un style !

Tu devrais essayer en changeant le doctype (<doctype html>), en intégrant html5shiv ou modernizr pour déclarer les éléments en question (avec un petit commentaire conditionnel qui va bien) et enfin en utilisant un petit "reset" (normalize, html5doctor, eric meyer, yui, ...) pour styler par défaut ces mêmes éléments...

tm
Merci pour la réponse et l'intéret à mon problème,

Je ne suis pas sur de tout te suivre... Je débute en programmation donc pour résumer,
Oui j'utlise du Html5 et j'ai déja insérer le Html5shiv:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if lt IE 9]><script src="dist/html5shiv.js"></script><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


J'ai fais quelques recherche mais j'ai pas réponse et l'expliquation dont je cherche, selon mes recherche je devrais utilisé ce code, corrige moi si je me trompe:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />


J'ai aucun doute qu'il y à une différence, mais j'ignore complètement si cette synthax est la bonne pour ma situation.

Pouvez vous m'éclaicir un peu sur les fonctions doctype, Content, Content-type...

Merci
jb_gryb a écrit :
Oui j'utlise du Html5 et j'ai déja insérer le Html5shiv

Sorry, j'avais pas vu...
Il faut encore que tu définisses le rendu CSS de ces nouveaux éléments. Genre, au minimum :
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

jb_gryb a écrit :
je devrais utilisé ce code, corrige moi si je me trompe:

Juste ceci, c'est bien (à moins que tu ne veuilles servir du XML plutôt que du HTML).
<!DOCTYPE html>
<html>
<meta charset="utf-8">

Le Doctype permet de dire au moteur de rendu du navigateur comment interpréter ton HTML. Si tu utilises le vocabulaire et la syntaxe HTML5, il faut mettre un doctype HTML5...

Tu devrais avoir une intégration valide, mais bon... pas sûr que ça solutionne ton problème. Smiley ohwell

tm
Parfait merci Tm pour tes informations et conseils,
Je vais ajouter le rendu css, par contre est-ce nésessaire ? Avant de publier mon site j'ai essayer avec ce code et sans et j'avais aucune différence donc j'en est déduit que s'était peut-être optionnel.

J'ai fais les modifications dans le html:
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]><script src="dist/html5shiv.js"></script><![endif]-->
<meta charset="utf-8" />


Et dans le css:

@charset "utf-8";
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

Autres questions, ai-je besoin de déclarer : @charset "utf-8"; ?

Et pour revenir à mon premier problème, sa effectivement pas régler le problème.
Est-ce qu'il existe une fonction css ou java pour rafraichir la page après un scroll seulement ? Je sais qui a une fonction pour rafraichir toute la page au xx seconde mais dans mon cas ses seulement quand je fais défiler la page et uniquement si le vidéo est sur pause, si il joue, la le défilement fonctionne sans problème d'affichage.

j'attend vos réponse merci.
Modifié par jb_gryb (11 Sep 2012 - 16:46)
Re,

Perso, dans des cas pareils, j'essaie d'isoler le problème...
Une page basique, valide, sans fioritures ou scripts à gogo, avec les éléments posant problème.
Si cette page fonctionne, j'ajoute le reste au fur et à mesure. Jusqu'à ce que...

Ceci fonctionne chez moi en tout cas... Smiley sweatdrop

tm
Salut,

J'avais déjà eu un problème un peu similaire avec des vidéos Youtube, je l'avais résolu en rajoutant ce paramètre à mes vidéos: ?wmode=opaque.

En espérant que ça puisse t'aider
a écrit :


Re,

Perso, dans des cas pareils, j'essaie d'isoler le problème...
Une page basique, valide, sans fioritures ou scripts à gogo, avec les éléments posant problème.
Si cette page fonctionne, j'ajoute le reste au fur et à mesure. Jusqu'à ce que...


Merci Tm, J'ai trouver la source de mon problème, mon code html est bon, j'ai fait divers test en simplfiant ma page j'avais toujours le même problème donc j'ai supprimé le liens vers ma feuille de style css et voilà que le tout fonctionne, donc je vais revoir mon code css.

a écrit :
J'avais déjà eu un problème un peu similaire avec des vidéos Youtube, je l'avais résolu en rajoutant ce paramètre à mes vidéos: ?wmode=opaque.


Merci du conseil cela n'a pas fonctionné dans mon cas.
J'ai trouver la source du problème, c'est bien mon css:
html {
	height:100%;
	margin:0;
  	padding:0;
	background-size:cover;	
	background: -webkit-gradient(linear, left top, left bottom, from(#353535), to(#0e0e0e));
	background-image:-moz-linear-gradient(to bottom,#353535,#0e0e0e);
	background-image:-ms-linear-gradient(to bottom,#353535,#0e0e0e);
	background-image:-o-linear-gradient(to bottom,#353535,#0e0e0e);
	background-image:linear-gradient(to bottom,#353535,#0e0e0e);
	filter:progid:DXImageTransform.Microsoft.gradient(
	startColorstr='#353535',endColorstr='#0e0e0e', 
	GradientType=0);
	background-repeat:no-repeat;
	background-color:#0e0e0e;
	}


Le problème est mon dégrader : 
filter:progid:DXImageTransform.Microsoft.gradient(
	startColorstr='#353535',endColorstr='#0e0e0e', 
	GradientType=0);


Avez-vous une solution pour réparer ce problème tout en gardant mon dégrader ? Quand je l'enlève tout fonctionne super bien.


Merci
Sujet clos
Aller à