[En pleine angoisse] Alignement champs et boutons, la galère !

Avertissement : Ne pas se fier à ce message-ci, mais aux derniers messages, à cause du recodage !

Bonjour.

Je viens solliciter votre aide, car j'en suis à la finalisation d'une charte graphique pour une commande.

Voici d'abord les images :
http://ishimaru-design.servhome.org/tests/webopresto/index.html - Caractères normaux
http://ishimaru-design.servhome.org/tests/webopresto/inscription.html - Gros caractères

Pourquoi des tailles de police fixes ?

On m'a demandé à ce que la largeur de la page soit fixe. Et dans le header, si vous regardez bien (sous FF : clic-droit > Afficher l'image de fond), le bloc bleu du formulaire de connexion est incrusté à même le header. Donc, ça devenait très délicat d'utiliser des tailles relatives à cause du risque élevé de dégradation esthétique avec les variations de résolutions d'écran.

Donc, pour pallier à ça pour les IE-users et les grosses résolutions, j'ai proposé au gars qui m'a commandé le design l'idée d'un sélecteur de style géré par cookie et qui peut fonctionner sans JS. Pour cela, j'ai donc fait une feuille commune (style.css), puis une feuille pour chaque grandeur (normal.css pour les caractères normaux, et large.css pour les gros caractères), et puis dans ces deux feuilles, j'y importerais style.css avec @import

Une fois que j'avais terminé d'arranger les tailles de texte (en mettant les tailles normales dans style.css) en testant sous Firefox 3, je m'étais donc mise à tester sur les autres navigateurs. J'ai pu y arriver avec IE et Opera, mais le problème reste les navigateurs basés sur Webkit, et par malchance, j'ai un problème avec Safari et Chrome que j'ai installés avec playonlinux, ce qui fait que je ne peux pas les utiliser pour tester.

Donc là, ça commence à devenir pas mal un casse-tête ! Je sais pas comment phpBB3 a fait pour y arriver avec sa boîte de recherche, mais moi j'ai de la misère à arriver à aligner les boutons et les champs du formulaire de connexion rapide et du formulaire de recherche sur les différents navigateurs, sans avoir recours à une panoplie de hacks !

Voici donc les css :
http://ishimaru-design.servhome.org/tests/webopresto/style/style.css (style principal)
http://ishimaru-design.servhome.org/tests/webopresto/style/normal.css (caractères normaux)
http://ishimaru-design.servhome.org/tests/webopresto/style/large.css (gros caractères)

Les hacks utilisés :

* html mon_élément {}

pour IE6

propriete:valeur\9

pour toutes les versions d'IE

mon_element, x:-moz-any-link, x:default {}

Pour toutes les versions de Firefox

@media screen and (-webkit-min-device-pixel-ratio:0)
{
 mon_element {}
}

Pour les Webkit

C'est donc le chaos dans mes feuilles et je viens même de me rendre compte de quelques étourderies comme un hack IE à l'intérieur d'un hack FF...

Donc si quelqu'un peut me donner un coup de main pour arriver à régler ce problème d'alignement en recourant le moins possible aux hacks, ce serait apprécié, car là je sens que l'anxiété me guette.

Merci d'avance.

Ishimaru

PS : Et si on arrive à une méthode infaillible pour aligner champs et boutons, ce serait intéressant d'en feire un tuto là-dessus.
Modifié par IshimaruChiaki (08 Feb 2010 - 02:16)

Salut,

la technique que tu utilises est non seulement très compliquée mais peu efficace.

Pour ne pas avoir à s'interroger sur la police ou le navigateur utilisé par ton visiteur il "suffit" de ne pas fixer de hauteur (height) à tes blocs conteneurs. Du coup ceux-ci vont s'agrandir d'eux-mêmes. Pour ce qui est de ton design il ne te reste plus qu'à remplacer chaque image simple en 2 parties dont la première est extensible.
Par exemple pour le menu :

menu_haut


menu_bas


menu_haut est en background du div#menu et menu_bas est soit en background du dernier élément de div#menu (c'est l'idéal), soit tu utilises un autre élément (DIV par exemple) qui ne sert qu'à le mettre en background.

