Discussion :

[Mr. NoReaction]

Bonjour,

j'essaye d'aligner vers le bas le texte qui sert de caption à un contrôle mais le texte s'aligne toujours vers le haut. J'ai fait une recherche rapide sur les autres discussions du genre sur le forum mais je n'ai pas trouvé de solution qui fonctionne.

Voici mon code HTML et les éléments de ma feuille de style qui sont utilisés.

HTML

Code :

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

1
2
3
4
5
6
7
 
<div class="LigneAjoutDateADHOSemaine">
	<div class="ColonneADASLabel"><span class="ControleEcranADAS">Date</span></div>
	<div class="ColonneADASControle"><input type="text" name="dateADAS" class="ControleEcranADAS" readonly="readonly" wicket:id="txtDate"></div>
	<div class="ColonneADASDatePicker"><span wicket:id="datePicker" class="ControleEcranADAS"></span></div>
	<div class="ColonneADASBouton"><input type="submit" name="btnAjouter" value="Ajouter" class="ControleEcranADAS" wicket:id="btnAjouter"/></div>
</div>

CSS

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
.LigneAjoutDateADHOSemaine
{
	width:100%;
	height:100%;
	clear:both;
	display:table;
	float:none;
}
 
.ColonneADASLabel
{
	padding-left:35%;
	width:5%;
	text-align:left;
	float:left;
	display:table-cell;
}
 
.ColonneADASControle
{
	width:10%;
	text-align:left;
	float:left;
}
 
.ColonneADASDatePicker
{
	width:5%;
	text-align:center;
	float:left;
}
 
.ColonneADASBouton
{
	width:10%;
	text-align:left;
	float:left;
}
 
.ControleEcranADAS
{
	width:100%;
	vertical-align:bottom;
}

Quelqu'un a une idée de ce qui me manque ? Merci

[desert]

Bonjour,
Pourquoi entourer chaque élément par des balises div ? Ne peux-tu pas t'en passer ? La définition d'une largeur est-elle importante ?
Ce serait du coup plus simple pour tout centrer étant donné que chaque enfant est de type inline.
En bidouillant un peu, on obtiendrait ceci :

Code xhtml :

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

1
2
3
4
5
6
<p class="LigneAjoutDateADHOSemaine">
    <span class="ColonneADASLabel">Date</span>
    <input class="ColonneADASControle" type="text" name="dateADAS" readonly="readonly" />
    <img class="ColonneADASDatePicker" src="calendrier.png" alt="calendrier" /> 
    <input class="ColonneADASBouton" type="submit" name="btnAjouter" value="Ajouter" />
</p>

Code css :

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

1
2
3
4
5
6
7
.LigneAjoutDateADHOSemaine {
    padding-left: 32%;
    margin: 0;
}
.LigneAjoutDateADHOSemaine * {
    vertical-align: middle;
}

[Mr. NoReaction]

Je ne veux pas centrer les éléments ... je veux un layout identique à celui dans la pièce jointe que j'ai mis mais avec le texte associé au textbox aligné avec le bas du textbox.

J'ai essayé les modifs que tu as proposé et ça me mets les 4 éléments un par-dessus l'autre ... pas vraiment ce que je recherche

[desert]

Désolé, j'avais mal lu.
Normalement, avec ce code, cela devrait fonctionner :

Code css :

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

1
2
3
4
5
6
7
.LigneAjoutDateADHOSemaine {
    padding-left: 35%;
    margin: 0;
}
.ColonneADASLabel {
    vertical-align: bottom;
}