begin process at 2012 05 29 21:07:29
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript et le navigateur

 > 

Fonctionnement d'une propriété d'un navigateur

 > 

problème de positionnement de calques css et IE 6

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

problème de positionnement de calques css et IE 6

jeudi 28 août 2008 à 17:44:20 | problème de positionnement de calques css et IE 6

Justkill
Bonjour à vous,
je viens vous voir encore une fois pour avoir vos conseils éclairés. En effet, comme l'énonce le titre, j'ai un soucis de positionnement de mes div sous IE6. Même si la version 7 est sortie, la version 6 et selon les statistiques, beaucoup utilisée (25%). Je vous donne l'url du site en question :

www.location-a-cauterets.com

Sous firefox  et IE 7 y a aucun problème de positionnement. Cette question est je crois assez récurrente, mais trop souvent restée sans réponses. J'ai fait pas mal de recherche sans succès.

J'ai trois calques à replacer en fait, tous contenant du flash.

voir le screen : [ Lien ]

Ce que je voudrais c'est qu'au moins le site soit affiché correctement sous IE 6. JUste ça serait déjà grandiose. Je sais que c'est pas une mince affaire ça, mais si quelqu'un peut m'aider, ce serait cool.

Et puis au cas où, le code de la page index :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="05d+s7xnefMxuLacQi6HWT7lB3T4aeb5v/S2yEhseTQ=" />
<title> Location à Cauterets d'un appartement à moins de 400¤, tarifs très compétitifs, description, www.location-a-cauterets.com, location à la montagne, location 65110</title>
<!--Meta tag-->
<TITLE> Location d'appartement à Cauterets de Type 3 pour une à cinq personnes entre 300¤ et 400¤ par semaine, très proche des télécabines et de la cure thermale, emplacement</TITLE>
<META NAME="Keywords" CONTENT="Location d'appartement à Cauterets de Type 3 pour une à cinq personnes, appartement location cauterets, location à cauterets,moins de 400¤, pas cher, tarifs dégressifs, photos appartement, disponibilités, www.location-a-cauterets.com, louer à cauterets, location cauterets">
<META NAME="Description" CONTENT="Location d'appartement à Cauterets de Type 3 pour une à cinq personnes à moins de 400¤ la semaine">
<META NAME="Robots" CONTENT="index, follow, all">
<META NAME="Author" CONTENT="Justkill">
<META NAME="Reply-to" CONTENT="location-a-cauterets@laposte.net">
<META NAME="Identifier-URL" CONTENT="http://www.location-a-cauterets.com">
<META NAME="Generator" CONTENT="Bloc note">
<!--Fin Meta tag-->

<style type="text/css">
<!--

#pro_linedrop {
    position:absolute;
    left:0%;
    top:40%;
    width:100%;
    height:20%;
    z-index:10;
}

#apDiv2 {
position:absolute;
left:88px;
top:2px;
width:843px;
height:13px;
z-index:102;
}
#apDiv3 {
position:absolute;
left:115px;
top:21px;
width:800px;
height:250px;
z-index:102;
}
#apDiv1 {
position:absolute;
left:2%;
top:65%;
width:80%;
height:25%;
z-index:108;
background-color: #FFFFFF;
background-repeat:no-repeat;
width: 96%;
}

#contenu {
    position:absolute;
    margin-left:2%;
    top:60%;
    width:96%;
    height:95%;
    z-index:8;
font-family:Arial color:#000099;
}

#apDiv4 {
position:absolute;
left:53px;
top:31px;
width:422px;
height:205px;
z-index:107;
}
#apDiv5 {
position:absolute;
left:58px;
top:34px;
width:388px;
height:198px;
z-index:107;
}
.Style4 {
font-size: 18px;
text-align:center;
margin:2px 0px;
padding:0px;
font-weight: bold;
color: #000000;
}
#apDiv6 {
position:absolute;
left:5%;
top:5%;
width:50%;
height:40%;
z-index:108;
}
#Text {
    position:absolute;
    left:15%;
    top:0%;
    width:22%;
    height:8%;
    z-index:12;
}


#Neige {
position:fixed;
width:98%;
height:98%;
background-image:url(Neige/Neige.swf);
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
z-index:1;

}
#Images {
    position:absolute;
    left:1%;
    top:5%;
    width:60%;
    height:42%;
    z-index:12;
}
#Pub {
    position:absolute;
    left:45%;
    top:12%;
    width:40%;
    height:12%;
    z-index:12;
}
#Or {
    position:absolute;
    left:66%;
    top:22%;
    width:21%;
    height:20%;
    z-index:12;
}

