Bonjour,
J'ai un problème d'affichage de mon site lors du changement du resolution graphique ou bien le changement du navigateur on voit un décalage des images et des divs.
Mon code :
<html>
<head>
<title>HB Tech Informatique</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#Layer1 {
position:absolute;
left:71px;
top:183px;
width:118px;
height:290px;
z-index:1;
}
#Layer2 {
position:absolute;
left:31px;
top:201px;
width:171px;
height:304px;
z-index:1;
}
#Layer30 { position:absolute;
left:382px;
top:176px;
width:429px;
height:28px;
z-index:24;
}
#Layer3 {
position:absolute;
left:580px;
top:187px;
width:77px;
height:20px;
z-index:25;
}
#Layer13 {
position:absolute;
left:737px;
top:187px;
width:76px;
height:24px;
z-index:26;
}
#Layer15 {
position:absolute;
left:821px;
top:183px;
width:29px;
height:29px;
z-index:27;
}
#Layer28 { position:absolute;
left:277px;
top:258px;
width:133px;
height:108px;
z-index:22;
}
.style13 { font-size: 18px;
font-weight: bold;
}
#Layer27 { position:absolute;
left:341px;
top:229px;
width:259px;
height:84px;
z-index:21;
}
#Layer16 {
position:absolute;
left:277px;
top:155px;
width:829px;
height:16px;
z-index:28;
}
#Layer17 {
position:absolute;
left:102px;
top:1323px;
width:888px;
height:50px;
z-index:29;
}
.style10 {font-size: 18px}
.style11 { font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: #000000;
}
.style7 {font-family: "Agency FB"; font-size: 14px;}
#Layer18 {
position:absolute;
left:85px;
top:888px;
width:133px;
height:129px;
z-index:30;
}
#Layer19 {
position:absolute;
left:55px;
top:982px;
width:164px;
height:61px;
z-index:31;
}
.style14 {color: #FFFFFF}
#Layer20 {
position:absolute;
left:50px;
top:837px;
width:155px;
height:20px;
z-index:32;
}
.style15 {
font-size: 12px;
font-weight: bold;
}
#Layer21 {
position:absolute;
left:69px;
top:568px;
width:128px;
height:18px;
z-index:33;
}
#Layer22 {
position:absolute;
left:70px;
top:634px;
width:122px;
height:18px;
z-index:34;
}
#Layer23 {
position:absolute;
left:70px;
top:702px;
width:113px;
height:20px;
z-index:35;
}
#Layer24 { position:absolute;
left:43px;
top:754px;
width:147px;
height:18px;
z-index:18;
}
#Layer25 {
position:absolute;
left:44px;
top:783px;
width:142px;
height:23px;
z-index:36;
}
#Layer26 {
position:absolute;
left:191px;
top:809px;
width:43px;
height:36px;
z-index:37;
}
#Layer29 {
position:absolute;
left:32px;
top:173px;
width:207px;
height:34px;
z-index:38;
}
#Layer31 {
position:absolute;
left:246px;
top:365px;
width:919px;
height:1014px;
z-index:39;
}
#Layer32 {
position:absolute;
left:673px;
top:248px;
width:281px;
height:78px;
z-index:40;
}
#Layer33 {
position:absolute;
left:623px;
top:233px;
width:504px;
height:105px;
z-index:40;
}
#Layer34 {
position:absolute;
left:639px;
top:248px;
width:525px;
height:96px;
z-index:40;
}
-->
</style>
<head>
<?
@$cn=mysql_connect("localhost","root","")OR exit("echec conexion");
mysql_selectdb("hb",$cn);
$req="select * from `place`";
$res=mysql_query($req,$cn);
$enr=mysql_fetch_assoc($res);
echo "<script>
function afficher()
{
document.p1.t1.value=\"".$enr["1place"]."\" ;
document.p2.t2.value=\"".$enr["2place"]."\" ;
document.p3.t3.value=\"".$enr["3place"]."\" ;
}
</script>";
mysql_close($cn);
?>
<script type="text/javascript">
function getCurrentTime()
{
var now = new Date();
var mySecs = now.getSeconds();
var curHour = now.getHours();
var curMin = now.getMinutes();
var day = now.getDay();
var date = now.getDate();
var year = now.getFullYear();
var month = now.getMonth();
var days = new Array();
days[0] = "Dimanche";
days[1] = "Lundi";
days[2] = "Mardi";
days[3] = "Mercredi";
days[4] = "Jeudi";
days[5] = "Vendredi";
days[6] = "Samedi";
var suffix = "AM";
if(mySecs < 10)
{
mySecs = "0" + mySecs;
}
if(curMin < 10)
{
curMin = "0" + curMin;
}
if(curHour == 12 && curMin >= 1)
{
suffix = "PM";
}
if(curHour == 24 && curMin >= 1)
{
curHour-= 12;
suffix = "AM";
}
if(curHour > 12)
{
curHour-= 12;
suffix = "PM";
}
document.form5.m.value=(days[day] + " " + (month +1) + "/" + date + "/" + year + "| " + curHour + ":" + curMin + ":" + mySecs + " " + suffix);
}
</script>
</head>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="return (setInterval('getCurrentTime()', 1000) && afficher() )">
<!-- ImageReady Slices (szszs.psd) -->
<div id="Layer2">
<div id="Layer4">
<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="190" height="32">
<param name="movie" value="Nouveau dossier/pcport.swf">
<param name="quality" value="high">
<embed src="Nouveau dossier/pcport.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="190" height="32"></embed>
</object>
<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="190" height="32">
<param name="movie" value="Nouveau dossier/pcbure.swf">
<param name="quality" value="high">
<embed src="Nouveau dossier/pcbure.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="190" height="32"></embed>
</object>
<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="190" height="32">
<param name="movie" value="Nouveau dossier/ecrans.swf">
<param name="quality" value="high">
<embed src="Nouveau dossier/ecrans.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="190" height="32"></embed>
</object>
<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="190" height="32">
<param name="movie" value="Nouveau dossier/imprimantes.swf">
<param name="quality" value="high">
<embed src="Nouveau dossier/imprimantes.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="190" height="32"></embed>
</object>
</div>
<div id="Layer5"><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="190" height="32">
<param name="movie" value="Nouveau dossier/scanners.swf">
<param name="quality" value="high">
<embed src="Nouveau dossier/scanners.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="190" height="32"></embed>
</object></div>
<div id="Layer6"><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="190" height="32">
<param name="movie" value="Nouveau dossier/apppho.swf">
<param name="quality" value="high">
<embed src="Nouveau dossier/apppho.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="190" height="32"></embed>
</object></div>
<div id="Layer7"></div>
<div id="Layer8">
<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="190" height="32">
<param name="movie" value="Nouveau dossier/onduleurs.swf">
<param name="quality" value="high">
<embed src="Nouveau dossier/onduleurs.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="190" height="32"></embed>
</object>
</div>
<div id="Layer9"><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="190" height="32">
<param name="movie" value="Nouveau dossier/tf.swf">
<param name="quality" value="high">
<embed src="Nouveau dossier/tf.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="190" height="32"></embed>
</object></div>
<div id="Layer10"><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="190" height="32">
<param name="movie" value="Nouveau dossier/accessoires.swf">
<param name="quality" value="high">
<embed src="Nouveau dossier/accessoires.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="190" height="32"></embed>
</object></div>
<div id="Layer11"></div>
<div id="Layer12"></div>
<div id="Layer14"></div>
</div>
<div id="Layer15"><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="30" height="30">
<param name="movie" value="Untitled-1.swf">
<param name="quality" value="high">
<embed src="Untitled-1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="30" height="30"></embed>
</object></div>
<div id="Layer16"><a href="acceil.php">Accueil</a> | <a href="produit.php">Produit</a> | <a href="presentation.php">Présentation</a> | <a href="poitdevente.php">Points de ventes </a> | <a href="nouvaete.php">Nouveautés </a> | <a href="promotion.php">Promotions</a> | <a href="galerie.php">Galerie </a> | <a href="contact1.php">Contact </a></div>
<div id="Layer18"><a href="cataloque.html"><img src="source/catalogue1.PNG"></a></div>
<div id="Layer19"><p class="style12 style10 style14">Cliquez sur image </p>
</div>
<div id="Layer20">
<p align="center" class="style15">Découvrez Notre Catalogue</p>
</div>
<div id="Layer21">
<form action="" method="post" name="p1">
<input name="t1" type="text" style=" border-style: none ; font-family: Arial; font-size: 16pt; color: #FFFFFF; background-color: #333333; text-align: left;" value=" " size="10" readonly="true" >
</form></div>
<div id="Layer22">
<form name="p2" method="post" action=""><input name="t2" type="text" style=" border-style: none ; font-family: Arial; Times, serif; font-size: 16pt; color: #FFFFFF; background-color: #333333; text-align:left;" value="" size="10" readonly="true" >
</form>
</div>
<div id="Layer23">
<form name="p3" method="post" action=""><input name="t3" type="text" style=" border-style: none ; font-family: Arial; Times, serif; font-size: 16pt; color: #FFFFFF; background-color: #333333; text-align: left;" value="" size="10" readonly="true" >
</form>
</div>
<div id="Layer26">
<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="30" height="30">
<param name="movie" value="Nouveau dossier/administrateur.swf">
<param name="quality" value="high">
<embed src="Nouveau dossier/administrateur.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="30" height="30"></embed>
</object>
</div>
<div id="Layer29">
<form name="form5" method="post" action="">
<input type="texte" name="m" value="" size="32" style="border-style: none; font-family: Verdana; font-size: 10pt; color: #000000; background-color: #ffffff; text-align: left;">
</form></div>
<div id="Layer31"></div>
<div id="Layer34"><fb:comments xid="oooo"></fb:comments></div>
<img src="images/finale2.gif" width="1000" height="1367" alt="">
<!-- End ImageReady Slices -->
<div id="Layer30">
<form action="base.php" method="post" name="betw">
<p><input type="texte" name="a1" value="" size="14" style=" border-style: none ; font-family: Verdana; font-size: 10pt; color: #000000; background-color: #ffffff; text-align: left;">
<input type="texte" name="a2" value="" size="8" style=" border-style: none ; font-family: Verdana; font-size: 10pt; color: #000000; background-color: #ffffff; text-align: left;">
<input type="texte" name="a3" value="" size="8" style=" border-style: none ; font-family: Verdana; font-size: 10pt; color: #000000; background-color: #ffffff; text-align: left;">
</form></p>
</div>
<div id="Layer28">
<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="50" height="50">
<param name="movie" value="Untitled-2.swf">
<param name="quality" value="high">
<embed src="Untitled-2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="50" height="50"></embed>
</object>
</div>
<div class="style13" id="Layer27">
<p align="left">HBTech</p>
<p align="left">Accessoires</p>
<p> </p>
</div>
<div id="Layer24">
<form name="lops" method="post" action="administrateur.php">
<p>
<input type="texte" name="log" value="Login" size="" style=" font-family: Verdana; font-size: 10pt; color: #000000; background-color: #ffffff; text-align: left;">
</p>
<p>
<input type="password" name="psw" value="Mot de passe" size="" style=" font-family: Verdana; font-size: 9pt; color: #000000; background-color: #ffffff; text-align: left;">
</p>
</form>
</div>
</body>
</html>
ma css "styles.css" :
div#principale
{
width: 594px;
height: 613px;
overflow: auto;
border: 1px dashed #c0c0c0;
position: absolute;
top: 380px;
left: 499px;
background-image:url(images/welcome.jpg);
background-attachment: fixed;
}
body {
margin-bottom: 0px;
font-family: Arial;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000000;
}
td, textarea, input, select {
font-family: Arial;
font-size: 18px;
color: #000000;
font-weight: normal;
}
.tableDetail {
font-size: 14px;
font-family: Arial;
color: #000000;
}
a:link {
color: #000000;
font-family: Arial;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #000000;
font-family: Arial;
font-size: 14px;
font-weight: bold;
font-style: normal;
line-height: normal;
font-variant: normal;
text-transform: none;
text-decoration: underline;
}
a:visited {
color: #000000;
font-family: Arial;
font-size: 14px;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
.text1 {
font-family: Arial;
font-size: 14px;
color: #000000;
font-weight: bold;
}
.text2 {
font-family: Arial;
font-size: 14px;
font-weight: normal;
color: #000000;
}
.text3 {
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #000000;
}
.text4 {
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #000000;
}
.text5 {
font-family: Arial;
font-size: 10px;
font-weight: normal;
color: #000000;
}
.text6 {
font-family: Arial;
font-size: 10px;
font-weight: bold;
color:#000000;
}
.text7 {
font-family: Arial;
font-size: 10px;
font-weight: normal;
color: #000000;
}
.text8 {
font-family: Arial;
font-size: 10px;
font-weight: normal;
color: #000000;
}
.text9 {
font-family: Arial;
font-size: 10px;
font-weight: normal;
color: #000000;
}
.frame {
border: 1px solid #000000;
}
.designed_by {
font-family: Arial;
font-size: 8.5px;
font-weight: lighter;
color: #000000;
}
a.a:link {
font-family: Arial;
font-size: 14px;
font-weight: normal;
color: #000000;
text-decoration: underline;
}
a.a:hover {
font-family: Arial;
font-size: 14px;
font-weight: normal;
color: #000000;
text-decoration: none;
}
a.a:visited {
font-family: Arial;
font-size: 14px;
font-weight: normal;
color: #000000;
text-decoration: underline;
}
a.b:link {
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #000000;
text-decoration: none;
}
a.b:hover {
font-family: Arial;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}