Pb Site web toutes resolutions

Skynet · le 21 Mar 2011 19:04

Bonjour, je suis nouveau sur ce site.
Je n'arrive pas a mettre mon site WEB 1647px X 666px ( http://www.beautytek47.fr ) pour toutes les resolutions d'écrans automatiquement.
Par exemple mon site apparait tres bien sur un écran 23 pouce.
Par contre sur mon macbook 13POUCES il apparait trop grand. Il y a une barre de slide en bas et a droite.
J'aimerais que mon site s'adapte automatiquement a toutes les résolutions. J'ai deja essayé le code body width: 100 % mais rien.
Voici mon code source :

Code: Tout sélectionner: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="fr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   <meta name="Generator" content="Serif WebPlus 10.1.3.039"> <title>Beautytek 47</title> <meta name="keywords" content="remodelage corporel, beautytek, beauty tek, 47, 47300, lot et garonne, bien etre, btek, b tek, lifting des seins"> <meta name="description" content="Venez découvrir la nouvelle technique de remodelage corporel. L'innovation esthétique."> <meta http-equiv="Content-Language" content="fr"> <meta name="robots" content="index,follow"> <style type="text/css">  </style> <script type="text/javascript"></script> <script src="_wp_scripts/jspngfix.js" type="text/javascript"></script> </head> <body link="#0a21ff" vlink="#ff0000" alink="#0000ff" text="#000000" style="background: #ffffff; height:1000px;"> <center><div style="position:relative;width:1647px;"> <div style="position:absolute; left:902px; top:0px; width:295px; height:180px;"> <img src="_wp_generated/wp8b9e1b0a.png" width="295" height="180" border="0" id="pic_159" name="pic_159" title="" alt="wp8b9e1b0a.png" onload="onloadPngFix()"></div> <div style="position:absolute; left:1197px; top:0px; width:450px; height:179px;"> <img src="_wp_generated/wp6e4194b8.png" width="450" height="179" border="0" id="pic_160" name="pic_160" title="" alt="wp6e4194b8.png" onload="onloadPngFix()"></div> <div style="position:absolute; left:0px; top:0px; width:178px; height:181px;"> <img src="_wp_generated/wpeec915f1_4e.jpg" width="178" height="181" border="0" id="pic_154" name="pic_154" title="" alt="wpeec915f1_4e.jpg"></div> <div style="position:absolute; left:184px; top:0px; width:236px; height:176px;"> <img src="_wp_generated/wpd648f4dc.jpg" width="236" height="176" border="0" id="pic_155" name="pic_155" title="" alt="wpd648f4dc.jpg"></div> <div style="position:absolute; left:435px; top:0px; width:128px; height:180px;"> <img src="_wp_generated/wpb90a3092_4e.jpg" width="128" height="180" border="0" id="pic_156" name="pic_156" title="" alt="wpb90a3092_4e.jpg"></div> <div style="position:absolute; left:568px; top:0px; width:181px; height:180px;"> <img src="_wp_generated/wpe9dd8236_4e.jpg" width="181" height="180" border="0" id="pic_157" name="pic_157" title="" alt="wpe9dd8236_4e.jpg"></div> <div style="position:absolute; left:750px; top:0px; width:152px; height:178px;"> <img src="_wp_generated/wpc68fcde1_4e.jpg" width="152" height="178" border="0" id="pic_158" name="pic_158" title="" alt="wpc68fcde1_4e.jpg"></div> <div style="position:absolute; left:1500px; top:844px; width:147px; height:156px;"> <img src="_wp_generated/wp5e677620_4e.jpg" width="147" height="156" border="0" id="pic_161" name="pic_161" title="" alt="wp5e677620_4e.jpg"></div> <div style="position:absolute; left:1252px; top:843px; width:232px; height:157px;"> <img src="_wp_generated/wpd648f4dc.jpg" width="232" height="157" border="0" id="pic_162" name="pic_162" title="" alt="wpd648f4dc.jpg"></div> <div style="position:absolute; left:1027px; top:842px; width:215px; height:158px;"> <img src="_wp_generated/wp006b00a0_4e.jpg" width="215" height="158" border="0" id="pic_163" name="pic_163" title="" alt="wp006b00a0_4e.jpg"></div> <div style="position:absolute; left:807px; top:844px; width:201px; height:156px;"> <img src="_wp_generated/wp8c75550a.jpg" width="201" height="156" border="0" id="pic_164" name="pic_164" title="" alt="wp8c75550a.jpg"></div> <div style="position:absolute; left:667px; top:843px; width:119px; height:157px;"> <img src="_wp_generated/wp06adac60_4e.jpg" width="119" height="157" border="0" id="pic_165" name="pic_165" title="" alt="wp06adac60_4e.jpg"></div> <div style="position:absolute; left:445px; top:842px; width:221px; height:158px;"> <img src="_wp_generated/wp2546b1c6_4e.jpg" width="221" height="158" border="0" id="pic_123" name="pic_123" title="" alt="wp2546b1c6_4e.jpg"></div> <div style="position:absolute; left:172px; top:844px; width:271px; height:156px;"> <img src="_wp_generated/wpbf1d6eec.jpg" width="271" height="156" border="0" id="pic_166" name="pic_166" title="" alt="wpbf1d6eec.jpg"></div> <div style="position:absolute; left:0px; top:843px; width:173px; height:157px;"> <img src="_wp_generated/wp613dfdcc_4e.jpg" width="173" height="157" border="0" id="pic_167" name="pic_167" title="" alt="wp613dfdcc_4e.jpg"></div> <div style="position:absolute; left:0px; top:179px; width:1647px; height:666px;"> <img src="_wp_generated/wpbd008874_4e.jpg" width="1647" height="666" border="0" id="pic_134" name="pic_134" title="" alt="wpbd008874_4e.jpg"></div> <div style="position:absolute; left:641px; top:368px; width:325px; height:51px;"> <map name="map0"> <area shape="poly" coords="312,2,0,2,0,51,312,51" href="page1.html"> </map> <img src="_wp_generated/wp6b4d4a4b.png" width="325" height="51" border="0" id="art_58" name="art_58" title="" alt="wp6b4d4a4b.png" onload="onloadPngFix()" usemap="#map0"></div> <div style="position:absolute; left:669px; top:486px; width:261px; height:51px;"> <map name="map1"> <area shape="poly" coords="248,2,0,2,0,51,248,51" href="page14.html"> </map> <img src="_wp_generated/wpa2bfbb51.png" width="261" height="51" border="0" id="art_59" name="art_59" title="" alt="wpa2bfbb51.png" onload="onloadPngFix()" usemap="#map1"></div> <div style="position:absolute; left:77px; top:205px; width:280px; height:96px;"> <img src="_wp_generated/wp897bc265_4e.jpg" width="280" height="96" border="0" id="pic_100" name="pic_100" title="" alt="wp897bc265_4e.jpg"></div> <div style="position:absolute; left:87px; top:381px; width:332px; height:102px;"> <img src="_wp_generated/wpcc0f7f7c.png" width="332" height="102" border="0" id="three_2" name="three_2" title="" alt="wpcc0f7f7c.png" onload="onloadPngFix()"></div> <div style="text-align:left; position:absolute; left:543px; top:367px;"> <a href="page1.html"><img alt="" src="_wp_generated/wpc0db46f4.gif" width="68" height="56" border="0" id="agif1" name="agif1" alt="wpc0db46f4.gif"></a></div> <div style="text-align:left; position:absolute; left:543px; top:481px;"> <a href="page14.html"><img alt="" src="_wp_generated/wpc0db46f4.gif" width="68" height="57" border="0" id="agif2" name="agif2" alt="wpc0db46f4.gif"></a></div> <div style="position:absolute; left:237px; top:284px; width:114px; height:25px;"> <div class="Normal-P"> <span class="Normal-C">By Medilab</span></div> </div> <div style="position:absolute; left:513px; top:205px; width:617px; height:64px;"> <applet archive="SerifMarquee.jar" code="SerifMarquee.class" width="617" height="64" id="</map> 1" name="</map> 1"> <param name="Global" value="FPS:60;BACKGROUND:95,164,243;"> <param name="Event1" value="TYPE:TEXT;SPEED:6;TEXT:L'innovation esthétique;FONT:Times New Roman;SIZE:30;STYLE:BOLD;COLOUR:255,255,255;POSITION:MIDDLE;DIRECTION:RIGHTWARDS;"> </applet> </div> <div style="position:absolute; left:1482px; top:764px; width:100px; height:30px;"> <iframe id="webresource_5" name="webresource_5" src="http://www.serifwebresources.com/control.php?lang=fr&uid=9e441d4e7c18881c8dcf76dd953da87400a22398" allowtransparency="true" style="width:100px; height:30px;" frameborder="0"></iframe> </div> <div style="position:absolute; left:664px; top:594px; width:274px; height:51px;"> <map name="map2"> <area shape="poly" coords="254,2,0,2,0,51,254,51" href="page21.html"> </map> <img src="_wp_generated/wp0fa77a9c.png" width="274" height="51" border="0" id="art_82" name="art_82" title="" alt="wp0fa77a9c.png" onload="onloadPngFix()" usemap="#map2"></div> <div style="text-align:left; position:absolute; left:544px; top:593px;"> <a href="page21.html"><img alt="" src="_wp_generated/wpc0db46f4.gif" width="70" height="59" border="0" id="agif4" name="agif4" alt="wpc0db46f4.gif"></a></div> <div style="position:absolute; left:1256px; top:302px; width:214px; height:146px;"> <map name="map3"> <area shape="poly" coords="205,111,18,3,0,34,187,143" href="page22.html"> </map> <img src="_wp_generated/wpa55e8a36.png" width="214" height="146" border="0" id="art_98" name="art_98" title="" alt="wpa55e8a36.png" onload="onloadPngFix()" usemap="#map3"></div> </div></center> </body> </html>

