Tableau en CSS

Bonjour les amis,

Je veux reproduire une mise en page de <table> en CSS afin de pouvoir y glisser des formulaires
Mon pseudo-tableau comporte :
- 1 ligne de titre
- 1 premiere ligne contenant un formulaire
- X lignes regroupés dans un formulaire

J'ai donc pondu quelque chose que j'ai resumé ainsi :

<style type="text/css">
span.doctype_nom {
width:200px;
display:block;
float: left;
}

span.doctype_label {
width:200px;
display:block;
float: left;
}

span.doctype_id {
display:block;
float: left;
width:10px;
}
</style>

<div class="tableau">

<div class="entete">
	<p>
	<span class="doctype_nom">Nom</span>
	<span class="doctype_label">Acronyme</span>
	</p>
</div>

<div class="corps">
<form action="" method="post">
	<p>
		<span class="doctype_nom">a</span>
		<span class="doctype_label">b</span>
		<span><input type="submit"></span>
	</p>
</form>
<form action="" method="post">
	<p>
		<span class="doctype_nom">a</span>
		<span class="doctype_label">b</span>
		<span><img src="toto.jpg"></span>
	</p>
	<p>
		<span class="doctype_nom">a</span>
		<span class="doctype_label">b</span>
		<span><img src="toto.jpg"></span>
	</p>
        <p><input type="submit"></p>
</form>
</div>

</div>
</style>

Mon problème est que la premiere ligne se met à la suite de l'en-tête.

Une solution que j'ai trouvée est d'ajouter un span avec un blanc (un span vide ne fonctionne).

<div class="entete">
	<p>
	<span class="doctype_nom">Nom</span>
	<span class="doctype_label">Acronyme</span>
	<span>&nbsp;</span>
	</p>
</div>

Je comprends que l'ajout de ce span casse le float mais je ne suis pas satisfait de ce bricolage.

Auriez-vu une idée ?
Vu le temps que j'ai trifouiller, je suis même prêt a revoir encore une fois entierement mon tout.

Merci.
Modifié par sabotage (03 Apr 2009 - 16:33)

<table> et CSS ne sont pas alternatives l'une à l'autre : <table> est une balise Html et CSS un langage de mise en forme.

Si ce que tu veux faire est un tableau, fais un tableau.

Si ce que tu veux faire, c'est positionner tes éléments dans la page en évitant de détourner certaines balises de leur usage propre (les tableau) alors arrête de penser en tableau.

Sinon pour en revenir à ton problème. Tu ne donne pas les styles associés à tableau, entete et corps ; je ne sais donc pas les deviner. Est-ce que entete à une largeur de 400px ? Si oui, c'est embettant, sinon, il faudrait la lui donner. Sinon tu peux aussi préciser clear:both; à corps.

Merci pour votre aide.

a écrit :
Si ce que tu veux faire est un tableau, fais un tableau.

Malheureusement on n'a pas le droit de mettre des formulaires dans un tableau.

Pour les styles de .tableau .corps .entete, il n'y en a pas actuellement.

ma page reprend le gabarit 7
http://www.alsacreations.com/static/gabarits/modele07.html
mes formulaires sont placés dans le contenu, en mettant clear: both a .corps, celui-ci se decale verticalement sous le menu, tandis que en-tête est sagement à la bonne hauteur.

a écrit :
<table> et CSS ne sont pas alternatives l'une à l'autre : <table> est une balise Html et CSS un langage de mise en forme.

J'essaie justement de faire une présentation HTML semantiquement correcte, avez vous quelque chose à proposer ?

sabotage a écrit :
Malheureusement on n'a pas le droit de mettre des formulaires dans un tableau.

hum... effectivement, en général on met le tableau dans le formulaire.
Par contre, tu utilise de multiples formulaires avec uniquement un bouton de validation. Qu'est-ce que tu cherche à faire ?

Ne serait-il pas plus judicieux d'avoir des boutons radio (à cocher avec la posibilité de ne cocher qu'un seul membre d'un set à la fois) ? Là tu pourrais mettre ton tableau entier dans le formulaire, puisqu'il n'y en aurait plus qu'un.

Je m'excuse, j'ai corrigé mon code exemple, il n'etait effectivement pas cohérent.

Pour reprendre ce que je veux faire :

- premiere ligne : les noms de champs
- deuxieme ligne : formulaire pour ajouter un nouvel élement (avec donc un bouton submit pour la ligne)
- autres lignes : formulaire pour mettre a jour tous les autres champs d'un coup (avec donc un seul bouton submit pour toutes ces lignes).

Le jeu est donc que les élements de l'en-tête, du premier formulaire et du deuxieme formulaire s'alignent en colonne.

La "connerie" c'est que l'alignement se fait déjà naturellement (puisque les champs input ont la meme taille sur une colonne) sauf pour les en-tête.

Sinon comme je l'ai dis, je suis ouvert a toute méthode.
Ce qui est rageant c'est qu'en utilisant un tableau, on obtient le résultat tout simplement mais ce n'est pas correct.