Page html selon taille écran

Looli · Message par **Looli** » 18 juil. 2007, 20:25

Bonjour à tous,

Je suis novice dans le monde de la création de sites, j'aurai besoin d'un petit conseil.

En fait, je viens de créer une page avec NVU, sur mon écran elle s'affiche très bien, mais sur certains ordinateurs, tout est décalé. En fait ma page se présente avec un texte au centre de la page entourée d'images. Du coup avec le décalage à cause de la taille de l'écran chez certains, le texte est mordu par les images sur le coté gauche.

Comment faire pour que ma page s'affiche correctement sur n'importe quel ordinateur ???

Merci d'avance pour votre aide

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; InfoPath.1)

Message par **myahoo** » 18 juil. 2007, 20:41

Looli a écrit :Comment faire pour que ma page s'affiche correctement sur n'importe quel ordinateur ???

"N'importe quel ordinateur" c'est archi-compliqué : Windows ? Linux ? MacOS ? Firefox ? Opera ? Safari / Konqueror ? Internet Explorer ? Quelles versions ?
Pour la résolution c'est un peu pareil : en plus des classiques 1024x768 et autres 1280x1024 en 4/3, il y a aussi du 16/9

Pourrait-on avoir l'adresse de ton site pour voir à quoi ça ressemble ? La meilleure solution sera certainement d'utiliser une feuille de style

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Looli · Message par **Looli** » 18 juil. 2007, 20:50

Voici le lien de mon site :
www.lebrasseur.net

En fait, c'est le site pour mon boulot, je suis chargée de le mettre en place, je rame un peu, j'en suis qu'au stade de la page annonçant la construction

Si tu as un conseil, je suis preneuse !

Merci !

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; InfoPath.1)

krystof · Message par **krystof** » 18 juil. 2007, 21:07

bonjour,
tes images sont en posistions absolue, il déjà changer ça, car selon les résolutions, le texte va bouger et les images non.
ensuite, et c' est le piège des wysiwyg, il faudrait que tu utilises le CSS.
j' ai vu ceci:

Code : Tout sélectionner

<br style="font-family: Comic Sans MS;">

je suis novice moi aussi mais ça, je n' ai jamais vu.
Tu peux également adapter ton site à toute les résolution et ce très simplement.
tu mets tout ton code compris entre les balises body dans une balise.
Tu appelles cette balise global

Code : Tout sélectionner

<div id="global"> ici le code de la page en tre les balises body</div>

Puis tu crées un fichier .css et tu mets:

Code : Tout sélectionner

#global
{
width: 1024px;
margin: 0 auto;
}

J' ai mis 1024 mais tu mets ce que tu veux.
Mais choisis 1024 au maximum.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.12) Gecko/20070508 Firefox/1.5.0.12

Invité · Message par **Invité** » 18 juil. 2007, 21:19

Bonsoir Krystof,

Qu'est ce qui te choques dans ce code ?

<br style="font-family: Comic Sans MS;">

Je n'ai touché à rien au niveau du code, c'est NVU qui a tout fait tout seul je l'avoue

Je vais essayer ton code pour voir ce que ça donne

et pour la position des images, je devrai mettre quoi à la place de absolute ?

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; InfoPath.1)

Mongo Bob · Message par **Mongo Bob** » 18 juil. 2007, 22:55

krystof a écrit :Puis tu crées un fichier .css et tu mets:
Code:

#global
{
width: 1024px;
margin: 0 auto;
}

Pas du tout. Il faut surtout mettre des largeurs en %, jamais en pixels, surtout dans les grandes largeurs, en +.
D'autre part, ici, le <div> dit "global" est supposé remplacer le <body>, pourquoi puisque le <body> existe. Il faut donc mettre le <body> à je sais pas 95% de largeur et quelle que soit la réso d'écran la page s'étalera toujours sur 95% d'un écran 800x600 ou à 95% d'un 1280x1024.
Dans l'exemple donné, la page n'occupera, que les 4/5 d'un écran 1280x1024, et peut-être les 3/4 d'un 16/9, dommage... Sur un 800x600 (petite minorité des moniteurs, certes) un scroll horizontal va apparaître, dommage aussi. En fait cet exemple optimise le site pour un affichage 1024x768 et ces écrans sont battus en brèche par les écrans plats qui se vendent comme des petits pains...
Pas de pixels dans les grandes largeurs, des pages liquides!
Par contre, ceci est tout à fait exact :

krystof a écrit :tes images sont en posistions absolue, il déjà changer ça, car selon les résolutions, le texte va bouger et les images non.
ensuite, et c' est le piège des wysiwyg, il faudrait que tu utilises le CSS.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5

Mongo Bob · Message par **Mongo Bob** » 18 juil. 2007, 23:03

