Il y a actuellement 78 visiteurs
Vendredi 30 Juillet 2021
accueilactualitésdossierscomparer les prixtélécharger gratuitement vos logicielsoffres d'emploiforum informatique
Connexion
Créer un compte

Pb Site web toutes resolutions

Besoin d'aide pour configurer un serveur ? Vous souhaitez obtenir des conseils pour référencer votre site ? Un petit souci pour accéder à votre FTP ? Des soucis de programmation en PHP / ASP / HTML / XHTML / XML / XSLT / CSS / ReactJS / AngularJS / VueJS / CGI / PERL / C / MySQL / PostgreSQL ??? Nous avons peut-être la solution dans ce forum ...

Pb Site web toutes resolutions

Message 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">
<!--Serif WebPlus 10 HTML Export-->
<!--Supports HTML 4.01-->
<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">
<!--
body {margin: 0px; padding: 0px;}
.Normal-P
{
margin:0.0px 0.0px 0.0px 0.0px; text-align:left; font-weight:400;
}
.Normal-C
{
font-family:"Times New Roman", serif; font-weight:700;
font-size:19.0px; line-height:1.21em;
}
-->
</style>
<script type="text/javascript"><!--
var blankSrc = "_wp_scripts/blank.gif";
--></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.
Dernière édition par Skynet le 21 Mar 2011 20:31, édité 1 fois.
Raison: Balises [code] ajoutées.
Martin113
Visiteur
Visiteur
 
Messages: 8
Inscription: 21 Mar 2011 18:48
 


Message 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">
<!--
body {margin: 0px; padding: 0px;}
.Normal-P
{
margin:0.0px 0.0px 0.0px 0.0px; text-align:left; font-weight:400;
}
.Normal-C
{
font-family:"Times New Roman", serif; font-weight:700;
font-size:19.0px; line-height:1.21em;
}
-->
</style>


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

@+
Avatar de l'utilisateur
Skynet
Moderateur
Moderateur
 
Messages: 14807
Inscription: 19 Juil 2007 21:12
 

Message 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
Martin113
Visiteur
Visiteur
 
Messages: 8
Inscription: 21 Mar 2011 18:48
 

Message 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>
Avatar de l'utilisateur
Skynet
Moderateur
Moderateur
 
Messages: 14807
Inscription: 19 Juil 2007 21:12
 

Message 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
Martin113
Visiteur
Visiteur
 
Messages: 8
Inscription: 21 Mar 2011 18:48
 

Re: Pb Site web toutes resolutions

Message 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
N'oubliez pas de marquer vos problèmes Réglé quand vous avez trouvé la solution...
HOCD
Visiteur
Visiteur
 
Messages: 9
Inscription: 22 Mar 2011 20:53
 

Message le 22 Mar 2011 21:38

C'était justement dans mon lien :roll:.

Encore faut-il lire l'article.
Avatar de l'utilisateur
Skynet
Moderateur
Moderateur
 
Messages: 14807
Inscription: 19 Juil 2007 21:12
 

Message 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
Martin113
Visiteur
Visiteur
 
Messages: 8
Inscription: 21 Mar 2011 18:48
 

Message le 22 Mar 2011 21:50

Justement c'est un tutoriel pour débutant, tu as des exemples en bas.
Avatar de l'utilisateur
Skynet
Moderateur
Moderateur
 
Messages: 14807
Inscription: 19 Juil 2007 21:12
 

Message 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
Martin113
Visiteur
Visiteur
 
Messages: 8
Inscription: 21 Mar 2011 18:48
 

Message 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 !
Avatar de l'utilisateur
Skynet
Moderateur
Moderateur
 
Messages: 14807
Inscription: 19 Juil 2007 21:12
 

Message 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
Martin113
Visiteur
Visiteur
 
Messages: 8
Inscription: 21 Mar 2011 18:48
 



Sujets similaires

Message Souci à l'ouverture du site
Bonjour,Chez moi Kaspersky me signale que le site est "douteux.... problème de certificat https://cjoint.com/c/KEvhbNOu4rw
Réponses: 18

Message problemes acces au site sur firefox
Salut tout le mondeje tenais à vous signaler sur la dernière version Firefox version 89.0 64 bits (nouveau design blanc moche pour mon gout) des problèmes accès à votre site PC-InfoPratique concernant la sécurité voici deux captures écran :https://cjoint.com/c/KFgrgpnLNBH htt ...
Réponses: 9

Message Site PC-InfoPratique non sécurisé
Bonjour à TousVoilà, quand je viens sur le site, j'ai ceci dans la barre d'adresse, HTTPS barré en rouge. Auriez vous une idée SVP, mon navigateur est Edge. Merci d'avance
Réponses: 4

Message Conseils pour référencer votre site
Bonjour à tous,Je suis étudiant en informatique à Toulouse et je suis passionné par le développement web. Je viens de réaliser mon tout premier site (Php et Mysql) et je souhaite avoir vos conseils en ce qui concerne le référencement naturel lorsqu'on ne veut pas recourir à une agence de communicati ...
Réponses: 1

Message Création site web - Code ou CMS ?
Bonjour, Je suis ici car je cherche un avis vraiment honnête là dessus.J'entends beaucoup de critique sur Wordpress. Hors j'aimerai faire un petit site, type blog / site vitrine avec des articles mis en ligne de temps en temps. J'aimerai un truc assez beau et facile à prendre en main.Mais quand je d ...
Réponses: 3

Message mon site
Bonsoir.Voici mon site *******************Je voulais savoir ce que vous en pensiez.Et voici mon forum n'hésitez pas à laisser des messages :*******************
Réponses: 1


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité


.: Nous contacter :: Flux RSS :: Données personnelles :.