Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Ce site passe-t-il sous toutes les résolutions ?

63 réponses
Avatar
Jean Francois Ortolo
Bonsoir

J'ai terminé de mettre au point toutes les fonctionnalités du site
www.lespronostics.com , à part que la partie centrale est formattée de
grandeur fixe, et devrait donc mal passer sous certaines résolutions.

Je dois ( mais je suis un gros flemmard ;( ), arranger le script css,
pour convertir les tailles fixes, en tailles proportionnelles à la
largeur de l'écran, mais ce fichier, fait environ 47 pages A4 à
l'impression, en caractères moyens... ;(

En effet, j'ai programmé dans ce fichier css, autant de classes que
de types de pages, et de types d'éléments dans chaque page, cause le
Monsieur qui m'a demandé de faire celà, m'a dit au milieu du
développement, qu'il pensait qu'il ferait appel à un graphiste, pour
parfaire la présentation.

Pour faciliter la tâche du graphiste, et lui laisser toute liberté de
mise au point de chaque types de pages, j'ai cru bon de faire celà :
Autant de types de classes, que de types de pages, ce qui a démultiplié
la taillle du fichier css.

Convertir toutes les classes css en proportionnel, représente un gros
travail, répétitif et chiant, consistant à ajuster toutes les tailles
des classes css sur mon écran ( 1280x1024 pixels ) par rapport au reste
du site, avec des tailles en pourcentages pour les containers, ou en em
pour les tailles de caractères.

Pour savoir l'apparence actuelle du site sous différentes
résolutions, pourriez-vous me dire, si ce site ( www.lespronostics.com
), "passe" à peu près, pour des résolutions variées ?

Evidemment, celà ne nécessite pas de s'abonner aux pronostics, ni
d'acheter un ticket téléphonique, c'est seulement pour les parties
gratuites. ;(

Merci de m'indiquer les problèmes d'affichage que vous rencontrez. ;)

Merci beaucoup de vos réponses.

Jean François Ortolo

10 réponses

1 2 3 4 5
Avatar
Olivier Masson
Le 08/11/2011 16:10, Jean Francois Ortolo a écrit :

Si j'ai bien compris, on met dans la classe css de l'élément que l'on
veut avoir le layout, ceci ( par exemple pour un div ) :

/* classes gauche pour un div */
div.gauche {
zoom: 1;
}




Exactement.

La réponse à cette question, me permettra peut-être, de satisfaire
entièrement le Monsieur qui m'a demandé de faire ce site :
www.lespronostics.com

Il est en train de faire des essais, parfois il me dit que les tailles
des caractères sont trop petites, parfois trop grandes. ;(




Trop de classes tuent la classe. Une feuille de style immense est très
difficile à maintenir.
Quoiqu'il en soit, j'espère que vous faites vos modifs avec firebug ou
tout autre éditeur permettant de voir en temps réel ses modifications.
Avatar
Jean Francois Ortolo
Le 08/11/2011 19:15, Olivier Masson a écrit :
Le 08/11/2011 16:10, Jean Francois Ortolo a écrit :

Si j'ai bien compris, on met dans la classe css de l'élément que l'on
veut avoir le layout, ceci ( par exemple pour un div ) :

/* classes gauche pour un div */
div.gauche {
zoom: 1;
}




Exactement.




Merci beaucoup Monsieur.

Je n'ai pas beaucoup d'éléments pour lesquels il soit souhaitable de
fixer le layout. Seulement quelques div.

Comme le site est un site spip, il se peut que cette propriété soit
déjà spécifiée dans une classe générique de div, donc que je n'ai pas
besoin de l'indiquer pour tous mes div ?

Théoriquement, les éléments de type ul où le mode bloc a été
transformé en type inline pour rendre la liste horizontale, n'a pas
besoin d'être adaptée de cette manière, puisque seuls les éléments de
type bloc sont concernés ?


Il est en train de faire des essais, parfois il me dit que les tailles
des caractères sont trop petites, parfois trop grandes. ;(




Trop de classes tuent la classe. Une feuille de style immense est très
difficile à maintenir.
Quoiqu'il en soit, j'espère que vous faites vos modifs avec firebug ou
tout autre éditeur permettant de voir en temps réel ses modifications.



En fait... Je pense que je garde la maîtrise entière de ce script
css, et de toute façon, j'ai l'intention de le simplifier en regroupant
les classes de mêmes propriétés, très prochainement.

Celà est du, à la notation stricte que j'ai utilisée pour nommer les
classes

Je n'ai pas firebug, mais j'ai Firefox sous Linux Fedora 14 64 bits,
je crois que je n'ai jamais installé ce plugin sur Firefox ( je sais le
faire, mais je ne sais pas encore utiliser firebug ).

Ce que je fais toujours entre chaque modification du script css
perso.css , c'est d'effacer le cache de ce site spip, et de redémarrer
Firefox, qui est configuré pour effacer son cache à chaque arrêt.

Je ne vois pas, comment il pourrait y avoir des changements dans
perso.css , qui ne soient pas pris en compte par le navigateur ?

Celà dit, si firebug me permet de savoir si ce script css est
entièrement correct, et détecte les erreurs éventuelles, celà me serait
très utile, effectivement. ;)

Merci beaucoup pour votre réponse.

Bien amicalement.

Jean François Ortolo
Avatar
SAM
Le 08/11/11 16:10, Jean Francois Ortolo a écrit :

www.lespronostics.com

Il est en train de faire des essais, parfois il me dit que les tailles
des caractères sont trop petites, parfois trop grandes. ;(



Oui, bon, ben ... personnellement les tailles de caractères ne sont pas
les mêmes dans mon Firefox et dans mon Safari, l'un les affiche + grand
que l'autre.
(c'est comme ça que je les ai réglés)

Il faudrait essayer d'expliquer au Monsieur que le site n'est pas pour
n'être affiché que chez lui et que forcément, suivant comment est réglé
le navigateur chez le voisin, il n'y apparaitra pas tout à fait pareil
que chez lui.


--
Stéphane Moriaux avec/with iMac-intel
Avatar
SAM
Le 08/11/11 20:30, Jean Francois Ortolo a écrit :

Celà dit, si firebug me permet de savoir si ce script css est
entièrement correct, et détecte les erreurs éventuelles, celà me serait
très utile, effectivement. ;)



Le côté pratique de firebug va beaucoup plus loin que ça.
Firebug montre à gauche le code html de la page (le DOM du fichier ?) et
dans une colonne à droite la feuille de styles.
Au clic (mise en surbrillance) d'une balise du html, à droite on a alors
les css concernant cet élément : celles qui vont du générique au plus
particulier.

Une modification de ces css (on change une couleur, par exemple) modifie
en temps réel l'affichage graphique de la page au-dessus.


Les pronostics autopsiés par firebug :
<http://cjoint.com/?AKixmTHCEBt>



--
Stéphane Moriaux avec/with iMac-intel
Avatar
Jean Francois Ortolo
Le 08/11/2011 23:13, SAM a écrit :

Le côté pratique de firebug va beaucoup plus loin que ça.
Firebug montre à gauche le code html de la page (le DOM du fichier ?) et
dans une colonne à droite la feuille de styles.
Au clic (mise en surbrillance) d'une balise du html, à droite on a alors
les css concernant cet élément : celles qui vont du générique au plus
particulier.





Bonjour Monsieur

J'ai installé Firebug 1.8.4 sur mon Firefox 7.0

C'est indiqué après, que lcette version de Firebug, est compatible
avec mon Firefox.

D'ailleurs, j'ai installé Firebug, simplement avec le sous-menu
"Extensions", puis en mettant comme mot-clé dans la boite de saisie :
"firebug", ce qui a affiché entre autre, uniquement cette version de
Firebug, puis j'ai cliqué sur "Intall", puis j'ai redémarré le
navigateur. Classique, quoi... ;)

Je n'ai pas l'indication de fonctionnement de firebug dans la barre
des tâches du navigateur, qui semble être réduite à une simple ligne
fine ( comme avant l'installation de firebug ).

Si Firebug trouve une erreur dans le css, à part d'indiquer le nombre
des erreurs dans cette barre des tâches, comment fait-il pour signaler
l'erreur ?

Merci beaucoup de votre réponse.

Bien amicalement.

Jean François Ortolo
Avatar
Jean Francois Ortolo
Le 08/11/2011 22:53, SAM a écrit :

Oui, bon, ben ... personnellement les tailles de caractères ne sont pas
les mêmes dans mon Firefox et dans mon Safari, l'un les affiche + grand
que l'autre.
(c'est comme ça que je les ai réglés)

Il faudrait essayer d'expliquer au Monsieur que le site n'est pas pour
n'être affiché que chez lui et que forcément, suivant comment est réglé
le navigateur chez le voisin, il n'y apparaitra pas tout à fait pareil
que chez lui.






Bonjour Monsieur

En fait, entre son premier mail ( trop petit ) et son second mail (
trop grand ), j'avais fait une modification sur la taille générale des
caractères du site, en portant la taille par défaut du body, de 0.85em,
à 1.1em.

Suite à son deuxième email, j'ai réglé cette taille du body à : 1em.

Lors de son premier email, le Monsieur me recommandait de revenir à
des tailles en pixels, comme avant l'ensemble de mes modifications... ;(

Dans son deuxième email, il n'a plus fait allusion à celà,
probablement car le fait que j'ai pu réduire la taille de tous les
caractères du site en même temps ( impossible à réaliser avec des
tailles en pixels ), l'a probablement impressionné ... ;)

Ce Monsieur est du genre pulsionnel, je suis obligé de faire valoir
des arguments évidents sur le plan technique, et cool sur le plan
psychologique. ;)

Il ne pourrait pas vérifier ce que vous dites, donc il aurait
tendance à réagir de manière imprévisible.

Bien amicalement.

Jean François Ortolo
Avatar
Paul Gaborit
À (at) Wed, 09 Nov 2011 08:50:09 +0100,
Jean Francois Ortolo écrivait (wrote):

Je n'ai pas l'indication de fonctionnement de firebug [...]



Pour utiliser Firebug, il faut commencer par l'ouvrir :
menu "Outil"->"Développpement Web"->"Firebug"-> "Ouvrir Firebug"
(ou F12 si cette touche ne sert pas déjà à autre chose).

--
Paul Gaborit - <http://perso.mines-albi.fr/~gaborit/>
Avatar
SAM
Le 09/11/11 08:50, Jean Francois Ortolo a écrit :

J'ai installé Firebug 1.8.4 sur mon Firefox 7.0



J'ai fait un clic-droit sur la barre du haut (la barre d'adresse) et là
j'ai pu y glisser le bouton-icône de Firebug.
J'espère que le fonctionnement est identique sous Linux ?!

Pour la barre des tâches (normalement appelée barre d'état ou en angl.
status bar, et appelée ici barre des modules) il faut aller au menu
Affichage / Barre d'outils /
et choisir (cocher) les barres que l'on souhaite voir.

Si Firebug trouve une erreur dans le css, à part d'indiquer le nombre
des erreurs dans cette barre des tâches, comment fait-il pour signaler
l'erreur ?



Qu'est-ce que ça veut dire une "erreur" de css ?

sauf les règles non standards (utilisées par IE),
à part une typo, je ne vois pas ...

à ce propos, la console naturelle de Firefox sait aussi signaler les
erreurs de css et de JavaScript.
Outils / Développeur web / Console d'erreurs



--
Stéphane Moriaux avec/with iMac-intel
Avatar
Jean Francois Ortolo
Le 09/11/2011 10:03, Paul Gaborit a écrit :

À (at) Wed, 09 Nov 2011 08:50:09 +0100,
Jean Francois Ortolo écrivait (wrote):

Je n'ai pas l'indication de fonctionnement de firebug [...]



Pour utiliser Firebug, il faut commencer par l'ouvrir :
menu "Outil"->"Développpement Web"->"Firebug"-> "Ouvrir Firebug"
(ou F12 si cette touche ne sert pas déjà à autre chose).





Bonjour Monsieur

Oui, ben çà, je savais... ;)

J'ai bien l'affichage de Firebug en bas de la page.

Je vais voir si le réglage de SAM par rapport à la barre des tâches,
pourra avoir un effet sur le problème ( tbarre des tâches réduite à une
ligne fine, même avant l'install de firebug.

Bien amicalement.

Jean François Ortolo
Avatar
SAM
Le 09/11/11 11:06, Jean Francois Ortolo a écrit :

( tbarre des tâches réduite à une
ligne fine, même avant l'install de firebug.



La non barre de status (barre d'état) est l'affichage par défaut.
C'est la grande mode pour tous les navigateurs ;-)

Mais certainement on doit pouvoir "volontairement" en choisir le
ré-affichage (Safari, Fx, ok).

Je ne sais si on peut encore y faire écrire via JavaScript ?

--
Stéphane Moriaux avec/with iMac-intel
1 2 3 4 5