#Compteur {
    position:absolute;
    left:80%;
    top:0%;
    width:15%;
    height:4%;
    z-index:31;
}
.Style7 {
    font-size: 13px;
    color: #0000FF;
    font-style: italic;
    font-weight: bold;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>

<!-- Début codage Menu -->

<div id="pro_linedrop">
  <object width="100%" height="100%">
    <param name="movie" value="Menu_flash/Menu.swf" />
    <param name="wmode" value="transparent" />
    <embed src="Menu_flash/Menu.swf" wmode="transparent" width="100%" height="100%"> </embed>
  </object>
</div>

<div id="Or"><a href="Or/index.php" target="_blank"><img src="Or/Or.png" border="0" width=100% height=100% alt="Laissez nous vos commentaires et impressions sur votre séjour, l'appartement et tout en général !"></a></div>
<div id="Compteur" align="right"><img src="http://www.easycounter.com/counter.php?justkill6666" height="14"
border="0"></a><span class="Style7">Visites</span></div>
<div id="Neige">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="100%">
<param name="movie" value="Neige/Neige.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="Neige/Neige.swf" width="100%" height="100%" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" ></embed>
</object></div>
<script type="text/javascript"> function setsize(h) { document.getElementById('contenu').style.height=h+'px'; } </script>
 
<div id"contenu">
  <iframe src="Pages/Accueil.html" id="contenu" name="contenu" width="98%" marginwidth=0% frameborder="0" marginheight=60% marginleft="2%" scrolling="no" marginbottom=10% allowTransparency="true"></iframe>
</div>
<div id="Text">
<a href="Pages/Accueil.html" target="contenu"></a>
<object width="100%" height="100%">
<param name="movie" value="TextBandeau/TextBandeau.swf" />
<param name="wmode" value="transparent" />
<embed src="TextBandeau/TextBandeau.swf" width="100%" height="100%" wmode="transparent" movie="TextBandeau/TextBandeau.swf"> </embed>
</object>
</div>

<div id="Images">

<!--URL utilisées dans l'animation-->
<!--texte utilisé dans l'animation-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("Cette page nécessite le fichier AC_RunActiveContent.js.");
} else {
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0','width','100%','height','100%','id','images','align','middle','src','images','quality','high','wmode','transparent','bgcolor','#ffffff','name','images','allowscriptaccess','sameDomain','allowfullscreen','false','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images' ); //end AC code
}
</script>
<noscript>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" name="images" width="100%" height="100%" align="middle" id="images">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="images.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /> <embed src="images.swf" quality="high" wmode="transparent" bgcolor="#ffffff" width="100%" height="100%" name="images" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" a href="Pages/Accueil.html" target="contenu"/>
</object>
</noscript>


</div>
<div id="Pub">
<div align="center"><span class="Style4">Location d'appartement à Cauterets de Type 3 pour une à cinq personnes à partir de 300¤ la semaine. </span></div>
</div>
<p>
</p>
<p><br />
</p>
</body>
</html>





Voilà je vous remerci, et comme d'habitude, une ou plusieurs personnes me permettront d'avancer avec leurs conseils.

Cordialement, et merci d'avance.
jeudi 28 août 2008 à 23:12:49 | Re : problème de positionnement de calques css et IE 6

PetoleTeam

Membre Club
Bonjour,
vite fait en regardant ton code...
<div id"contenu"> devrait plutôt être <div id = "contenu">

Beaucoup trop de positions sont données en pourcentage, risque de mauvais positionnement lié à l'interprétation du flux dans le document.

Un code allégé aurait été préférable pour une analyse...

Mets dans le style de tes div une border : 1px solid couleur  pour mieux te rendre compte de leurs positions dans le document

;O)
vendredi 29 août 2008 à 14:45:21 | Re : problème de positionnement de calques css et IE 6

Justkill
Merci de t'y intéresser Petoleteam. Si tu trouves qu'il y a trop de données en pourcentage c'est voulu et tout à fait normal. Je veux que mon site soit adaptable à l'écran de l'utilisateur, des div en taille fixene conviendraient donc pas.

Je crois que le problème provient de mes conteneurs. La position relative n'est pas connu sous IE 6 si j'ai bien compris . Alors voilà mes questions.

- Y a t'il un code javascript qui force IE 6 à faire des div avec une position relative?
- Peut-on faire un codage "conditionnel" pour IE 6?? du style <!-- if lte IE6--> codage..... <--Endif >    . Même si ce codage devra comporter des tailles fixes pour mes calques, et non des pourcentage.
- Et vous comment faites vous pour gérer votre site sous IE6?? J'essaie que ce site soit visible par le maximum de personnes.

Pour infos IE 6 et encore utilisé par 25% des internautes. Donc ce n'est pas négligeable. 
Cordialement.
vendredi 29 août 2008 à 23:31:41 | Re : problème de positionnement de calques css et IE 6

Justkill
Personne n'a une idée?? Je galère de trop!!!
samedi 30 août 2008 à 12:17:58 | Re : problème de positionnement de calques css et IE 6

PetoleTeam

