CSS simple : mettre texte en basRésolu/Fermé

Question

Bonjour, Comment mettre cette balise div en bas ?

mon texte

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 !!!

Dalida · Accepted Answer

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 '

', 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 '

' est unique, mieux vaut utiliser un identifiant plutôt qu'une classe.

mon texte

div#menu_en_tete { height:200px; position:relative; } div#menu_en_tete p { position:absolute; bottom:0; }

Jean_2 · Answer

ça marche partiellement, car ça me colle pas en bas (pas totalement, reste 10-15px en dessous...) ma méthode qui marchait mais moche :

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...

Ca te choque toi ? Je laisse comme ça où c'est mieux de reprendre ta façon (qui ne colle pas tout en bas) ?:

texte

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

Dalida · Answer

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...*/
}

Jean_2 · Answer

c'est bien ça

encore merci à toi!!!

Jean_2 · Answer

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

Dalida · Answer

salut, le texte que tu mets en bas est au milieu des quatre '

' qui font les coins ? si oui le plus simple est d'en ajouter un cinquième auquel tu appliqueras {position:relative;}.

Jean_2 · Answer

hello dalida je reprends le code html

voilà le texte, je peux le mettre dans un div, mais ça change pas...

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

Dalida · Answer

le 5ème '

' 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 '

' des coins soient positionnés relativement à lui.

voilà le texte, je peux le mettre dans un div, mais ça change pas...

Jean_2 · Answer

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...)

Jean_2 · Answer

up : ma méthode ne fonctionne pas sous IE. aie aie aie je relie ta solution dalida mon code xhtml :

Ca c'est vide

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;}

Jean_2 · Answer

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é ?

Jean_2 · Answer

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é

j'ai donc maintenant :

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

Jean_2 · Answer

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

CSS simple : mettre texte en bas

13 réponses

Discussions similaires

Newsletters