Les limites du CSS

Bonjour à tous,

je suis en face d'un dilemme! J'ai une petite application web à faire dans le cadre de mon stage et je ne sais pas si je vais utiliser le CSS ou un positionnement par tableau.

Je vous explique le souci. J'ai des pages avec environ 30 champs de texte plus ou moins grands en longueur, des textarea, pleins de boutons et tout ce petit monde se positionne sur une page web avec une mise en page assez complexe : lignes avec 3,4,5 ... composants de différents types, des textarea située à coté de champs texte, etc... En plus mes textearea ont toutes des tailles différentes!

Voila donc ma question est ce possible de faire cette partie de l'application web avec un CSS ou est ce plus judicieux de le faire avec la méthode des tableaux.

Je vous remercie par avance.
Modifié par CrazySeb (27 Apr 2007 - 15:31)

CrazySeb a écrit :
est ce possible de faire cette partie de l'application web avec un CSS ou est ce plus judicieux de le faire avec un CSS.

Quel beau lapsus révélateur!

CrazySeb a écrit :
Voila donc ma question est ce possible de faire cette partie de l'application web avec un CSS ou est ce plus judicieux de le faire avec un CSS.

A choix entre CSS et CSS je choisis effectivement le CSS ! Cela dit, rien ne t'empèche de t'aider d'un tableau (simple et logique) au milieu de ta construction en div. Le tout styler bien sûr dans une feuille de style.

Pour résumer, privilégier le CSS pour tout ce qu'il sait faire. Et si une mise en page peut poser problème, on s'aide d'un petit tableau.

Est-ce qu'on pourrait voir une maquette de ce que tu veux faire pour confirmer?
Modifié par <nicolas> (27 Apr 2007 - 15:31)

Alors ma maquette... c'est de l'art!

Je vous remercie de toutes vos réponses... Super rapide

ALORS DE TOUT COEUR MERCIIII!!

Plutôt en div (ou mieux, en fieldset+legend) et positionnement CSS, sauf pour les différents groupes de champs et libellés sur deux colonnes : tableau à deux colonnes.

À vue de nez, d'après ton image, ça devrait faire 5 tableaux.

Par contre, il me manque peut-être quelques données du problème mais je pense que tu devrais simplifier et éclaircir ton formulaire. Es-tu absolument obligé de tout faire tenir sur une page ? Surtout que tu n'as aucune garantie sur la résolution d'écran finale de l'utilisateur, si ? Donc il y aura peut-être du défilement pour certains utilisateurs, et à l'inverse de la place perdue pour d'autres.

Je ferais un formulaire simple, avec les différentes parties thématiques du formulaire (chacune dans un fieldset, avec un legend pour expliciter le rôle de cette partie de formulaire), les unes en dessous des autres. Au pire, en les mettant sur deux colonnes.

Absolument pas.. je suis complètement libre de redesigner la page mais je suis pas désigner, j'ai mis énormément de temps pour arriver à ce résultat!

Je vois ce que tu veux dire en faite :
- div j'intègre dedans des fieldSet quitte à faire deux colonnes si je peux les aligner horizontalement.
- Une autre page avec d'autres informations?

Ai je bien compris?

Merci

Heu... je ne sais pas trop ce que tu as compris au juste, donc je rappelle juste ceci :

Pour qu'un formulaire long soit compréhensible, quel que soit le public, mieux vaut le subdiviser en plusieurs parties (en fonction de thèmes, classements, etc.). C'est ce que tu sembles avoir fait, globalement, avec ta maquette.

Pour des raisons d'accessibilité, mieux vaut utiliser des éléments fieldset accompagnés d'un titre dans l'élément legend correspondant, pour réaliser cette subdivision. La structure globale ressemblera à ça :

<form action="..." method="...">

<fieldset>
	<legend>Civilité</legend>
	<p><label for="civi-nom">Nom :</label> <input type="text" name="civi-nom" id="civi-nom" /></p>
	<p><label for="civi-prenom">Prénom :</label> <input type="text" name="civi-prenom" id="civi-prenom" /></p>
	<p><label for="civi-date">Date de naissance :</label> <input type="text" name="civi-date" id="civi-date" /></p>
</fieldset>

<fieldset>
	<legend>Adresse</legend>
	<p><label for="adr-ligne1">Ligne 1 :</label> <input type="text" name="adr-ligne1" id="adr-ligne1" /></p>
	<p><label for="adr-ligne2">Ligne 2 (facultatif) :</label> <input type="text" name="adr-ligne2" id="adr-ligne2" /></p>
	<p><label for="adr-ligne2">Code postal :</label> <input type="text" name="adr-code" id="adr-code" /></p>
	<!-- etc. -->
</fieldset>

<!-- etc. -->

</form>

Dans cet exemple j'ai utilisé des labels explicites (avec attribut for), parce que c'est mieux, et des paragraphes pour chaque couple label+input. Pour te faciliter la vie, tu pourras utiliser un tableau à deux colonnes pour chaque série de couples label+input (ou label+option, ou label+textarea).
Modifié par Florent V. (28 Apr 2007 - 16:18)