28234 sujets

CSS et mise en forme, CSS3

Alignement checkbox et largeur de colonne

Dans le cas de ce formulaire, comme puis je définir mes largeurs de colonnes indépendamment et aligner mes checkbox sur leur texte "je participe" ?

Merci par avance pour votre aide Smiley smile

Le CSS :

#tableau table { 
	border: none ; 
		}
#tableau th {
	border: thin solid #6495ed;
		}
#tableau td {
	border: thin solid #6495ed;
	vertical-align: middle;
		}
#tableau tr {
	height: 15px;	
		}
.sujet {
	color: #369829;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
		}
.horaires {
	color: #990000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
		}
.inscription {
	font-size: 12px;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
			}


Le HTML

<div id="tableau">
<table align="center" border="1" width="679"> 
<tr> <th>Horaires</th> <th>Sujet</th> <th>Inscription</th></tr> 
<tr> <td class="horaires">10h00 - 11h30 </td> 
<td class="sujet">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tortor mauris.</td> 
<td><span class="inscription">Je participe
    <input name="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tortor mauris." type="checkbox" value="OUI" />
</span></span></td> 
</tr> 
  <td rowspan="3"><span class="sujet ">Cras congue velit sit amet est hendrerit</span></td>
  <td><span class="sujet"><span class="horaires">10h00 :</span> Nam venenatis felis ac sem sodales id luctus</span></td>
  <td><span class="inscription">Je participe
      <input name="Nam venenatis felis ac sem sodales id luctus" type="checkbox" value="OUI" />
  </span></td>
</tr>
<tr>
  <td><span class="sujet"><span class="horaires">14h30 :</span>  Praesent ac nunc massa</span></td>
  <td><span class="inscription">Je participe
      <input name="Praesent ac nunc massa " type="checkbox" value="OUI" />
  </span></td>
</tr>
<tr>
  <td><span class="sujet"><span class="horaires">16h00 :</span> Proin non ligula non magna malesuada varius</span></td>
  <td><span class="inscription">Je participe
      <input name="Proin non ligula non magna malesuada varius" type="checkbox" value="OUI" />
  </span></td>
</table>
</div>

Modifié par kawaz (18 Aug 2010 - 15:52)
Bonjour,

Tu peux refuser le passage à la ligne du contenu de tes cellules de classe "inscription" grâce à la proprité "white-space : nowrap".

Mais je pense que ce lien pourrait beaucoup t'aider dans l'élaboration d'un tableau :
Elements Col et colgroup, sur le site du w3c
Modifié par Nigel (21 Aug 2010 - 15:15)
Tu trouveras peut-être un réponce ici, c'est une page qui regroupe pleins de css pour des formulaires.
Modifié par elkastor (25 Aug 2010 - 22:06)
Salut @tous

Eh bien merci elkastor pour le lien.
C'est toujours une question délicate concernant les formulaires en CSS.

++
Hello kawaz et bienvenue, Smiley smile

sans m'étendre sur ton code il y a tout de même un point important : pour des questions d'accessibilité essentiellement il faut associer chaque champ d'un formulaire à un élément LABEL (qui est fait pour ça) et pas à un SPAN (cf. cette astuce et plus généralement http://openweb.eu.org/articles/formulaire_accessible ).

Au passage ton tableau n'est pas très clair : l'entête de la première colonne parle des horaires alors qu'à part pour la première ligne cette information se trouve à chaque fois dans la colonne sujet. Voir http://www.pompage.net/pompe/autableau/
Modifié par Heyoan (25 Aug 2010 - 23:56)
Bonjour,

Je n'ai pas vraiment ce que je voulais, mais j'ai appliqué un "text-align: center;" sur "inscription" et cela a passé ma case a cocher à la ligne et centré en dessous.

Merci pour les remarques Heyoan je vais appliquer l'élément LABEL à mes formulaires et pour le "sujet" c'est une mauvaise manip à force de faire des essais Smiley cligne

Merci pour vos liens !
Sujet clos
Aller à