CSS : mettre en bas au milieu [RESOLU]

[arno.]

Bonjour, j'ai une page html avec pas grand chose au mileu et il y a une phrase que j'aimerais bien mettre en bas au milieu.
Donc j'ai:

Code : Tout sélectionner

<div class="zorgy">Une phrase que je veux mettre en bas au mileu</div>

et dans mon fichier de css, si je mets

Code : Tout sélectionner

.zorgy {
text-align:center
}

alors là c'est super, j'ai mon texte centré.
Si je mets

Code : Tout sélectionner

.zorgy {
position:absolute;
bottom:10px;
}

c'est super aussi j'ai mon texte en bas de la page.
Par contre si je mets les deux à la fois, c'est pas super du tout parceque j'ai le texte en bas, mais pas centré (comme si text-align ne marchait pas). J'ai pas mal cherché sur google, mais je n'ai rien trouvé qui puisse m'indiquer une piste. Si quelqu'un a une idée, pour m'aider, ce serait sympa.

[Express]

Et si tu met un conteneur et qu'à l'interieur de celui-ci tu place ta div enbas de celui-ci ex :
div.conteneur {
margin: 1em 1%;
background-image: url(XXXXXXx.png);
background-repeat: no-repeat;
top: 1em;
}
div.maj{
width:800px;
height: 10px;
margin-top: 0.1%;
font-family: "Maiandra GD";
text-align: center;
font-size: 16px;
}
Un truc de ce style .............

[Bobe]

C'est parce qu'en faisant un positionnement en absolue, le div ne prend plus toute la place disponible en largeur, mais seulement la place nécessaire à son contenu.

Essaie plutôt avec un positionnement relatif.

[arno.]

merci beaucoup, j'ai essayé de comprendre un peu ce que vous me disiez, mais je n'ai pas réussi à faire quelque chose de potable. Finalement, je m'en sors en mettant margin-top:45% Enfin bon, je crois bien que c'est pas super. J'aurais du le faire en .doc ce truc, ça aurait été plus simple (edit: ah bah non en fait, c'est pas si compliqué que ça les css )

[Bobe]

En fait, ma réponse était erronée, d'une certaine façon.
Pour me racheter, j'ai fait quelque chose de fonctionnel ici:
http://dev.webnaute.net/BAS/box-on-bottom [URL sans garantie de permanence]

Le principe est de profiter de la règle CSS suivante:

Si une boite est positionnée en absolue, c'est par rapport au viewport (l'élément racine du document, ici html), sauf si cette boite est un descendant d'une boite elle-même positionnée (que ce soit en absolu, relatif, ou fixe).

Donc ici, le div#test est en positionnement relatif, mais on ne le décale pas. et le div contenant le texte est positionné en absolu par rapport à div#test, en vertu de la règle que j'ai donné plus haut. Il suffit donc de le positionner avec bottom: 0; pour qu'il se trouve en bas de div#test.

http://www.yoyodesign.org/doc/w3c/css2/ ... ck-details

[arno.]

Waôu.
Je commence à y voir de plus en plus clair. J'ai compris le princip de boites un peu. Merci beaucoup pour toutes ces explications et ces liens. Ben finalement, j'ai même plus besoin de div imbriqués. Je fais:

Code : Tout sélectionner

.zorgy {
position:absolute;
bottom:10px;
text-align:center;

width:100%

}

Ca a l'air de marcher
merci beaucoup

[Bobe]

Ah ok. En fait, j'avais mal interprété le problème au départ

P.S: les propriétés sont séparés de leur valeur par un deux points, pas par un signe égal

[arno.]

Ah ok. En fait, j'avais mal interprété le problème au départ

Ah pardon. Bon c'était assez simple en fait, mais comme ça, j'ai compris le principe des div.

P.S: les propriétés sont séparés de leur valeur par un deux points, pas par un signe égal

oui je sais, c'est une coquille en recopiant, je corrige.

[Invité]

(...)

Code : Tout sélectionner

.zorgy {
position:absolute;
bottom:10px;
text-align:center

width:100%

}

Ca a l'air de marcher
merci beaucoup

Ce serait encore mieux avec des ";" à la fin de text-align: center;
Je raconte p't-être des colles mais régulièrement mes css sont interpretées de manière incomplète car il manque ce précieux séparateur (qui est facultatif pour la dernière ligne seulement, si je n'm'abuse ?)

[arno.]

ah oui merci, je sais aussi ça. J'avais décidemment fait plein d'erreurs en recopiant. Je corrige encore alors.

[arno.]

Je crois que j'y suis arrivé.
Merci à tous

[Mirovinben]

La solution à ton pb était effectivement dans le width=100% car la demande de centrage n'est interprétable que si la largeur est connue.

Mais j'arrive après la "bataille"...

[poof65]

Woah trop fort je savais pas qu'on pouvais positionner un élement avec "bottom" , décidement je suis à la rammasse moi