spip 2.09 ET résolution d'écran

Général
1

Bonjour à tous,
Je travaille avec spip 2.09 et le squelette evaweb 4 stable
Je voudrais faire utiliser le site de notre collège par les élèves, le pb ? surprise, les postes du collège sont en résolution 1024*768 ce qui semble poser de gros problème à l'affichage, le bloc central est décalé tout en bas comme avec un affichage en IE6, ce n'est pas un problème de versions de navigateurs. Je peux changer la résolution d'écran des postes mais c'est très long (paramétrage physique de l'écran à faire en plus). Lors du choix de la taille des blocs de mon site, j'avais choisi en pourcentage pensant pallier le problème des différentes résolutions.
adresse du site : http://kani-keli.org
Toute idée est la bienvenue.
Merci par avance.
Fabrice Houpeaux

2

Si au changement de définition d'un écran les blocs textes et images se décalent, c'est qu'il y a un problème de feuille de style. Il n'y a pas grand chose d'autre à faire que d'y emettre de l'ordre pour obtenir un comportement identique quelque soit la définition d'un moniteur.
Camille

fabrice houpeaux a écrit :

Bonjour à tous,
Je travaille avec spip 2.09 et le squelette evaweb 4 stable
Je voudrais faire utiliser le site de notre collège par les élèves, le pb ? surprise, les postes du collège sont en résolution 1024*768 ce qui semble poser de gros problème à l'affichage, le bloc central est décalé tout en bas comme avec un affichage en IE6, ce n'est pas un problème de versions de navigateurs. Je peux changer la résolution d'écran des postes mais c'est très long (paramétrage physique de l'écran à faire en plus). Lors du choix de la taille des blocs de mon site, j'avais choisi en pourcentage pensant pallier le problème des différentes résolutions.
adresse du site : http://kani-keli.org
Toute idée est la bienvenue.
Merci par avance.
Fabrice Houpeaux

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

3

fabrice houpeaux a écrit :

Bonjour à tous,
Je travaille avec spip 2.09 et le squelette evaweb 4 stable
Je voudrais faire utiliser le site de notre collège par les élèves, le pb ? surprise, les postes du collège sont en résolution 1024*768 ce qui semble poser de gros problème à l'affichage, le bloc central est décalé tout en bas comme avec un affichage en IE6, ce n'est pas un problème de versions de navigateurs. Je peux changer la résolution d'écran des postes mais c'est très long (paramétrage physique de l'écran à faire en plus). Lors du choix de la taille des blocs de mon site, j'avais choisi en pourcentage pensant pallier le problème des différentes résolutions.
adresse du site : http://kani-keli.org
Toute idée est la bienvenue.
Merci par avance.
Fabrice Houpeaux

passe le
div#contenu {
width:56%;
}
à
div#contenu {
width:54%;
}
et hop !

4

Pour être plus précis :
Vos padding sur les menus de gauche et droite sont en px alors que tout le reste est en %. Ce qui fait que sur certaines résolutions, les padding et margin représentent plus de 4% (100-56-2*20).
Solution:

div#contenu

margin-left:10px;
Retirer ceci.

div#menudroit

padding:0 1%;
Changer 10px par 1%

div#menu

padding:0 1%
Pareil

Je ne sais pas trop ce que ça va donner sur IE, j’ai pas le temps de faire de test mais normalement ça devrait aller.
Pour pallier à d’éventuels soucis de place sur ie
div#contenu
width:55%;
ça devrait suffire.

Il reste toutefois un problème sur la météo, elle ne se rétrécie pas, faut juste refaire en gros pareil : lui mettre des tailles en % et changer les images.

Cordialement,

5

Camille a écrit :

Si au changement de définition d'un écran les blocs textes et images se décalent, c'est qu'il y a un problème de feuille de style.

En l'occurrence pour ce cas, la feuille de style n'est pas en cause : c'est le webmestre qui a injecté les CSS suivantes à l'aide du plugin d'habillage d'eva-web :

div#page , div#entete ul.liens{width:100%;}
div#menu{width:20%;}
div#menudroit{width:20%;}
div#contenu{width:56%;}

Du coup, c'est bien normal que tout soit décalé car c'est un problème déjà rencontré et la feuille de style d'origine avait un peu prévu le coup en posant ce qui suit (un effet de bord des marges proportionnelles, notamment sous IE 6) :

div#menu{width:19.95%;}
div#menudroit{width:19.95%;}
div#contenu{width:55.95%;}

La prochaine fois, le mieux serait de poster sur la liste Spip-edu, dédiée à Eva-web :
https://listes.edres74.ac-grenoble.fr/wws/info/spip-edu

Cordialement,
Olivier Gautier.

Il n'y a pas grand chose d'autre à faire que d'y emettre de l'ordre pour obtenir un comportement identique quelque soit la définition d'un moniteur.
Camille

fabrice houpeaux a écrit :

Bonjour à tous,
Je travaille avec spip 2.09 et le squelette evaweb 4 stable
Je voudrais faire utiliser le site de notre collège par les élèves, le pb ? surprise, les postes du collège sont en résolution 1024*768 ce qui semble poser de gros problème à l'affichage, le bloc central est décalé tout en bas comme avec un affichage en IE6, ce n'est pas un problème de versions de navigateurs. Je peux changer la résolution d'écran des postes mais c'est très long (paramétrage physique de l'écran à faire en plus). Lors du choix de la taille des blocs de mon site, j'avais choisi en pourcentage pensant pallier le problème des différentes résolutions.
adresse du site : http://kani-keli.org
Toute idée est la bienvenue.
Merci par avance.
Fabrice Houpeaux

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

6

Quentin a écrit :

Pour être plus précis :
Vos padding sur les menus de gauche et droite sont en px alors que tout le reste est en %. Ce qui fait que sur certaines résolutions, les padding et margin représentent plus de 4% (100-56-2*20).
Solution:

*div#contenu*
margin-left:10px;
Retirer ceci.

*div#menudroit*
padding:0 1%;
Changer 10px par 1%

*div#menu*
padding:0 1%
Pareil

Je ne sais pas trop ce que ça va donner sur IE, j'ai pas le temps de faire de test mais normalement ça devrait aller.

En fait, ça ne va pas trop.

J'avais fait pas mal de tests à une époque, et j'en étais arrivé à la conclusion que ça passait bien sous FF mais pas trop sous IE pour des raisons d'arrondis :
il suffit que le calcul en pourcentage arrondisse les tailles un peu trop vers la valeur supérieure pour qu'il y ait rapidement 1 pixel de trop au total et que le bloc central se barre en bas sous IE. Sous FF, j'avais l'impression à l'époque qu'il réalisait des arrondis vers la valeur inférieure, ce qui ne posait pas ce type de problème.
La seule parade trouvée était de prévoir une marge d'arrondis : en gros, ne pas écrire 20% mais 19.95%...

Quant aux webmestres qui réécrivent les largeurs à leur sauce avec un total de 100%, comme c'est le cas pour le site en question, ils se retrouvent dans ce cas de bloc qui se dérobe de temps en temps en bas.

Pour ma part, je n'utilise désormais plus les largeurs proportionnelle : trop compliqué de gérer les tailles des images pour avoir un rendu propre ; et cela a le bon goût de supprimer tous ces problèmes de décalages.

Enfin, les padding n'ont logiquement aucun rôle dans cette histoire puisqu'ils n'interviennent pas sur la largeur externe du bloc, mais sur les dimensions internes.

Cordialement,
Olivier Gautier.

Pour pallier à d'éventuels soucis de place sur ie
*div#contenu
width:55%;
*ça devrait suffire.

Il reste toutefois un problème sur la météo, elle ne se rétrécie pas, faut juste refaire en gros pareil : lui mettre des tailles en % et changer les images.

Cordialement,

Le 03/11/2009 04:41, Camille a écrit :

Si au changement de définition d'un écran les blocs textes et images se décalent, c'est qu'il y a un problème de feuille de style. Il n'y a pas grand chose d'autre à faire que d'y emettre de l'ordre pour obtenir un comportement identique quelque soit la définition d'un moniteur.
Camille

fabrice houpeaux a écrit :

Bonjour à tous,
Je travaille avec spip 2.09 et le squelette evaweb 4 stable
Je voudrais faire utiliser le site de notre collège par les élèves, le pb ? surprise, les postes du collège sont en résolution 1024*768 ce qui semble poser de gros problème à l'affichage, le bloc central est décalé tout en bas comme avec un affichage en IE6, ce n'est pas un problème de versions de navigateurs. Je peux changer la résolution d'écran des postes mais c'est très long (paramétrage physique de l'écran à faire en plus). Lors du choix de la taille des blocs de mon site, j'avais choisi en pourcentage pensant pallier le problème des différentes résolutions.
adresse du site : http://kani-keli.org
Toute idée est la bienvenue.
Merci par avance.
Fabrice Houpeaux

------------------------------------------------------------------------

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc
  

7

En fait, ça ne va pas trop.

... Pas eu le temps de tester mais je ne pense pas qu'il y ait tant de soucis...

J'avais fait pas mal de tests à une époque, et j'en étais arrivé à la conclusion que ça passait bien sous FF mais pas trop sous IE pour des raisons d'arrondis :

C'est souvent le cas :stuck_out_tongue:

il suffit que le calcul en pourcentage arrondisse les tailles un peu trop vers la valeur supérieure pour qu'il y ait rapidement 1 pixel de trop au total et que le bloc central se barre en bas sous IE. Sous FF, j'avais l'impression à l'époque qu'il réalisait des arrondis vers la valeur inférieure, ce qui ne posait pas ce type de problème.
La seule parade trouvée était de prévoir une marge d'arrondis : en gros, ne pas écrire 20% mais 19.95%...

Pas bête :slight_smile:
Mais c'est aussi pour cela que je disais de mettre la colonne centre à 55% au lieu de 56% (en comm conditionnels pour IE).
Bien que n'ayant pas de sources vraiment sure, il me semble que Trident fait un round sur les % alors que les geckos font un floor..., d'où les erreurs de positionnement.
(c'est schématique hein !)
=> Si le total fait plus de 99%, il peut y avoir des erreurs sous IE.

Pour ma part, je n'utilise désormais plus les largeurs proportionnelle : trop compliqué de gérer les tailles des images pour avoir un rendu propre ; et cela a le bon goût de supprimer tous ces problèmes de décalages.

Pour la taille des images, je suis d'accord, tout ne peut pas être élastique.

Enfin, les padding n'ont logiquement aucun rôle dans cette histoire puisqu'ils n'interviennent pas sur la largeur externe du bloc, mais sur les dimensions internes.

La taille d'un bloc = margin + border + padding + width !!!!
La taille "interne" n'existe pas (enfin c'est le width) !!
Donc si si ils interviennent bien !

Cordialement,
Olivier Gautier.

8

Quentin a écrit :

Pour être plus précis :
Vos padding sur les menus de gauche et droite sont en px alors que tout le reste est en %. Ce qui fait que sur certaines résolutions, les padding et margin représentent plus de 4% (100-56-2*20).

Mince alors !!!

Je viens de réaliser que j'avais fait tout ce travail sous EVA-web 3 (tout était en %) et que les px sont revenus sous EVA-web 4... depuis 1 an exactement... sans que je m'en aperçoive !!!
Arg ! Je vais corriger cela vite fait.

Merci pour ces remarques.

Cordialement,
Olivier Gautier.

Solution:

*div#contenu*
margin-left:10px;
Retirer ceci.

*div#menudroit*
padding:0 1%;
Changer 10px par 1%

*div#menu*
padding:0 1%
Pareil

Je ne sais pas trop ce que ça va donner sur IE, j'ai pas le temps de faire de test mais normalement ça devrait aller.
Pour pallier à d'éventuels soucis de place sur ie
*div#contenu
width:55%;
*ça devrait suffire.

Il reste toutefois un problème sur la météo, elle ne se rétrécie pas, faut juste refaire en gros pareil : lui mettre des tailles en % et changer les images.

Cordialement,

Le 03/11/2009 04:41, Camille a écrit :

Si au changement de définition d'un écran les blocs textes et images se décalent, c'est qu'il y a un problème de feuille de style. Il n'y a pas grand chose d'autre à faire que d'y emettre de l'ordre pour obtenir un comportement identique quelque soit la définition d'un moniteur.
Camille

fabrice houpeaux a écrit :

Bonjour à tous,
Je travaille avec spip 2.09 et le squelette evaweb 4 stable
Je voudrais faire utiliser le site de notre collège par les élèves, le pb ? surprise, les postes du collège sont en résolution 1024*768 ce qui semble poser de gros problème à l'affichage, le bloc central est décalé tout en bas comme avec un affichage en IE6, ce n'est pas un problème de versions de navigateurs. Je peux changer la résolution d'écran des postes mais c'est très long (paramétrage physique de l'écran à faire en plus). Lors du choix de la taille des blocs de mon site, j'avais choisi en pourcentage pensant pallier le problème des différentes résolutions.
adresse du site : http://kani-keli.org
Toute idée est la bienvenue.
Merci par avance.
Fabrice Houpeaux

------------------------------------------------------------------------

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc
  

9

Finalement, cela est résolu par : Connexion · GitLab

Reste à mettre à jour la version d'EVA (lorsque le paquet sera à jour sur la zone), supprimer toute référence à des choix personnels de tailles dans le plugin d'habillage d'EVA, et cela devrait rentrer dans l'ordre.

Cordialement,
Olivier Gautier.

Olivier Gautier a écrit :

Quentin a écrit :

Pour être plus précis :
Vos padding sur les menus de gauche et droite sont en px alors que tout le reste est en %. Ce qui fait que sur certaines résolutions, les padding et margin représentent plus de 4% (100-56-2*20).

Mince alors !!!

Je viens de réaliser que j'avais fait tout ce travail sous EVA-web 3 (tout était en %) et que les px sont revenus sous EVA-web 4... depuis 1 an exactement... sans que je m'en aperçoive !!!
Arg ! Je vais corriger cela vite fait.

Merci pour ces remarques.

Cordialement,
Olivier Gautier.

Solution:

*div#contenu*
margin-left:10px;
Retirer ceci.

*div#menudroit*
padding:0 1%;
Changer 10px par 1%

*div#menu*
padding:0 1%
Pareil

Je ne sais pas trop ce que ça va donner sur IE, j'ai pas le temps de faire de test mais normalement ça devrait aller.
Pour pallier à d'éventuels soucis de place sur ie
*div#contenu
width:55%;
*ça devrait suffire.

Il reste toutefois un problème sur la météo, elle ne se rétrécie pas, faut juste refaire en gros pareil : lui mettre des tailles en % et changer les images.

Cordialement,

Le 03/11/2009 04:41, Camille a écrit :

Si au changement de définition d'un écran les blocs textes et images se décalent, c'est qu'il y a un problème de feuille de style. Il n'y a pas grand chose d'autre à faire que d'y emettre de l'ordre pour obtenir un comportement identique quelque soit la définition d'un moniteur.
Camille

fabrice houpeaux a écrit :

Bonjour à tous,
Je travaille avec spip 2.09 et le squelette evaweb 4 stable
Je voudrais faire utiliser le site de notre collège par les élèves, le pb ? surprise, les postes du collège sont en résolution 1024*768 ce qui semble poser de gros problème à l'affichage, le bloc central est décalé tout en bas comme avec un affichage en IE6, ce n'est pas un problème de versions de navigateurs. Je peux changer la résolution d'écran des postes mais c'est très long (paramétrage physique de l'écran à faire en plus). Lors du choix de la taille des blocs de mon site, j'avais choisi en pourcentage pensant pallier le problème des différentes résolutions.
adresse du site : http://kani-keli.org
Toute idée est la bienvenue.
Merci par avance.
Fabrice Houpeaux

------------------------------------------------------------------------

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc
  
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc
  

10

Bonjour,
Oui effectivement tout est rentré dans l'ordre après mise à jour du squelette.
Enfin pourquoi sur cette liste ? parce que je n'étais pas du tout sur que le pb vienne du squelette. D'ailleurs, le pb venait plutôt de moi.
Reste à régler le css du plugin rainette mais pour l'instant, c'est moins grave.
Merci bien.
Fabrice Houpeaux

Finalement, cela est résolu par : Connexion · GitLab

Reste à mettre à jour la version d'EVA (lorsque le paquet sera à jour sur la zone), supprimer toute référence à des choix personnels de tailles dans le plugin d'habillage d'EVA, et cela devrait rentrer dans l'ordre.

Cordialement,
Olivier Gautier.

Olivier Gautier a écrit :

Quentin a écrit :

Pour être plus précis :
Vos padding sur les menus de gauche et droite sont en px alors que tout le reste est en %. Ce qui fait que sur certaines résolutions, les padding et margin représentent plus de 4% (100-56-2*20).

Mince alors !!!

Je viens de réaliser que j'avais fait tout ce travail sous EVA-web 3 (tout était en %) et que les px sont revenus sous EVA-web 4... depuis 1 an exactement... sans que je m'en aperçoive !!!
Arg ! Je vais corriger cela vite fait.

Merci pour ces remarques.

Cordialement,
Olivier Gautier.

Solution:

*div#contenu*
margin-left:10px;
Retirer ceci.

*div#menudroit*
padding:0 1%;
Changer 10px par 1%

*div#menu*
padding:0 1%
Pareil

Je ne sais pas trop ce que ça va donner sur IE, j'ai pas le temps de faire de test mais normalement ça devrait aller.
Pour pallier à d'éventuels soucis de place sur ie
*div#contenu
width:55%;
*ça devrait suffire.

Il reste toutefois un problème sur la météo, elle ne se rétrécie pas, faut juste refaire en gros pareil : lui mettre des tailles en % et changer les images.

Cordialement,

Le 03/11/2009 04:41, Camille a écrit :

Si au changement de définition d'un écran les blocs textes et images se décalent, c'est qu'il y a un problème de feuille de style. Il n'y a pas grand chose d'autre à faire que d'y emettre de l'ordre pour obtenir un comportement identique quelque soit la définition d'un moniteur.
Camille

fabrice houpeaux a écrit :

Bonjour à tous,
Je travaille avec spip 2.09 et le squelette evaweb 4 stable
Je voudrais faire utiliser le site de notre collège par les élèves, le pb ? surprise, les postes du collège sont en résolution 1024*768 ce qui semble poser de gros problème à l'affichage, le bloc central est décalé tout en bas comme avec un affichage en IE6, ce n'est pas un problème de versions de navigateurs. Je peux changer la résolution d'écran des postes mais c'est très long (paramétrage physique de l'écran à faire en plus). Lors du choix de la taille des blocs de mon site, j'avais choisi en pourcentage pensant pallier le problème des différentes résolutions.
adresse du site : http://kani-keli.org
Toute idée est la bienvenue.
Merci par avance.
Fabrice Houpeaux

------------------------------------------------------------------------

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc
  
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc