Problème d'affichage selon les écrans

Fermé

youpitou - Modifié par youpitou le 14/07/2010 à 19:23
avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 - 14 juil. 2010 à 19:47

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>

A voir également:

Problème d'affichage selon les écrans
Affichage double ecran - Guide
Comment agrandir l'affichage de l'écran - Guide
Windows 11 affichage classique - Guide
Problème affichage fenêtre windows 10 - Guide
Problème affichage double écran windows 11 ✓ - Forum Ecran

1 réponse

Réponse 1 / 1

avion-f16 Messages postés 19249 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 15 juin 2024 4 504
14 juil. 2010 à 19:47

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.

Discussions similaires

adele

Leboncoin : j'ai un problème d'affichage

Les paramètres d'affichage NVIDIA ne sont pas

Comment changer le sens de la souris avec un double écran ?

Probleme d'affichage google chrome