Coucou les gens!
Alors, je fais un site pour mon hotel en Thaïlande... mais je débute sous dreamweaver, et le code c'est du chinois pour moi...
ma page s'affiche bien dans tous les navigateurs sauf dans Internet Explorer ou le menu horizontal est decalé d'a peu pres 15 pixels vers le haut... j'ai essayé de mettre des padding, des marges, que neni... j'ai lu d'autres forums et je ne comprends pas grands chose...
Bref, voici le code de la page d'accueil, si vous pouvez m'aider, ce serait vraiment super bien top...
Le site est visible sur "www.patong-mansion.com/Home.html" :
Merci encore!
Domi
Alors, je fais un site pour mon hotel en Thaïlande... mais je débute sous dreamweaver, et le code c'est du chinois pour moi...
ma page s'affiche bien dans tous les navigateurs sauf dans Internet Explorer ou le menu horizontal est decalé d'a peu pres 15 pixels vers le haut... j'ai essayé de mettre des padding, des marges, que neni... j'ai lu d'autres forums et je ne comprends pas grands chose...
Bref, voici le code de la page d'accueil, si vous pouvez m'aider, ce serait vraiment super bien top...
Le site est visible sur "www.patong-mansion.com/Home.html" :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
#apDiv29 {
position:absolute;
left:29px;
top:172px;
width:80px;
height:25px;
z-index:21;
}
#Book {
position: absolute;
height: 500px;
width: 550px;
left: 248px;
top: 231px;
background-color: #FFF;
}
#Conteneur #Conteneur #apDiv20 a {
text-decoration: none;
}
-->
</style>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Patong Mansion</title>
<style type="text/css">
<!--
#Entete {
height: 150px;
width: 999px;
background-image: url(Images/entetbleue%20copie.png);
clip: rect(0px,auto,auto,auto);
}
#Corps {
height: 890px;
width: 1000px;
background-image: url(Images/fonds890.png);
background-repeat: no-repeat;
}
body {
background-color: #D5EAFF;
}
#Conteneur {
position: absolute;
width: 1000px;
margin-left: -500px;
left: 50%;
z-index: 1;
}
#Conteneur #Conteneur #apDiv17 ul a:hover {
color: #0582CD;
}
#apDiv1 {
position: absolute;
left: 12px;
top: 7px;
width: 193px;
height: 102px;
z-index: 1;
visibility: visible;
}
#apDiv2 {
position: absolute;
left: 772px;
top: 80px;
width: 213px;
height: 38px;
z-index: 7;
margin: 0px;
padding: 0px;
visibility: visible;
}
#Conteneur #apDiv2 ul li {
display: inline;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.espace {
margin-right: 60px;
}
#Conteneur #apDiv2 ul a {
color: #FFF;
text-decoration: none;
font-size: 14px;
}
#apDiv3 {
position: absolute;
left: 179px;
top: 210px;
width: 800px;
height: 230px;
z-index: 3;
display: inline;
border: 1px outset #FFFFFF;
visibility: visible;
}
#Conteneur #apDiv3 #ImageSlideShow li {
display: inline;
}
#Conteneur #apDiv2 ul .espace strong a:hover {
color: #1E9DDD;
padding: 0px;
margin: 0px;
}
#Conteneur #apDiv2 ul li strong a:hover {
color: #1A99DA;
}
#apDiv17 ul li {
display: inline;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
padding: 0px;
font-weight: bold;
text-decoration: none;
}
.espace2 {
margin-right: 70px;
}
#Conteneur #apDiv17 ul {
color: #FFF;
}
#Conteneur #apDiv17 ul a {
color: #FFF;
text-decoration: none;
}
#Conteneur #apDiv17 ul .espace2 a:hover {
color: #1A99DA;
}
#Conteneur #apDiv17 ul li a:hover {
color: #239FDD;
}
#apDiv19 ul li {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
display: inline;
}
#Conteneur #Conteneur #apDiv19 ul {
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-decoration: none;
}
#Conteneur #Conteneur #apDiv19 ul .espace2 a {
color: #FFF;
text-decoration: none;
}
#Conteneur #Conteneur #apDiv19 ul li a {
color: #FFF;
text-decoration: blink;
}
#Conteneur #Conteneur #apDiv19 ul li a:hover {
color: #1F96D7;
text-decoration: none;
}
#Conteneur #Conteneur #apDiv19 ul a:hover {
color: #1891D5;
}
-->
</style>
<style type="text/css">
#apDiv4 {
position: absolute;
left: 227px;
top: 41px;
width: 453px;
height: 32px;
z-index: 4;
visibility: visible;
}
#Conteneur #apDiv4 #ImageSlideShow_2 li {
display: inline;
}
</style>
<link href="Spry-UI-1.7/css/SpryImageSlideShow.css" rel="stylesheet" type="text/css">
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="prettyphoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2141542: #ImageSlideShow */
#ImageSlideShow.ImageSlideShow {
width: 800px;
height: 230px;
border: solid 0px transparent;
}
#ImageSlideShow .ISSClip {
background-color: #000000;
}
/* EndOAWidget_Instance_2141542 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2141542" binding="#ImageSlideShow" />
<oa:widget wid="2141542" binding="#ImageSlideShow_3" />
<oa:widget wid="2141542" binding="#ImageSlideShow_4" />
<oa:widget wid="2644026" binding="#OAWidget" />
<oa:widget wid="2141542" binding="#ImageSlideShow_5" />
<oa:widget wid="2149022" binding="#OAWidget" />
</oa:widgets>
-->
</script>
<style type="text/css">
#apDiv5 {
position: absolute;
left: 797px;
top: 174px;
width: 147px;
height: 153px;
z-index: 5;
filter: FlipH;
visibility: visible;
}
#apDiv6 {
position: absolute;
left: 533px;
top: 777px;
width: 445px;
height: 172px;
z-index: 6;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 14px;
visibility: visible;
}
#apDiv6 p {
color: #FFFFFF;
padding: 0px;
margin: 0px;
}
#apDiv7 {
position: absolute;
left: 295px;
top: 742px;
width: 127px;
height: 141px;
z-index: 7;
}
#apDiv8 {
position: absolute;
left: 714px;
top: 15px;
width: 160px;
height: 80px;
z-index: 1;
color: #FFF;
text-decoration: underline blink;
font-style: normal;
}
#apDiv9 {
position: absolute;
left: 830px;
top: -1px;
width: 288px;
height: 56px;
z-index: 1;
color: #FFF;
text-align: center;
vertical-align: top;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}
#apDiv10 {
position: absolute;
left: 292px;
top: 168px;
width: 836px;
height: 134px;
z-index: 1;
}
</style>
<style type="text/css">
#apDiv11 {
position: absolute;
left: 28px;
top: 452px;
width: 120px;
height: 300px;
z-index: 8;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
visibility: visible;
}
#apDiv12 {
position: absolute;
left: 455px;
top: 466px;
width: 250px;
height: 250px;
z-index: 10;
background-image: url(Images/cadre%20gallery.png);
padding-top: 40px;
visibility: visible;
}
#apDiv13 {
position: absolute;
left: 180px;
top: 468px;
width: 250px;
height: 250px;
z-index: 9;
background-image: url(Images/cadre%20rooms.png);
padding-top: 40px;
visibility: visible;
}
#apDiv14 {
position: absolute;
left: 732px;
top: 466px;
width: 250px;
height: 211px;
z-index: 11;
background-image: url(Images/cadre%20facilities.png);
padding-top: 40px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
visibility: visible;
}
</style>
<style type="text/css">
/* BeginOAWidget_Instance_2141542: #ImageSlideShow_3 */
#ImageSlideShow_3.ImageSlideShow {
width: 248px;
height: 248px;
border: solid 1px #ffffff;
}
#ImageSlideShow_3 .ISSClip {
background-color: #000000;
}
/* EndOAWidget_Instance_2141542 */
</style>
<style type="text/css">
/* BeginOAWidget_Instance_2141542: #ImageSlideShow_4 */
#ImageSlideShow_4.ImageSlideShow {
width: 248px;
height: 248px;
border: solid 1px #ffffff;
}
#ImageSlideShow_4 .ISSClip {
background-color: #000000;
}
/* EndOAWidget_Instance_2141542 */
</style>
<link href="prettyphoto/css/prettyPhoto.css" rel="stylesheet" type="text/css">
<style type="text/css">
/* BeginOAWidget_Instance_2644026: #OAWidget */
.container {
width: 800px;
margin-right:auto;
margin-left:auto;
margin-top:25px;
}
.container a{
float:left;
}
.border {
background-color: #FFF;
border: 1px solid #cccccc;
padding: 3px;
margin: 5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-khtml-border-radius:3px;
border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
box-shadow:0 0 5px rgba(0,0,0,0.45),0px 1px 2px rgba(0,0,0,0.2);
}
/* EndOAWidget_Instance_2644026 */
</style>
<style type="text/css">
/* BeginOAWidget_Instance_2141542: #ImageSlideShow_5 */
#ImageSlideShow_5.ImageSlideShow {
width: 248px;
height: 248px;
border: solid 1px #ffffff;
}
#ImageSlideShow_5 .ISSClip {
background-color: #000000;
}
/* EndOAWidget_Instance_2141542 */
#apDiv15 {
position: absolute;
left: 34px;
top: 548px;
width: 138px;
height: 170px;
z-index: 12;
visibility: visible;
}
#apDiv16 {
position: absolute;
left: 844px;
top: 112px;
width: 142px;
height: 40px;
z-index: 13;
visibility: visible;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#apDiv17 {
position: absolute;
left: 16px;
top: 105px;
width: 810px;
height: 43px;
z-index: 14;
visibility: visible;
}
#apDiv18 {
position: absolute;
left: 798px;
top: 87px;
width: 189px;
height: 40px;
z-index: 15;
visibility: visible;
}
#apDiv19 {
position: absolute;
left: 39px;
top: 106px;
width: 940px;
height: 65px;
z-index: 12;
visibility: visible;
}
#apDiv20 {
position: absolute;
left: 870px;
top: 120px;
width: 100px;
height: 25px;
z-index: 13;
visibility: visible;
}
#apDiv21 {
position: absolute;
left: 120px;
top: 168px;
width: 441px;
height: 35px;
z-index: 14;
visibility: visible;
}
#apDiv22 {
position:absolute;
left:182px;
top:243px;
width:0px;
height:1px;
z-index:2;
}
#apDiv23 {
position: absolute;
left: 27px;
top: 215px;
width: 142px;
height: 162px;
z-index: 15;
visibility: visible;
}
#apDiv24 {
position: absolute;
left: 47px;
top: 392px;
width: 108px;
height: 27px;
z-index: 16;
visibility: visible;
}
#apDiv25 {
position: absolute;
left: 178px;
top: 467px;
width: 250px;
height: 299px;
z-index: 17;
}
#apDiv26 {
position:absolute;
left:455px;
top:466px;
width:250px;
height:290px;
z-index:18;
}
#apDiv27 {
position:absolute;
left:731px;
top:465px;
width:253px;
height:295px;
z-index:19;
}
#apDiv28 {
position: absolute;
left: -1px;
top: 997px;
width: 1000px;
height: 16px;
z-index: 20;
color: #000;
font-size: 9px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
}
</style>
</head>
<body>
<div id="Conteneur">
<div id="Conteneur">
<div id="apDiv29">
<div class="fb-like" data-href="http://www.patong-mansion.com" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
</div>
<div id="apDiv24">
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div id="apDiv23">
<!-- Facebook Badge START -->
<a href="http://www.facebook.com/pages/Patong-Mansion/578074445550730" target="_TOP" style="font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #FFFFFF; text-decoration: none;" title="Patong Mansion">Patong Mansion</a><br/>
<a href="http://www.facebook.com/pages/Patong-Mansion/578074445550730" target="_TOP" title="Patong Mansion"><img src="http://badge.facebook.com/badge/578074445550730.3181.1418660567.png" style="border: 0px;" /></a><br/>
<!-- Facebook Badge END -->
</div>
<div id="apDiv21">
<div class="fb-like" data-href="http://www.patong-mansion.com" data-send="true" data-width="450" data-show-faces="false" data-action="recommend"></div>
</div>
<div id="apDiv20"><a href="booknow.html"><img src="Images/pastille copie.png" width="100" height="25" alt="book"></a></div>
<div id="apDiv19">
<ul>
<li class="espace2"><a href="Home.html">Home</a></li>
<li class="espace2"><a href="Rooms&Rates.html">Rooms & Rates</a></li>
<li class="espace2"><a href="Gallery.html">Gallery</a></li>
<li class="espace2"><a href="Facilities.html">Facilities</a></li>
<li class="espace2"><a href="ContactLocation.html">Contact / Location</a></li></ul>
</div>
<div id="apDiv11">
<div style="font: 10px Tahoma;padding:3px;"><a style="color:#000000;text-decoration:none" href="http://freemeteo.com" ></a></div>
<script>
//Live weather feeds by freemeteo.com
//The use of this script is bound by Freemeteo’s Live Feed Service Agreement, as is published in the following url: http://www.freemeteo.com/default.asp?pid=178&la=1
// You are not allowed to change or delete any part of this script.
// Main body background color : FFFFFF
// Main body fonts color : 000000
// Header/Footer background color : 6699FF
// Header/Footer fonts color : FFFFFF
cIfrm="14";
gid="680881_20130402_154100";
</script>
<script src="http://www.freemeteo.com/templates/default/HTfeeds.js" type="text/javascript"></script>
</div>
<div id="apDiv1"><img src="Images/logofinal.png" width="157" height="101" alt="Logo"></div>
<div id="Entete">
<div id="apDiv4">
<script type="text/javascript">
// BeginOAWidget_Instance_2141542: #ImageSlideShow_2
var ImageSlideShow_2 = new Spry.Widget.ImageSlideShow("#ImageSlideShow_2", {
widgetID: "ImageSlideShow_2",
injectionType: "replace",
autoPlay: true,
displayInterval: 4000,
transitionDuration: 500,
componentOrder: ["view"],
plugIns: [ ]
});
// EndOAWidget_Instance_2141542
</script>
<!-- Begin DWUser_EasyRotator -->
<script type="text/javascript" src="http://c520866.r66.cf2.rackcdn.com/1/js/easy_rotator.min.js"></script>
<div class="dwuserEasyRotator" style="width: 600px; height: 30px; position:relative; text-align: left;" data-erconfig="{autoplayEnabled:true, lpp:'102-105-108-101-58-47-47-47-67-58-47-85-115-101-114-115-47-68-111-109-47-68-111-99-117-109-101-110-116-115-47-69-97-115-121-82-111-116-97-116-111-114-80-114-101-118-105-101-119-47-112-114-101-118-105-101-119-95-115-119-102-115-47', wv:1, autoplayDelay:3000, autoplayStopOnInteraction:false, autoplayPauseOnHover:false, pro_infiniteLoop:true}" data-ername="BDS" data-ertid="{7ww2ax1rnv7476319008631}">
<div data-ertype="content" style="display: none;">
<ul data-erlabel="Main Category">
<li> <img src="Images/slogan1.png" alt="" class="main" /> <img src="Images/slogan1.png" alt="" class="thumb" /> </li>
<li> <img src="Images/slogan2.png" alt="" class="main" /> <img src="Images/slogan2.png" alt="" class="thumb" /> </li>
<li> <img src="Images/slogan3 copie.png" alt="" class="main" /> <img src="Images/slogan3 copie.png" alt="" class="thumb" /> </li>
<li> <img src="Images/slogan4.png" alt="" class="main" /> <img src="Images/slogan4.png" alt="" class="thumb" /> </li>
</ul>
</div>
<div data-ertype="layout" data-ertemplatename="NONE" style="">
<div class="erimgMainOneUp" style="position: absolute; left:0;right:0;top:0;bottom:0;" data-erConfig="{__numTiles:3, scaleMode:'showAvailable', transition:'fade', crossFade:true, imgType:'main', __loopNextButton:false, __arrowButtonMode:'rollover'}">
<div class="erimgMain_slides" style="position: absolute; left:0; top:0; bottom:0; right:0;">
<div class="erimgMainOneUp_img" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0;"></div>
</div>
</div>
<div class="erabout erFixCSS3" style="color: #FFF; text-align: left; background: #000; background:rgba(0,0,0,0.93); border: 2px solid #FFF; padding: 20px; font: normal 11px/14px Verdana,_sans; width: 300px; border-radius: 10px; display:none;"> This <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">jQuery slider</a> was created with the free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/" target="_blank">EasyRotator</a> software from DWUser.com. <br />
<br />
Use WordPress? The free <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">EasyRotator for WordPress</a> plugin lets you create beautiful <a style="color:#FFF;" href="http://www.dwuser.com/easyrotator/wordpress/" target="_blank">WordPress sliders</a> in seconds. <br />
<br />
<a style="color:#FFF;" href="#" class="erabout_ok">OK</a></div>
<noscript>
Rotator powered by <a href="http://www.dwuser.com/easyrotator/">EasyRotator</a>, a free and easy jQuery slider builder from DWUser.com. Please enable JavaScript to view.
</noscript>
<script type="text/javascript">/*Avoid IE gzip bug*/(function(b,c,d){try{if(!b[d]){b[d]="temp";var a=c.createElement("script");a.type="text/javascript";a.src="http://easyrotator.s3.amazonaws.com/1/js/nozip/easy_rotator.min.js";c.getElementsByTagName("head")[0].appendChild(a)}}catch(e){alert("EasyRotator fail; contact support.")}})(window,document,"er_$144");</script>
</div>
</div>
<!-- End DWUser_EasyRotator -->
</div>
</div>
<div id="Corps">
<div id="Book">
<iframe src="https://secure.webreserv.eu/services/bookonline.do?businessid=patmansfr&embedded=y&search=n&list=n&language=en" marginwidth="0" marginheight="0" width="550" height="500" frameborder="0"><a href="https://secure.webreserv.eu/services/bookonline.do?businessid=patmansfr&embedded=y&search=n&list=n&language=en">Créer une réservation</a></iframe>
</div>
<div id="apDiv2"><a href="booknow.html"><img src="Images/Drapeaux/ENG.png" width="25" height="25" border="0"alt="ENG"></a> <a href="booknowFR.html"><img src="Images/Drapeaux/FR.png" width="25" height="25" border=0 alt="FR"></a> <a href="booknowTH.html"><img src="Images/Drapeaux/THAI.png" width="25" height="25" border="0" alt="THAI"></a> <a href="booknowVI.html"><img src="Images/Drapeaux/VIET.png" width="25" height="25" border="0" alt="VIET"></a> <img src="Images/Drapeaux/SP.png" width="25" height="25" border="0" alt="SP"> <img src="Images/Drapeaux/GER.png" width="25" height="25" border="0" alt="GER"> <img src="Images/Drapeaux/RUS.png" width="25" height="25" border="0" alt="RUS"></div>
</div>
<div id="Pied">
<div id="apDiv28">
<p>website by Dominique WATRELOT, to contact webmaster: dominique.watrelot@gmail.com - All rights reserved ©2013 - Patong Mansion Hotel : Adress: 29/1 soi prasertsub 1- Road Ratchapathanuson - Patong, Kathu, Phuket 83150 Thailand - tel: +66 869 434 777 / +66 869 436 555 Contact us by mail: contact@patong-mansion.com</p>
</div>
</div>
</div>
</div>
</body>
</html>
Merci encore!
Domi