[Résolu] Alignement Validation W3C deux input dans deux form distinct

Bonjour,
J'ai un petit prob en XHTML strict:

Bout de code de mon code php pour deux formulaires:

<form action="index.php" method="post" class="inline">
    						' . hiddenrequest('cancel') . '
        				<input type="submit" name="goback" value="' . _NO . '" />
        			</form>
        			<form action="index.php" method="post" class="inline">
        				' . hiddenrequest('setup') . '
        				<input type="submit" value="' . _YES . '" />
        			</form>'

la fonction hiddenrequest renvoi d'autre inputs en hidden du style:

<input type=\"hidden\".......

Mon soucis vient de l'affichage des deux boutons de mon formulaire car je veux que ceux-ci soient alignés horizontalement sur un même ligne.

j'ai donc créé un class"inline" cf code ci-dessus pour faire un display: inline; pour les deux form (type block à l'origine) plus du padding dans le css histoire de bien gérer l'affichage des boutons.

Jusque là pas de soucis, par contre étant en xhtml strict, j'ai des erreurs w3c
ex:

a écrit :
document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.

… <input type="hidden" name="setupoption" value="2" />

avec les input de la fonction hiddenrequest qui doivent être dans un type block= pas de soucis, je mets les inputs entre balise blocks <p> par ex.

Ainsi mon site est valid strict mais mes deux boutons submit des formulaires sont les uns en dessous des autres (normal car p type block pour les input de ma fonction hiddenrequest) et ma classe .inline est ignorée.


Ainsi, si vous avez une idée pour aligner horizontalement deux voir trois boutons input submit dans deux voir trois <form ... en tenant compte de la fonction hiddenrequest (input non visibles), le tout sémantiquement corrrect et valid xhtml 1.0 strict, je suis preneur

j'ai essayé tout ce que j'avais en tête mais là je suis out

merci pour d'eventuelles début de réponse
Modifié par Diaboloz (25 Nov 2007 - 15:21)

J'ai trouvé tout seul suite à mon post en réfléchissant:

<form action="index.php" method="post" class="inline">
    						<div style="display: inline;">
    							' . hiddenrequest('cancel') . '
        					<input type="submit" name="goback" value="' . _NO . '" />
        				</div>
        			</form>
        			<form action="index.php" method="post" class="inline">
        				<div style="display: inline;">
        					' . hiddenrequest('setup') . '
        					<input type="submit" value="' . _YES . '" />
        				</div>
        			</form>';

Mais ça fait pas très propre cette histoire

Alors pour faire un peu plus propre:

<form class="inline">
	<p>
		<input type="submit" />
	</p>
</form>
<form class="inline">
        <p>
        	<input type="submit" />
	</p>
</form>

Et côté CSS:

form.inline p {
	display: inline;
	margin: 0;
}

Bien sûr, ici j'ai réduit le code HTML à sa plus simple expression. Il s'agit juste de démontrer qu'on peut facilement passer par des styles externes qui vont bien.

Merci pour ton intérêt

Par contre je viens d'essayer et les boutons sont toujours les uns en dessous des autres et non pas alignés horizontalement

je comprends pas tout là:

form: type block
p: idem
input: inline

Donc l'ensemble devrait être en ligne l'ensemble avec le css et ce n'est pas le cas..

Donc sur le css j'ai fait ça qui fonctionne:

.inline {

	display: inline;

	margin: 10px;

}

form p {

	display: inline;

	margin: 10px;

}

En fait j'ai plutot fait ça:

<form class="inline">
	<p class="inline">
		<input type="submit" />
	</p>
</form>
<form class="inline">
    <p class="inline">
     <input type="submit" />
	  </p>
</form>

et css:

.inline {
	display: inline;
	margin: 0;
}

ça me permet d'avoir plus de "contrôle" notamment pour l'ajout d'un p classique dans le form

Diaboloz a écrit :
Par contre je viens d'essayer et les boutons sont toujours les uns en dessous des autres et non pas alignés horizontalement

Soit j'ai oublié quelque chose, soit tu as loupé un truc en mettant en place le code CSS.
Page en ligne, si elle existe?

Diaboloz a écrit :
ça me permet d'avoir plus de "contrôle" notamment pour l'ajout d'un p classique dans le form

C'était l'enjeu du sélecteur CSS suivant:

form.inline p {}

On part du principe que si on veut que le formulaire soit en display: inline, on souhaite aussi que le ou les éléments de type bloc qu'il contient soient en display: inline.

Slt,

a écrit :
On part du principe que si on veut que le formulaire soit en display: inline, on souhaite aussi que le ou les éléments de type bloc qu'il contient soient en display: inline.

Effectivement c'est une précision que j'ai oublié de préciser mais comme j'ai aussi besoin de type block dans le form je reste finalement sur le p class

Merci encore pour ce passage très instructif et cette réactivité

Sinon j'ai refait des tests sur ton premier code css et html et j'ai tjrs pas les boutons en align horizontal.

Bon faut que je lache un peu le pc car ça me pique les yeux c'est peut être ça
Je considère le post comme résolu
Modifié par Diaboloz (25 Nov 2007 - 18:33)

Diaboloz a écrit :
mais comme j'ai aussi besoin de type block dans le form je reste finalement sur le p class

Oui, mais tout ce que je dis c'est que tu n'as pas besoin de donner une classe à ton paragraphe. Tu peux utiliser le sélecteur de descendants.

Le code que j'ai donné plus haut marche parfaitement. Le voici sous la forme d'une page HTML complète:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<style type="text/css">
	form {
		display: inline;
	}
	form.inline p {
		display: inline;
		margin: 0;
	}
	</style>
</head>
<body>
	<form class="inline">
		<p>
			<input type="submit" />
		</p>
	</form>
	<form class="inline">
		<p>
			<input type="submit" />
		</p>
	</form>
</body>
</html>

Diaboloz a écrit :
Sinon j'ai refait des tests sur ton premier code css et html et j'ai tjrs pas les boutons en align horizontal.

Tu as dû faire une erreur quelque part. Je te conseille d'examiner l'exemple complet que je donne et de chercher dans ton test où était l'erreur, ça t'aidera sans doute à progresser.
Modifié par Florent V. (25 Nov 2007 - 18:53)

a écrit :
Tu as dû faire une erreur quelque part. Je te conseille d'examiner l'exemple complet que je donne et de chercher dans ton test où était l'erreur,

Oui effectivement j'avais oublié

form {
		display: inline;
	}

ds le css
je refais mes essais sans la class sur p