Auteur Sujet: Résolution de vos écrans PC  (Lu 3911 fois)

petoind

  • Administrator
  • Hero Member
  • *****
  • Messages: 7574
    • Conception des enceintes acoustiques
    • E-mail
Résolution de vos écrans PC
« le: septembre 10, 2012, 17:07:46 pm »
Définition d'écran :
Quelle définition d'écran avez vous sur vos PC ?
Je pose la question parce que avec une définition de 1920x1080 pixels, je trouve la mise en page du site très mauvaise.
Par exemple : http://petoindominique.fr/php/mysql_calcul_clos.php
Par contre, si je limite la largeur à 1280, cela va bien mieux.
Par exemple : http://petoindominique.fr/php/mysql_calcul_br.php

La règle est de faire un site qui s'adapte à la résolution de l'écran de celui qui le lit.
Je peux le faire sur la base du dernier exemple, avec une partie centrale constante, et deux parties D et G qui s'adaptent.

DJEvol

  • Invité
Re : Résolution de vos écrans PC
« Réponse #1 le: septembre 10, 2012, 18:49:08 pm »
2*1980*1080  ;)

Borak

  • Full Member
  • ***
  • Messages: 597
Re : Résolution de vos écrans PC
« Réponse #2 le: septembre 10, 2012, 19:26:41 pm »
2 écrans : 1980x1080 et 1050x1560 (ben oui, il y en a un en mode portrait).

pguerin

  • Invité
Re : Résolution de vos écrans PC
« Réponse #3 le: septembre 10, 2012, 19:34:23 pm »
1280 x 800 : PC portable

Le lien : http://petoindominique.fr/php/mysql_calcul_clos.php

rends bien sur mon écran, il tiens en entier en largeur sans utiliser de barre de défilement,
contrairement au second.

DJEvol

  • Invité
Re : Résolution de vos écrans PC
« Réponse #4 le: septembre 10, 2012, 20:04:23 pm »
Perso j'ajuste la taille avec le zoom de Chrome (crtl+molette) et il garde en mémoire... Au moins j'y voit  :A

Stf972

  • Newbie
  • *
  • Messages: 78
    • E-mail
Re : Résolution de vos écrans PC
« Réponse #5 le: septembre 10, 2012, 22:24:45 pm »
Parfait en 1366 x 768 sur PC portable, sinon même technique que DJEvol

 :cheers:

petoind

  • Administrator
  • Hero Member
  • *****
  • Messages: 7574
    • Conception des enceintes acoustiques
    • E-mail
Re : Résolution de vos écrans PC
« Réponse #6 le: septembre 11, 2012, 17:11:19 pm »
Je ne connaissais pas CTRL + molette sous Chrome.  C'est pas mal !!!

Je vais revoir la définition pour être lu sur des écrans de 1280 pixels de large sans ascenseur vertical.
J'ai réduit de 1280 à 1200 pixels, parce que j'ai lu que les ascenseurs faisaient 33 pixels de large.
Pguerin, est-ce bon pour vous ?

Le problème n'étais pas dans les petits écrans, mais dans les grands.
J'avais deux approches, soit redéfinir tout les tableaux, soit limiter la largeur d'affichage dans tout les chapitres.
(Beaucoup de tableaux sont définis à 100%...)

pguerin

  • Invité
Re : Résolution de vos écrans PC
« Réponse #7 le: septembre 11, 2012, 18:37:10 pm »
Dominique,

Je ne visualise pas la page en entier du lien ci-dessous avec une résolution 1280 x 800

http://petoindominique.fr/php/mysql_calcul_br.php

D'autre part pour moi le texte est centré, les puces ne sont pas alignée verticalement,
navigateur IE7 sous Windows XP

Borak

  • Full Member
  • ***
  • Messages: 597
Re : Résolution de vos écrans PC
« Réponse #8 le: septembre 11, 2012, 19:05:52 pm »
Technique pour rendre le site semi-fluide (largeur automatique jusqu'à une limite maximale en restant centré).

Surtout pas en utilisant un tableau global à une case : ce n'est pas beau.

Le système consiste à utiliser un bloc (DIV) qui encadre toute la page. Ce bloc est identifié "page" et il prend par défaut 100% de la largeur. Par contre, on peut lui donner une largeur maximum à ne pas dépasser.

Donc le html :
<html...><head>...</head>
<body>
<div id="page">
.....
.....
.....
</div>
</body>
</html>

Ensuite, voila le petit bout de CSS qui fait tout le boulot (largeur maximal jusqu'à 1280px et pas en dessous de 512px):
div#page {
   padding: 0 ;
   margin: 0 auto 0 auto ;
   width: 100% ;
   max-width: 1280px ;
   min-width:  512px ;
}
« Modifié: septembre 11, 2012, 19:07:37 pm par Borak »

RMS

  • Invité
Re : Résolution de vos écrans PC
« Réponse #9 le: septembre 11, 2012, 20:01:40 pm »
1366*768, comme beaucoup d'ordis portables en 15 pouces.

petoind

  • Administrator
  • Hero Member
  • *****
  • Messages: 7574
    • Conception des enceintes acoustiques
    • E-mail
Re : Résolution de vos écrans PC
« Réponse #10 le: septembre 11, 2012, 21:08:35 pm »
Borak, je mets en place les premières application css dans le site :
- Dans la fichier "head" commun à toutes les pages, j'ai ajouté la ligne qui fait le lien vers le fichier css.
- Dans le fichier misenpage.css, j'ai recopié vos lignes de code.
Ensuite, je passe dans chaque chapitre pour ajouter les <div et </div...

Et si je voulais, quand l'écran dépasse 1200px, des bandes grises (ou autre couleur) de chaque coté de la page ?

Borak

  • Full Member
  • ***
  • Messages: 597
Re : Résolution de vos écrans PC
« Réponse #11 le: septembre 11, 2012, 21:29:42 pm »
Dans ce cas, il suffit d'ajouter un fond gris pour le body et un fond blanc pour le div :

body { background-color : #070707 ; }
div#page { background-color : white ; }

Borak

  • Full Member
  • ***
  • Messages: 597
Re : Résolution de vos écrans PC
« Réponse #12 le: septembre 12, 2012, 08:41:47 am »
Oups, j'ai peut-être oublié un système particulier : La fusion des marges. Il faut ajouter des bordures de la même couleur que le fond (pour éviter que la couleur ne colle au texte) :
body { background-color : #070707 ; }
div#page { background-color : white ;
   border-width: 1px ;
   border-style: solid ;
   border-color: white;
}

petoind

  • Administrator
  • Hero Member
  • *****
  • Messages: 7574
    • Conception des enceintes acoustiques
    • E-mail
Re : Résolution de vos écrans PC
« Réponse #13 le: septembre 13, 2012, 20:55:02 pm »
Les bandes grises sont ajoutées.
J'ai mis un gris clair parce que le fond gris est pris sur les pages qui ne sont pas encore converties.

Voyez vous un soucis d'affichage, a part le centrage des textes à puce avec Internet Exploreur ?
Je suis surpris de ce soucis, toutes mes pages passent le contrôle W3C.

pguerin

  • Invité
Re : Résolution de vos écrans PC
« Réponse #14 le: septembre 14, 2012, 09:59:40 am »
Dominique,

Les deux pages semblent avoir la même mise en page, la première est en fond gris, la seconde est en fond blanc,
l'alignement des puces est OK maintenant.