Problème d'affichage selon les écrans

youpitou -  
avion-f16 Messages postés 19255 Date d'inscription   Statut Contributeur Dernière intervention   -
Bonjour à tous,
Je suis en train de créer un site internet (http://secrets2lost.chez-alice.fr/villion) pour une association, et j'ai un petit problème : mon site s'affiche très bien sur mon écran, mais quand je vais sur un autre ordinateur, la colonne du centre à droite s'affiche tout en bas, bref tout est décalé.
Ca fait bientot une semaine que j'essaie beaucoup de trucs différents pour résoudre le problème, mais ça ne marche pas. Peut etre en ajoutant que le site doit tenir dans 100% de la résolution de l'écran ?
Je vous met le code de ma page, et vous remercie d'avance ! 
<!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="fr" lang="fr"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 <title>Le site de l'Association Pierre Villion</title> 
 <style type="text/css"> 
  html {font-size: 100%;} 
img { border : none; } 
  body {width:90%; padding: 1em; font-size: .80em; font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;} 
body { 
color:DimGray; 
background-color:Cornsilk; 
background-image:url(02.jpg); 
background-repeat:repeat; 
} 


   
  h1 { 
   margin-top: 0px;  


   margin-left: 180px; 
   margin-bottom: 0px; 
   background: url(header.jpg) no-repeat left top; 
   height: 245px; 
   width: 812px; 
  } 

  ol, ul, li { 
   padding: 0; 
   margin: 1em; 
  } 
   

  html { 
   margin: 0; 
   padding: 0; 
  } 

  div#colonne1 { 
   float: left; 
   margin-left: 180px; 
   background: url(03.jpg) no-repeat left top; 
   width: 216px; 
   height: 1041px;  


  } 
   
   #colonne1 li { 
    list-style-type: none; 
    padding: 5px 0 0 5px; 
    margin: 60px 0 0 35px; 


   } 
   





  div#centre { 
   overflow: hidden; 
   padding: 160px 0 10px 15px; 
   background: url(04.jpg) no-repeat left top; 
   height: 1041px; 
   width: 596px; 

  } 
   #centre li { 
    list-style-type: none; 





   } 
 </style> 
  
 <!--[if lte IE 6]><style type="text/css"> 
  div#colonne1 { 
   margin-right: 0px; 
display:inline 
  } 
   
  div#centre { 
   overflow: visible; 
   height: 1%; 
  } 
 </style><![endif]--> 
</head> 

<body> 
 <h1> 

<br><br> 
            <a href="test2.html" onmouseover="image12.src='entete2.png';" onmouseout="image12.src='entete.png';"> 
<img name="image12" src="entete.png" border="0"></a><br> 





</h1> 
  
 <div id="colonne1"> 
 <h2></h2> 
 <ul> 
  <li><FONT COLOR="FFFFFF"><b> 
<a href="test2.html" onmouseover="image2.src='accueil2.png';" onmouseout="image2.src='accueil.png';"> 
<img name="image2" src="accueil.png" border="0"></a><br> 

<a href="test2.html" onmouseover="image3.src='assoc2.png';" onmouseout="image3.src='assoc.png';"> 
<img name="image3" src="assoc.png" border="0"></a><br> 

<a href="test2.html" onmouseover="image4.src='villion2.png';" onmouseout="image4.src='villion.png';"> 
<img name="image4" src="villion.png" border="0"></a><br> 

    <a href="test2.html" onmouseover="image5.src='prof2.png';" onmouseout="image5.src='prof.png';"> 
<img name="image5" src="prof.png" border="0"></a><br> 

    <a href="test2.html" onmouseover="image6.src='ecrivain2.png';" onmouseout="image6.src='ecrivain.png';"> 
<img name="image6" src="ecrivain.png" border="0"></a><br> 

    <a href="test2.html" onmouseover="image7.src='musicien2.png';" onmouseout="image7.src='musicien.png';"> 
<img name="image7" src="musicien.png" border="0"></a><br> 

    <a href="test2.html" onmouseover="image8.src='peintre2.png';" onmouseout="image8.src='peintre.png';"> 
<img name="image8" src="peintre.png" border="0"></a><br> 

    <a href="test2.html" onmouseover="image9.src='erudit2.png';" onmouseout="image9.src='erudit.png';"> 
<img name="image9" src="erudit.png" border="0"></a><br> 

<a href="test2.html" onmouseover="image10.src='contact2.png';" onmouseout="image10.src='contact.png';"> 
<img name="image10" src="contact.png" border="0"></a><br><br> 

<a href="test2.html" onmouseover="image11.src='plaquette2.png';" onmouseout="image11.src='plaquette.png';"> 
<img name="image11" src="plaquette.png" border="0" alt="Acheter la plaquette Pierre Villion" ></a><br> 


  <b></FONT> </li> 
 </ul> 
 </div><!-- fin de div#colonne1 --> 
  
  
  
 <div id="centre"> 
  <h2></h2> 

Bienvenue sur le site internet de <b>l'Association Pierre Villion</b>.<br><br> 

<center><div style="font-family: Comic Sans MS; font-size: 15px;">ACTUALITES</div></center><br><br> 

<?PHP 
$number=3; 
include("/mnt/127/sda/chez-alice.fr/5/a/secrets2lost/villion/cutenews/show_news.php"); 
?> 


  </div> 
   
 </div><!-- fin de div#centre --> 
</body> 
</html>


1 réponse

Réponse 1 / 1
avion-f16 Messages postés 19255 Date d'inscription   Statut Contributeur Dernière intervention   4 507
 
Salut.

Inutile de nous donner tes codes si tu nous passes l'adresse du site.
En voyant ton code, il vaut mieux repartir sur de bonnes bases.
Tu peux t'inspirer de ces gabarits.
0

Discussions similaires

impossible de voir les photos et videos sur une conversation messenger
cortomaltese83 -
Oceii -

4 réponses
Probleme d'affichage google chrome
flyingvvv -
helo -

5 réponses
Problème d'affichage d'une page web.
mk51 -
mk51 -

33 réponses
Problème d'affichage/bugs graphiques sur Chrome sur Android
Narell -
Narell -

4 réponses
Problème d'affichage du double écran en mode étendre...
Lohanyh -
txiki -

6 réponses