Probleme d'affichage

cs_ahmedmrissa Messages postés 3 Date d'inscription vendredi 8 février 2008 Statut Membre Dernière intervention 19 juin 2010 - 17 juin 2010 à 00:30
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 22 juin 2010 à 18:35
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">

<!-- ImageReady Slices (szszs.psd) -->




<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">



</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">



</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">



</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">



</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">



</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">



</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">



</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">



</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">



</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="30" height="30">



</object>



[acceil.php Accueil] | [produit.php Produit] | [presentation.php Présentation] | [poitdevente.php Points de ventes ] | [nouvaete.php Nouveautés ] | [promotion.php Promotions] | [galerie.php Galerie ] | [contact1.php Contact ]




[cataloque.html ]


Cliquez sur image






Découvrez Notre Catalogue






<form action="" method="post" name="p1">

</form>



<form name="p2" method="post" action="">
</form>




<form name="p3" method="post" action="">
</form>




<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">



</object>




<form name="form5" method="post" action="">

</form>





<fb:comments xid="oooo"></fb:comments>


<!-- End ImageReady Slices -->


<form action="base.php" method="post" name="betw">



</form>







<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">



</object>




HBTech


Accessoires










<form name="lops" method="post" action="administrateur.php">








</form>




</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;
}

3 réponses

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
17 juin 2010 à 18:29
Bonjour,
je ne fais que reprendre ce que je t'ai mis, avant que tu ne sois interrompu justement par DARKSIDIOUS.

commences par mettre un DOCTYPE Strict, cela limite les soucis
exemple
<!DOCTYPE html public "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

;O)
cs_ahmedmrissa Messages postés 3 Date d'inscription vendredi 8 février 2008 Statut Membre Dernière intervention 19 juin 2010
19 juin 2010 à 19:43
ça change rien
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
22 juin 2010 à 18:35
Bonjour,
difficile de dire juste à la lecture, hard, de ton code...si tu as une adresse ou l'on peut essayer de se rendre compte

;O)
Rejoignez-nous