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

Signaler
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
-
 ciscoli -
Bonjour,

Comment mettre cette balise div en bas ?
<div class="menu_en_tete">mon texte</div>

Le Code CSS (ma ligne fait bien 100px, mais le texte s'aligne en haut... :

.menu_en_tete
{
height:100px;
vertical-align:bottom;/*n'a aucune incidence*/
}


merci !!!

13 réponses

Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896
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;
}
14
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Merci c'est cool !!! ca marche
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896
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...*/
} 
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
12
ç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
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
12
c'est bien ça

encore merci à toi!!!
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
12
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
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896
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;}.
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
12
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
Messages postés
6728
Date d'inscription
mardi 14 mai 2002
Statut
Contributeur
Dernière intervention
11 janvier 2016
896
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>

Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
12
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...)
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
12
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;}
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
12
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é ?
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
12
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
Messages postés
245
Date d'inscription
lundi 24 septembre 2007
Statut
Membre
Dernière intervention
13 septembre 2013
12
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