[CSS] Problème de taille de div

**meda** · 23/08/2005, 17h44

Bonjour tout le monde,

Voila je rencontre un problème qui doit être simple mais j'ai beau chercher je ne trouve pas la solution.
Je voudrais définir la taille d'une div mais je n'y arrive pas voici les css :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
div.inscription {
	text-align : left ;
	margin-left : 1em;
}
div.inscription_form {
	display : block;
}
div.inscription_form_cell {
	display : inline;
	width : 300px; en fait c'est ici que cela ne fonctionne pas
	height : 100px;
}

et voici le code xhtml (le code a été validé en xhtml transitional1.0) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div class="inscription">
	<p class="normal">inscription</p>
	<form method="post" action="enregistrement.php">
		<div class="inscription_form"><div class="inscription_form_cell"><label class="inscription" for="logins">Login :  </label></div><input type="text" id="logins"  maxlength="12" /></div>
		<div class="inscription_form"><div class="inscription_form_cell"><label class="inscription" for="passwords">mot de passe : </label></div><input type="password" id="passwords"  maxlength="8" /></div>
		<div class="inscription_form"><div class="inscription_form_cell"><label class="inscription" for="verifpass">mot de passe (identique): </label></div><input type="password" id="verifpass"  maxlength="8" /></div>
		<div class="inscription_form"><div class="inscription_form_cell"><label class="inscription" for="mail">adresse e-mail : </label></div><input type="password" id="mail"  maxlength="30" /></div>
		<div class="centre"><input type="submit" value="S'enregistrer" /></div>
	</form>
</div>

et donc en fait je voulais que tous les labels occupent la même place pour un soucis d'esthétique.

Merci de m'aider

**Jamie88** · 23/08/2005, 17h47

Peut-etre en essayant de dimensionner aussi les autres div

**meda** · 23/08/2005, 19h21

Je viens de tester cette solution mais cela ne fonctionne pas.
Je pourrais aussi mettre un tableau mais je ne comprends pas pourquoi cela ne fonctionne pas avec des div.
merci pour ton aide.

**ilood** · 23/08/2005, 20h06

Envoyé par meda

Code :

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

1
2
3
4
5
6
7
 
....
div.inscription_form_cell {
	display : inline;
	width : 300px; en fait c'est ici que cela ne fonctionne pas
	height : 100px;
}

C'est normal car tu ne peux pas définir de largeur lorsque tu fais un display: inline

et donc en fait je voulais que tous les labels occupent la même place pour un soucis d'esthétique.

Une solution un peu plus "légère" avec des label de même taille

Code :

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
<style type="text/css">
label.inscription {
	float: left;
	width: 300px;
}
</style>
</head>
 
<body>
<div class="inscription">
   <p class="normal">inscription</p>
   <form method="post" action="enregistrement.php">
      <label class="inscription" for="logins">Login :  </label><input type="text" id="logins"  maxlength="12" /><br />
      <label class="inscription" for="passwords">mot de passe : </label><input type="password" id="passwords"  maxlength="8" /><br />
      <label class="inscription" for="verifpass">mot de passe (identique): </label><input type="password" id="verifpass"  maxlength="8" /><br />
      <label class="inscription" for="mail">adresse e-mail : </label><input type="password" id="mail"  maxlength="30" /><br />
      <div class="centre"><input type="submit" value="S'enregistrer" /></div>
   </form>
</div>

**meda** · 23/08/2005, 20h57

Je viens de tester la solution que tu as proposé, je l'avais déjà essayé mais sans le float left.
Pour ce qui est du label le premier fonctionne parfaitement puis les trois autres se comportent comme des colones, cela est dû au float :
exemple :

Code :

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

1
2
3
4
 
test
     test 2
             test3

la largeur "width" est respecté.

**ilood** · 23/08/2005, 21h12

Surement un problème de largeur. Width 300px n'est peut etre pas assez. Pour que cela fonctionne le contenu du label doit tenir sur une seule ligne.

**meda** · 24/08/2005, 14h30

oui, donc en fait je dois aussi faire une classe pour le input pour qu'il prenne le reste de la place de la ligne en float left lui aussi.
Je pense que cela sera bon.

Merci pour votre aide

[CSS] Problème de taille de div

CSS

Discussions similaires

Partager

Partager