[résolu] Max-width etc : un peu barbare, mais bon...

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateur : chinon37

Répondre
Jeffekol
Salamandre
Messages : 35
Inscription : 07 août 2008, 13:54

[résolu] Max-width etc : un peu barbare, mais bon...

Message par Jeffekol »

Bonjour à toutes/tous, et notamment à ceux/celles qui m'avaient donné un coup de main sur ce forum il y a quelques mois.

Voilà ma difficulté : j'ai commis un site d'école sous KZ : un site central, et six « sous-sites » de classes réalisés par les enseignants des différentes classes, toujours sous KZ, à partir d'un petit modèle simple que je leur ai fourni, et qu'avec un peu d'immodestie, mais surtout d'humour, j'ai nommé « JeffKompo ».

C'est ici :

http://pagesperso-orange.fr/ecole.holtzheim/

Alors pour répondre tout de suite à deux critiques :

- notre page « Entrée », dans notre cas, n'est pas inutile, mais sert à nous laisser la possibilité de renvoyer sur un « site de secours », l'hébergement principal (académique) ayant quelques ratés occasionnels

- je sais bien que le code est préhistorique voire pourri, :roll: , mais voilà : quand je m'attelai il y a quelques mois à cette tâche, j'ignorais tout des feuilles de style CSS, et quasiment ... jusqu'à leur existence !...

J'en viens maintenant à la difficulté rencontrée.

Dans l'ensemble le résultat nous satisfait bien, mais, parfait débutant, il y a une chose que je n'avais pas prévue, c'est le comportement des sites sur écran plus grand que 1024.

Disons plus justement que j'ai résolu de manière assez satisfaisante le problème pour la home page de chaque site,

mais je n'arrive pas à obtenir facilement un résultat fiable sur les trois autres pages des sites, dès lors notamment que les collègues composent leurs pages sur des écrans plus larges que 1024.

Bien évidemment la solution serait d'utiliser des CSS.

J'ai bien essayé des trucs avec max-width etc, mais je n'y arrive pas pour l'instant, suis trop nul dans ces trucs.

Je me suis ensuite tourné vers les excellents gabarits d'Alsacréations. J'ai choisi le 03, centré, largeur fixe 750 px, que j'ai augmentée à 900, ou 970, ça j'arrive à faire, ça fonctionne.

Mais ensuite il y a des difficultés techniques notamment :

- je n'arrive pas à recopier simplement la « pédagobarre » qui se trouve en haut de chaque page de nos sites (comme je le faisais aisément de page à page sur mon « modèle » avec KZ),

- quand je la recopie en essayant d'arranger les choses, les liens ne sont pas conservés, je dois plus ou moins tout reprendre,

- je n'arrive pas exactement à la même esthétique que sur nos sites, ni non plus au même résultat pour cette barre sous IE et FF, ce que j'obtenais sans peine précédemment.

Je pense qu'une part de ces difficultés proviennent sans doute (???) des « formatages » pour les textes, liens etc du gabarit d'Alsacréations, avec lesquels les formatages initiaux de notre « pédagobarre » ne seraient pas compatibles (enfin, c'est pas forcément le bon mot hein...)

(le gabarit d'Alsacréations utilise en fait deux feuilles de style, une première de base pour texte etc et l'autre pour la présentation : nombre de colonnes etc)

Alors je ne suis pas assez au fait de tout ça et ne dispose pas d'assez de temps (après tout celui, énorme..., déjà passé à monter le site...), pour arriver à faire correctement ce truc certainement tout bête : une feuille de style ultrabasique (même pas d'en-tête/pied de page etc, pas de formatage du texte, des liens, ...) qui assure juste cette chose essentielle : une largeur fixe donnée – disons 900 px – et le centrage de la page sur l'écran dans toutes les résolutions.

Quelqu'un peut-il me donner un coup de main ?

Ou me dire où se trouve la solution :idea: si elle est quelque part.

Si je disposais d'une telle feuille de style « simpliste », cela me permettrait de résoudre notre problème facilement et rapidement, le temps éventuellement que je progresse davantage en CSS pour peut-être faire mieux les choses dans les règles de l'art, de manière un peu moins « barbare »...

