Afficher le formulaire suivant en CSS (sans tableaux)

Afficher le formulaire suivant en CSS (sans tableaux) - HTML/CSS - Programmation

Marsh Posté le 19-08-2005 à 11:47:25    

Bonjour,
 
Je voudrais évoluer (techniquement) en transformant un site intranet (en php) pour le rendre conforme à XHTML 1.0 et CSS 2. J'ai lu pas mal de tutoriaux (alsacreations, openweb, etc.), je me suis acheté un bouquin traitant des css 2.1, etc. Mais voilà, je bute pour afficher des formulaires dans ce genre :
 
http://img375.imageshack.us/img375/5046/formulaire9kf.th.jpg
 
Est-ce-que je dois passer par des id pour chaque "label", "input" et "select" du formulaire et dans la feuille de style, indiquer les positions? Ou est-ce-que je dois mettre ces balises dans des "div" qui eux-mêmes, sont inclus dans un gros "div" (en gros, transformer mon tableau de mise en page par des div) : mais j'ai lu que c'était pas un bonne manière de faire. ESt-ce que qq'un pourrait m'aider? Car en fouillant sur el web, j'ai trouvé beaucoup d'articles pour de la mise en page de textes, mais pas de formuaires (ou alors, les champs sont affichés les uns sous les autres, ce qui ne me convient pas).  
 
Par avance, merci de votre aide :jap:


Message édité par rufo le 19-08-2005 à 11:48:41
Reply

Marsh Posté le 19-08-2005 à 11:47:25   

Reply

Marsh Posté le 19-08-2005 à 13:08:51    

Reply

Marsh Posté le 19-08-2005 à 14:08:40    


 
le 2ième site est intéressant mais malheureusement, ça ne m'éclaire pas sur mon pb : tous les exemples montrent des champs (label + 1 input ou label + 1 select) du formulaire les uns sous les autres :( Mais merci de ton aide.

Reply

Marsh Posté le 19-08-2005 à 15:04:03    

rufo a écrit :

le 2ième site est intéressant mais malheureusement, ça ne m'éclaire pas sur mon pb : tous les exemples montrent des champs (label + 1 input ou label + 1 select) du formulaire les uns sous les autres :( Mais merci de ton aide.


C'est normal. On ne fait jamais les formulaires comme tu l'as fait [:spamafote] On fait toujours les champs les uns sous les autres, jamais de trucs dans tous les sens. Et avec les bordures et couleurs, ton formulaire est trop surchargé. Au premier coup d'oeil, on a l'impression d'être en face d'un truc hyper-compliqué.
 
Lecture : http://lukew.com/resources/articles/web_forms.html et http://www.lukew.com/ff/entry.asp?155

Reply

Marsh Posté le 19-08-2005 à 15:11:36    

FlorentG a écrit :

C'est normal. On ne fait jamais les formulaires comme tu l'as fait [:spamafote] On fait toujours les champs les uns sous les autres, jamais de trucs dans tous les sens. Et avec les bordures et couleurs, ton formulaire est trop surchargé. Au premier coup d'oeil, on a l'impression d'être en face d'un truc hyper-compliqué.
 
Lecture : http://lukew.com/resources/articles/web_forms.html et http://www.lukew.com/ff/entry.asp?155


 
Le pb, c'est que c'est effectivement un truc compliqué (l'objet manipulé). Là, y'a qu'1/3 de la fiche. En réalité, elle est bien plus grande que ça. Alors, si en + je dois mettre les champs les uns en-dessous des autres, la fiche va être encore plus grande :(...

Reply

Marsh Posté le 19-08-2005 à 15:50:19    

Ben ouais, tout à la chaîne, groupés de manière logique

Reply

Marsh Posté le 19-08-2005 à 15:55:39    

ça va faire une espèce de grande colonne étroite au milieu de ma page, le coup de tous les champs affichés les uns en-dessous des autres :(
 
Et sinon, en mettant de côté que ça ne se fait aps habituellement, comment fait on en css ce genre de mise en page?

Reply

Marsh Posté le 19-08-2005 à 15:56:39    

rufo a écrit :

ça va faire une espèce de grande colonne étroite au milieu de ma page, le coup de tous les champs affichés les uns en-dessous des autres :(


C'est la meilleure manière à faire, pourtant. La plus lisible, celle qui permet à l'oeil de scanner le plus rapidement les champs...

Reply

Marsh Posté le 19-08-2005 à 15:57:28    

L'objectif c'est de ne pas faire le plus compact. Il faut faire le plus lisible et le plus clair. Donc ne pas mettre des trucs dans tous les sens [:spamafote]

Reply

Marsh Posté le 19-08-2005 à 16:28:40    

FlorentG a écrit :

C'est la meilleure manière à faire, pourtant. La plus lisible, celle qui permet à l'oeil de scanner le plus rapidement les champs...


 
effectivement, ça permet de scanner + vite quand c'est en-dessous, mais si ça sort de l'écran, l'utilisateur doit scroller ; il perd donc du temps. Comme j'ai pas mal de petits champs (pas longs), je trouvais que c'était mieux de les mettre en ligne ; ça évitait de scroller. Ma fiche fait, quand les champs de type "textarea" ne sont pas trop gros, 3 écrans, sans compter les autres objets qui sont liés à cette fiche. Je les ai regroupés dans des onglets en bas de la fiche. A 2 endroits, j'ai mis un menu de raccourcis pointant sur divers champs de la fiche, histoire de naviguer + vite. En mettant les champs en-dessous, ça va encore ralonger la fiche ; j'ai peur que ça fasse vraiment trop long...

Reply

Marsh Posté le 19-08-2005 à 16:28:40   

Reply

Marsh Posté le 19-08-2005 à 16:33:28    

FlorentG a écrit :

C'est normal. On ne fait jamais les formulaires comme tu l'as fait [:spamafote] On fait toujours les champs les uns sous les autres, jamais de trucs dans tous les sens.


Si, mais ça demande de jouer avec les floats, de séparer le formulaire en zones logiques via des fieldsets et tout :o
 
C'est marrant d'ailleurs, j'ai composé il y a pas longtemsp un petit formulaire en 3 colonnes [:dawa]
 
Ben c'est la super merde à stabiliser et à aligner sous tous les navigateurs [:dawa]


Message édité par masklinn le 19-08-2005 à 16:34:40

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-08-2005 à 16:38:38    

masklinn a écrit :

Si, mais ça demande de jouer avec les floats, de séparer le formulaire en zones logiques via des fieldsets et tout :o
 
C'est marrant d'ailleurs, j'ai composé il y a pas longtemsp un petit formulaire en 3 colonnes [:dawa]
 
Ben c'est la super merde à stabiliser et à aligner sous tous les navigateurs [:dawa]


 
ça, ça m'interesse :hello:! Tu pourrais em donner l'url du site où t'as fait ça? Merci.

Reply

Marsh Posté le 19-08-2005 à 16:45:47    

Nah, c'est un intranet donc c'est mort [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 19-08-2005 à 17:12:10    

masklinn a écrit :

Nah, c'est un intranet donc c'est mort [:spamafote]


 
et en enregistrant la page en fichier html et en me donnant le bout de css qui va avec, ça pourrait le faire?

Reply

Marsh Posté le 22-08-2005 à 10:22:58    


 
mon pb, c'est que j'ai utilisé la mise en page par tableaux, ce qui n'est pas bien en xhtml.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed