redimensionnement de la page d'accueil, marche pas

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
simipi
Salamandre
Messages : 35
Inscription : 13 oct. 2006, 13:41

redimensionnement de la page d'accueil, marche pas

Message par simipi »

bonjour.

J'avais crée un site accessible en 800/600 et en 1024 sous ie. J'ai donc crée 2 pages à ces 2 dimensions et l'appel se fait simplement par le petit script ci'dessous.


Je viens d'installer firefox 1.5.7 et cela ne fonctionne pas. que faut il faire ? :cry:



Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Message par Asumbaa »

Salut,

Et les autres résolutions ? Tu comptes faire autant de versions de ton site que de possibilités ? :?

Ce n'est sans doute pas la réponse que tu souhaitais, mais la seule solution pérenne à ton problème, c'est de faire en sorte que ton site s'adapte automatiquement aux dimensions de la fenêtre de ton visiteur, et ce quelle que soit sa résolution d'écran.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
simipi
Salamandre
Messages : 35
Inscription : 13 oct. 2006, 13:41

re

Message par simipi »

je travaille dans une admin, et il ne faut pas rever: on commence à avoir des écrans permettant une définition en 1024, alors que la norme offcielle est toujours 800*600. Donc, je n'ai pas de raison de chercher pour les autres définitions. Mes pages d'index sont graphiques, d'ou le redimensionnement auto à exclure, et de toute façon, je sais pas faire ! :)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Asumbaa
Tyrannosaurus Rex
Messages : 2411
Inscription : 08 déc. 2004, 20:07

Re: re

Message par Asumbaa »

Salut,
simipi a écrit :je travaille dans une admin, et il ne faut pas rever: on commence à avoir des écrans permettant une définition en 1024, alors que la norme offcielle est toujours 800*600. Donc, je n'ai pas de raison de chercher pour les autres définitions. Mes pages d'index sont graphiques, d'ou le redimensionnement auto à exclure, et de toute façon, je sais pas faire ! :)
Les deux ne sont pas incompatibles, et tu pourrais très bien apprendre. Si c'est ton métier, ce serait même une bonne idée, et tu verrais qu'au final, ça t'ouvre des horizons inespérés.

Si tu persistes, essaye déjà :
- la consultation de la console Javascript (Outils -> Consoled'erreurs) qui, attention, affiche aussi les erreurs CSS.
- location.href = "http://www.cla.machin.fr/index1024/index.htm"; en lieu et place de location = "http://www.cla.machin.fr/index1024/index.htm";

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: re

Message par calimo »

simipi a écrit :je travaille dans une admin, et il ne faut pas rever: on commence à avoir des écrans permettant une définition en 1024, alors que la norme offcielle est toujours 800*600.
Norme officielle de quoi ?
J'ai moi-même une résolution de 1280x1024. Beaucoup de gens ont du 1600x1200 et Flore est en 1900x1600.
Mais il faut aussi tenir compte des résolutions "widescreen". Et de ceux qui aiment redimensionner leur fenêtre de navigation (après la détection évidemment !) :wink:

Il ne faut pas oublier non plus les gens qui n'ont pas de navigateur graphique (il y en a, en particulier les personnes mal ou non voyantes), et un nombre non négligeable qui n'ont pas javascript activé.

Si tu veux faire quelque chose qui soit réellement sérieux, il faut faire quelque chose de souple. Ce n'est pas compliqué, en CSS, tu définis des largeurs relatives, en %, plutôt que des choses fixes. Ça demande aussi un minimum de réflexion pour les choses que tu vas aligner à droite, à gauche, ou centrer, il faudra tester sous diverses résolutions. Pour les tester, utilise l'extension Web Developer qui redimensionne la fenêtre du navigateur aux bonnes dimensions :wink:

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.7) Gecko/20060921 Firefox/dapper-security Firefox/1.5.0.7
simipi
Salamandre
Messages : 35
Inscription : 13 oct. 2006, 13:41

re

Message par simipi »

norme officielle de la cellule développement de mon admin. Ils donnent les différents règles communes pour la création des intranets, avec entre autre, la charte graphique, la résolution pour la création des pages, etc.... Donc, notre norme officielle, est 800*600. on est obligé de s'y tenir.

Par contre, il ya une chose que je ne comprend pas très bien. Si l'on crée une page graphique, on ne peut pas la redimensionner automatiquement par rapport aux différentes résolutions, sinon il y a un étirement des graphiques.
Donc, vos solutions ne fonctionnent pas. Je suis bien obligé de créer une page graphique pour chaque résolution, et dans mon cas, 2. Ca fonctionne bien, mais mal, sous firefox que je viens d'installer. Ce navigateur ne fait pas parti de nos outils, mais j'aime bien appréhender le futur.

Heuresement, je n'ai que la page d'index en graphique. Le reste du site est déjà en redimensionnement auto en travaillant sur les pourcentages.

sinon, j'ai bien un message d'erreur dans les options javascript. cela concerne le style css. Il ne reconnait pas l'option filter
  • .fade { filter: Alpha(Opacity=70); }
    .opaque { filter: Alpha(Opacity=100); }
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: re

Message par calimo »

simipi a écrit :norme officielle de la cellule développement de mon admin. Ils donnent les différents règles communes pour la création des intranets, avec entre autre, la charte graphique, la résolution pour la création des pages, etc.... Donc, notre norme officielle, est 800*600. on est obligé de s'y tenir.
Ah, je vois, une de ces "norme-boulet" d'il y a 10 ans qui empêchent une évolution saine du web :?

