High-Tech Santé Médecine Droit-Finances

Auto-Entrepreneur

Comment faire ?

Rechercher : dans
Par :

CSS simple : mettre texte en bas

Dernière réponse le 8 nov 2007 à 12:32:58 Jean_2, le 24 oct 2007 à 17:34:40 
 Signaler ce message aux modérateurs

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

Configuration: Windows XP
Firefox 2.0.0.8

Meilleures réponses pour « CSS simple : mettre texte en bas » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Enlever le soulignement sous les liens en HTML/CSS VoirPar défaut, les liens hypertextes en HTML sont soulignés, un trait de la couleur du lien apparaît en dessous du texte. Il est possible de supprimer ce soulignement à l'aide de la propriété CSS text-decoration:none : Grâce au CSS Grâce au CSS via...
Télécharger PSPad VoirPSPad est un excellent éditeur de texte. Il est utile pour travailler sur du simple texte, mais aussi sur du HTML, CSS, Javascript, php ou autres langages de programmation (C++, Java, Python...). Les fonctionnalités sont impressionnantes: ...
Télécharger RM-X Video Copyright Voir
Les classes de style (CSS) VoirLes classes et les ID Les classes Il peut s'avérer intéressant d'affecter des styles différents à des mêmes balises. Pour cela les spécifications CSS ont introduit le concept de classe. La définition des classes est aussi simple que celles des...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
La syntaxe des style (CSS) VoirDéfinition d'un style La définition d'un style se fait à l'aide de règles en texte simple permettant de décrire l'aspect des éléments de la page. Une règle CSS est caractérisée par deux principaux éléments : Un sélecteur de balises, permettant de...
Posez votre question Répondre

1

Dalida, le 24 oct 2007 à 18:28:12
  • +1

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

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

   
Répondre à Dalida

2

Jean_2, le 25 oct 2007 à 09:12:24
  • +1

ç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épondre à Jean_2

3

Dalida, le 25 oct 2007 à 10:25:39

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

[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

   
Répondre à Dalida

4

Jean_2, le 25 oct 2007 à 10:43:56

C'est bien ça

encore merci à toi!!!

   
Répondre à Jean_2

5

Jean_2, le 27 oct 2007 à 10:20:44

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épondre à Jean_2

6

Dalida, le 27 oct 2007 à 11:19:30

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

[ Mathieu ]

"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

   
Répondre à Dalida

7

Jean_2, le 27 oct 2007 à 12:24:34

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épondre à Jean_2

8

Dalida, le 27 oct 2007 à 12:39:41

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>


[ Mathieu ]
"Les jeunes c'est l'insécurité
il faudrait tous les enfermer!" BxN 1985

   
Répondre à Dalida

9

Jean_2, le 27 oct 2007 à 13:04:52

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épondre à Jean_2

10

Jean_2, le 8 nov 2007 à 11:01:59

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épondre à Jean_2

11

Jean_2, le 8 nov 2007 à 11:21:34

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épondre à Jean_2

12

Jean_2, le 8 nov 2007 à 11:50:14

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épondre à Jean_2

13

 Jean_2, le 8 nov 2007 à 12:32:58

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 à Jean_2
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net