CSS simple : mettre texte en bas

Résolu

Html
Css

Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention -
ciscoli - 12 juin 2012 à 23:45

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

Afficher la suite

Répondre (13) Posez votre question

Répondre (13)

A voir également:

Mettre un texte en bas de page html
Iphone 14 simple - Guide
Simple pdf - Télécharger - PDF
Simple ocr - Télécharger - Bureautique
Simple file locker - Télécharger - Sécurité
Simple comic - Télécharger - Vie quotidienne

13 réponses

Réponse 1 / 13

Meilleure réponse

La meilleure réponse est la réponse qui a été validée par nos équipes.

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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

ciscoli

Merci c'est cool !!! ca marche

Réponse 2 / 13

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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

Réponse 3 / 13

Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention 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

Réponse 4 / 13

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 13

Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention 12

c'est bien ça

encore merci à toi!!!

Réponse 6 / 13

Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention 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

Réponse 7 / 13

Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention 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

Réponse 8 / 13

Dalida Messages postés 6728 Date d'inscription Statut Contributeur Dernière intervention 922

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>

Réponse 9 / 13

Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention 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...)

Réponse 10 / 13

Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention 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;}

Réponse 11 / 13

Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention 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é ?

Réponse 12 / 13

Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention 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

Réponse 13 / 13

Jean_2 Messages postés 245 Date d'inscription Statut Membre Dernière intervention 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

Répondre Posez votre question

Votre réponse

Discussions similaires

Bordures de texte en HTML CSS

Roxane 59 -
essai2012 -

9 réponses

taille des input

vanessa -
blackcat -

20 réponses

Ajustement automatique taille de la page

52322 -
sevrain90130 -

39 réponses

obtenir les codes html/CSS d'une page web

emotional_kid -
benji028 -

14 réponses

Background transparent ?

Zorro Gk -
Alexrox -

21 réponses

creer un sommaire bouton en html

kiwi3110 -
tremeur53 -

22 réponses

Devenez membre en quelques clics

Connectez-vous simplement avec ceux qui partagent vos intérêts
Suivez vos discussions facilement et obtenez plus de réponses
Mettez en avant votre expertise et aidez les autres membres
Profitez de nombreuses fonctionnalités supplémentaires en vous inscrivant

S'inscrire