Cordialement Martin113
Merci de vos réponses.

Skynet · le 21 Mar 2011 20:32

Bonsoir & bienvenue,

c'est dans ton CSS que ça ne va pas. Il faut utiliser des % au lieu des px ici :

Code: Tout sélectionner: <style type="text/css">  </style>

Sauf qu'il faudra sûrement revoir toute cette partie (les valeurs).

@+

Martin113 · le 21 Mar 2011 21:19

Merci de votre réponse =)
Faut que je le fasse seulement sur la partie que vous citez ou sur tous mon code source ? ?
Je ne comprend pas je cites : " Il faudra surement revoir toute cette partie (valeurs)
Cordialement

Skynet · le 21 Mar 2011 23:47

Oui excuse-moi, la citation du code est incomplète.

C'est bien sur l'ensemble de tout ton code source, puisque tu utilises là aussi des balises "style"...

Mais ce tuto pourrait sûrement t'aider :

http://www.alsacreations.com/tuto/lire/ ... tions.html

Pour les valeurs voilà juste un exemple avec les attributs "left" (je dis bien juste pour l'exemple) :

Code: Tout sélectionner: <div style="position:absolute; left:0%; top:0%;"> <img src="_wp_generated/wpeec915f1_4e.jpg" border="0"></div> <div style="position:absolute; left:14%; top:0%;"> <img src="_wp_generated/wpd648f4dc.jpg" border="0"></div> <div style="position:absolute; left:34%; top:0%;"> <img src="_wp_generated/wpb90a3092_4e.jpg" border="0"></div> <div style="position:absolute; left:44.5%; top:0%;"> <img src="_wp_generated/wpe9dd8236_4e.jpg" border="0"></div> <div style="position:absolute; left:58.7%; top:0%;"> <img src="_wp_generated/wpc68fcde1_4e.jpg" border="0"></div> <div style="position:absolute; left:70.6%; top:0%;"> <img src="_wp_generated/wp8b9e1b0a.png" border="0"></div> <div style="position:absolute; left:93.7%; top:0%;"> <img src="_wp_generated/wp6e4194b8.png" border="0"></div>

Martin113 · le 22 Mar 2011 17:43

Merci, mais je ne comprends toujours pas pour les valeurs ? pourrais tu me le faire en entier s'il te plait car je suis perdu :(
Cordialement

HOCD · le 22 Mar 2011 21:11

Il y a une solution a utiliser en plus de l'utilisation des "%" dans ton CSS.

Il y a des balises "max-width" et "min-width" que tu peux utiliser.
Ces balises permettent de limiter la taille de ta fenêtre peut importe l'écran de l'utilisateur.

La taille "min-width" obligera le navigateur à garder au minimum cette largeur pour les faibles résolutions et
la max limitera la largeur pour les hautes résolutions;

Ceci peut aider mais il faut bien entendu utiliser les % dans le css

Skynet · le 22 Mar 2011 21:38

C'était justement dans mon lien :roll:

.

Encore faut-il lire l'article.

Martin113 · le 22 Mar 2011 21:42

Je les bien lus mais je ne comprends pas tout, je ne suis pas un professionnel désolé :S

Skynet · le 22 Mar 2011 21:50

Justement c'est un tutoriel pour débutant, tu as des exemples en bas.

Martin113 · le 23 Mar 2011 08:04

J'ai bien tout regardé. Mais cela n'explique pas pour changer et mettre les bonnes valeurs. Je ne comprends pas comment on passe de 1000 px à un resultats en % . Cordialement

Skynet · le 23 Mar 2011 14:57

Il n'y a pas de conversion à faire ici, ça tu n'y touches pas (pour ton CSS) :

div {
width: 80%;
max-width: 1000px;
min-width: 700px;
}

Donc tu ajustes en fonction de tes besoins les valeurs en rouge, mais tu laisses le % et les px à leurs places pour ce code.

Par contre, dans le tutoriel :

Il est inutile donc d'espérer faire un site fluide à partir d'un design entièrement graphique

Et c'est presque ton cas avec tes deux grandes frises en haut et en bas. Pour te simplifier la tâche prenons l'exemple de la frise du haut, elle est constituée de 7 images qui se collent à la suite. Tu prends un logiciel de retouche d'image et tu transformes ce tout en une seule image.

Puis tu la convertis en flash, ce qui aura le mérite d'être redimensionnable une fois en ligne. Mais je ne te cache pas que tu as beaucoup, beaucoup de boulot !

Martin113 · le 23 Mar 2011 20:32

Désolé mais je ne comprends rien pouvez vous me faire tout comme dans votre premiere reponse

je ne comprends vraiment rien je n'y arryverais jamais
cordialement

Pb Site web toutes resolutions

Pb Site web toutes resolutions

Re: Pb Site web toutes resolutions

Sujets similaires

Qui est en ligne