Membre Club
Bonjour,
tout d'abord je tiens à préciser que je n'ai plus IE 6 depuis peu, donc je ne peut pas tester...

La position relative n'est pas connu sous IE 6 si j'ai bien compris
par défaut la position des DIVs est relative et ce quelque soit le navigateur IE 6 compris.

Peut-on faire un codage "conditionnel" pour IE 6??
Oui en utilisant par exemple un commentaire conditionnel pour insérer une feuille de style
<!--[if if lt IE 7]>
<link type="text/css" rel="stylesheet" href="styles-ie.css" />
<![endif]-->

Et vous comment faites vous pour gérer votre site sous IE6??
Un respect au mieux des régles CSS garanti, dans bien des cas, une homogénéïté d'affichage sous les différents navigateurs...

Commence peut être avec des dimensions fixes puis bascule petit à petit avec des pourcentages...

Un petit lien pour plein d'info à lire...

C'est en forgeant que l'on devient vachement fatigué...
;O)
samedi 30 août 2008 à 12:19:38 | Re : problème de positionnement de calques css et IE 6

PetoleTeam

Membre Club
Réponse acceptée !
petite coquille
 <!--[if lt IE 7]> ...et non <!--[if if lt IE 7]> .
;O)
samedi 30 août 2008 à 21:48:05 | Re : problème de positionnement de calques css et IE 6

Justkill
Réponse acceptée !
OK merci à toi, c'est super cool!! Je vais tester le codage conditionnel, je voulais pas passer pas ça mais bon... Ce que je comprends pas c'est qu'il y a trois divs (menu, images et text avec effet) qui ne veulent pas se caller. Dans ces calques il n'y a que des fichiers flash. Les pourcentages ne sont pas compris sous IE6?

Donc je vais faire un codage conditionnel et je vais voir ce que ça donne. Je te tiens au jus, et s'il y a des pb je peux compter sur tes conseils??

Merci encore!!!
lundi 1 septembre 2008 à 19:33:19 | Re : problème de positionnement de calques css et IE 6

Justkill
Réponse acceptée !
Bonsoir à vous, je vais répondre à ma propre question et même au-delà. Car j'espère (de tout coeur) que s'il y a une personne un jour dans cette situation, qu'elle puisse y remédier. Le problème d'IE6 et vraiment lourd et récurant.

Je vais tenter de répondre à ces différentes questions :
- Comment ajuster et positionner les div sous IE6.
- Comment résoudre le problème des png non pris en compte sans un hack javascript.
- Fixer le fond car la propriété background-position: fixed; n'est pas reconnue.


==>Comment ajuster et positionner les div sous IE6.

Tout d'abord IE7 et Firefox 3 sont sortis, le problème ne se pose plus pour ceux-là.

J'ai donc un index.php général qui défini mes containers et le contenant. Mais pour IE 6, j'ai était obligé de créer une condition (je crois qu'on appel ça un hack javascript)

Donc ma page index.php de départ :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="05d+s7xnefMxuLacQi6HWT7lB3T4aeb5v/S2yEhseTQ=" />
<!--Meta tag-->
<TITLE> Location d'appartement à Cauterets de Type 3 pour une à cinq personnes à partir de 300¤ la semaine, très proche des télécabines et de la cure thermale</TITLE>
<META NAME="Keywords" CONTENT="Location appartement Cauterets, appartement location cauterets, location à cauterets,appartment à partir de 300¤, tarifs
dégressifs,  disponibilités, photos appartement, www.location-a-cauterets.com, louer à cauterets, location cauterets, 65110">
<META NAME="Description" CONTENT="Location d'appartement à Cauterets de Type 3 pour une à cinq personnes à partir de 300¤ la semaine">
<META NAME="Robots" CONTENT="index, follow, all">
<META NAME="Author" CONTENT="Justkill">
<META NAME="Reply-to" CONTENT="location-a-cauterets@laposte.net">
<META NAME="Identifier-URL" CONTENT="http://www.location-a-cauterets.com">
<META NAME="Generator" CONTENT="Bloc note">
<!--Fin Meta tag-->

<!--[if lt IE 7]>
<link type="text/css" rel="stylesheet" href="IE6.css" />
<script type="text/javascript" src="fixed.js"></script>
<![endif]-->
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
<style type="text/css">
<!--

#Menu {
    position:absolute;
    left:2%;
    top:40%;
    width:96%;
    height:20%;
    z-index:7;
}
#contenu {
    position:absolute;
    left:2%;
    top:60%;
    width:96%;
    height:95%;
    z-index:8;
font-family:Arial color:#000099;
}


#Text {
    position:absolute;
    left:15%;
    top:0%;
    width:22%;
    height:8%;
    z-index:3;
}


