Positionnement bottom

Bonjour,
je ne trouve pas la bonne solution de positionnement css pour du texte dans une colonne.
Imaginons un design classique à deux colonnes (par exemple comme ça). Dans la colonne droite je souhaite placer un petit texte tout en bas de la colonne, visuellement distinct du contenu général de cette colonne. Je voudrais que ce soit le cas évidemment quelle que soit la longueur de la page, ce texte devra toujours se trouver en bas de cette colonne. Et je n'y arrive pas. Je ne trouve ni la bonne commande css (padding-bottom ? margin-bottom ?), ni comment l'insérer convenablement dans la feuille de style.

C'est un lien; J'ai essayé de donner une class au lien, par exemple bottom_right
Dans la feuille :

.bottom_right {
 padding-bottom:10px;
}

ou encore référé au conteneur :

#right_side a.bottom {
 padding-bottom:10px;
}

bof bof ...

Salut,

Ce n'est pas si évident que cela puisse paraître, il va falloir émettre au moins une restriction un peu contraignante pour y parvenir: prévoir à peu près la hauteur que prendra ton texte situé en bas de la colonne de droite.
Dans l'exemple qui suit, j'ai évalué arbitrairement sa hauteur à 5em:

[#black][b]HTML[/b][/#]

<div id="wrap">
	<div id="content">
		<div id="main">
			Je suis le contenu principal.
		</div>
		<div id="sidebar">
			Je suis la colonne latérale.
			<p id="footNote">Je suis un texte situé en bas de ma colonne.</p>
		</div>
	</div>
	<div id="footer">
		Je suis le pied de page.
	</div>
</div>


[#black][b]CSS[/b][/#]

div,body {margin:0}
html,body {height:100%;}
#wrap {min-height:100%; position:relative; width:770px; margin:0 auto;}
#content {padding-bottom:4em; overflow:auto;}
#main {float:left; width:500px;}
#sidebar {padding:0 0 6em 500px;}
#footNote,#footer {position:absolute;}
#footNote {bottom:4em; height:5em;}
#footer {bottom:0; width:100%; height:3em;}

Bonjour,

Une petite révision du modèle de boite CSS s'impose, je crois (parce que bon, padding-bottom ça n'a strictement rien à voir avec ce que tu veux faire...).

Une solution pourrait être de positionner ce lien en absolu par rapport à un conteneur positionné en relatif.

Florent V. a écrit :

Une solution pourrait être de positionner ce lien en absolu par rapport à un conteneur positionné en relatif.

… et mon message, il sent pas bon?

Benjamin D.C. a écrit :
… et mon message, il sent pas bon?

Je l'avais pas vu (pas rechargé la page avant d'écrire).

Deux petites choses:
- j'aurais utilisé div#content comme référent positionné en relatif plutôt que div#wrap;
- je n'ai pas compris du message de JJJ qu'il souhaitait une mise en page en min-height: 100%.

Florent V. a écrit :

Je l'avais pas vu (pas rechargé la page avant d'écrire).

Ah d'accord, pas de soucis.

Florent V. a écrit :

- j'aurais utilisé div#content comme référent positionné en relatif plutôt que div#wrap;

Ah oui, c'est bien aussi.

Florent V. a écrit :

- je n'ai pas compris du message de JJJ qu'il souhaitait une mise en page en min-height: 100%.

Vu le modèle de mise en page qu'il a lié, j'en ai déduis que cette fonctionnalité lui paraissait intéressante, mais je peux me tromper!

Bonjour,
merci pour vos feedback.

J'ai tenté plusieurs solutions, sans vraiment être sûr que ça corresponde à ma config css.
D'abord j'ai essayé la première solution de ce topic, ensuite je me suis orienté vers les notions de postionnement relatif de l'ancêtre et relatif du conteneur à pousser au bas, qu'on trouve entre autre ici et dans cette faq.
Au final, soit j'ai un texte chevauchant le contenu supérieur du conteneur (en l'occurrence un menu listé verticalement), soit j'ai ce texte effectivement en bas du contenu supérieur mais pas vraiment poussé jusqu'au bas du conteneur.

