Formuaire et css

Bonjour à tous

J'essaye de positionner des boutons radio les uns en dessous des autres à droite d'un titre principal.
Voiçi le résultat que je voudrais :

P
SPAN : ..... - LABEL OUI (btn radio)
............... - LABEL NON (btn radio)
/P

Ca fonctionne sous ie6 mais pas sous IE7 et FF.
Je ne comprend pas ... J'ai l'impression que mon code est juste et logique pourtant :

CSS

<style type="text/css">
p {
	display:block;
	clear:both;
	margin:12px 0;
	overflow:hidden;
}

span, label{
	display:block;
	float:left;
	text-align:right;
	margin:4px 5px 0 0;
	width:100px;
}

input, textarea, select {
	display:block;
}

ul.checkbox {
	list-style-type:none;
	float:left;
	width:450px;
	display:block;
}

ul.checkbox li {
	margin:0;
	vertical-align:middle;
	height:20px;
}

ul.checkbox li input {
	vertical-align:middle;
	height:20px;
}
</style>

HTML

<form>
<p>
     <span>Label :</span>
	
     <ul class="checkbox">
          <li>
               <label for="nom1">Oui</label>
               <input type="radio" name="radio" id="nom1" value="1"  />
          </li>
          <li>
               <label for="nom2">Non</label>
               <input type="radio" name="radio" id="nom2" value="0" />
          </li>
	</ul>
</p>
</form>

Quelqu'un peut-il m'aider à comprendre ?
Modifié par sharky (18 Mar 2009 - 16:51)

salut,

css

<style type="text/css">

span, label { display: block;
              float: left;
	      margin: 0;
	    }

ul.checkbox { float: left;
	      list-style-type: none;
	      margin: 0 0 0 50px; /* à modifier */
	    }

ul.checkbox li { display: block; }
                 


</style>

le html

<form>

     <span>Label :</span>
	
     <ul class="checkbox">
          <li>
               <label for="nom1">Oui</label>
               <input type="radio" name="radio" id="nom1" value="1"  />
          </li>
          <li>
               <label for="nom2">Non</label>
               <input type="radio" name="radio" id="nom2" value="0" />
          </li>
	</ul>

</form>

une première piste.
Modifié par flattazor (18 Mar 2009 - 20:35)

Bonsoir,

Juste en passant: on ne peut pas mettre un UL (élément de type bloc) dans un paragraphe (élément de type bloc qui n'accepte que des éléments de type en-ligne comme enfants).

Le maitre lieux (RG himself) a écrit :

Pour rappel, notez que vous pouvez aisément passer d'un rendu "bloc" à un rendu "en-ligne" (et vice-versa) grâce à la propriété CSS "display", mais vous ne modifierez pas la structure HTML (%block, %inline) inhérente de la balise.

C'était ici, et c'était beau

@sharky&flattazor span reste donc un élément en-ligne et n'a pas sa place directement dans une balise form (qui n'accepte que des éléments de type block)

@sharky, le paragraphe de type block devrait pouvoir accepter d'autres éléments en-ligne et/ou block mais(traitreusement) il ne peut être parent que d'éléments en-ligne, c'est pour cette raison que tu ne peux pas avoir de liste non ordonnée (ul) dans un paragraphe

Un titre de niveau trouverait peut-être sa place ici, non ?

Cdt,
Sylvain

Chui trop lent
Modifié par 6l20 (18 Mar 2009 - 20:50)

Que veux-tu dire par "Un titre de niveau" ?
Un <h> ?
Modifié par sharky (19 Mar 2009 - 11:02)

sharky a écrit :
Que veux-tu dire par "Un titre de niveau" ?
Un <h> ?

Oui, selon la hierarchie déjà présente sur ta page, j'imagine un h2 ou un h3, ce qui me semble avoir du sens dans ton exemple, sinon un élément de type bloc
(fieldset + legend, p, p + span, div,...) mais autant rester "simple", non ?

