Page 1 sur 1
CSS : mettre en bas au milieu [RESOLU]
Publié : 20 janv. 2005, 19:06
par 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
alors là c'est super, j'ai mon texte centré.
Si je mets
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.
Publié : 20 janv. 2005, 19:20
par 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 .............
Publié : 20 janv. 2005, 19:20
par 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.
Publié : 20 janv. 2005, 19:59
par 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

)
Publié : 20 janv. 2005, 20:25
par 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
Publié : 20 janv. 2005, 20:44
par 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
Publié : 20 janv. 2005, 20:48
par 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

Publié : 20 janv. 2005, 20:57
par arno.
Bobe a écrit :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.
Publié : 20 janv. 2005, 21:19
par Invité
arno. a écrit :(...)
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 ?)
Publié : 20 janv. 2005, 21:28
par arno.
ah oui merci, je sais aussi ça. J'avais décidemment fait plein d'erreurs en recopiant. Je corrige encore alors.
Publié : 20 janv. 2005, 21:29
par arno.
Je crois que j'y suis arrivé.
Merci à tous

Publié : 21 janv. 2005, 06:05
par 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"...
Publié : 22 janv. 2005, 03:34
par poof65
Woah trop fort je savais pas qu'on pouvais positionner un élement avec "bottom" , décidement je suis à la rammasse moi
