Discussion :

[Kurogane]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
	<!-- un formulaire banale -->
<form  method="post" action="envoyer" >
 
		<!-- Un label pour aller avec le ComboBox ci-dessous -->
	<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>
 
		<!-- Un label pour aller avec le second ComboBox ci-dessous -->
	<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>
</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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 résultat :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[rodolphebrd]

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

Ça évite de se compliquer la vie:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[NoSmoking]

Bonjour,
pour mettre de la distance entre deux éléments il existe la propriété margin.
Marges extérieures

[Kurogane]

Bonjour.

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

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.

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.

[rodolphebrd]

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).

[NoSmoking]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 !