28172 sujets

CSS et mise en forme, CSS3

[résolu]Comment aligner mon texte vers le bas?

Bonjour, je suis en train de faire une page web et j'aimerais bien mettre un menu dans le header mais qu'il soit aligné vers le bas du header (je sais pas si vous comprenez mais bon) et si je met "text-valign: bottom" dans ma feuille de style bah sa marche pas. Voila mon code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link title="style" type="text/css" rel="stylesheet" href="style.css" />
<title></title>
</head>
<body>
<div id="global">
<div class="head">Menu du header que je veux mettre en bas du header</div>
<div class="body">Contenu de la page</div>
</div>
</body>
</html>


et ma feuille de style css:
body {
text-align: center;
margin: 0;
background-color: #eeeeee;
font-family: Tahoma, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
font-size: 0.8em;
}
#global {
margin-left: auto;
margin-right: auto;
width: 750px;
}
.head {
background-image:url(head.jpg);
width:750px;
height:100px;
text-align: center;
}
.body {
width:750px;
height:500px;
text-align: center;
background-color: #ffffff;
}


voila je remercie tout ceux qui m'aideront pour ce petit problème.
Modifié le 01 Dec 2004 - 14:33
En utilisant margin-top: value; tu peux arriver à "pousser" ton menu vers le bas. Mais si tu as une image en background, alors tu utilises padding-top (la hauteur de l'image) à la place. La propriété height devient alors inutile.
Modifié le 01 Dec 2004 - 14:08
Administrateur
Personnellement, je :
- positionnerais le header en relatif
- positionnerais le texte en absolu avec un bottom : 0.

(à tester)
merci à vous 2 parce que sa marche, j'ai utilisé la méthode de Stephan parce que je n'ai pas trop compris celle de raphael mais bon merci qd meme.
bonjour

je tentes de faire l'exemple que j'ai lu pour l'appliquer à #header mais je n'y suis pas parvenue, parcontre quand j'applique padding-top: 10px;
je ne touche ni à margin top ni a mes blocs en relatif ou en absolu...seulement mon texte est en bas est-ce la bonne methode ?


#header {
background-image: url(image/header.gif);
background-repeat: repeat-x;
list-style-type: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #FF9900;
height: 35px;
padding-top: 10px;
background-position: -25px 0px;
}

merci
Sujet clos
Aller à