Coucou,
 
Je sais que d'un point de vu sémantique, mettre un formulaire dans un tableau c'est "immonde" mais alors pourquoi beaucoup le font ?
 
J'aimerai créer, heu, voici à peu près ce que j'aimerai faire :
 

 
Bon c'est pas tout à fait ça, mais disons que ça y ressemble. Le souci c'est que je n'arrive pas à l'adapter à toutes les résolutions.
 
Alors je repars de zéro et je viens vous demander un coup de main (sans me donner la réponse, essayer de m'amener sur le chemin histoire de ne pas être assisté)

Bonjour,

styler un formulaire complexe avec des tableaux, pourquoi pas ... Toujours mieux qu'une avalanche de CSS foireux et de div vides servant de support à des règles CSS.

Par contre pour un formulaire tenant sur une deux lignes, sérieux quoi

• Centrage horizontal: voir astuces Alsacreations (margin: 0 auto; )
• input et submit dans un div flottant à gauche, 3 liens dans un div flottant à droite ou à gauche. Il leur faut une largeur en px ou %

le div qui les englobe sera celui centré horizontalement.

• Ta zone de texte n'a pas d'étiquette (label avec le système for/id pour les relier) (et pas de fieldset pour le tout) donc on sait pas ce que fait ta page ou ton formulaire
• Éventuellement, si ton bouton de soumission a un texte autre que 'OK', on arrivera peut-être à le deviner avec effort

Ah oui, c'est une explications assez évasive on va dire, surtout que je suis encore qu'un débutant ^^
 
Le mot "complexe" m'a fait sursauter, en fait, tant que c'est adapté à toutes les résolutions, c'est le principal

Le mieux c'est que tu postes du code avant de venir demander la solution.
Et pour trouver comment faire, lire des articles et bosser (pas de coppier/coller quoi)
 
http://www.d.umn.edu/itss/support/ [...] html#forms
Si tu ne dois lire qu'un seul article de cette liste, celui-ci est génial
http://www.sitepoint.com/article/f [...] esign-css/
Plus de div non sémantique, mais des li

Ok David, je vais lire tout ça. Mon problème c'est que théoriquement, je comprends très bien comment tout ça fonctionne, mais j'ai du mal à passer à la pratique.

arf, c'est de l'anglais... Je sais plus trop où donner de la tête, on me dit que les tableaux c'est à éviter, mieux vaut les div, ensuite les div sont à éviter, mieux vaut les li... pfiout

Contrairement à ce que les gens pensent, c'est difficile de faire du bon html, je vois dans ce forum trop de dev back-end qui sont incapable de faire un formulaire un peu sémantique.
Donc certains emploient des tables car ils sont mauvais, certainement très bon en php ou .net, mais pas en html/css
 
Ici, je préfère les li car il faut de tout façon un conteneur pour les label et les input si ils sont flottants.
Ce élément de liste à du sens donc le html n'est pas en trop pour rien;
1° nom
2° prénom
 
Ensuite, l'anglais est requis pour faire du web. Ce n'est pas non plus de la grande littérature et tous les articles ne sont pas écrit par des anglophones, c'est abordable.
 
 
 

Ok. En fait, c'est pas du tout un formulaire que je veux faire, juste une zone de texte avec deux boutons qui renverra à des pages. Mais comme les balises appartiennent à celles pour faire un formulaire, il est préférable alors que je le mette entre des balises Li alors ? Le truc c'est qu'il faut simplement que la zone de texte + les 2 boutons soient centré. Pour ce qui est du input=radio, faut juste qu'il soit un peu sur la gauche, donc le tout entre les balises Li ?

 
+1
 
Effectivement, les tableaux sont à éviter au maximum et les li plutôt utiles sur ce coup-là.
 
J'ajouterais également pour tous ceux qui croient encore que les tables sont mieux que tout pour faire de la mise en page web qu'il faut penser à l'avenir du Web, aux normes d'accessibilités, etc.

Ok, bon j'travail sur le p'tit bout de code et j'vous dit quoi

div ou td, ça change pas grand chose à l'accessibilité si le tableau est linéarisable.
Tu peux faire de la merde avec des div et des span ou faire un site accessible avec des td (et des titres, liens explicites, etc)

De manière générale je travaille sur les formulaires avec des <li> étant donné que les formulaires sont bien souvent des listes de label et d'input les uns à la suite des autres, c'est une solution sémantique et qui permet de bien mettre en page son formulaire et c'est une solution cross-browser.
 
Ca me semble être la solution la plus pertinente à l'heure actuelle (j'utilisais avant comme beaucoup des <p> mais ça n'a pas de sens sémantiquement)

Ouais, en gros, les label équivaut au <p> mais sont à utiliser uniquement dans des formulaires

les labels ont surtout l'interêt qu'en cliquant dessus la case à cocher se coche ou se décoche, tu n'es plus obligé de pointer sur la case, l'ensemble case+label est cliquable.

Ah ok, oui en effet, c'est bien plus pratique, puis sémantique ^^

J'en peux plus, j'expose mon code :
 

 
 
Tout va super sur une résolution de 1366x768, mais alors sur une résolution de 1024x768 c'est la catastrophe ! Les liens en haut sont complètement serrés, puis les liens sur le coté droit de la zone de texte sont...sur la zone de texte !
 
Il me semble que j'ai respecté la sémantique. Quelqu'un a une solution ?

Voir en image l'effet indésiré

Faut pas que tu fasses comme ça, les li dans les formulaires c'est bien quand tu as des lignes de formulaire un peu standard, genre formulaire de contact
 

 
Et ensuite tu paramètres en CSS. Tu définies une largeur à ton conteneur_centre, et tu le centres au milieu de la page, ensuite tu réparties la largeur sur gauche/droite et eux tu les mets en float: left.
 
Ensuite tu stylises la liste comme tu veux.

J'ai toujours le même problème

up

Tu ne développes pas où est ton souci.
Je t'ai donné le code HTML, après il restait à faire le CSS que j'ai rapidement expliqué...

Oui, mais le problème ne vient pas de input text ou input submit, mais des 3 liens juste sur la droite de input text. Ce sont uniquement les liens qui viennent chevaucher le input text quand je diminue la fenêtre et j'aimerai justement éviter cela.

Fais voir ton code

 
 
 
pour l'instant ça ne ressemble pas vraiment à ce que je voudrais. les deux boutons sont à coté de input text or il faut qu'ils soient juste en dessous. Puis malgré mon text-align:center, rien est centré

Avec les changements que je viens d'éditer dans le code ci-dessus, l'emplacement est exacte, mais j'ai toujours le même problème de chevauchement des 3 liens quand on rétréci la fenêtre

Si tu faisais ce qu'on te dit ce serait mieux...
 
"Tu définies une largeur à ton conteneur_centre, et tu le centres au milieu de la page, ensuite tu réparties la largeur sur gauche/droite et eux tu les mets en float: left. "
 
De plus, tu as pas vérifié le code que je t'ai filé, il manquait un guillemet fermant dans le premier submit
 
Il faut que tu sois plus rigoureux.

C'est ce que j'ai fait la première fois avec un width:50% et un text-align:center mais c'est pire. Le guillemet manquant a bien été détecté, j'ai juste pris la peine de faire un copier/coller de ton code.
 
C'est vrai que j'manque de rigueur, ça fait 3 semaines que je cherche à faire ce petit truc insignifiant, ça commence à m'irriter sérieusement

Que veux-tu que je te dise, si tu veux pas prendre la peine de faire ce que je te conseille, c'est sur que ton problème peut durer des mois...
 
Ton problème peut se régler en 5 mins si tu prends le temps d'écouter c qu'on te dit.

J'ai bien fait ce que tu m'as conseillé, mais c'est pas du tout l'effet désiré :

Tu mets la partie de gauche en width: 99% et la partie de droite en width: 99%, comment veux-tu qu'ils soient côte à côte si chaque élément prend 100% de la largeur...
 
Je me requote pour la 2ième fois :
 
"Tu définies une largeur à ton conteneur_centre, et tu le centres au milieu de la page, ensuite tu réparties la largeur sur gauche/droite"
 
Si tu ne lis pas ce que je te dis, ça peut durer des semaines...

 
Je te requote aussi ce qu'avait dit un autre membre pour t'aider. Tu as tout pour finaliser ce que tu veux faire, il te suffit juste d'être rigoureux et de lire ce qu'on t'écrit.

Là je pense avoir fait ce qu'il fallait. Input et Submit ne sont pas bien centré, puis les liens sont bien trop loin de input text. J'ai malgré tout essayé de voir si en rétrécissant la fenêtre, les liens resteraient au même endroit, ben non. Je considère pourtant avoir suivi les conseils, non ?

Très bon lien. Par contre pour fixer le souci du background-color déborde pour le fieldset sous IE, perso je m'emmerde pas, je fais tout de la même couleur (en l'occurrence blanc) et on n'en parle plus.
 