Cdt,
Sylvain
Modifié par 6l20 (19 Mar 2009 - 11:18)

Je ne savais pas qu'un paragraphe ne pouvait traiter que des éléments en ligne ...
Je ne trouve pas ca juste ... Je vais me plaindre au W3C smile

Et je ne savais pas non plus qu'une balise form ne pouvait pas être parent directement d'élément en ligne ...
En sachant que les principales balises de formulaire sont des labels et des inputs (en ligne) ...

Une solution pour palier à ce problème :

<form>

  <div>

    <div>

      <span></span>

      <ul>

        <li><label></label><input /></li>

        <li><label></label><input /></li>

      </ul>

    </div>

  </div>

</form>

Juste ?

(Et on n'arrête pas de nous dire qu'il ne faut pas mettre des div partout ... )
Modifié par sharky (19 Mar 2009 - 11:03)

Mouih...
Il y a au moins une division de trop...
Eventuellement :

<form action="#">
	<div>
		<span>...</span>
		<ul>
			<li><label></label><input /></li>
			<li><label></label><input /></li>
		</ul>
	</div>
</form>

...voire deux...

<form action="#">
	<h3>...</h3>
	<ul>
		<li><label></label><input /></li>
		<li><label></label><input /></li>
	</ul>
</form>

Source d'inspiration possible (mais non exaustive, le web est ton ami )

a écrit :

(Et on n'arrête pas de nous dire qu'il ne faut pas mettre des div partout ... )

Et c'est, en règle générale, plutôt justifié

Cdt,
Sylvain

Oui, je placais les "div" en admettant que ce formulaire pourrait s'étendre.

Le 1er div pour pouvoir placer aussi bien des balises en bloc que en ligne.
Je suis assez septique sur le fait de placer des balises "h" pour un titres à un ensemble de bouton radio (ou autres ...).

Le second div sert à isoler la "ligne" j'ai envie de dire.
Dans le lien de ton exemple, on voit qu'il utilise la balise "p".
Le problème, c'est qu'il ne pourra pas placer de liste (ul) pour structurer des checkbox ou radio puisqu'une balise "p" ne peut pas contenir d'autres blocs ...

Pas évident de construire des formulaires propres en css

Qu'en pensez-vous ?

Hello,

Le titre de niveau ne me gène pas plus que cela, mais je peux me tromper

En toute honnêteté, si je devais me trouver dans ton cas de figure, j'utiliserai probablement les éléments fieldset et legend qui sont, a priori, prévu à cet effet :

a écrit :

L'élément FIELDSET permet aux auteurs de regrouper thématiquement les commandes et les labels apparentés. Le regroupement des commandes rend leur compréhension plus aisée aux utilisateurs, tout en facilitant la navigation par tabulation pour les agents utilisateurs visuels et la navigation vocale pour les agents utilisateurs vocaux. La bonne utilisation de cet élément rend les documents plus accessibles.
L'élément LEGEND permet aux auteurs d'assigner une légende à un élément FIELDSET. La légende renforce l'accessibilité quand l'élément FIELDSET est restituée de manière non-visuelle.

A lire...
Savoir rester simple et pragmatique permet parfois d'agir au mieux

Pourquoi te focaliser sur une liste non ordonnée ? Comme tu as pu le voir sur l'exemple de Florent V., il y a bien des moyens de mettre en forme les formulaires, tout en tenant compte des subtilités de certains éléments qui restent difficile à styler via css, et en restant "conforme" et accessible.

Quoiqu'il en soit, tu fais évidemment comme tu le souhaites

Cdt,
Sylvain

Oui, tu as sans doute raison ...

Je trouve qu'une liste est mieux adapté pour ce genre de chose mais bon ...
Il n'y pas qu'une solution.

Quand j'aurai un peu plus de temps, je me pencherai un peu plus sérieusement sur le sujet et viendrai te relancer un peu

Bon WE