Discussion :

[barok]

Bonjour tout le monde. J'ai encore un soucis pour positionner des éléments dans une div et je ne souhaite pas utiliser un tableau pour utiliser les propriétés valign de la balise <TD>.

Voila mon probleme



Je souhaiterai que chaque text soit positionné en bas de ma div.
Comme je souhaite que ma div fasse tout le temps la meme taille, elle a des dimensions strict

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.boite_image {
	border:dashed 1px #CCCCCC;
	float:left;
	width:140px;
	margin:5px;
	height:120px;
	clear:right;
	text-align:center;
}

Comment faire pour positionner mon texte encapsuler dans une balise <p></p> au plus bas de ma div sachant que les images sont de taille variable (maximum 140 de large et 100 de haut) ?

Encore une fois un valign='bottom' prendrai 10 secondes mais il parait que c'est caca...

Je vous remercie.

[barok]

J'ai trouver une solution de m... Ca marche mais si quelqu'un a mieux

Code :

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

1
2
3
4
5
6
7
8
9
10
 
.boite_image img{
	position:relative;
	top:-30px;
 
}
.boite_image p{
	position:relative;
	top:100px;
}

et dans mon code html

Code :

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

1
2
3
4
5
 
<div class="boite_image">
	<p></p>
	<img src=""' />
</div>

Mais j'aime pas cette solution car ce n'est pas dans cette ordre la qu'apparaissent les éléments sur la page. Donc si quelqu'un trouve quelque chose de mieux...
Merci à vous.

[marsupix]

Code :

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

1
2
3
p{
vertical-align:baseline;
}

ça devrait marcher si j'en crois
http://www.w3schools.com/css/pr_pos_vertical-align.asp

[barok]

Malheureusement ca ne marche pas. J'ai beau lutter comme un g.... le texte ne veut pas descendre...
CSS.. quand est-ce que tu nous permettra de faire ce que l'on souhaite ?

[ilood]

Salut

Et avec

Code :

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

1
2
3
div.boite_image { position:relative }
.boite_image p { margin: 0; position: absolute; bottom: 0; width: 100% }
.boite_image img { display: block }

Code :

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

1
2
3
4
<div class="boite_image">
<img src="" alt="" />
<p>Mon texte</p>
</div>

CSS.. quand est-ce que tu nous permettra de faire ce que l'on souhaite ?

Quand tous les navigateurs l'implémenteront correctement

[barok]

alors j'ai fais différement

Code :

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

1
2
3
4
5
6
7
 
<div class="boite_image">
	<div class="conteneur_image">';
		<img src="../images/repertoire.jpg" />
	</div>';
	<div>'.$valeur.'</div>';
</div>

et ma 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
 
boite_image {
	width:150px;
	float:left;
	text-align:center;
	border:dashed 1px #CCCCCC;
	margin:5px 10px 5px 8px;
	padding:0px;
}
.boite_image img {
	border:0;
	margin:0;
	padding:0;
}
.conteneur_image{
	margin-top:10px;
	height:100px;
}

comme ca, le conteneur de mon image fait tout le temps 100px de haut donc mon texte est situé quasiment en bas de la div principal. Vive la bidouille...
Merci à tous