Finalisation intégration / ultimes réglages, merci !

Salut les zazacréateurs,

Je suis en train de finaliser l'intégration d'une homepage et j'ai encore deux ou trois questions auxquelles je dois apporter une réponse.

Le webdesign se trouve ici et voici ce que je réalise.

La CSS est là.

Voilà.

1a. Je ne maîtrise vraiment pas les champs, aussi pouvez-vous me dire s'ils sont bien réalisés et comment faire en sorte que le texte qui se trouve à l'intérieur ai un margin-right de quelques pixels ?

1.b Quand je mets le curseurs à l'intérieur d'un champs, que je maintiens cliqué et que je bouge verticalement la souris le texte s'agite. Je souhaiterai que le texte ne bouge pas, comment faire ?

2. Le bouton OK n'est pas aligné sur les champs, comment faire en sorte de le descendre de quelques pixels ? (j'ai l'impression d'avoir tout essayé !)

3. Dans la liste à puces comportant une image en background j'ai placé du texte que je souhaiterai centrer verticalement. J'ai essayé vertical-align, du margin, mais toujours sans succès. Comment centrer ces lignes de textes ? ("Consulter nos offres", "Déposer votre CV")

4. Toujours pour les puces, comment placer correctement les puces (images double flèches blanches) afin qu'elles soient verticalement alignées sur le texte qu'elles précèdent ? Y a-t-il une méthode simple pour y parvenir ?

Ben voilà, je crois que c'est tout ! Même si vous ne répondez qu'à un seul des points listés ici merci d'avance !

karnabal a écrit :
1a. Je ne maîtrise vraiment pas les champs, aussi pouvez-vous me dire s'ils sont bien réalisés et comment faire en sorte que le texte qui se trouve à l'intérieur ai un margin-right de quelques pixels ?