#Neige {
position:fixed;
width:98%;
height:98%;
background-image:url(Neige/Neige.swf);
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
z-index:1;

}
#Images {
    position:absolute;
    left:1%;
    top:5%;
    width:60%;
    height:42%;
    z-index:2;
}
#Pub {
    position:absolute;
    left:45%;
    top:12%;
    width:40%;
    height:12%;
    z-index:4;
}
#Or {
    position:absolute;
    left:66%;
    top:22%;
    width:21%;
    height:20%;
    z-index:5;
}

#Compteur {
    position:absolute;
    left:80%;
    top:0%;
    width:15%;
    height:4%;
    z-index:6;
}
.Style4 {
font-size: 18px;
text-align:center;
margin:2px 0px;
padding:0px;
font-weight: bold;
color: #000000;
}
.Style7 {
    font-size: 13px;
    color: #0000FF;
    font-style: italic;
    font-weight: bold;
}

-->
</style> 
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>

<!-- Début codage Menu -->

<div id="Menu">
  <object width="100%" height="100%">
    <param name="movie" value="Menu_flash/Menu.swf" />
    <param name="wmode" value="transparent" />
    <embed src="Menu_flash/Menu.swf" wmode="transparent" width="100%" height="100%"> </embed>
  </object>
</div>

<div id="Or">
  <object width="100%" height="100%">
    <param name="movie" value="Or/Or.swf" />
    <param name="wmode" value="transparent" />
    <embed src="Or/Or.swf" wmode="transparent" width="100%" height="100%"> </embed>
  </object>
</div>

<div id="Compteur" align="right"><img src="http://www.easycounter.com/counter.php?justkill6666" height="14"
border="0"></a><span class="Style7">Visites</span></div>
<div id="Neige">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="100%" height="100%">
    <param name="movie" value="Neige/Neige.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <embed src="Neige/Neige.swf" width="100%" height="100%" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" ></embed>
  </object>
</div>
<script type="text/javascript"> function setsize(h) { document.getElementById('contenu').style.height=h+'px'; } </script>
 
<div id"contenu">
  <iframe src="Pages/Accueil.html" id="contenu" name="contenu" width="98%" marginwidth=0% frameborder="0" marginheight=60% marginleft="2%" scrolling="no" marginbottom=10% allowTransparency="true"></iframe>
</div>
<div id="Text">
<a href="Pages/Accueil.html" target="contenu"></a>
<object width="100%" height="100%">
<param name="movie" value="TextBandeau/TextBandeau.swf" />
<param name="wmode" value="transparent" />
<embed src="TextBandeau/TextBandeau.swf" width="100%" height="100%" wmode="transparent" movie="TextBandeau/TextBandeau.swf"> </embed>
</object>
</div>

<div id="Images">

<!--URL utilisées dans l'animation-->
<!--texte utilisé dans l'animation-->
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
if (AC_FL_RunContent == 0) {
alert("Cette page nécessite le fichier AC_RunActiveContent.js.");
} else {
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0','width','100%','height','100%','id','images','align','middle','src','images','quality','high','wmode','transparent','name','images','allowscriptaccess','sameDomain','allowfullscreen','false','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images' ); //end AC code
}
</script>
<noscript>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" name="images" width="100%" height="100%" align="middle" id="images">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="images.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><embed src="images.swf" quality="high" wmode="transparent" width="100%" height="100%" name="images" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>
</noscript>


</div>
<div id="Pub">
<div align="center"><span class="Style4">Location d'appartement à Cauterets de Type 3 pour une à cinq personnes à partir de 300¤ la semaine. </span></div>
</div>
<p>
</p>
<p><br />
</p>
</body></html>

Comme on peut le voir en rouge, le if lt IE7 permet de définir que "s'il y a une version antérieure à IE7 alors je lis ma feuille de style"

Dans la feuille de style en dessous (IE6.css) j'ai défini des critères que IE6 reconnait.
-Notamment un rajout de "div" devant chaque conteneurs pour que cela fonctionne.
-Et pour ma part, ( je sais pas si c'est pour tout le monde), si toutes mes valeurs sont en pourcentage, ça déconne de nouveau. Donc obligé de fixé une hauteur (ou une largeur) en valeur fixe.

Voilà ce que donne ma feuille de style IE6.css avec mes contenants:

html {
margin:0;
padding:0;
}

body {
background-color : white;
font-family :  Verdana, Arial, Helvetica, Geneva, sans-serif;
}

div#Menu {
    position:absolute;
    left:10px;
    top:45%;
    width:96%;
    height:150px;
    z-index:2;
   
}

div#contenu {
    position:absolute;
    margin-left:10px;
    top:60%;
    width:96%;
    height:95%;
    z-index:3;
font-family:Arial color:#000099;
}

