CSS simple : mettre texte en bas [Résolu]

salut,

{vertical-align} ne sert pas exactement à cela.
pour l'utiliser il faut l'appliquer à une balise de type bloc, contenant une balise en ligne. idéalement c'est le cas du contenu des cellules de tableau.

dans ton cas, le mieux est d'attribuer une hauteur à ton '<div>', de déterminer {position:relative;} et de placer la balise contenue (d'ailleurs ce sera plus propre que du texte directement) en {position:absolute;}.

enfin si ce '<div>' est unique, mieux vaut utiliser un identifiant plutôt qu'une classe.

<div id="menu_en_tete">
     <p>mon texte</p>
</div>

div#menu_en_tete
{
height:200px;
position:relative;
}

div#menu_en_tete p
{
position:absolute;
bottom:0;
}

ça marche partiellement, car ça me colle pas en bas (pas totalement, reste 10-15px en dessous...)

ma méthode qui marchait mais moche :

<div class="en_tete">
<div class="coin_haut_gauche_en_tete">
<div class="coin_haut_droit_en_tete">
<div class="coin_bas_droit_en_tete">
<div class="coin_bas_gauche_en_tete">
<div class=".une_classe">Là je laissais vide, puis je mettais en CSS une height de x px, pour que mon texte soit en dessous et collé en bas...</div>
<div class=".menu_en_tete"></div>
</div>
</div>
</div>
</div>
</div>

Ca te choque toi ? Je laisse comme ça où c'est mieux de reprendre ta façon (qui ne colle pas tout en bas) ?:
<div class="en_tete">
<div class="coin_haut_gauche_en_tete">
<div class="coin_haut_droit_en_tete">
<div class="coin_bas_droit_en_tete">
<div class="coin_bas_gauche_en_tete">
<p>texte
</p>
</div>
</div>
</div>
</div>
</div>

avec en CSS :

.en_tete
{
width: 750px; /*largeur*/
height: 115px;/*hauteur bannière*/
background-image: url("../images/banniere.jpg"); background-repeat: no-repeat;
margin:10px auto; /*marge de 10 px en haut et des marges égales entre elles à gauche et à droite, pour centrer le cadre*/
font-size:large;
position:relative;
}

.en_tete p
{
position:absolute;
bottom:0px;
text-align: center;
font-size:small;/* A retirer quand il n'y aura que des liens...*/
}

Alors qu'en penses-tu, pourquoi ces10-15px en dessous de mon texte ???
merci à toi

salut,

il doit y avoir les marges.

.en_tete p
{
margin:0;
padding:0;
position:absolute;
bottom:0px;
text-align: center;
font-size:small;/* A retirer quand il n'y aura que des liens...*/
} 

c'est bien ça

encore merci à toi!!!

oups : je viens de m'appercevoir que du coup, mes 4 images formant des coins arrondis ne s'affichent plus.

voici le CSS pour l'un d'eux :
div.coin_haut_gauche_en_tete{background-image:url("../images/coin_haut_gauche.gif");background-repeat:no-repeat;background-position:top left;}

Comment les afficher du coup ?

merci

salut,

le texte que tu mets en bas est au milieu des quatre '<div>' qui font les coins ?
si oui le plus simple est d'en ajouter un cinquième auquel tu appliqueras {position:relative;}.

hello dalida

je reprends le code html
<div class="en_tete">
<div class="coin_haut_gauche_en_tete">
<div class="coin_haut_droit_en_tete">
<div class="coin_bas_droit_en_tete">
<div class="coin_bas_gauche_en_tete">
<p>voilà le texte, je peux le mettre dans un div, mais ça change pas...
</p>
</div></div></div></div></div>

le CSS :

.en_tete
{
width: 750px;
height: 115px;
background-image: url("../images/banniere.jpg"); background-repeat: no-repeat;
position:relative;
}