Aucune idée pour le margin (je ne vois pas trop de quoi tu veux parler, à vrai dire... Est-ce que tu veux parler d'un padding pour tes input de type text ?
Par contre, une bordure de type "solid" collerait mieux au design souhaité.
Je me permet de te signaler une erreur dans ta feuille de style :

imput { 
	bla: bla bla;
}

L'élément iMput n'existe pas en HTML.

karnabal a écrit :
1.b Quand je mets le curseurs à l'intérieur d'un champs, que je maintiens cliqué et que je bouge verticalement la souris le texte s'agite. Je souhaiterai que le texte ne bouge pas, comment faire ?

Il ne faut pas fixer la hauteur de ton champ. Ici, la hauteur du champ est fixe (et minuscule), donc la hauteur de la ligne de texte (qui dépasse en haut et en bas la simple hauteur d'une lettre) est plus grande. Tu as donc un champ de hauteur 10 pour un contenu de hauteur 15... pas étonnant que l'on puisse ainsi faire « défiler » le texte dans le champ.

karnabal a écrit :
2. Le bouton OK n'est pas aligné sur les champs, comment faire en sorte de le descendre de quelques pixels ? (j'ai l'impression d'avoir tout essayé !)

Mettre les trois input dans un p, et jouer sur la valeur de l'attribut vertical-align ? (sans garantie de résultat).

3. Dans la liste à puces comportant une image en background j'ai placé du texte que je souhaiterai centrer verticalement. J'ai essayé vertical-align, du margin, mais toujours sans succès. Comment centrer ces lignes de textes ? ("Consulter nos offres", "Déposer votre CV")
Centrer verticalement dans quoi ? Centrer le texte dans l'élément qui le contient à coup de padding ? Le résultat que j'ai sous les yeux n'a pas l'air particulièrement « décentré »...

karnabal a écrit :
4. Toujours pour les puces, comment placer correctement les puces (images double flèches blanches) afin qu'elles soient verticalement alignées sur le texte qu'elles précèdent ? Y a-t-il une méthode simple pour y parvenir ?

Modifier l'image de la puce en rajoutant quelques pixels transparent en bas de l'image ?


Globalement, et en dehors des petits détails à corriger, tu as un gros problème : ce type de design est prévu pour le print, pas pour le web. Fixe en largeur et surtout (rhédibitoire) en hauteur, il ne prévoit pas du tout la fluidité du texte qui caractérise le média web (fluidité du contenu, fluidité de la taille du texte, etc.).

Petit test : prendre n'importe quel navigateur qui respecte les choix de l'utilisateur (Firefox ou Opera par exemple, mais aussi Internet Explorer avec les bons réglages), et augmenter la taille du texte, puis constater le désastre.

Le texte de « consulter les offres » passe sur deux lignes (la deuxième venant percuter l'élément suivant), le texte de « déposer votre CV » n'est plus en face du macaron « 30' chrono ».

Pour info, c'est déjà le bordel sur mon écran (en 1280x1024... une résolution de plus en plus courante), rien qu'avec la taille de texte par défaut dans mon navigateur. Mais si on agrandit encore la taille du texte, là c'est Armaggedon.


Je me doute que les contraintes de la charte graphique ne relèvent pas de ton choix. Il serait temps de former les graphistes à l'ergonomie et à l'accessibilité des sites web, au moins pour la partie graphique qu'ils impactent.

Merci de ton avis et tes conseils sur les points précis que j'ai présenté dans ce topic, mais aussi pour l'avis plus général sur le design dont tu fais part à la fin de ton post.

Sur les points précis.

a écrit :
Aucune idée pour le margin (je ne vois pas trop de quoi tu veux parler, à vrai dire... Est-ce que tu veux parler d'un padding pour tes input de type text ?
Par contre, une bordure de type "solid" collerait mieux au design souhaité.

Oui, bien vu, c'est effectivement le padding qui apporte la solution à mon problème. J'ai appliqué un padding-left:3px; à mes input.

Oui aussi pour la bordure de type solid, c'est exactement ce que je recherchais.

a écrit :
L'élément iMput n'existe pas en HTML.

Yep, je me suis aperçu que les styles ne s'appliquaient pas quand je les plaçais dans la CSS, mais seulement quand je les inscrivais dans le code source HTML. Etant donné qu'elle fonctionne, puis-je considérer cette pratique comme juste ?

a écrit :
Il ne faut pas fixer la hauteur de ton champ.

Oui, j'avais bien imaginé que ce qui se trouvait à l'intérieur du champ étant plus grand que le champ lui-même, effectivement. Cependant à moins d'agrandir le champ je ne trouvais pas le moyen de me débarrasser de ce problème.

Sur ton conseil j'ai viré la hauteur du input et le résultat est satisfaisant.

a écrit :
Mettre les trois input dans un p, et jouer sur la valeur de l'attribut vertical-align ? (sans garantie de résultat).

Tu as bien fait de ne pas garantir de résultat ! lol J'ai essayé plein de trucs (des float dans tous les sens, des margin-top négatifs, etc), mais rien n'y a fait !

Du coup j'ai eu recours à une table et tout est correctement aligné.

a écrit :

Modifier l'image de la puce en rajoutant quelques pixels transparent en bas de l'image ?

Ben après faut que je hacke pour rétablir le positionnement vertical sous IE, mais c'est effectivement une solution.

Je voulais savoir si c'était possible autrement. J'ai finalement préféré la mettre en background-image.

a écrit :
Globalement, et en dehors des petits détails à corriger, tu as un gros problème : ce type de design est prévu pour le print, pas pour le web. Fixe en largeur et surtout (rhédibitoire) en hauteur, il ne prévoit pas du tout la fluidité du texte qui caractérise le média web (fluidité du contenu, fluidité de la taille du texte, etc.).

Petit test : prendre n'importe quel navigateur qui respecte les choix de l'utilisateur (Firefox ou Opera par exemple, mais aussi Internet Explorer avec les bons réglages), et augmenter la taille du texte, puis constater le désastre.

Le texte de « consulter les offres » passe sur deux lignes (la deuxième venant percuter l'élément suivant), le texte de « déposer votre CV » n'est plus en face du macaron « 30' chrono ».

Pour info, c'est déjà le bordel sur mon écran (en 1280x1024... une résolution de plus en plus courante), rien qu'avec la taille de texte par défaut dans mon navigateur. Mais si on agrandit encore la taille du texte, là c'est Armaggedon.


Je me doute que les contraintes de la charte graphique ne relèvent pas de ton choix. Il serait temps de former les graphistes à l'ergonomie et à l'accessibilité des sites web, au moins pour la partie graphique qu'ils impactent.

Même si ce genre d'impairs pourrait très bien m'arriver dans une certaine mesure, je ne suis pas à l'origine du graphisme.

Si j'ai présenté ce projet d'intégration sur Alsacréations (edit : vwala, il est là le s) c'est plus dans le but de solliciter les compétences des membres en XHTML & CSS que pour leur savoir en matière d'accessibilité.

Ton intervention mpop - côté accessibilité - n'en est cependant pas moins pertinente.

Modifié par karnabal (23 Sep 2006 - 23:55)

AlsacréationS avec 1 C et 2 S (forcément)

karnabal a écrit :
Yep, je me suis aperçu que les styles ne s'appliquaient pas quand je les plaçais dans la CSS, mais seulement quand je les inscrivais dans le code source HTML. Etant donné qu'elle fonctionne, puis-je considérer cette pratique comme juste ?

Les styles s'appliquent si tu les mets dans la feuille de style, mais uniquement si le sélecteur est correct :

imput { /* propriétés CSS qui ne s'appliqueront pas car l'élément iMput n'existe pas en HTML */ }

input { /* propriétés CSS qui s'appliqueront bien car l'élément iNput existe bien en HTML */ }

Mettre les styles directement sur l'attribut style est effectivement une solution, mais qui a un coût : les styles ne sont plus séparés du contenu, et la maintenance/évolution en est plus difficile.

karnabal a écrit :
Tu as bien fait de ne pas garantir de résultat ! lol J'ai essayé plein de trucs (des float dans tous les sens, des margin-top négatifs, etc), mais rien n'y a fait !

Du coup j'ai eu recours à une table et tout est correctement aligné.

Pourquoi pas un tableau, si c'est juste un tableau à trois cellules (sans cellules vides), par exemple.

Sinon, je viens de tester et il semblerait que la propriété vertical-align doive être utilisée sur l'élément à aligner (ici plutôt avec la valeur bottom, mais il y a peut-être des réglages plus fins de possible), et non pas sur le paragraphe conteneur (dans le cas où le conteneur serait un paragraphe).

karnabal a écrit :
Si j'ai présenté ce projet d'intégration sur Alsacréations (edit : vwala, il est là le s) c'est plus dans le but de solliciter les compétences des membres en XHTML & CSS que pour leur savoir en matière d'accessibilité.

Mais comme on est des gens bornés sur Alsacréations, on pointe aussi des choses comme l'accessibilité, quand bien même les questions porteraient sur un rendu graphique. Disons que c'est une manière de faire de l'éducation à ces problématiques que les membres du forum n'abordent que rarement d'eux-mêmes.

mpop a écrit :

Mettre les styles directement sur l'attribut style est effectivement une solution, mais qui a un coût : les styles ne sont plus séparés du contenu, et la maintenance/évolution en est plus difficile.

Petit détail en passant: dans ce cas, les styles sont bel et bien séparés de la structure et du contenu. En revanche, ils ne sont pas externalisés.

Laurent Denis a écrit :
Petit détail en passant: dans ce cas, les styles sont bel et bien séparés de la structure et du contenu. En revanche, ils ne sont pas externalisés.

En effet.