[CSS] Centrer texte verticalement

Je suis bloqué !

Sujet résolu

29 décembre 2005 à 5:16:58

Salut,
Voila je suis bloqué sur une affaire stupide .
Je vérifie et revérifie et je ne trouve rien .
D'apres moi l'erreur est sur mon logiciel .

Mon but : Centrer le texte verticalement comme sa :
Image utilisateur

Mon résultat : Le texte reste comme cela, et je veux qu'il soit plus haut:
Image utilisateur

On dirait que la propriété : vertical-align: bottom; ne fonctionne pas !

Voici mon code du body CSS :

body
{
font-family: 'Trebuchet MS', Tahoma, Verdana, 'Times New Roman', Times, serif;
font-size:0.8em;
margin: 0;
background:url('../../images/designs/1/fond.gif') repeat-x;
background-color: #6699CC;

}

Voci mon code de mon menu CSS :

/* ----------------------------------Le menu 2------------------------------------ */

#menu
{
float: left;
width: 16%;
margin-left:0.5%;
margin-right:0.5%;
}

#menu h5
{
height: 22px;
margin: 0;
padding-top: 6px;
padding-left:10px;
padding-bottom:0px;
vertical-align: bottom;
color: #FFFFFF;
background-color:#F4F9FD;
background:url('images/header1.png') repeat-x;
border:1px solid #2C485C;
font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
font-size:18px;
}

#menu ul
{
list-style-type: none;

padding: 0;
margin-left: 10px;
}

#menu .corpsmenu
{
background-image:url('images/back1.gif');
background-repeat: repeat;
background-color: #535353;
padding: 0;
margin: 0;
margin-bottom:10px;
border: 1px solid black;
border-top:0px solid black;
}

/* ----------------------Quelques effets sur les menus 2------------------------ */

.corpsmenu h3
{
color: #B3B3B3;
font-family: Arial,"Lucida Sans Unicode", verdana, lucida, sans-serif;

}

.corpsmenu ul
{
list-style-type: none;
padding: 0px;
padding-left:15px;
margin: 0px;
margin-bottom: 15px;

}

.corpsmenu a
{
background: url('images/list-off.gif') no-repeat left center;
padding-left: 15px;
text-decoration: none;
color: #999; font-style:normal; font-variant: small-caps; text-transform: none; font-weight: normal; font-size:14px; font-family: "Courier New", "Lucida Sans Unicode", verdana, lucida, sans-serif;
}

.corpsmenu ul li a:hover
{
background: url('images/list-on.gif') no-repeat left center;
color: white
}

.corpsmenu ul li a#current
{
background: url('images/list-active.gif') no-repeat left center;
color: black
}

Voici mon code de mon menu HTML :

<div id="menu">
<h5><img src="images/cours.gif" alt=""/> Tutoriaux</h5>
<div class="corpsmenu">
<ul>
<li id="active"><a href="tdesign.php" id="current">Design</a></li>
<li><a href="tmapping.php">Mapping</a></li>
<li><a href="tprogrammation.php">Programmation</a></li>
<li><a href="tsiteweb.php">Site Web</a></li>
</ul>
</div>
</div>

ESSAYEZ LE VOUS VERREZ !

Voici le résultat finale (non-réussi , bien sur) :
Image utilisateur

Merci d'avance pour les réponses !

Inexo

29 décembre 2005 à 6:51:57

C'est bien "Portfolio" que tu souhaites réhausser si j'ai bien compris, non?

Dans ce cas, pourquoi n'apparaît-il pas dans ton code xHTML?...
Si tu t'es trompé et qu'à la place tu a mis "Tutoriaux" (la seule chose que je vois que pourraît être ça).

Essaye plutôt de changer les "margin-(top/bottom)" ou les "padding-(top/bottom)", bidouille un peu dessus.
(ca fait longtemps que j'ai pas pratiqué, j'avous que ca me sort un peu de la tête, mais tente quand même...)

C'est bien dans:

#menu h5
{
height: 22px;
margin: 0;
padding-top: 6px; /** ici **/
padding-left:10px;
padding-bottom:0px; /** ou ici **/
vertical-align: bottom;
color: #FFFFFF;
background-color:#F4F9FD;
background:url('images/header1.png') repeat-x;
border:1px solid #2C485C;
font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
font-size:18px;
}

Non?
Fait varier les deux valeurs indiquer dans ma citation de code.

Maintenant, si j'avais mal compris ce que tu demandais et que ca n'avait rien à voir, excuse moi.

EDIT: C'est bien ce que je disais.. Ce que j'ai dit n'à rien à voir... mdr.

AurelFreaky