Pour le menu, le hic c'est que j'utilise la méthode des portes coulissantes pour l'effet de survol et la class .active
L'image en question pour les portes coulissantes (il fait 1px de large) :
http://ishimaru-design.servhome.org/tests/webopresto/style/menulink.png

Aussi, pour le header, il est en fait coupé là où le ruban commence, donc 7px avant la fin réelle de l'image du header. Donc si je mets de l'extensibilité au bloc bleu, ça risque de briser l'esthétique par l'agrandissement.

IshimaruChiaki a écrit :
le hic c'est que j'utilise la méthode des portes coulissantes pour l'effet de survol et la class .active

Il suffirait d'agrandir l'image mais en l'occurence c'est inutile d'utiliser cette technique puisqu'il s'agit simplement d'un changement de couleur qui se règle simplement avec un changement de background-color.

IshimaruChiaki a écrit :
Aussi, pour le header, il est en fait coupé là où le ruban commence, donc 7px avant la fin réelle de l'image du header. Donc si je mets de l'extensibilité au bloc bleu, ça risque de briser l'esthétique par l'agrandissement.

Il suffit de faire la même chose :

(Vite fait pour donner l'idée) :

header-normal_haut :


header-normal_bas :

Modifié par Heyoan (05 Feb 2010 - 11:23)

C'ta croire que j'aurai pas le choix de recourir aux PNGs transparents et donc, à un script pour IE6... car le header a un dégradé.

(et en passant, le premier lien n'est pas le bon)

Pour le menu, là aussi il y a un dégradé dans la partie bleue.
Modifié par IshimaruChiaki (05 Feb 2010 - 11:25)

IshimaruChiaki a écrit :
C'ta croire que j'aurai pas le choix de recourir aux PNGs transparents et donc, à un script pour IE6... car le header a un dégradé.

Alors il ne faut utiliser cette méthode que pour la partie bleu. Donc la mettre dans un bloc en float:right et affecter un overflow:hidden sur #header pour éviter le dépassement des flottants et que le header s'agrandisse.

IshimaruChiaki a écrit :
Pour le menu, là aussi il y a un dégradé dans la partie bleue.

Alors il suffit d'allonger ton image.


Edit: pour préciser ça doit donner quelque chose comme ça :

login_haut.png :


login_bas.png :

Modifié par Heyoan (05 Feb 2010 - 11:46)

Là je viens à peine de refaire les découpages et de faire mes deux morceaux du bloc bleu en transparent. Reste à travailler le code.

Je ne sais pas s'il y a des règles sur les ups, mais après le rebidouillage dans le code, voici ma page retravaillée :
http://ishimaru-design.servhome.org/tests/webopresto-v2/index.html

Avec le nouveau CSS : http://ishimaru-design.servhome.org/tests/webopresto-v2/style/style.css

Tous deux valides, mais il reste encore l'alignement des champs de formulaire et des boutons dans le bloc de connexion et celui de la recherche.

Salut,

c'est bien mieux mais :
* pourquoi avoir fixé une hauteur à #header ?
* il manque la même gestion pour le bandeau "Projets pour freelances"

IshimaruChiaki a écrit :
il reste encore l'alignement des champs de formulaire et des boutons dans le bloc de connexion et celui de la recherche.

Ben ils sont alignés non ? (A part une pitite différence pour l'INPUT recherche et le bouton OK due à un changement de font-size).

Heyoan a écrit :
Salut,

c'est bien mieux mais :
* pourquoi avoir fixé une hauteur à #header ?

Tu ne vois pas de dégradé dans mon header ? Car si je ne mettais pas de hauteur, celui-ci se couperait !

a écrit :
* il manque la même gestion pour le bandeau "Projets pour freelances"

Qu'est-ce que tu veux dire par là ?? Car les graphiques du tableau, c'est géré par trois div, car si j'utilisais les <thead>, <tbody> et <tfoot> pour les gérer, ce sera la super-galère sous IE : Pendant que sous Firefox, l'image ne se répète qu'une fois dans toute la rangée, sous IE l'image se répète dans chaque cellule !

a écrit :
Ben ils sont alignés non ? (A part une pitite différence pour l'INPUT recherche et le bouton OK due à un changement de font-size).

J'ai justement dû diminuer la taille de police pour atténuer ça ! Je te joins une capture pour te montrer ce que j'ai chez moi.
Modifié par IshimaruChiaki (05 Feb 2010 - 14:28)

Enfin, je suis arrivée à la percer la technique utilisée par phpBB3 !

J'avais bien entendu parler du vertical-align, mais ce que je ne savais pas, c'est qu'il fallait l'appliquer directement sur les champs à aligner !

Maintenant, après quelques ajustement, ils sont maintenant parfaitement alignés sous FF !

Maintenant, il reste un dernier souci : Je trouve que les polices des liens du menu un peu gros. Mais le hic, c'est que si je réduis cette taille de police et que j'augmente le padding ou le line-height de ces éléments <li> ou <a> (à l'intérieur des <li>), ça déborde du menu en haut et en bas... vous pouvez le voir par vous-mêmes en testant avec Firebug.
Modifié par IshimaruChiaki (05 Feb 2010 - 15:51)

Voilà, je remonte encore, pour signaler que j'ai pratiquement fini ! J'ai finalement laissé faire l'alignement des champs de formulaire, cela m'aurait pris trop de hacks. Pour les liens du menu, ça restera finalement tel quel.

Résultat des pages régulières, qui ont chacun une feuille normale, une feuille pour IE et un patch Javascript pour la transparence du bloc bleu de connexion rapide :
http://ishimaru-design.servhome.org/tests/webopresto-v2/index.html
http://ishimaru-design.servhome.org/tests/webopresto-v2/projets.html
http://ishimaru-design.servhome.org/tests/webopresto-v2/inscription.html
http://ishimaru-design.servhome.org/tests/webopresto-v2/construction.html (le cône, c'est moi qui l'a fait, avec Gimp)

Pages d'erreurs et notices :
http://ishimaru-design.servhome.org/tests/webopresto-v2/error.html
http://ishimaru-design.servhome.org/tests/webopresto-v2/notice.html

Je viens remonter le sujet, car ce n'est finalement toujours pas résolu !

Je viens d'apprendre que l'affichage diffère selon si on est sous Win ou sous Nux !

Celui qui m'a fait la commande est sous Seven et voici ce qu'il voit sous Firefox : http://www.webopresto.com/prob.jpg

L'une des pages : http://ishimaru-design.servhome.org/tests/webopresto-v2/inscription.html
CSS : http://ishimaru-design.servhome.org/tests/webopresto-v2/style/style.css

Quelqu'un a-t-il une piste ?

Merci d'avance.

IshimaruChiaki a écrit :
C'ta croire que j'aurai pas le choix de recourir aux PNGs transparents et donc, à un script pour IE6... car le header a un dégradé.

(et en passant, le premier lien n'est pas le bon)

Pour le menu, là aussi il y a un dégradé dans la partie bleue.

pas forcément, j'ai fait face au même cas et j'ai opté pour une solution plus simple (À toi de juger ensuite si tu trouves ça moins élégant...)

Mon ruban :
http://dsofficial.free.fr/public/new_theme3/img_99_h2.gif

PS. bien évidemment, mon ruban est adapté à un fond sombre.
Modifié par darkstar2023 (07 Feb 2010 - 01:29)

Euh... si tu regardais le dernier post (juste au dessus du tien), tu verrais que j'ai eu le temps de refaire les images à refaire, puis de recoder.

Et quand je parlais de transparence, c'était pour la boîte bleue de connexion rapide !

[EDIT à 4h du matin au Qc] Bon, là ça me gosse tellement cette histoire de décalage que je vous envoie le zip pour que vous puissiez l'examiner et le tester : http://sd-1.archive-host.com/membres/up/573382964/divers/webopresto-v2-beta.zip
Modifié par IshimaruChiaki (07 Feb 2010 - 10:23)

Up...

Et en passant, le gars en question a une résolution de 1440*900, tandis que la mienne est de 1280*1024.