Depuis 10 ans, bien des choses ont changé ! On ne fait plus de mise en page avec des tableaux et des pixels transparents, on utilise les feuilles de style CSS à la place. On essaye de respecter les standards plutôt que de développer pour un navigateur spécifique. Etc.

Il y a également des recommandations d'accessibilité. Une récente loi française oblige les administrations à faire des sites accessibles à tous (avec un délai de transition assez long tout de même, mais autant éviter de devoir refaire le boulot la veille de la fin du délai).
simipi a écrit :Par contre, il ya une chose que je ne comprend pas très bien. Si l'on crée une page graphique, on ne peut pas la redimensionner automatiquement par rapport aux différentes résolutions, sinon il y a un étirement des graphiques.
Je ne te suis pas trop... As-tu un exemple à nous montrer ? On peut très bien faire des pages graphiques redimensionnables.
Des exemples : http://www.csszengarden.com/tr/francais/ :wink:

simipi a écrit :Donc, vos solutions ne fonctionnent pas. Je suis bien obligé de créer une page graphique pour chaque résolution, et dans mon cas, 2. Ca fonctionne bien, mais mal, sous firefox que je viens d'installer. Ce navigateur ne fait pas parti de nos outils, mais j'aime bien appréhender le futur.
En fait, il y a certainement énormément d'outils dans lesquels ça ne doit pas fonctionner.
Le W3C, avec ses recommandations WAI/WCAG, tente de pointer les éléments importants pour qu'une page soit interopérable, c'est-à-dire lisible quel que soit l'outil utilisé.

simipi a écrit :
  • .fade { filter: Alpha(Opacity=70); }
    .opaque { filter: Alpha(Opacity=100); }
Les propriétés "filter" ne sont pas des propriétés CSS. Pour l'opacité, CSS3 indique d'utiliser la propriété "opacity".

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
simipi
Salamandre
Messages : 35
Inscription : 13 oct. 2006, 13:41

re

Message par simipi »

N'oublie pas que c'est dans pour une conception de site intranet, donc je ne sais pas si la loi s'applique dans ce cas là, car le site n'est pas vu de l'extérieur.
Pour la page graphique, nous avons voulu, en sachant fort bien que c'est lourd à supporter et apporte bien des problèmes, mais c'était notre choix, que tout le haut de page soit en couleur dégradé de gauche à droite, et comportant bien sur des boutons. Donc toute cette partie,ains que les boutons et les caractères ont été crées sous photoshop.
J'ai du la refaire pour l'adapter en 1024.

un exemple trouvé sur le net, quoique le dessin du milieu ne remplit pas la page en 1024, donc il n'est pas modifié. Mais imagine, le meme graphisme qui remplit la page aussi bien en 800 et en 1024.
http://www.espacegraphique.com/

Pour l'opacité, il faut réecrire comment, car je n'ai pas bien compris ! :cry:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: re

Message par calimo »

simipi a écrit :un exemple trouvé sur le net, quoique le dessin du milieu ne remplit pas la page en 1024, donc il n'est pas modifié. Mais imagine, le meme graphisme qui remplit la page aussi bien en 800 et en 1024.
http://www.espacegraphique.com/
Ça me semble parfaitement faisable, même si effectivement un peu compliqué. Il "suffit" de mettre une certaine régularité au milieu, il y a un bout d'image horizontale que l'on peut mettre en fond répété. En 800 on ne voit rien, et quand on élargit ça apparait.

Il est vrai que ce n'est pas forcément évident, mais probablement pas plus compliqué que de maintenir deux pages différentes :wink:
simipi a écrit :Pour l'opacité, il faut réecrire comment, car je n'ai pas bien compris ! :cry:

Code : Tout sélectionner

.fade { opacity:0.7; }
.opaque { opacity:1.0; }
Bon, évidemment, c'est du CSS 3, donc IE va avoir de la peine... tu peux utiliser les deux, en te souvenant que certaines propriétés ne sont pas CSS (les CSS demandant d'ignorer les propriétés inconnues, ça ne devrait pas poser de problème, même si les parenthèses et le signe égal ne sont normalement jamais utilisés).

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.7) Gecko/20060921 Firelimace/dapper-security Firefox/1.5.0.7
simipi
Salamandre
Messages : 35
Inscription : 13 oct. 2006, 13:41

re

Message par simipi »

merci pour ta réponse. :D Pour mon problème de redimensionnement ce n'est pas évident, car c'est un dégradé de gauche à droite, sans possibilté de mettre un filet vertical pour l'étirement.


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Une possibilité : faire un dégradé assez long mais pas trop, de sorte qu'on ne voie pas tout en 800, et de plus en plus en agrandissant. Pour les résolutions plus grandes, on finira avec un simple fond uni !

Si c'est bien réalisé, ça peut être très beau :wink:

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.7) Gecko/20060921 Firelimace/dapper-security Firefox/1.5.0.7
simipi
Salamandre
Messages : 35
Inscription : 13 oct. 2006, 13:41

re

Message par simipi »

c'est pas grave, c'est vrai il y a toujours des solutions. Mais le site est fini et fonctionnel depuis 1 an. je ne peux te faire voir la page d'acceuil, mais en fait, il ya 3 parties graphiques. Le haut horizontal en dégradé, et les cotés en dégradés également. Seule la partie au milieu est vierge, et est réservée à une application nationale de news.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 4 invités