J'ai déjà vu ça quelquepart :

Code : Tout sélectionner

<html style="direction: ltr;" lang="fr-fr">

(http://www.geckozone.org/forum/viewtopic.php?t=56431)
et ça aussi :
"Document content looks like html proprietary", fait avec NVU ou Kpz?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5

Looli · Message par **Looli** » 18 juil. 2007, 23:12

Bonsoir Mongo Bob, j'ai crée ma page avec NVU

Pourrais tu me dire dans quelle ligne du code je dois mettre le pourcentage stp ?

Body = 95 % tout simplement ???

Merci d'avance

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; InfoPath.1)

Message par **chinon37** » 19 juil. 2007, 10:42

Avec des images, il est difficile d'avoir une page qui s'affiche en totalité sur tous les écrans.
En effet, en html, on ne peut pas redimensionner les images en fonction de la taille des écrans, mais uniquement les blocs.

La solution serait de faire une page d'accueil fixe centrée en se basant sur du 800 x 600. Bien sûr, il peut y avoir des écrans plus petits mais ce sera un moindre mal.

le problème d'un % d'écran est que les images ne se redimensionnant pas, il risque d'y avoir pagaille dans les images selon la résolution de l'écran.

Là je suis en vacances, mais si j'ai un moment, je te fais une petite mise en page.

Abandonne la solution de Krystof, elle t'a déja fait faire des erreurs dans le code:

Code : Tout sélectionner

<div #global="" {="" width="" 960px="" margin="" 0="" auto="" }="">

Mongo Bob · Message par **Mongo Bob** » 19 juil. 2007, 12:19

chinon37 a écrit :le problème d'un % d'écran est que les images ne se redimensionnant pas, il risque d'y avoir pagaille dans les images selon la résolution de l'écran.

<edit 4 heures + tard>Entendons-nous : les images doivent rester en pixels</edit>, sauf certaines images qui souffrent trés bien une petite déformation (motifs de déco, figures abstraites). Dans le cas de Looli, les images ça tombe bien, sont en petites largeurs (100 px àpp), 5 images de rang, 500 px, ça va on est en-dessous des fameux 800.
Elles se baladeront selon les résos d'écran, il faut donc jouer avec cette balade pour que sur chaque réso la position différente qu'elles adoptent soit acceptable esthétiquement.
La largeur de page (<body>) en % ne gêne pas foncièrement ce positionnement changeant, à charge pour le webmaster de contrôler dans toutes les résos.
Ceci est facile à faire avec Firefox que tu devrais installer avec l'extension Webdeveloper et l'outil "Redimensionner", du coup, FF devient un peu un éditeur web, tu redimensionnes ta fenêtre, ce que tu auras souvent besoin de faire sans torturer ta carte graphique (Wds : clic droit sur le bureau, Propriétés, Paramètres, Résolution : fini!).

Je ne dis pas que le <body> en largeur de % est la meilleure solution, on peut tout simplement dire : toute largeur importante de bloc doit être en % plutôt qu'en pixels, et tu n'es pas obligé d'avoir de bloc en grande largeur, mais attention à l'addition des largeurs des blocs mis côte à côte.

Looli a écrit :Pourrais tu me dire dans quelle ligne du code je dois mettre le pourcentage stp ?

Code : Tout sélectionner

css :
body {
  width: 95%;
}

Mais je crois que tu ne connais pas css, ne pourrais-tu commencer par un bon tuto ?

http://info.sio2.be/kpz/

Ou/Et t'inspirer largement de la mise en pages promise par chinon37!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5

Message par **chinon37** » 19 juil. 2007, 15:33

p'tit essai vite fait sans prétention après avoir redimensionner les images avec xnview en largeur 80px:

il y a de la mise en page à améliorer, mais tu peux t'inspirer de cela:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>
      essai
    </title>
    <style type="text/css">