.en_tete p
{
position:absolute;
bottom:0px;


J'ai appliqué la position relative sur p, mais ça marche pas (meme en l'insérant dans un autre div auquel j'applique position:relative;...)

En fait, je me demande si ma 1ere solution n'était pas a plus simple ? (Elle marchait pour tout, mais n'était pas très "propre") Qu'en penses-tu ????

merci

le 5ème '<div>' doit être à l'intérieur, car la position sera relative à lui pour tous les éléments contenus. et il ne faut pas que les 4 '<div>' des coins soient positionnés relativement à lui.

<div class="coin_haut_gauche_en_tete">
	<div class="coin_haut_droit_en_tete">
		<div class="coin_bas_droit_en_tete">
			<div class="coin_bas_gauche_en_tete">
				<div class="en_tete">
					<p>voilà le texte, je peux le mettre dans un div, mais ça change pas...</p>
				</div>
 			</div>
		</div>
	</div>
</div>

hou la la !!!

- mon texte se retrouve tout en bas de ma page (pas du cadre)
- mes coins réapparaissent, ils sont biens positionnés au niveau de la "hauteur" (par rapport au cadre), mais sont collés à gauche et à droite du navigateur...

ne perds pas ton temps, je vais reprendre ma méthode d'avant

merci à toi (ps : j'ai vu ton message, je vais tester tout à l'heure...)

up : ma méthode ne fonctionne pas sous IE. aie aie aie

je relie ta solution dalida

mon code xhtml :
<div class="en_tete">
<div class="coin_haut_gauche_en_tete">
<div class="coin_haut_droit_en_tete">
<div class="coin_bas_droit_en_tete">
<div class="coin_bas_gauche_en_tete">
<div class="espace"> Ca c'est vide</div>
<div class="menu">
<p>le coeur du problème
</p>
</div>
</div>
</div>
</div>
</div>
</div>

mon code CSS :
.en_tete
{
width: 750px;
height: 100px;
background-image: url("../images/banniere.jpg"); background-repeat: no-repeat;
margin:10px auto;
}

/* entête : mes 2 div de texte */
.espace{height:71px;}
.menu{}

/* LES TROIS COINS DE L'ENTETE*/
.coin_haut_droit_en_tete{ background:url("../truc.gif") top right no-repeat;}
.coin_bas_droit_en_tete{ background:url("../truc.gif") bottom right no-repeat;}
.coin_bas_gauche_en_tete{ background:url("../truc.gif") bottom left no-repeat;}

en fait, sous IE, le texte est décalé de quelque pixels vers le bas, ce qui fait que mes 2 coins bas gauche et bas droit (qui suivent ce texte) sont trop bas
et si j'essaye d'adapter ça pour IE, j'ai donc le pb inverse sous FF (les 2 coins du bas sont trop haut)...

est ce que la meilleure solution n'est pas de faire un script déterminant quel est le navigateur utilisé ?

re

juste pour dire que j'ai supprimé mon div espace, j'ai appliqué un padding-top pour compenser à la disparition du height de espace.
j'ai aussi supprimé <p></p>
j'ai donc maintenant :

<div class="en_tete">
<div class="coin_haut_gauche_en_tete">
<div class="coin_haut_droit_en_tete">
<div class="coin_bas_droit_en_tete">
<div class="coin_bas_gauche_en_tete">
<div class="menu">
le coeur du problème
</div>
</div>
</div>
</div>
</div>
</div>

et en CSS :
.menu{text-align: center;font-size:small; padding-top:71px;}

Pourquoi cet affichage différent ? Pour le div en_tete, qui contient le div menu, j'ai bien en CSS : .en_tete{margin:10px auto;}
Je peux supprimer cette différence ?
J'ai testé en imposant un line-height:10px; mais ça résout pas le problème

merci à vous

je cloture ce post : la raison, le titre ne correspond plus à ce que je veux faire...
pour ceux que ça interresse :
le nouveau message s'appelle : en bas du div : menu+coins arrondis, pb IE/FF