Display VS line-height

Version imprimable

Bonjour à tous !

Je viens ici pour vous parler d'un petit problème que je viens de rencontrer sur la création d'une petite page internet.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21  <form method="post" action="envoyer" >  <label for="ComboBox1">Type de la cible :</label>  <select name="ComboBox1"> <option>Un choix</option> <option>Un autre choix</option> <option>Encore un autre choix</option> </select>  <label for="ComboBox2">Type de la cible :</label>  <select name="ComboBox2"> <option>Encore et toujours du choix</option> <option>En-choix</option> <option>Plus d'inspiration pour ce dernier choix</option> </select> </form>
Je doit mettre des formulaires et les labels qui y sont associés, et le tout doit être joliment aligné.

Je me suis dit, que dises les confrères web-master sur internet pour aligner ces formulaires. Et là, tous on répondu :
Code:

1 2 3 4 5 label { display: block; float: left; width: 150px; }
Et ça marche nickel chrome ! (pas le navigateur, hein !)
Sauf que on me dit que tout ça à l'air collé...Normal, puisque aucuns espacement n'est mis entre les lignes. Du coup, le bas de la première combobox se confond avec le haut de la seconde qui est juste en dessous.

Je décide donc d'ajouter :
Code:

1 2 3 form { line-height : 2em; }
Et là, c'est le drame.... Les Combobox sont décalés d'une marge invisible sur la gauche.
En jouant un peu, je découvre que si je retire le Display, ou le line-height, il n'y a plus ce problème. Mais les lignes sont collées, ou les formulaires ne sont pas alignées....
Code:

1 2 3 Type de la cible : |Ici la première ComboBox | ----Type de la cible : |Ici la seconde ComboBoc |
J'ai symbolisé l'espace involontaire (qui me gène )avec les ----

Sauriez-vous m'expliquer ce phénomène ? Ou trouver une solution qui me permettrai d'aligner les formulaire et d'écarter mes lignes ?

Il y aurai bien le contournement de rajouter des <br> entre chaque lignes, mais étant encore en apprentissage du CSS, je cherche vraiment à m'améliorer dans son maniement.

Merci d'avance pour toute aide ou conseils, et bonne continuation !

Pourquoi ne pas créer un DIV pour chaque select/label.

Ça évite de se compliquer la vie:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form  method="post" action="envoyer" >
 
		<!-- Un label pour aller avec le ComboBox ci-dessous -->
    <div class="">
        <label for="ComboBox1">Type de la cible :</label>
	      <!-- Le fameux ComboBox -->
        <select  name="ComboBox1">
	        <option>Un choix</option>
	        <option>Un autre choix</option>
	        <option>Encore un autre choix</option>	
        </select>
  </div>
 
		<!-- Un label pour aller avec le second ComboBox ci-dessous -->
  <div class="align">
    <label for="ComboBox2">Type de la cible :</label>
          <!-- Encore un ComboBox -->
      <select  name="ComboBox2">
          <option>Encore et toujours du choix</option>
          <option>En-choix</option>
          <option>Plus d'inspiration pour ce dernier choix</option>	
      </select>
  </div>
</form>

Code:

1
2
3
4
5
6
form{
	width: 800px;
}
.align{
	margin-top: 2em;
}

01/08/2013, 22h06
NoSmoking

Bonjour,
pour mettre de la distance entre deux éléments il existe la propriété margin.
:fleche: Marges extérieures
02/08/2013, 09h29
Kurogane

Bonjour.

Tout d'abord, merci de vos réponses.

Citation:

Envoyé par rodolphebrd

Pourquoi ne pas créer un DIV pour chaque select/label.

Alors une chose étrange, c'est que en effet, si je sépare par des div, l'effet de décalage n'est plus présent (mais juste en mettant les ensemble label+select dans la div, sans y ajouter le css)

Du coup, cette simple solution est à peine moins "propre", mais efficace, et pas trop compliquée.

Le même effet est obtenu avec un ajout de <br> entre chaque select.

Citation:

Envoyé par NoSmoking

Pour mettre de la distance entre deux élément il existe la propriété margin.

Merci, en effet, les marges sont importantes et évidentes pour espacer les éléments. Sauf que dans mon cas, cela laisse le décalage obtenu avant chaque début de lignes.

J'ai oublié de préciser l'effet exacte que j'obtenais avec mes manipulations, je vais éditer mon premier message pour apporter cette précision.

Du coup, pour l'instant, j'opte pour ajouter des <bd>, et ça résout mon problème.

Par contre, je ne comprend toujours pas pourquoi l'utilisation conjointe du Display et du line-height font ce décalage. (j'ai édité mon premier message pour être plus explicite)

Merci en tout cas de vos réponses.
02/08/2013, 10h03
rodolphebrd

Citation:

Envoyé par Kurogane

Du coup, cette simple solution est à peine moins "propre

C'est propre et valide et ça à l'avantage de ne pas toucher aux propriétés par défaut de rendu CSS des balises HTML (types block ou inline) qui existent pour une bonne raison.

L'utilisation de balises <br> pour créer des espaces reste cependant peu recommandable puisque ça peut parfaitement être réalisé en CSS (cf le lien de NoSmoking).

On peut également utiliser une structure plus classique à base de P, sans jeu de mots.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form  method="post" action="envoyer" >
  <p>
  	<label for="ComboBox1">Type de la cible :</label>
  	<select  name="ComboBox1">
  		<option>Un choix</option>
  		<option>Un autre choix</option>
  		<option>Encore un autre choix</option>
  	</select>
  </p>
  <p>
  	<label for="ComboBox2">Type de la cible :</label>
  	<select  name="ComboBox2">
  		<option>Encore et toujours du choix</option>
  		<option>En-choix</option>
  		<option>Plus d'inspiration pour ce dernier choix</option>
  	</select>
  </p>
</form>

dans ce cas le CSS suivant devrait être suffisant

Code:

1
2
3
4
label {
  display: inline-block;  /* pour pouvoir mettre une largeur */
  width: 150px;
}

02/08/2013, 12h02
Kurogane

Bonjour,

Je pense que je vais arrêter de me creuser la tête pour rien, vous m'avez fournis plusieurs solutions, j'ai de quoi faire !

La solution avec les <div> me paraissait un peu "grosse", mais c'est vrai qu'avec de simples balises <p>, c'est tout aussi simple et efficace.

Merci à vous deux pour le temps que vous m'avez consacré, et merci aussi aux personnes comme vous qui partagent leurs savoir et expériences sur ce forum.

Bonne continuation à vous ! :ccool:
02/08/2013, 17h09
Muchos

Exemples de formulaires par W3C et WhatWG

Citation:

Envoyé par Kurogane

La solution avec les <div> me paraissait un peu "grosse", mais c'est vrai qu'avec de simples balises <p>, c'est tout aussi simple et efficace.

C'est ce que le WhatWG propose comme exemple de formulaire.
De son côté, le W3C propose des listes à puces !