Il faut avouer qu'outre les différences de rendu parfois entre IE et FF qu'il faut régler et qui énervent déjà un peu ;-o)) ces histoires de différences de présentation selon les résolutions d'écran insécurisent grandement des collègues qui sont évidemment loin d'être des pros dans la composition de leurs web pages.

En tout cas merci d'avance pour toute éventuelle réponse...

Et s'il y a des collègues qui ont utilisé KZ pour des sites de classes, d'écoles, etc, vous pouvez toujours faire un petit signe ! :P

Jeff


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.8) Gecko/2009032609 Firefox/3.0.8
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

Bonjour,

Oui, le code de la page est assez catastrophique, mais comme tu en es conscient... :P

Pour centrer la page sur tous les écrans, avec un "site" de 900 px de large, tu peux mettre ceci:

Code : Tout sélectionner

body {
  width: 900px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  }
dans

Code : Tout sélectionner

<style type="text/css">
<!--
@page { size: 21cm 29.7cm }
-->
</style>
ce qui donne:

Code : Tout sélectionner

<style type="text/css">
body {
  width: 900px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  }
<!--
@page { size: 21cm 29.7cm }
-->
</style>
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Jeffekol
Salamandre
Messages : 35
Inscription : 07 août 2008, 13:54

Meeeerci Chinon ! ! !

Message par Jeffekol »

Je vais essayer cela.

(merci aussi pour ta mansuétude à l'égard de mes lacunes :wink: )

Tant qu'à faire je te remercie encore car il y a quelques semaines un de tes posts m'a fait découvrir Jalbum, qui m'a été bien utile !...

Jeff

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5)
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

l'un des gros problème de ton code est que tu as utilisé la barre de mise en forme n°2 de KompoZer qui est une aberration et devrait disparaître, s'il n'y tenait qu'à moi... et quelques autres.

Ainsi, par exemple, à chaque fois que tu cliques sur le bouton "plus petit", tu crées une balise <small>; si tu cliques 5 fois pour diminuer ton texte, tu auras donc <small><small><small><small><small> et comme les balises doivent être fermées, tu auras les 5 balises </small> en plus.
Tout ça peut être amplement simplifié en utilisant une règle de style qui donnera directement la taille que tu souhaites.
Pour simplifier, tu utilises KompoZer comme beaucoup utilisent un traitement de texte, à coup de "boutons" de format de texte. Alors qu'il suffirait, comme dans les logiciels de PAO (scribus par exemple), de définir des styles et d'appliquer ceux-ci ensuite aux textes. (c'est d'ailleurs aussi la méthode qui devrait être utilisée dans les traitements de texte.)
Exemple: tu tapes un mémoire avec titres, sous titres etc...
Il est nettement plus rapide de définir les styles au départ (titre en gras et en 15, sous titres en italique et en 12...) de taper le texte sans s'occuper des formats, et d'appliquer ensuite les styles pour chaque type de titres ou sous titres.
Hé bien, c'est le même principe pour une page web, et ainsi tu supprimerais, dans ta page présente, au moins 50 à 60 balises inutiles et le code s'en trouverais largement plus lisible. De plus, la modification de ta page s'en trouverait amplement facilitée.

Dans ta page, je trouve ceci:

Code : Tout sélectionner

<font
 color="#000080"><b><small><small><small><small><small><span
 style="color: white;"></span></small></small></small></small></small></b></font><font
 color="#000080"><b><small><small><small><small><small><br>
<span style="color: black;"> </span></small></small></small></small></small></b></font><small
 style="color: black;"><small><small><small><small> </small></small></small></small></small><font
 style="color: black;" color="#000080"><b><small><small><small><small><small>
<br>

</small></small></small></small></small></b></font>
Et bien, ce code ne sert strictement à rien: tu peux l'enlever, ta page ne sera pas modifiée :wink:
Et je pourrais t'en trouver d'autres encore :wink:
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Jeffekol
Salamandre
Messages : 35
Inscription : 07 août 2008, 13:54

Oui oui oui !

Message par Jeffekol »

Je sais que le code est vraiment préhistorique !

Mais ne perds pas de temps à trop le regarder ! Déjà j'aurais moins la honte :cry: et puis surtout je sais bien ce qu'il en est en gros !!!