body {
    text-align: center;
    }
    #contient {
    border: 1px solid #cccccc;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffcc;
    padding-top: 5%;
    padding-bottom: 5%;
    }
    img {
    padding-left: 7%;
    }
    </style>
  </head>
  <body>
    <div id="contient">
      <img style="width: 80px; height: 80px;" alt="adler" src="lebrasseur_fichiers/Adler.JPG"><img alt="blanche" src=
      "lebrasseur_fichiers/Blanche%2520de%2520Haacht.JPG"> <img alt="" src=
      "lebrasseur_fichiers/BlancheGO.JPG"><img alt="" src="lebrasseur_fichiers/Charlesquint.JPG"><img style=
      "width: 80px; height: 78px;" alt="" src="lebrasseur_fichiers/Graindorge8.JPG"><br>
      <img alt="" src="lebrasseur_fichiers/Krombacher2.JPG"> <img style=
      "padding-left: 20%; padding-right: 20%; width: 80px; height: 73px;" alt="" src=
      "lebrasseur_fichiers/logo_brasseur.jpg"><img style="width: 80px; height: 124px; padding-top: 30px;" alt="" src=
      "lebrasseur_fichiers/Krombacher-Aurelien.jpg"><br>
      <span style="font-family: Comic Sans MS;">Le site est actuellement en construction, il sera mis à jour au plus
      tard fin août 2007</span><br style="font-family: Comic Sans MS;">
      <span style="font-family: Comic Sans MS;">D'ici là, vous pouvez nous contacter pour tout renseignement par
      <a href="mailto:contact@lcdl-jeux.com">mail</a><br style="font-family: Comic Sans MS;"></span><span style=
      "font-family: Comic Sans MS;">Ou par téléphone au 06 17 71 17 73</span><br>
      <img style="width: 80px; height: 80px;" alt="" src="lebrasseur_fichiers/Primus%2520LOGO.jpg"><img alt="" src=
      "lebrasseur_fichiers/saintwald.jpg"> <img style="" src="lebrasseur_fichiers/SpecialeGold.JPG"><img style=
      "width: 44px; height: 160px;" alt="" src="lebrasseur_fichiers/Tequieros.JPG"><img alt="" src=
      "lebrasseur_fichiers/Tongerlo.jpg">
    </div><br>
  </body>
</html>

Mongo Bob · Message par **Mongo Bob** » 19 juil. 2007, 18:11

ben oui, mais à ce moment pourquoi ne pas donner les propriétés #contient à <body> et se passer de <div>, sinon c'est pareil que l'idée de "div id global" de krystof que je disais que c'était un <div> de trop
bon enfin, moi, je veux me fâcher avec personne, hein? ce que j'en dis
divite aigüe?

bon eh bien bonsoir à tous

PS

chinon37 a écrit :après avoir redimensionner les images

message reçu, corrigé ci-dessus
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.5) Gecko/20070713 Firefox/2.0.0.5[/color]

Looli · Message par **Looli** » 19 juil. 2007, 19:17

Merci à tous pour votre aide..

Je viens de tester ta page Chinon, c'est vraiment sympa t'as du y passer du temps en plus !! Malheureusement sur mon ordi ça me donne des images de taille complétement inégales, avec un scroller. Peut être que si je reprends ton début de code

Code : Tout sélectionner

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org"> 
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
    <title> 
      essai 
    </title> 
    <style type="text/css"> 
body { 
    text-align: center; 
    } 
    #contient { 
    border: 1px solid #cccccc; 
    width: 95%; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #ffffcc; 
    padding-top: 5%; 
    padding-bottom: 5%; 
    } 
    img { 
    padding-left: 7%; 
    } 
    </style> 
  </head> 
  <body> 
    <div id="contient">

et qu'ensuite je mette ma fin de code ça pourrait marcher, qu'en pensez vous ???

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; InfoPath.1)

Looli · Message par **Looli** » 19 juil. 2007, 19:27

Je viens de faire un essai, sur mon écran ça passe bien, est ce que vous pourriez me dire si vous le voyez bien aussi ?
http://www.lebrasseur.net
Merci !!!

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; InfoPath.1)

krystof · Message par **krystof** » 19 juil. 2007, 20:33

Pas du tout. Il faut surtout mettre des largeurs en %, jamais en pixels, surtout dans les grandes largeurs, en +.

si tu le dis.
amuse toi a faire un site avec des tailles en pourcentage et un autre avec des pixels.
C' est quand même beaucoup plus simple de le faire en taille fixe en pixel.
Si tuas une image comme fond detableau par exemple, bonjour le boulot pour que l' image s' adapte à la largeur.
D' autre part, comment fais-tu lorsque tu as comme moi par exemple un menu en flash ?
Si tu mets ton body en %, elle va être belle ta page....

le menu à droite, le reste à gauche....super.
Un site comme le monde a une largeur fixe par exemple.
Donc Looli, la solution que je t' ai donnée est de loin la plus simple, maintenant, un site qui s' adapte à la largeur ( taille en % donc ) oui , c' est mieux, mais bonjour la galère.

Pas de pixels dans les grandes largeurs, des pages liquides!

bein justement les pages liquides ont une largeur fixe.

j' ai vu ce que t as fait, les images sont toujours en absolue.
tiens Looli, jette un oeil ici:
http://css.alsacreations.com/Tutoriels- ... esolutions

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Maxthon; .NET CLR 1.1.4322)

Geckozone

Page html selon taille écran

Page html selon taille écran

Re: Page html selon taille écran

Qui est en ligne ?