Aligner 2 blocs en haut et bas d'un parent à taille fixe [Résolu]

[Yosko]

Bonjour à tous,

Je cherche à résoudre un petit problème. J'ai actuellement un conteneur à taille fixe, qui contient 3 éléments :

• Une image aux mêmes dimensions que le parent, affichée dans le fond (techniquement, ça reste une balise <img />)
• Une div à taille variable, à aligner en haut
• Une div à taille variable, à aligner en bas

Mon but est d'afficher les textes par dessus l'image (le texte du haut aligné en haut de la zone occupée par l'image, et le texte du bas aligné en bas de la zone occupée par l'image).
Mon code actuel fonctionne bien pour le texte du haut, mais pas celui du bas.

L'HTML ressemble actuellement à ceci :

Code :

1
2
3
4
5
<div class="post">
	<div class="overlay">Titre de l'image</div>
	<img class="img_thumb" src="LIEN VERS L'IMAGE" />
	<div class="overlay overlayBottom">Texte d'information sur l'image</div>
</div>

Et le CSS actuel :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
div.post {
	width: 256px;
	height: 215px;
	overflow: hidden;
	display: inline;
}
.overlay {
	display: block;
	position: absolute;
	background-image: url('http://7avoir.yosko.net/templates/yosko/images/translucide.png');
	background-repeat: repeat;
	width: 100%;
	font-size: 120%;
	font-variant: small-caps;
	font-weight: bold;
	text-align: center;
}
.img_thumb {
	float: left;
}
.overlayBottom {
	vertical-align: bottom;
}

Certains des choix que j'ai fait en CSS ne sont peut-être pas judicieux, mais c'est parce que je suis en pleine bidouille pour trouver une solution au problème.

Sauriez-vous comment afficher le texte du bas comme je le veux, sans avoir à passer par position: relative; (car ça hauteur est variable) ?

[FirePrawn]

Bonsoir,

Rajoute

Code :

display: table-cell;

pour ton div de bottom.

[Yosko]

Super, merci du conseil. C'est effectivement la bonne chose à faire, même s'il m'a fallut en plus faire d'autres ajustements (peut-être dus à mon CSS existant ?...) :

En bref :

Code :

1
2
3
4
5
.overlayBottom {
    bottom: 0;
    display: table-cell;
    position: absolute;
}

Je dois avouer que je n'ai pas trop l'habitude d'utiliser les display: table-xxx... mais ça a l'air bien pratique dans l'ensemble.

[FirePrawn]

Envoyé par Yosko

Super, merci du conseil. C'est effectivement la bonne chose à faire, même s'il m'a fallut en plus faire d'autres ajustements (peut-être dus à mon CSS existant ?...) :

En bref :

Code :

Je dois avouer que je n'ai pas trop l'habitude d'utiliser les display: table-xxx... mais ça a l'air bien pratique dans l'ensemble.

En fait c'est juste que tu ne peux pas utiliser le vertical-align pour un bloc qui est lui même dans un bloc. L'utilisation du table-cell permet de feinter, et de faire passer ton div pour une cellule de tableau ; or dans ce cas, le vertical-align fonctionne parfaitement

[Candygirl]

Hello,

Envoyé par Yosko

Code :

Je dois avouer que je n'ai pas trop l'habitude d'utiliser les display: table-xxx... mais ça a l'air bien pratique dans l'ensemble.

Le display:table-cell ne sert à rien dans le code ci-dessus. Il n'est pas effectif associé à un positionnement absolu:

9.7 Relationships between 'display', 'position', and 'float'

The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:

[...]
if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below.
[...]

Specified value
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block

Computed value
block

[Yosko]

C'est très étrange, mais... tu as raison
Je ne sais pas ce que j'ai fait en même temps que l'ajout du "table-cell", mais mon truc s'est mis à fonctionner à ce moment-là, ce qui m'a laissé croire que c'était bon...

De plus, comme j'utilises le code jQuery suivant, le display est overridé en "none" ou "block".

Code :

1
2
3
4
$(".post").hover(
    function() { $(this).find(".overlay").show(); },
    function() { $(this).find(".overlay").hide();
);

C'est bizarre parce que les 2 seuls trucs qui peuvent influencer sur le positionnement de mon truc sont ceux mentionnés plus tôt (bottom:0; et position:absolute;), et parce que je croyais les avoir déjà testé ensemble avant d'essayer le table-cell sans obtenir le résultat escompté...

Ca marche donc je ne vais pas m'en plaindre, mais je ne suis pas vraiment sûr de ce qu'il s'est passé.