div#Text {
    position:absolute;
    left:15%;
    top:0px;
    width:22%;
    height:50px;
    z-index:4;
}
div#Images {
    position:absolute;
    left:10px;
    top:55px;
    width:60%;
    height:300px;
    z-index:5;
}
div#Pub {
    position:absolute;
    left:48%;
    top:12%;
    width:40%;
    height:70px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    z-index:6;
}
div#Or {
    position:absolute;
    left:66%;
    top:22%;
    width:21%;
    height:150px;
    z-index:7;
}
div#Compteur {
    position:absolute;
    left:80%;
    top:0%;
    width:15%;
    height:30px;
    z-index:8;
}

.Style4 {
font-size: 14px;
text-align:center;
margin:2px 0px;
padding:0px;
font-weight: bold;
color: #000000;
}
.Style7 {
    font-size: 13px;
    color: #0000FF;
    font-style: italic;
    font-weight: bold;
}

Et voilà un problème de résolu.

==>Comment résoudre le problème des png non pris en compte sans un hack javascript.

Et bien tout simplement avec le flash, une image JPG étant inscrutée dans le flash.
On met ça en wmode="transparent" et c'est bon. On contourne le problème. Certe ça peut-être un peu plus lourd mais ça fonctionne.

==>Fixer l'image de fond : la propriété background-position: fixed; n'est pas reconnue.

Et bien j'ai trouvé sur le net un petit hack javascript qui permet de faire celà. Le petit hic, c'est que l'image saute un peu lorsque que la page défile. Pour cause, ce hack permet de calculer les distances entre le haut et le bas, la gauche et la droite, et ajuste le background en conséquence.

Voilà le code de mon fichier fixed.js :


// fixed.js: fix fixed positioning and fixed backgrounds in IE/Win
// version 1.8, 08-Aug-2003
// written by Andrew Clover <and@doxdesk.com>, use freely

