Remplacement d'un tableau par positionnement css

Bonjour,

Je développe un petit logiciel en php est j'aimerai me passer totalement des tableaux pour la mise en forme. J'ai réussi à tous les supprimer sauf un qui me résiste. Il ne me semble pourtant pas si compliqué mais je n'arrive pas à avoir le même résultat avec les positionnements css.

J'ai écumé quelques ressources du web :
http://www.ultra-fluide.com/ressources/xhtml/block-inline.xhtml
http://forum.alsacreations.com/faq/faq-49-Comment-mettre-en-forme-des-formulaires-sans-tableaux-en-CSS-.html
http://forum.alsacreations.com/faq/faq-92-Aligner-des-elements-sans-tableaux.html

Je suis justement dans le cas d'un formulaire où je souhaiterais pouvoir aligner les champs du formulaire, tout en pouvant ajouter un libellé devant (à gauche), et éventuellement une image derrière (à droite).

Pour que ce soit plus clair, voici comment ca se présente actuellement :

http://ploc.free.fr/phpmyaddressbook/demo/index.php?searchField=name&searchOperator=starts_with&searchValue=%25&action=view&id=5&exportFormat=

Je souhaite simplement que les champs du formulaire (les input) soient alignés, que les libellés soient à gauche des inputs, mais le plus à droite possible (collés aux inputs) (ou encore centrés, comme actuellement) et enfin que les images (cliquables) soient juste à droite des inputs.

Voilà mon problème, j'ai testé des tas de solutions, mais j'ai pas réussi à trouver la solution (j'ai pas réussi avec les float).

Merci de votre aide !
Modifié par ploc (03 Dec 2008 - 17:17)

Bonjour,

La solution actuelle avec un tableau me semble correcte. Je remplacerais juste les TH (première cellule de chaque ligne) par des TD plus neutres. L'utilisation de labels avec for/id suffit largement à établir la relation entre les intitulés et les champs de saisie, rajouter en prime des table headers risque d'être plus perturbant que vraiment utile.

Mais un peu de lecture tout de même:
http://web.covertprestige.info/test/27-formulaires-sans-tableaux.html

Merci pour cette réponse, je pensais pourtant que l'utilisation de tableau pour présenter autre chose que des données tabulées était déconseillée. Dans mon cas, j'utilise bien un tableau pour aligner comme je le souhaite des élements d'un formulaire. Mais bon...

J'avais bien tenté de tirer parti du lien que tu m'indiques (le lien vers webcoverprestige) mais il ne tient pas compte du fait que j'ai des images après le champs input, et je n'arrive pas du tout à placer correctement les images à la suite de ce champ. Ca fout tout en l'air et les images vont à la ligne.

Merci bien de ta réponse, j'ai bien réussi à modifier la mise en page pour obtenir ce que je voulais avec un tableau. Je vais maintenant m'atteler à essayer de faire la même chose sans tableau, merci de vos idées, si vous en avez !

Bonjour,

Pas choquant d'utiliser un tableau de mise en forme avec les formulaires ... du moins c'est pas le plus important

J'ai du mal avec les textes alternatifs de ton bouton + lien finaux: modifier signifie-t'il modifier la saisie que tu viens de faire ou bien la valider, enregistrer, ...
Valider les modifications, c'est pas modifier
Et supprimer ... c'est effacer les données (le contenu des champs de saisie, les vider) ou "Supprimer la fiche" ?

EDIT: label, input et éventuellement span en display: block; et flottants à gauche avec largeur fixée, le paragraphe qui les accueille ayant la largeur totale des 3.
clear: both; sur les paragraphes pour éviter qu'un label ne reste sur la ligne du dessus.
Et ensuite un maximum de vertical-align pour les bons navigateurs puis en commentaires conditionnels IE7 et IE6; cet alignement vertical étant très facilité par les tableaux
Modifié par Felipe (04 Dec 2008 - 11:25)

Dans ton optique, modifier ne correspond à rien. Une modification se fait en 2 phases, 1/ demander une modification et 2/ valider la modification. Dans mon cas, les champs sont déjà éditables, il est donc ici sous-entendu que modifier correspond à la seconde phase mentionnée ci-dessus.

Quant à supprimer, cela correspond bien à une suppression. En effet, dans ce cas-là, effacer les champs n'aurait pas de sens.

Enfin, j'ai pas tout compris à la dernière partie de ton message :

a écrit :
EDIT: label, input et éventuellement span en display: block; et flottants à gauche avec largeur fixée, le paragraphe qui les accueille ayant la largeur totale des 3.
clear: both; sur les paragraphes pour éviter qu'un label ne reste sur la ligne du dessus.
Et ensuite un maximum de vertical-align pour les bons navigateurs puis en commentaires conditionnels IE7 et IE6; cet alignement vertical étant très facilité par les tableaux

Si j'ai bien compris, tu conseilles d'ajouter de hack pour IE ? (chose que je ne souhaite a priori pas intégrer, ce n'est pas à moi de compenser les bugs de microsoft)

Merci en tout cas de tes remarques et de tes idées. Désolé si j'ai parfois un peu de mal à comprendre le sens des informations techniques que tu me donnes...
Modifié par ploc (04 Dec 2008 - 11:51)