Mon ambition actuelle n'est point d'aller vers un code propre (même si cela doit être un peu choquant pour les experts que vous êtes), mais de stabiliser à peu près +/- l'existant (mes collègues étant encore moins connaisseurs que moi dans l'ensemble...) et de minimiser son défaut pratique essentiel (pour l'instant) à savoir les variations dues aux différentes résolutions d'écran.

Je comprends bien aujourd'hui ce que tu expliques quant à la méthode qu'il faudrait suivre (et encore... si j'en ai la compréhension globale, je ne connais ni les détails théoriques ni ne possède le savoir-faire pratique...), mais quand j'ai commencé le site tout cela inacessible à ma compréhension...

Après avoir "stabilisé" les choses, si j'arrive, dans le sens que j'ai indiqué, j'aurai plus le temps de réfléchir à la suite : amélioration de ma connaissance des CSS, gabarit, CMS pour les collègues, à voir...

Merci pour les explications sur les balises de formatages de la taille des caractères : en effet, quand on y réfléchit, c'est "préhistorique ! " :wink:

Bon, j'ai essayé ta CSS, ça ne marche pas pour l'instant j'ai dû rater un truc, je donnerai des détails un peu plus tard.



Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5)
Jeffekol
Salamandre
Messages : 35
Inscription : 07 août 2008, 13:54

Message par Jeffekol »

Alors voilà :

comme ça ne semblait pas marcher, j'ai commencé un nouveau document KZ,
en incluant le minimum :

- le lien vers la feuille CSS
- une couleur
- deux lignes de texte pour test

ça donne donc ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>essai_pour_css_chinon</title>
<link rel="stylesheet" type="text/css"
href="styles/modele_chinon.css" media="screen">
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(204, 204, 255);"
alink="#000099" link="#000099" vlink="#990099">
ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff<br>
<br>
<br>
<br>
ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
&nbsp;ggggggggggggggggggggggggggggggggggggggg ggggggggggggggggg
</body>
</html>

la feuille de style étant donc :


/* =================================================
FEUILLE DE STYLE PROPOSEE PAR CHINON le 19/04/09
sur forum NVU/KompoZer
MERCI A LUI !!!
================================================= */


<style type="text/css">
body {
width: 900px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
<!--
@page { size: 21cm 29.7cm }
-->
</style>

Quand je lance le navigateur, la ligne de "fffffffffffffff"
dépasse allègrement les 1024 pixels.

Quant aux "gggggg" il s'arrêtent vers les 977 pixels
(pourquoi précisément ces 977 px, indiqués sur le "rectangle blanc en haut" ???)

En tout cas le feuille CSS n'opère pas.
J'ai vérifié qu'elle s'appelle bien "modele_chinon.css", et qu'elle est dans le dossier "styles", lequel est bien dans le même dossier que la page HTML...

Où es donc l'erreur grossière que j'ai forcément commise ?


Un autre truc me turlupine.
Il me semble avoir vu à propos des gabarits d'Alsacréations que la couleur du "fond" à droite et à gauche de la page était obtenue par une image insérée et qui se répète.
Ce dont il n'est pas question dans ta feuille de style.
Est -ce à dire que - lorsque le centrage de la page à l'écran fonctionnera chez moi :wink: j'abtiendrais à ces endroits une couleur "par défaut " ??????????????

@+ Jeff



Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5)
Ymai
Tyrannosaurus Rex
Messages : 4220
Inscription : 12 mars 2005, 11:36

Message par Ymai »

Jeffekol a écrit : Quand je lance le navigateur, la ligne de "fffffffffffffff"
dépasse allègrement les 1024 pixels.
Oui, mais ce n'est pas tout de se dégonfler "ffffffffhhhhhhhh" :D , il faut aussi respirer de temps en temps. Avec un espace, pour que la mise en page puisse se faire.
CSS ne passe pas à la ligne en coupant un mot. Là, la suite "fffffffff" constitue un seul mot.
En tout cas le feuille CSS n'opère pas.
Pas besoin de <style> </style> dans la feuille de style externe.
Est -ce à dire que - lorsque le centrage de la page à l'écran fonctionnera chez moi :wink: j'abtiendrais à ces endroits une couleur "par défaut "
Non, il n'existe pas une couleur par défaut. Sauf peut-être "blanc".
Dans le cas présent, une couleur pour <body> est définie dans le HTML (ce serait mieux dans CSS, mais bon). Elle est donc prise en compte.

Un truc qui *me* chipote.
Je crois que le centrage de <body> est une astuce pour forcer IE à travailler correctement. Mais il faut ensuite, au niveau de chaque bloc, remettre un alignement correct.
A confirmer.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.8) Gecko/2009032711 Ubuntu/8.04 (hardy) Firefox/3.0.8
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Jeffekol
Salamandre
Messages : 35
Inscription : 07 août 2008, 13:54

