voila, je me doute que ce sujet a déjà été abordé plusieurs fois, mais je n'arrive pas à trouver de réponse pour mon cas.
Je suis en train de faire un site, et j'ai un souci avec le placement de certain <div>
Sous firefox et safari ça marche nikel, mais sous Internet Explorer ça part en vrille :
FF :
http://img13.imageshack.us/img13/1801/ff2utm.jpg
IE :
http://img15.imageshack.us/img15/7318/ie2o.jpg
à savoir que le div vert correspont au scroll vers le haut, le div orange est celui pour le scroll vers le bas, et le bleu est le texte à 'scroller'.
Voila, le but ici étant de simuler un scroll au survol des <div> scroll_bas et scroll_haut, et comme on le voit sur les screenshot, les div sont bien placés sur FF mais pas sur IE......
Je me doute qu'il y a une erreur dans mon code, mais là ça fait 2jours que je suis dessus et je n'en peux plus, j'ai l'impression de toujours faire les même tests.
Voila ma page :
<?xml version="1.0" encoding="iso-8859-1"?> <!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" xml:lang="fr"> <head> <title>Vend Home - Agence de chasseurs immobiliers - Vous Vendez ?</title> <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" /> <link rel="stylesheet" type="text/css" href="txt/style.css" /> </head> <body onLoad="MM_preloadImages('images/btn-proposer-votre-bien_over.jpg','images/btn-honoraire_over.jpg','images/menu_accueil_over.jpg','images/menu_achetez_over.jpg','images/menu_vendez_over.jpg','images/menu_investissez_over','images/menu_plus_over.jpg','images/menu_partenaire_over.jpg','images/menu_annexes_over.jpg')"> <div id="fond" align="center"><img src="images/fond_txt.gif" /></div>/*l'image de fond, qui se trouve derrière le texte*/ <div id="tableau2" align="center"> <table width="901" height="695" cellpadding="0" cellspacing="0"> <tr height="380"> <td width="160"> </td> <td width="597"> <div id="texte_vendez">/*c'est ici qu'il y a tout le texte à scroller. Je l'ai raccourci pour que ce soit plus lisible*/</div></td> </tr> </table> </div> <div id="tableau" align="center"> <table width="900" cellpadding="0" cellspacing="0"> /*tableau contenant les images du site, rien de spé la dedans donc je raccourcis ;)*/ </table> </div> <div id="tableau3">/*tableau contenant les 2 div servant de scroll vers le haut et vers le bas*/ <table width="900" align="center" cellpadding="0" cellspacing="0"> <tr> <td><div id="titre_vendez" colspan="2"><p class="titre">L'accès à une agence d'acheteurs potentiels</p></div></td> </tr> <tr> <td width="192"> </td> <td><div id="scroll-haut" onMouseOver="vy=2" onMouseOut="vy=0"><img src="images/transparent.gif" alt="" /></div><div id="scroll-bas" onMouseOver="vy=1" onMouseOut="vy=0"><img src="images/transparent.gif" alt="" /></div></td> </tr> </table> </div> <script>/*script pour le scroll*/ var vitesse=5; var posy=285; var posy_max=285; var posy_min=105; var vy=0; function scrolling(){ if ((vy==1)&&(posy>posy_min)) { posy=posy-vitesse; } if ((vy==2)&&(posy<posy_max)) { posy=posy+vitesse; } document.getElementById("texte_vendez").style.top = posy + "px"; setTimeout('scrolling()',30); } scrolling(); </script> </body> </html>
Et le CSS :
/* CSS Document */
body {
background-color : #000000;
margin : 0px;
}
a {
text-decoration:none;
color:#000000;
}
h1, h2, h3 {
color:#71140b;
}
img {
border:0px;
}
#fond {
position:absolute;
width:100%;
z-index:1;
height:695px;
}
#tableau {
position:absolute;
z-index:10;
width:100%;
}
#tableau2 {
position:absolute;
width:100%;
overflow: hidden;
height: 600px;
z-index:2;
}
#tableau3 {
position:absolute;
width:100%;
z-index:14;
}
#texte_vendez {
position:absolute;
width:465px;
line-height:20pt;
font-family:High Tower Text;
font-size:14pt;
z-index: 4;
padding-left: 47px;
text-align:left;
}
#scroll-haut {
position:absolute;
height:85px;
width:640px;
top: 270px;
}
#scroll-bas {
position:absolute;
height:128px;
width:640px;
top: 455px;
}
#telephone {
padding-left:36px;
padding-top:14px;
color:#ffffff;
font-family:Times New Roman;
font-size:12pt;
}
#titre_vendez {
position:absolute;
padding-left: 290px;
padding-top: 245px;
}
....si une âme charitable pouvait m'aider...merci d'avance.....
