Aligner verticalement avec CSS

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

J'ai beau essayé mais sans resultat...
ma question est la suivante:
avec la CSS suivante, je veux aligner verticalement tous les noms de l'entete d'un tableau, mais

Code:

valign:middle;

ne marche pas , pourqoui?

Sur l'image attachée, je veux aligner la 'Date' et 'Amount' verticalement sur la ligne.

merci,
Code:

1 2 3 4 5 6 7 8 9 /* Applications Header */ .app { height: 0.7cm; padding:0 10px; border:#000 solid; border-width: 0px 0 0px 0; background-color:#EEE; text-align:center; text-valign:center; valign:middle; }

08/12/2007, 13h30
Bisûnûrs

vertical-align en CSS et non valign ..
08/12/2007, 13h38
mLk92

Attention le vertical-align n'est pas applicable pour tous.

Il ne peut pas s'appliquer sur les bloc comme les div par exemple
08/12/2007, 13h48
Bisûnûrs

Ici il est question de tableau ...
10/12/2007, 22h02
machipot

1 pièce(s) jointe(s)

Oui, j'ai ajouté 'vertical-align' mais je perds le fond gris de l'entete.
comment centrer verticalement tout en gardant le fond dans toute la cellule?

merci

voir image attachée
12/12/2007, 12h11
kryogen

applique la couleur à la cellule sinon.
on peut voir un extrait de ton code html ?

1 pièce(s) jointe(s)

Citation:

Envoyé par kryogen

applique la couleur à la cellule sinon.
on peut voir un extrait de ton code html ?

voici ma classe:

Code:

1
2
3
4
5
6
7
8
9
/* Applications Header */
.app { height: 0.7cm;
	padding:0 10px; 
	border:#000 solid; 
	border-width: 0px 0 0px 0; 
	background-color:#EEE;
	text-align:center;
	text-valign:center;
	vertical-align:center; }

et voici le morceau de code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%-- Fsp Status--%>
					<logic:iterate id="fsp" name="fspStatus" property="aryStudentFsp">
						<bean:define name="fsp" property="strInstlStatusId"
							id="statusIdFsp" />
 
						<TR>
							<TD colspan="3">&nbsp;</TD>
						</TR>
						<TR>
							<TD colspan="3"><IMG border="0" src="images/more.gif" width="9"
								height="7"> <bean:write name="fsp" property="strFspTitle" /></TD>
						</TR>
						<tr>
							<td>
							<p class="app"><strong><bean:message key="bursaryAmount" /></p>
							</td>
							<td>
							<p class="app"><strong><bean:message key="bursaryPayTyp" /></p>
							</td>
							<td>
							<p class="app"><strong><bean:message key="bursaryOpertDt" /></p>
							</td>
						</tr>

image de l'entete: je voudrais aligner les textes verticalement sans pour autant perdre la couleur

13/12/2007, 05h08
vlunder

crée une nouvelle classe surlaquelle tu ne mettras que le background et puis tu l'affectes au <tr> ou bien au <td> .
13/12/2007, 13h29
mLk92

mieux vaut que tu donne tes propriétés au td, ie ne comprend pas toutes les propriétés pour les tr ...

Pour que tu vois ce que donne un <p> dans un <td> :

__________________
| TD |
| ________________|
|| P ||
||_______________||
| |
|_________________|

Ta balise <p> ne prend pas de base toute la hauteur, ainsi donc de la manière dont tu as spécifié les propriétés, seul ton texte sera coloré :)

Soit tu met des tailles de 100% au <p>, soit tu applique une classe au <td> (ce qui reste le mieux), mais tous cela dépend de ton utilité.

De plus ta propriétés " text-valign" n'existe pas, enfin il me semble 8-), si c'est pour centrer verticalement, un simple "vertical-align: center" dans la classe qui représente ton <td> suffira :)

Voili Voilou Voilà

Css

Code:

1
2
 .col{background:ta-couleur
                 }

Html

Code:

1
2
3
<tr class="col"> 
           <TD colspan="3">&nbsp;</TD>
						</TR>

13/12/2007, 16h14
machipot

merci a vous,
donc la solution serait d'ppliquer la couleur a la <TR> puis appliquer la class a la <td>
ça repond a ma question

merci encore.