OK merci Ymai !

Message par Jeffekol »

C'est bien noté,
je vais voir ça de ce pas !...

Jeff

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5)
Jeffekol
Salamandre
Messages : 35
Inscription : 07 août 2008, 13:54

Suite... un peu bizarre...

Message par Jeffekol »

Alors voilà j'arrive à un résultat un peu incroyable pour... ma petite personne.

J'ai viré la définition de la couleur de la page HTLM (et les annexes par défaut mis par KZ : couleur des liens, etc. Pas indispensable pour mon expérience, mais mieux certainement, et puis, quand Ymai a parlé... :D )

OK pour le "mot" trop long que j'ai enlevé et remplacé par un "Lorem etc"

J'ai viré le passage en trop de la feuille CSS, qui est alors devenue :

body {
width: 900px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
<!--
@page { size: 21cm 29.7cm }
-->
(je supoose que le passage après la deuxième accolade ne "sert" pas vraiment

Et... ça n'a pas voulu fonctionner...
Systématiquement la texte allait jusqu'à 977 px, il y avait sous KZ le rectangle blanc en haut qui allait jusqu'à 977 px, et je suis bien sûr de n'avoir mis aucun div dans cette page HTML.

Je n'ai pas tenu compte de la dernière phrase du post précédent de YMai car je ne l'ai que vaguement comprise, si ce n'est que bien sûr j'ai vérifié que ça ne fonctionnait pas tant sous FF que sous IE...

Je me suis arraché les yeux pendant 2 heures avec l'onglet source de KZ et Notepad pour essayer de trouver mon erreur : rien trouvé...

Je me suis alors souvenu qu'en fait j'avais déjà trouvé il y a quelques semaines la solution que je cherchais, piquée chez Alsacréations.

J'ai essayé alors, exactement dans les mêmes conditions, cette feuille CSS :

body

{
width: 900px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
}
(des fois que ça puisse servir à plus nul que moi :D )

(bon j'ai juste pas utilisé la petite image)

Et là... ça a fonctionné direct... :!: Je dis que je n'y comprends rien ...

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5)
Jeffekol
Salamandre
Messages : 35
Inscription : 07 août 2008, 13:54

En conclusion ;-o))

Message par Jeffekol »

Après toutes ces tribulations j'ai :

- progressé (un tout petit peu hein...) en CSS :?

- décidé de repartir d'un gabarit d'ALsacréations, pour proposer à mes collègues une solution plus simple et plus propre (en espérant qu'eux mêmes ne la salissent pas trop :lol: ).

C'est bien d'essayer de comprendre et de faire soi-même, mais... parfois aussi faut "laisser faire les pros" !

On peut donc considérer que ma difficulté est résolue.

Je ne sais pas comment l'indiquer. Si quelqu'un veut bien le faire...

Ebn tout cas, marci pour vos éminentes contrib !

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5)
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

Oui, mettre text-align: center; à body est une combine pour que IE (6 au moins) prenne en compte le centrage de la page.
Évidemment, si on veut ensuite un alignement à gauche, il faudra spécifier une règle pour les blocs enfants qui corrigent l'alignement.


Pour mettre (résolu] dans le titre, il faut et il suffit que tu retourne sur ton 1er message du post > modifier > et tu modifies le titre du post.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Jeffekol
Salamandre
Messages : 35
Inscription : 07 août 2008, 13:54

Ah ok,

Message par Jeffekol »

j'ai comprendu :)

Je pensais qu'il fallait cliquer sur quelque mystérieux bouton...

Encore une petite chose que j'aurai apprise...

Merci à toi.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB5)
Répondre

Qui est en ligne ?

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