/*@cc_on
@if (@_win32 && @_jscript_version>4)

var fixed_positions= new Array();
var fixed_backgrounds= new Array();
var fixed_viewport;

// Initialisation. Called when the <body> tag arrives. Set up viewport so the
// rest of the script knows we're going, and add a measurer div, used to detect
// font size changes and measure image sizes for backgrounds later  

function fixed_init() {
  fixed_viewport= (document.compatMode=='CSS1Compat') ?
    document.documentElement : document.body;
  var el= document.createElement('div');
  el.setAttribute('id', 'fixed-measure');
  el.style.position= 'absolute';
  el.style.top= '0'; el.style.left= '0';
  el.style.overflow= 'hidden'; el.style.visibility= 'hidden';
  el.style.fontSize= 'xx-large'; el.style.height= '5em';
  el.style.setExpression('width', 'fixed_measureFont()');
  document.body.insertBefore(el, document.body.firstChild);
}

// Binding. Called every time an element is added to the document, check it
// for fixed features, if found add to our lists and set initial props  

function fixed_bind(el) {
  var needLayout= false;
  var tag= el.tagName.toLowerCase();
  var st= el.style;
  var cst= el.currentStyle;
  var anc;

  // find fixed-position elements
  if (cst.position=='fixed') {
    needLayout= true;
    fixed_positions[fixed_positions.length]= el;
    // store original positioning as we'll overwrite it
    st.position= 'absolute';
    st.fixedPLeft=   cst.left;
    st.fixedPTop=    cst.top;
    st.fixedPRight=  cst.right;
    st.fixedPBottom= cst.bottom;
    st.fixedPWidth=  fixed_parseLength(cst.width);
    st.fixedPHeight= fixed_parseLength(cst.height);
    // find element that will act as containing box, for convenience later
    st.fixedCB= null;
    for (anc= el; (anc= anc.parentElement).parentElement;) {
      if (anc.currentStyle.position!='static') {
        st.fixedCB= anc;
        break;
    } }
    // detect nested fixed positioning (only ancestor need move)
    st.fixedNest= false;
    for (anc= el; anc= anc.parentElement;) {
      if (anc.style.fixedNest!=null)
        st.fixedNest= true;
        break;
    }
  }

  // find fixed-background elements (not body/html which IE already gets right)
  if (cst.backgroundAttachment=='fixed' && tag!='body' && tag!='html') {
    needLayout= true;
    fixed_backgrounds[fixed_backgrounds.length]= el;
    // get background offset, converting from keyword if necessary
    st.fixedBLeft= fixed_parseLength(cst.backgroundPositionX);
    st.fixedBTop=  fixed_parseLength(cst.backgroundPositionY);
    // if it's a non-zero %age, need to know size of image for layout
    if (st.fixedBLeft[1]=='%' || st.fixedBTop[1]=='%') {
      st.fixedBWidth= 0; st.fixedBHeight= 0;
      fixed_measureBack(el);
    }
  }
  if (needLayout) fixed_layout();
}

// Layout. On every window or font size change, recalculate positioning  

// Request re-layout at next free moment
var fixed_delaying= false;
function fixed_delayout() {
  if (fixed_delaying) return;
  fixed_delaying= true;
  window.setTimeout(fixed_layout, 0);
}

var fixed_ARBITRARY= 200;

function fixed_layout() {
  fixed_delaying= false;
  if (!fixed_viewport) return;
  var i, el, st, j, pr, tmp, A= 'auto';
  var cb, cbLeft, cbTop, cbRight, cbBottom, oLeft, oTop, oRight, oBottom;
  var vpWidth=fixed_viewport.clientWidth, vpHeight=fixed_viewport.clientHeight;

  // calculate initial position for fixed-position elements [black magic]
  for (i= fixed_positions.length; i-->0;) {
    el= fixed_positions[i]; st= el.style;
    // find positioning of containing block
    cb= st.fixedCB; if (!cb) cb= fixed_viewport;
    cbLeft= fixed_pageLeft(cb); cbTop= fixed_pageTop(cb);
    if (cb!=fixed_viewport) { cbLeft+= cb.clientLeft; cbTop+= cb.clientTop; }
    cbRight= fixed_viewport.clientWidth-cbLeft-cb.clientWidth;
    cbBottom= fixed_viewport.clientHeight-cbTop-cb.clientHeight;
    // if size is in %, must recalculate relative to viewport
    if (st.fixedPWidth[1]=='%')
      st.width= Math.round(vpWidth*st.fixedPWidth[0]/100)+'px';
    if (st.fixedPHeight[1]=='%')
      st.height= Math.round(vpHeight*st.fixedPHeight[0]/100)+'px';
    // find out offset values at max size, to account for margins
    st.left= A; st.right= '0'; st.top= A; st.bottom= '0';
    oRight= el.offsetLeft+el.offsetWidth; oBottom= el.offsetTop+el.offsetHeight;
    st.left= '0'; st.right= A; st.top= '0'; st.bottom= A;
    oLeft= el.offsetLeft; oTop= el.offsetTop;
    // use this to convert all edges to pixels
    st.left= A; st.right= st.fixedPRight;
    st.top= A; st.bottom= st.fixedPBottom;
    oRight-= el.offsetLeft+el.offsetWidth;
    oBottom-= el.offsetTop+el.offsetHeight;
    st.left= st.fixedPLeft; st.top= st.fixedPTop;
    oLeft= el.offsetLeft-oLeft; oTop= el.offsetTop-oTop;
    // edge positioning fix
    if (st.fixedPWidth[1]==A && st.fixedPLeft!=A && st.fixedPRight!=A) {
      tmp= el.offsetLeft; st.left= A; st.width= fixed_ARBITRARY+'px';
      tmp= fixed_ARBITRARY+el.offsetLeft-tmp+cbLeft+cbRight;
      st.left= st.fixedPLeft; st.width= ((tmp<1)?1:tmp)+'px';
    }
    if (st.fixedPHeight[1]==A && st.fixedPTop!=A && st.fixedPBottom!=A) {
      tmp= el.offsetTop; st.top= A; st.height= fixed_ARBITRARY+'px';
      tmp= fixed_ARBITRARY+el.offsetTop-tmp+cbTop+cbBottom;
      st.top= st.fixedPTop; st.height= ((tmp<1)?1:tmp)+'px';
    }
    // move all non-auto edges relative to the viewport
    st.fixedCLeft= (st.fixedPLeft=='auto') ? oLeft : oLeft-cbLeft;
    st.fixedCTop= (st.fixedPTop=='auto') ? oTop : oTop-cbTop;
    st.fixedCRight= (st.fixedPRight=='auto') ? oRight : oRight-cbRight;
    st.fixedCBottom= (st.fixedPBottom=='auto') ? oBottom : oBottom-cbBottom;
    // remove left-positioning of right-positioned elements
    if (st.fixedPLeft=='auto' && st.fixedPRight!='auto') st.fixedCLeft= 'auto';
    if (st.fixedPTop=='auto' && st.fixedPBottom!='auto') st.fixedCTop= 'auto';
  }


  // calculate initial positioning of fixed backgrounds
  for (i= fixed_backgrounds.length; i-->0;) {
    el= fixed_backgrounds[i]; st= el.style;
    tmp= st.fixedBImage;
    if (tmp) {
      if (tmp.readyState!='uninitialized') {
        st.fixedBWidth= tmp.offsetWidth;
        st.fixedBHeight= tmp.offsetHeight;
        st.fixedBImage= window.undefined;
      }
    }
    st.fixedBX= fixed_length(el, st.fixedBLeft, vpWidth-st.fixedBWidth);
    st.fixedBY= fixed_length(el, st.fixedBTop, vpHeight-st.fixedBHeight);
  }

  // now call scroll() to set the positions from the values just calculated
  fixed_scroll();
}

// Scrolling. Offset fixed elements relative to viewport scrollness

var fixed_lastX, fixed_lastY;
var fixed_PATCHDELAY= 300;
var fixed_patching= false;

// callback function after a scroll, because incorrect scroll position is
// often reported first go!
function fixed_patch() {
  fixed_patching= false;
  var scrollX= fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop;
  if (scrollX!=fixed_lastX && scrollY!=fixed_lastY) fixed_scroll();
}

function fixed_scroll() {
  if (!fixed_viewport) return;
  var i, el, st, viewportX, viewportY;
  var scrollX= fixed_viewport.scrollLeft, scrollY= fixed_viewport.scrollTop;
  fixed_lastX= scrollX; fixed_lastY= scrollY;

  // move non-nested fixed-position elements
  for (i= fixed_positions.length; i-->0;) {
    st= fixed_positions[i].style;
    viewportX= (st.fixedNest) ? 0 : scrollX;
    viewportY= (st.fixedNest) ? 0 : scrollY;
    if (st.fixedCLeft!='auto') st.left= (st.fixedCLeft+viewportX)+'px';
    if (st.fixedCTop!='auto') st.top= (st.fixedCTop+viewportY)+'px';
    viewportX= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportX;
    viewportY= (st.fixedCB==null || st.fixedCB==fixed_viewport) ? 0 : viewportY;
    st.right= (st.fixedCRight-viewportX+1)+'px'; st.right= (st.fixedCRight-viewportX)+'px';
    st.bottom= (st.fixedCBottom-viewportY+1)+'px'; st.bottom= (st.fixedCBottom-viewportY)+'px';
  }

  // align fixed backgrounds to viewport
  for (i= fixed_backgrounds.length; i-->0;) {
    el= fixed_backgrounds[i]; st= el.style;
    viewportX= scrollX;
    viewportY= scrollY;
    while (el.offsetParent) {
      viewportX-= el.offsetLeft+el.clientLeft;
      viewportY-= el.offsetTop +el.clientTop;
      el= el.offsetParent;
    }
    st.backgroundPositionX= (st.fixedBX+viewportX)+'px';
    st.backgroundPositionY= (st.fixedBY+viewportY)+'px';
  }

  // call back again in a tic
  if (!fixed_patching) {
    fixed_patching= true;
    window.setTimeout(fixed_patch, fixed_PATCHDELAY);
  }
}

// Measurement. Load bg-image into an invisible element on the page, when
// loaded write the width/height to an element's style for layout use; detect
// when font size changes

function fixed_measureBack(el) {
  var measure= document.getElementById('fixed-measure');
  var img= document.createElement('img');
  img.setAttribute('src', fixed_parseURL(el.currentStyle.backgroundImage));
  measure.appendChild(img);
  el.style.fixedBImage= img;
  if (img.readyState=='uninitialized')
    img.attachEvent('onreadystatechange', fixed_measureBackImage_ready);
}

function fixed_measureBackImage_ready() {
  var img= event.srcElement;
  if (img && img.readyState!='uninitialized') {
    img.detachEvent('onreadystatechange', fixed_measureBackImage_ready);
    fixed_layout();
  }
}

var fixed_fontsize= 0;
function fixed_measureFont() {
  var fs= document.getElementById('fixed-measure').offsetHeight;
  if (fixed_fontsize!=fs && fixed_fontsize!=0)
    fixed_delayout();
  fixed_fontsize= fs;
  return '5em';
}

// Utility. General-purpose functions

// parse url() to get value inside

function fixed_parseURL(v) {
  v= v.substring(4, v.length-1);
  if (v.charAt(0)=='"' && v.charAt(v.length-1)=='"' ||
      v.charAt(0)=="'" && v.charAt(v.length-1)=="'")
    return v.substring(1, v.length-1);
  else return v;
}

// parse length or auto or background-position keyword into number and unit

var fixed_numberChars= '+-0123456789.';
var fixed_ZERO= new Array(0, 'px');
var fixed_50PC= new Array(50, '%');
var fixed_100PC= new Array(100, '%');
var fixed_AUTO= new Array(0, 'auto');

function fixed_parseLength(v) {
  var num, i;
  if (v=='left'  || v=='top')    return fixed_ZERO;
  if (v=='right' || v=='bottom') return fixed_100PC;
  if (v=='center') return fixed_50PC;
  if (v=='auto')   return fixed_AUTO;
  i= 0;
  while (i<v.length && fixed_numberChars.indexOf(v.charAt(i))!=-1)
    i++;
  num= parseFloat(v.substring(0, i));
  if (num==0) return fixed_ZERO;
  else return new Array(num, v.substring(i));
}

// convert parsed (number, unit) into a number of pixels

function fixed_length(el, l, full) {
  var tmp, x;
  if (l[1]=='px') return l[0];
  if (l[1]=='%')  return Math.round(full*l[0]/100);
  // other units - measure by setting position; this is rather inefficient
  // but then these units are used for background-position so seldom...
  tmp= el.currentStyle.left;
  el.style.left= '0';
  x= el.offsetLeft;
  el.style.left= l[0]+l[1];
  x= el.offsetLeft-x;
  el.style.left= tmp;
  return x;
}

// convert stupid IE offsetLeft/Top to page-relative values

function fixed_pageLeft(el) {
  var v= 0;
  while (el.offsetParent) {
    v+= el.offsetLeft;
    el= el.offsetParent;
  }
  return v;
}
function fixed_pageTop(el) {
  var v= 0;
  while (el.offsetParent) {
    v+= el.offsetTop;
    el= el.offsetParent;
  }
  return v;
}

// Scanning. Check document every so often until it has finished loading. Do
// nothing until <body> arrives, then call main init. Pass any new elements
// found on each scan to be bound  

var fixed_SCANDELAY= 500;

function fixed_scan() {
  if (!document.body) return;
  if (!fixed_viewport) fixed_init();
  var el;
  for (var i= 0; i<document.all.length; i++) {
    el= document.all[i];
    if (!el.fixed_bound) {
      el.fixed_bound= true;
      fixed_bind(el);
  } }
}

var fixed_scanner;
function fixed_stop() {
  window.clearInterval(fixed_scanner);
  fixed_scan();
}

fixed_scan();
fixed_scanner= window.setInterval(fixed_scan, fixed_SCANDELAY);
window.attachEvent('onload', fixed_stop);
window.attachEvent('onresize', fixed_delayout);
window.attachEvent('onscroll', fixed_scroll);

@end @*/