Il m'a semblé pourtant que donner une valeur 0 à bottom sur un élément, qu'il soit un DIV ou un ID, ne pouvait pas aboutir à autre chose. Pourtant j'ai bien donné une valeur de positionnement relative au #conteneur ancêtre.
Je patauge !

Voilà l'essentiel de ma feuille de style concernant notre affaire :

#right_side {
  position: relative;
  margin-top:5px;
  float: right;
  width:160px;
  border:0px dashed #cccccc;
}

#right_side p {
  margin-top:0px;
  margin-bottom:15px;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #666666;
  line-height: 16px;
  padding-left:4px;
}

#bas {position: absolute; bottom: 0;}

JJJ a écrit :

D'abord j'ai essayé la première solution de ce topic, ensuite je…

Pourquoi y a-t-il un "ensuite"?
As-tu essayé le code que je te propose?

oui, j'ai donné un ID footNote au <p> et j'ai ajouté les commandes de ce footnote au css. Le résultat en fait est celui que je décris plus haut, le texte contenu par ces balises se retrouve bien soous le contenu principal du conteneur parent, mmais pas complètement en bas.
(à la différence près que j'ai donnée une position relative au sidebar, et non au conteneur le plus général wrap; est-ce une erreur ?)
Modifié par JJJ (26 Nov 2007 - 20:16)

JJJ a écrit :

(à la différence près que j'ai donnée une position relative au sidebar, et non au conteneur le plus général wrap; est-ce une erreur ?)

Oui. Le sidebar ne va pas jusqu'en bas de ce qui, visuellement, est ta colonne. Il ne prend que la hauteur de son contenu. Tu peux le constater en lui donnant une couleur de fond bien voyante (background: red;).

D'où l'intérêt d'utiliser div#wrap ou div#content comme référent pour le positionnement absolu.

Bonjour,
effectivement mon positionnement est maintenant correct Merci Il me faut mettre 0 à la propriété bottom pour l'avoir effectivement tout en bas; toute valeur supérieure ramène la chose hasardeusement au milieu du conteneur.

Dernier souci : sous IE6, le texte est inexistant, disparu, volatilisé

JJJ a écrit :
Il me faut mettre 0 à la propriété bottom pour l'avoir effectivement tout en bas; toute valeur supérieure ramène la chose hasardeusement au milieu du conteneur.

Théoriquement, un bottom: 20px devrait placer le bord inférieur de l'élément positionné en absolu à 20px du bord inférieur du bloc qui sert de référent.

JJJ a écrit :
Dernier souci : sous IE6, le texte est inexistant, disparu, volatilisé

Page en ligne?

Oui, il faut pour celà que je règle d'abord un problème d'optimisation de menu horizontal...

Florent V. a écrit :

Théoriquement, un bottom: 20px devrait placer le bord inférieur de l'élément positionné en absolu à 20px du bord inférieur du bloc qui sert de référent.


Page en ligne?

Un exemple

Sous IE 6, le lien 'haut de page' disparaît

Et puis je viens de me rendre compte d'un truc terrorisant, sous IE 7 (que je viens d'installer en standalone), je n'ai plus du tout de contenu en corps de page

Bonjour,
je reviens sur mon bug sous IE7. Je l'ai en standalone. Ceux qui l'ont sous d'autres config peuvent-ils me confirmer que le contenu de page n'y apparaît pas sous ce naviguateur ? En vous remerciant par avance.
Et si vous comprenez pourquoi ça tourne sous IE6 et firefox et pas sous IE7, je suis preneur. Logiquement ça vient d'autre chose que du contenu de corps de page, puisque ca se produit sur toutes les pages quel que soit le contenu. C'est donc soit mon conteneur horizontal soit mon menu vertical, soit mon pied de page, mais après...