29 décembre 2005 à 6:57:44

Tu t'es gouré de valeur ! Pour centrer un texte verticalement :

vertical-align: middle;

Car

vertical-align: bottom;

aligne le texte EN BAS ! Petit tableau rien que pour toi

En haut : top
au milieu : middle
en bas : bottom

Nan mais !

Gregoo

29 décembre 2005 à 20:14:59

Bonsoir.

Petit précision pour la propriété CSS "vertical-align".
Elle ne prend pas la valeur 'center' pour un centrage verticale mais 'middle'.

Voilà les valeurs que prend "vertical-align"

baseline /*Alignement sur la ligne de base ou le bas.*/
middle /*Alignement au milieu de la ligne de base.*/
sub /*Alignement en bas de la ligne de base.*/
super /*Alignement au-dessus de la ligne de base.*/
text-top /*Aligne le texte en haut de l’élément parent.*/
text-bottom /*Aligne le texte en bas de l’élément parent.*/
top /*Alignement haut de la boite parent avec la boite de la ligne.*/
bottom /*Alignement haut de la boite parent avec la boite de la ligne.*/

Vous pouvez aussi spécifier à cette propriété des valeurs en unité de longueur (em, px, ...) et en pourcentages (%).

Si vous avez des doutes sur les propriétés CSS, n'hésitez pas à consulter le Wiki CSS de Mediabox, c'est très bien fait

strucky

29 décembre 2005 à 20:19:12

Oui, mais de toute façon, vertical-align ne s'applique que sur les cellules d'un tableau.

Ici, c'est la propriété line-height qu'il faudrait utiliser.

headbanger

29 décembre 2005 à 21:29:09

il y a un truc sur alsacreations mais je le retrouve plus dans mes favoris

edit : merci julfisher

JulFisher

29 décembre 2005 à 21:33:45

Tiens, tu as ta propriété définie ici : http://wiki.media-box.net/documentation/css/vertical-align

Pour bigjake

: http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Centrer-les-elements-ou-un-site-web-en-CSS

MisterJ

2 janvier 2006 à 19:37:18

Merci à tous pour vos réponses !

Spikinyx, je me suis simplement trompé de menu, quand j'ai voulu faire un screenshot, en faite se serait été Tutoriaux. Bref, ça n'a aucune importance tout ça parce qu'en faite que se soit Tutoriaux ou Portfolio, TOUT mes menus sont du pareil au même !
Strucky, j'ai pris la même formule css du Site du Zero pour faire mon fichier css et je l'ai transformé un peu en l'image que je voulais donner a mon site en gardant les mêmes propriétés tel que la propriété : vertical-align. Alors s'il aurait fallu utiliser la propriété line-height je crois que le SdZ l'aurait fait aussi.
Boss_Evo, j'ai testé ta réponse. C'est à dire de mettre la proriété vertical-align à top ou middle, mais le résultat est le même !

Alors, je me suis donc résigné à mettre mon texte en vertical-align parce que sans AUCUN MOYEN j'ai réussi à le placer centré.

Ce que j'ai fait pour régler ce problème: C'est que j'ai enlevé la propriété vertical-align et j'ai mi les propriétés padding-top et padding-bottom à 3px. Alors sa fait une impression d'être centré.

#menu h5
{
height: 22px;
margin: 0;
padding-top: 3px;
padding-left:10px;
padding-bottom:3px;
color: #FFFFFF;
background-color:#F4F9FD;
background:url('images/header1.png') repeat-x;
border:1px solid #2C485C;
font-family:'Trebuchet MS', Arial, 'Times new roman', Times, serif;
font-size:18px;

Pouvez-vous me le dire si cela risque de faire brisser mon site ?

Si vous avez d'autres idées à me donner qui pourrait arranger ce problème d'une autre façcon dites moi le ! Parce que j'aurais voulu mettre mon texte non seulement centrer mais cote-à-cote a mon image !

strucky

3 janvier 2006 à 18:55:50

Citation : MisterJ

Strucky, j'ai pris la même formule css du Site du Zero pour faire mon fichier css et je l'ai transformé un peu en l'image que je voulais donner a mon site en gardant les mêmes propriétés tel que la propriété : vertical-align. Alors s'il aurait fallu utiliser la propriété line-height je crois que le SdZ l'aurait fait aussi.

Si, la propriété line-height centre bien le texte verticalement :

La preuve :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>

<p style="width: 250px; height: 60px; background: #c0c0c0; text-align: center">
Texte non centré verticalement.
</p>

<p style="width: 250px; height: 60px; line-height: 60px; background: #c0c0c0; text-align: center">
Texte centré verticalement.
</p>

</body>
</html>