Comment ancrer un site en fonction de la résolution écran ?

Par Phoenix Ardent le 28/11/2002 à 18:14:10 (#2665911)

Est-ce que quelqu'un aurait une solution pour le problème épineux qui me reste en travers de la gorges.


Je voudrais faire un site internet qui puisse se voir en 800*600 et en 1024*768.
J'en ai vu certains qui arrivent a s'adapter. Par exemple des sites tout en flash occupant tout l'espace de l'ecran quelque soit la resolution. Sinon plus simplement en html (m'etonnerais que je me paluche un site de 50 pages en flash) je vois pas la solution. Comment gerer des tables et du contenu qui gardent une mise en page cohérente ?

Par exemple je sais que je peux specifier a une table d'occuper 100% de la largeur.
Mais ca se complique si sur la largeur j'ai un menu, un contenu, et un autre menu contextuel... je crois qu'il faut mettre chaque element dans une table, mais je crois pas possible de faire plusieurs tables sur une largeur. Plusieurs tableaux dans une table alors, mais comment organiser tout ca ?

Par exemple sur Yahoo en 800*600 il n'y a pas de blanc sur le coté (o px, o%) gauche, mais en 1024*768 il apparait un peu de blanc a gauche (tant de % ou un nb de px fixe?) et a droite pour centrer le site (tant de % ou un nb de px fixe?).
Je comprend pas comment ca peut marcher ca, marre de passer des nuits a y penser saqns comprendre :monstre:

Autre chose : je voudrais mettre une image de fond qui cadre bien en 800, mais je ne veux pas qu'elle se répete a l'infini si la page est vue en 1024. Peut on faire qu'une image de fond s'adapte a la taille de l'écran ? (j'imagine qu'il faut appeler une autre image plus grande si on detecte telle resolution... un peu compliqué en javascript pour un débutant ca non ?)

Bref, je sais pas quoi faire du tout, je voudrais que le site soit bien proportionné en fonction de la resolution. Quelles sont les solutions envisagables s'il vous plait ?

Par Karsus le 28/11/2002 à 18:44:02 (#2666155)

aloreuuuhhh

pour un tableau qui prend 100% tu met :




ensuite mettre des tableaux dans des tableaux est une façon simple et efficace de mettre une bonne mise en page....

ex :















enfin tu vois, selon ce que tu veux faire !

ensuite je te conseillerais plutot de mettre une largeur de 80-90% pour ton tableau, c'est plus joli je trouve :)

pour centrer met mon truc à centrer

pour une image de fond qui passe d'une res de 800*600 à 1024*768 c pas possible
en plus c'est trop long à charger, donc pas bien
ensuite si elle plait pas à tout le monde, ben c'est foutu....
c'est pour ça qu'il vaut mieu un truc uni ou une petite image en mosaique passe partout et assez discrete !

www.allhtml.com <--- un tres bon site pour toutes tes questions !

Par Foehn le 28/11/2002 à 18:51:30 (#2666218)

Dans un excellent article paru sur l'indispensable WebMonkey , 13 designers présentaient leurs petits trucs en matière de conception de page Web. Celui qui m'a le plus marqué disait qu'il commençait toujours ses pages de la même façon : une table découpant la page en 9 parties, 3 lignes de 3 cellules. La page en elle-même occupait la case centrale de la table, les lignes du haut et du bas permettant par exemple de gérer un bandeau ou un pied de page (la cellule en haut à gauche étant en général réservée à un lien vers la page d'accueil avec une zolie image), et les colonnes de droite et de gauche permettant de gérer un menu.

En mettant cette table principale avec une largeur à 100%, et en présentant ensuite chacun des élements (bandeau, menu, page centrale, etc) dans un autre table, tu arrives à peu près à gérer une présentation qui reste homogène avec des résolutions différentes.

[edit]
Et contrairement au p'tit camarade du dessus, je déconseille les div :ange: M'enfin, ça doit être une vieille rancune vis-à-vis des problématiques de cross-browsing avec notamment les vieilles versions de navigateurs :maboule:

Par Phoenix Ardent le 28/11/2002 à 21:00:54 (#2667322)

pour une image de fond qui passe d'une res de 800*600 à 1024*768 c pas possible
en plus c'est trop long à charger, donc pas bien
ensuite si elle plait pas à tout le monde, ben c'est foutu....

Vi ca me branche pas tant que les images de fond, c'est juste une possibilité mais je sais pas si je vais y recourir tes arguments sont plutot convaiquants

En mettant cette table principale avec une largeur à 100%, et en présentant ensuite chacun des élements (bandeau, menu, page centrale, etc) dans un autre table, tu arrives à peu près à gérer une présentation qui reste homogène avec des résolutions différentes

Pas mal ca, merci de ce precieux tuyau :)
Enfin ca répond pas a toutes les questions stupides que je me pose :
Si on veut en resolution 1024 que le contenu se retrouve harmonieusement au centre, et non pas ferré a gauche avec un gros vide a droite (comme ca arrive si ke site est fait pour du 800 avec taille fixe... parcequén fait je vais tout faire avec des layers je crois et la position je doute qu'elle s'adapte en pourcentage) ca donnerait en gros table de gauche, une couleur uniforme = 15%, centre le contenu (menu inclu)= 70% et droite meme couleur que gauche =15% de la page. Ca va etre joli en 1024, mais en 800 le soucis c'est ce 70% au centre, ca laisse pas bcp de place avec un ecran de 800 px de large :monstre:.
Il existe un moyen que le centre occupe 100% en 800 et que en 1024 ce centre soit justement centré ?
Il faut faire 2 sites différents dans ce cas la ?

Enfin bref quels sont les conseils des vieux routards en la matiere?

Par Aze le 28/11/2002 à 21:03:20 (#2667341)

oui les div et les frames c'est bien sympa en théorie mais bon je trouve ça lourd à utiliser. C'est vrai que les div et les vieux navigateurs c'est pas l'entente parfaite.

Par Phoenix Ardent le 28/11/2002 à 21:08:57 (#2667386)

moui enfin faire un site pour les navigateurs de generation 3...

franchement pourquoi se prendre la tete, ca existe plus ca. Et il me semble que les layers et les DIV sont reconnus depuis les versions 4

Par Phoenix Ardent le 28/11/2002 à 23:28:49 (#2668384)

P.S : on peut mettre un tableau dans un layer, mais peut on mettre un layer dans un tableau :confus:
*y arrive pas*

Par Loekit le 29/11/2002 à 0:00:02 (#2668600)

Provient du message de Phoenix Ardent
Enfin ca répond pas a toutes les questions stupides que je me pose :
Si on veut en resolution 1024 que le contenu se retrouve harmonieusement au centre, et non pas ferré a gauche avec un gros vide a droite (comme ca arrive si ke site est fait pour du 800 avec taille fixe... parcequén fait je vais tout faire avec des layers je crois et la position je doute qu'elle s'adapte en pourcentage) ca donnerait en gros table de gauche, une couleur uniforme = 15%, centre le contenu (menu inclu)= 70% et droite meme couleur que gauche =15% de la page. Ca va etre joli en 1024, mais en 800 le soucis c'est ce 70% au centre, ca laisse pas bcp de place avec un ecran de 800 px de large :monstre:.
Il existe un moyen que le centre occupe 100% en 800 et que en 1024 ce centre soit justement centré ?
Il faut faire 2 sites différents dans ce cas la ?

Enfin bref quels sont les conseils des vieux routards en la matiere?

En passant au php, dois bien y avoir une variable définie qui permet de détecter la résolution du pc qui affiche ta page, et donc de générer la page en fonction de sa résolution je pense.

Débutant en php, je ne peux pas le certifier, mais je pense que c'est une piste à suivre.

Par Eldarendil le 29/11/2002 à 0:20:53 (#2668694)

Non, rien à voir
PHP est server-side
L'ecran est evidemment client-side
:rolleyes:

*Essaye de pas s'etrangler devant les lignes de code incorrectes, et l'usage des tables..*

Par Manaloup le 29/11/2002 à 0:43:40 (#2668830)

En Javascript il y a les fonction screen.width et screen.hight

par exemple

if (screen.width <= 800)
{
window.open("small.html");
}
else
{
window.open("large.html");
}

Pas dur si la largeur de l'écran est plus petite ou égal à 800 on ouvre la page small.html sinon on ouvre la page large.html ..

Et si tu veut pas t'emcombrer d'une ouverture de page, tu met des variables genre taille=100% & taille=70% ensuite tu fait un tableau avec la largeur du tableau la variable

Sinon l'Asp le fait mais c un peu plus dur d'avoir un hebergeur Asp...

Par Phoenix Ardent le 29/11/2002 à 2:51:45 (#2669324)

J'ai bien saisit l'option du screen width qui implique de doubler chaque page, en petit et en grand. C'est pratique pour de petits sites je pense. Par contre quand on dépasse 50 pages, toutes les doubler avec une mise en page différente ca deviens sacrément coton :eek:.
J'ai pas tres bien saisit ´l'histoire de variable avec la largeur du tableau sinon :confus:


Je vais ëtre pénible deux minutes, mais j'ai encore une pitite question : peut-on définir sur une largeur d'écran que telle partie occupe tel pourcentage, et telle autre occupe une taille fixe en px. Et que la partie variable occupe toute la place que n'occupe pas la partie fixe.
Pis heu je vais me faire frapper je sens, mais on peut mettre plusieur table sur une largeur ? Me semble qu'on est obligé de les mettre les une au dessus des autres :aide:
Et arg attendez une derniere question pour la route, le placement eds layers ca crains ou c'est sans surprise a partir des navigateurs version 4?

Pour terminer, je m'excuse d'etre un gros nul :(

*fuit en courant*

Par Sobert le 29/11/2002 à 12:00:50 (#2670955)

*Pose un lien qui peut aider*

Par Karsus le 29/11/2002 à 12:05:51 (#2670993)

euh depuis la version 4.01 du HTML on est obligé de faire un sinon tu te fais gueuler dessus par le validator =)

peut-on définir sur une largeur d'écran que telle partie occupe tel pourcentage, et telle autre occupe une taille fixe en px. Et que la partie variable occupe toute la place que n'occupe pas la partie fixe.

oui :)

du moins c'est possible avec les frames en faisant "80,*" => 80 ixel puis le reste de la page... donc on doit pouvoir faire ça pour un tableau... tu met une colonne a X pixels et ensuite essaye de mettre l'autre à * ou 100%

plusieur table sur une largeur ?

oui !
enfin essaye de les mettre, mais de toute façon, t'a une autre solution :

un tableau d'une ligne et deux colonne, et dans chaque case un autre tableau !

placement eds layers ca crains ou c'est sans surprise a partir des navigateurs version 4?

les layeurs sont apparu avec html 4 je crois
ils sont tres bien gerés (surtout par mozilla :) IE est moins fort dessus je crois ), mais c chaud à utiliser...
on peut souvent faire des trucs tres jolis sans les utiliser... mais bon, libre à toi !

Par Eldarendil le 29/11/2002 à 12:17:52 (#2671089)

posté par Karsus
euh depuis la version 4.01 du HTML on est obligé de faire un sinon tu te fais gueuler dessus par le validator =)

Rhâ ! J'peux pas laisser passer ça :rolleyes:
L'alignement est une mise en forme, qui doit donc passer par les CSS
La syntaxe exacte depuis plus de 4 ans est : ...

Par Karsus le 29/11/2002 à 13:01:37 (#2671453)

Eldarendhil, je suis désolé mais tu te trompes lourdement :)

le validator : http://validator.w3.org/ accepte tout a fait la syntaxe .... qui veut dire aligner tout au milieu.... alors que ton ne veut que dire : aligner le texte au milieu...

:p

Par Eldarendil le 29/11/2002 à 13:57:49 (#2671904)

Il semblerait que c'est toi qui te trompes :
Le validateur n'accepte absolument pas "", et j'ai expliqué pourquoi plus haut :rolleyes:
Si tu n'es toujours pas convaincu, regarde la liste est attributs de div, et tu verras que align n'en fait pas partie...

Par Aron le 29/11/2002 à 14:14:29 (#2672067)

Pourtant dans la recommandation du HTML 4.01...

C'est marqué "deprecated" mais je ne pense pas que la validateur gueule dans ce cas. Si ?

Par Eldarendil le 29/11/2002 à 14:18:38 (#2672100)

Ça fait longtemps qu'on est passé à autre chose que le HTML 4.01 :rolleyes:

On en est au XHTML 1.1 actuellement, et le validateur ne laisse absolument pas passer cette faute

Par Phoenix Ardent le 29/11/2002 à 16:30:24 (#2673187)

arf et dreamweaver qui me fout du " a toutes les sauces, je suis trahit par le matériel ! :(


Sinon toujours dans l'optique de savoir ce que visualisera le surfeur sur une page, je comprend pas vraimment la relation entre résolution d'écran et taille d'écran. Par exemple en 800*600, l'écran affiche 800 pixel en large et 600 en hauteur que ce soit un écran 13 ou 21 pouces si je ne me trompe pas ?

Maintenant en fonction de la taille de l'écran la disposition des éléments de la page sera un peu différente il me semble qu'on ne verra pas exactement le meme resultat ? Si oui, en quelle mesure la taille de l'écran influe la différence de présentation de la page ?
Edit : Jeviens de mesurer en centimetres deux ecrans, un grand et un petit, les deux en 800*600. Le premier fait 30*16, l'autre 26*14. Je sais pas du tout comment faire car je veux faire le site qui occupe toute la place visible de l'explorateur, sans déborder en bas ni a droite (pas de scrolling), et je dois faire le site sur la machine avec le grand écran (y'a tout les prog et je peux pas travailler sur le petit ecran) mais il devra sortir aussi de meme forme sur le petit écran (pas de débordement). Je suis tout perdu :aide:

Ca serait gentils de m'expliquer ca, pis heu comme je risque d'avoir de nouvelles questions, je crois que si vous avez l'adresse d'un super site de référence avec un forum actif et dédié a ce genre de question, je serais preneur (eventuellement en MP)

Merci de votre patience a tous :)