probleme de résolution decran

Bonjour, voila j'ai créer un site internet tout se passer bien jusqu'au moment ou je l'ai

envoyé à un amis qui n'a pas la même résolution que moi et la catastrophe tout été

décalé ou découper.  j'ai été voir dans

google ce qui été conseillé, tous m'on dit de mettre dans le fichiers css " body

{width: 100%;}". Même avec sa j'ai le même

probleme le site. Alors comment faire pour pouvoir rendre un site web accesible à

toutes résolutions d'écrans. Voici mon code css.

Code:

body    {       width: 100%;       background: url("images/degrade.jpg")   no-repeat fixed ;       font-family: Arial, "Times New Roman", Times, sans-serif;       font-size: 0.8em;       color : black;       overflow : hidden; /* evite une barre horizontale */    }    a   /* apparence d'un lien */    {       color: #333333;       text-decoration: none;    }            a:hover   /* apparence du lien lorsqu'on pointe dessus */    {        color: #99CCFF;    font-weight: bold;    text-decoration: underline;    }        #heures    {       margin-top:5%;    }                #en_tete    {          height: 109px;       background: url("images/banniere.png") no-repeat center ;    }               h1    {    text-indent: -50000px;       }         /* menu deroulant */ dl, dt, dd, ul, li { margin: 0%; padding: 0%; list-style-type: none; } #menu { position:absolute; z-index:100; width: 100%; /* précision pour Opera */ font-size: 0.9em; /* taille de la police permets de grandir ou diminuer les menus */ margin-bottom: 180px; /* positionne */ margin-left: -500px; /* positionne */ left:  55%; /* permet une position extensible suivant la taille de la fenetre */ top: 25%; width: 900px; /*le menu ne se defait pas nimporte comment quand on retressi la fenetre du navigateur */ height: 50px; /* idem que le haut */ } #menu dl { float: left; width: 9em; /* grandeur de la case menu */ } #menu dt { cursor: pointer; text-align: center; font-weight: bold; /* police en gras */ background: #99CCFF; /* couleur menu */ border: 1px solid gray; /* contour des menus */ margin: 0%; /* marge entre les menus */ } #menu dd { display: none; border: 1px solid gray; /* contour des sous menus */ } #menu li { text-align: center; background: #CCCCCC;/*couleur du fond du sous menu*/ font-weight: bold; /* police en gras */ } #menu li a, #menu dt a { color: #000; text-decoration: none; display: block; height: 100%; border: 0 none; } #menu li a:hover, #menu dt a:hover { background: #3366FF; }        #fond    {       margin-left:0%;       margin-top:-32.9%;           }            #fond img    {        border-style:outset;    border-color:red;    border-width: 3.1px;        }        #fond_mag    {       margin-left:0%;       margin-top:3.1%;    }           #fond_mag img    {        border-style:outset;    border-color:blue;    border-width: 3.5px;        }    #fond_trem    {       margin-left:77%;       margin-top:-37.2%;    }        #fond_trem img    {        border-style:outset;    border-color:blue;    border-width: 3.5px;        }        #fond_scoot    {       margin-left:77%;       margin-top:3.1%;    }        #fond_scoot img    {        border-style:outset;    border-color:red;    border-width: 3.5px;        }           #corps    {       margin-top: 19%;       margin-left: 23.3%;       border: 3px dotted #3333FF;       padding: 1%;       height: 400px;       width: 50.7%;    }        #corps, h3    {           text-align: center;       color: #333333;       font-size: 150%;               }        #corps, p    {           font-size: 130%;       text-align: justify;       color: #333333;           }    #center    {       margin-left:42%;       margin-top:5%;    }    h4    {       margin-left:10%;       margin-top:20%;       font-size: 100%;       border: outset 2px red;       max-width: 13.5%;    }        h5    {       margin-left:80%;       margin-top:-2%;       font-size: 100%;       border: outset 2px blue;       max-width: 10.65%;    }                #pied_de_page    {       margin-top:15%;       margin-left: 40%;        }    h6    {       font-size:90%;    }    em    {       margin-left:37%;       font-size:120%;    }

Et voici mon code html

Code:

<head>       <title>Bienvenue sur Xtrem-Scoot! Ventes de motos, Quads, Jet Ski et Buggys</title>       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />      <link rel="stylesheet" media="screen" type="text/css" title="Mon Style" href="public.css"/>      <meta http-equiv="Content-Language" content="fr" />                    <script type="text/javascript"> <!-- function montre(id) { var d = document.getElementById(id);    for (var i = 1; i<=10; i++) {       if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}    } if (d) {d.style.display='block';} } //-->    </script>      <div id="en_tete"><h1>Xtrem-Scoot</h1></div>            <div id="corps">       <h3>Présentation</h3>       <p>okokokokokokokokokokokokokokokokokokokokokok       okokokokokokokokokokokokokokokokokokokokokokoko       okokokokokokokokokokokokokokokkkkkkkkkkkkkkkkkk       kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</p>    </div>     <div id="menu">   <dl>     <dt onmouseover="javascript:montre();"><a href="index.html" title="Retour à l'accueil">Accueil</a></dt>   </dl>   <dl>     <dt onmouseover="javascript:montre('smenu6');">Accessoires</dt>     <dd id="smenu6" onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre('');">       <ul>         <li><a href="casque.html">casques</a></li>         <li><a href="#">125cc</a></li>         <li><a href="#">200cc</a></li>         <li><a href="#">250cc</a></li>         </ul>     </dd>   </dl>       <dl>     <dt onmouseover="javascript:montre('smenu1');">Scooters</dt>     <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">       <ul>         <li><a href="scoot50.html">50cc</a></li>         <li><a href="scoot125.html">125cc</a></li>       </ul>     </dd>       </dl>   <dl>     <dt onmouseover="javascript:montre('smenu2');">Motos</dt>     <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">       <ul>             <li><a href="route125.html">route 125cc</a></li>                       </ul>     </dd>   </dl>   <dl>     <dt onmouseover="javascript:montre('smenu3');">Quads</dt>     <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">       <ul>         <li><a href="quad50.html">50cc</a></li>               </ul>     </dd>   </dl>     <dl>     <dt onmouseover="javascript:montre('smenu4');">Buggys</dt>     </dl>         <dl>     <dt onmouseover="javascript:montre('smenu5');"><a href="forfaits.html" title="Forfaits">Forfaits</a></dt>    </dl>       <dl>     <dt onmouseover="javascript:montre();"><a href="itineraire.html" title="Itinéraire">Iténaires </a></dt>   </dl> </div>            <div id="fond">     <img src="images/magasin/magasin.jpg" alt="magasin">    </div>        <div id="fond_mag">    <img src="images/magasin/magasin1.jpg" alt="magasin1">    </div>        <div id="fond_trem">    <img src="images/magasin/magasin2.jpg" alt="magasin2">    </div>        <div id="fond_scoot">    <img src="images/magasin/magasin3.jpg" alt="magasin2">    </div>                    <h4><a href="mailto:cocoone6@hotmail.com">Me contacter par e-mail</a></h4>        <h5><a href="www.xtrem-scoot.com" class="Style2" onClick="javascript:if(document.all)window.external.AddFavorite ('http://www.xtrem-scoot.com','')">Ajouter aux favoris</a></h5>        <em>Nous n' attendons plus que vous, faites votre choix!</em>        <div id="pied_de_page">    <h6>@ Copyright "xtrem-scoot" conflans</h6>    </div>             </body> </html>

Au passage dites moi si il y a de grosses erreurs de codage.

Merci d'avance en espérant que vous pourriez m'aidez.

lol oué c'est vrai que ji est été un peu fort lol dsl bon je vais  juste ecrire mon body.

Code:

body    {       width: 100%;       background: url("images/degrade.jpg")no-repeat  fixed ;       font-family: Arial, "Times New Roman", Times, sans-serif;       font-size: 0.8em;       color : black;       overflow : hidden; /* evite une barre horizontale */    }

Je peut pas donner un lien vers la page le site n'est pas encore en ligne.

Et le probleme precis c'est que des que je diminue la resolution je suis

actuellement en (1024*960), des que je me met par exemple en (800*600) tout la

design est decalé ou bien il manque des photos ou elles sont coupées à moitier.

Existe t-il une solution pour rendre un design compatible avec toutes resolutions

sans faire des tableaux car avec les tableaux sa pourrais marcher mais bon aprés

le design serais trop lourd à charger.