Et au lieu d'utiliser une liste, j'utilise des div, mais ça c'est parce que Rails enveloppe les fields qui ont des erreurs avec un div, et ça ferait péter la validation autrement.

pr0faz >
 
Rajoute un "position: relative;" à ton #conteneur_centre déjà
 
Puis rajoute en premier dans ton CSS :
 

 
Le * permet de s'appliquer à tous les éléments HTML, et ça permet d'éviter les attributs par défaut de chaque navigateur.
 
Tu comprendras donc que tu peux virer ça :
 

 
Une fois que tu as fait ça, refais nous un screenshot et remontre nous ton code.

 
 

 
Hum, c'est encore pire  

bah non c'est pas pire, c'est exactement le résultat que tu veux, sauf que certains attributs sont à paramétrer. Vire tes pourcentages inutiles pour les widths, passe tout en pixels
 
et vire le "border: 0;" dans la première ligne du css
 
Puis refais un bilan

Alekusu, le resultat désiré ressemble plutôt à ça :
 
 

 

Je sais bien, et c'est exactement ce que tu as, sauf que les borders n'apparaissent pas et que les widths sont à revoir, comme je l'ai précisé plus haut.
 
Bref, fais ce que je t'ai dit, et reviens montrer

 
 
 

 

 
On commence à se rapprocher, juste un petit souci, sur la 2ème photos, quand je rétréci la fenêtre, il y a une scrollbarre en bas, j'en déduis que c'est le width:790px du conteneur-centre-droite qui fait ça, y a une solution pour l'enlever ?

moi je te propose ca:

je peux pas faire mieux.

bah déjà la question c'est pourquoi tu l'as mis ? O_o
tu dis que ton conteneur général fait 410, que ton sous conteneur gauche fait 380, le sous conteneur droit devrait faire 30, pourquoi tu as mis 790 OOOO____ooo Vire le et mets 30 (même si dans un second temps, il faudra que tu mettes des tailles plus réalistes)
 
Et ça vient d'où ce margin-top:-43px; ? Vire le aussi
 
Et reviens ensuite.