28172 sujets

CSS et mise en forme, CSS3

[Résolu]Alignement vertical

Bonjour,

Tout d'abord, je tiens à préciser que j'ai effectué des recherches préalables afin d'essayer de résoudre mon problème, mais en vain.
Cela m'a tout de même permis de comprends pourquoi l'attribut "vertical-align" ne marche pas.
Mon problème est le suivant, je possède une "div" qui occupe toute la hauteur d'une page qui se trouve sur la partie droite de ma page. Je souhaite qu'un texte se trouve en bas de cette page. Cependant, il faut que cela soit fait dynamiquement en fonction de la taille de la fenêtre (line-height ne marche donc pas). Les attributs margin-top et padding-top ne fonctionnent pas non plus, en rétrécissant la fênetre, la div ne se rétrécit plus et garde une taille fixe. J'ai également déja essayer les attributs "position: absolute; bottom: 0" sans succès.


Voici une partie du code pour y voir plus clair:

<div id="right">
<div class="menu">
<p>blabla</p>
<p>blabla2</p>
</div>

<!--Texte à placer en bas-->
<p class="footer">Test</p>
</div>




#right
{
	background-color: black;
	float: right;
	height: 100%;
	width: 200px;
}

.footer
{
	text-align: center;
	font-size: 11px;
}


Merci d'avance.
Modifié par Plout (21 Jun 2011 - 18:05)
Dommage d'utiliser un tableau. C'est loin d'être propre.

La réponse était dans le tutoriel que je t'ai donné : chapitre sur le positionnement absolu.
En effet, ce n'est vraiment pas propre avec un tableau, je viens d'utiliser "position: absolute" et "bottom: 0px" et cela marche bien mais il reste un problème avec cette solution. Quand je rétrécis la fenêtre, au lieu de pousser les éléments en haut, le texte du bas se superpose au reste...
Tu peux ajouter un padding en bas de ta colonne qui soit de la même hauteur que ton bloc footer (voir un peu plus si tu veux de l'espace entre le bloc et le contenu de la colonne).
Sujet clos
Aller à