Voilà le dernier problème est résolu. J'ai eu un autre soucis avec ce script, la page ne s'arrêtait pas de descendre quand on appuyait sur le curseur. J'ai réglé le problème en mettant des dimensions aux éléments qui devaient senser prendre 100% de la largeur ou de la hauteur avec 99% ou 98%. Je sais pas trop pourquoi mais le problème fût résolu.

Pour conclure, mon site est quasiment identique sous IE6, IE7 et Firefox.

J'espère que ce message servira, car c'est vraiment relou. Je peux maintenant souffler et Appuyer sur réponse acceptée. Merci à toi Petole team pour ton aide.

Cordialement.
lundi 1 septembre 2008 à 22:03:10 | Re : problème de positionnement de calques css et IE 6

PetoleTeam

Membre Club
Bonjour,
C'est toi qu'il faut remercier car peu de gens prennent le temps de poster la réponse de façon aussi compléte...
;O)


Cette discussion est classée dans : position, index, width, height, absolute

Répondre à ce message

Sujets en rapport avec ce message

Mon animation flash ne se lit pas avec SWFOBJECT [ par Nixeus ] Bonjour à tous,J'ai voulu intégrer une animation swf dans ma page HTML, en passant par SWFOBJECT afin de ne pas avoir le fameux message d'avertissemen probleme javascript + area shape [ par AlexC31 ] Bonjour, J'ai un code en Javascript qui permet d'afficher des images en fonction de la résolution de l'écran. Si la résolution est par exemple en 10 problème de position d'une image lors du survol d'un lien [ par molio ] Bonjour, J'essaie de faire un site internet pour mon laboratoire. je souhaite faire apparaitre une image qui suit la souris au survol d'un lien vers Bug Firefox recuperation de la taille de l'image [ par malkomad ] Bonjour a tous, Je développe une site de type galerie, et j'ai un pb sous firefox ( uniquement ) lorsque je souhaite récupérer la taille de l'image e Taille d'ecran sur code css [ par badvirus ] Bonjour, mon probleme avec ce code est que je voudrais l'adapter a n'importe quelle taille d'ecran et je n'y arrive pas. voici le code CSS : body { modifier le"width" et "height" de <div ..> par 2 boutans +/- [ par abibol ] Bonjour, Je souhaiterais modifier le "width" et "height" de par 2 boutons +/- [^^confus2] Merci modifier le"width" et "height" de <div ..> par 2 boutans +/- [ par abibol ] Bonjour, Je souhaiterais modifier le "width" et "height" de par 2 boutons +/- [^^confus2] Merci problème d'affichage lightbox [ par phizys ] Bonjour à tous, J'ai installé sur une page test une lightbox, ou plus précisément une shadowbox, qui est plus simple et plus légère. Mon problème c'e Problème pop-up Internet Explorer [ par qwhat ] Bonjour,J'ai pas mal cherché, mais je ne trouve pas pourquoi mon popup ne fonctionne pas sur IE. C'est un popup qui doit se redimensionner automatique faire varier la taille de la fenetre navigateur dans le temps (incrementation?) [ par crasse ] salut toutes et tous !j'essai de faire varier la taille de la fenetre du navigateur dans le temps, c'est a dire que par exemple, disons que la fenetre


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Waterfall in Kauai Hawaii With RainbowPhoto Beautiful El Capitan Yosemite National Park
Photo Sea sponges and water surface 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 5,741 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)