Question de positionnement

Voila j'ai une page qui a la structure suivante :


En gros j'ai une div qui en contient trois autres. Le site a été développé en statique, charge à moi de rendre le contenu dynamique. Je me heurte à un petit soucis, en effet, la div rouge du milieu est d'une longueur non fixe, pourtant, le lien à gauche et les deux autres à droite doivent se trouver au niveau de la derniere ligne de cette div, quelque soit sa longueur.
Existe t'il donc une maniere de faire en sorte que le lien "colle" au fond de la div ?
Modifié par Beleg (09 Aug 2007 - 09:46)

Bonjour aussi...

Beleg a écrit :
Existe t'il donc une maniere de faire en sorte que le lien "colle" au fond de la div ?

Oui, en utilisant le positionnement absolu par rapport à un conteneur positionné en relatif.

Un peu de lecture:
http://openweb.eu.org/articles/initiation_absolue/
http://web.covertprestige.info/test/12-positionnement-absolu-selon-conteneur.html
Modifié par Florent V. (06 Aug 2007 - 18:21)

Merci pour ta réponse Florent, je vais potasser ces quelques documents cet après midi

Have a nice day !

Ca fonctionne, merci enormement

Bonjour,

En fait non ce n'est pas résolu
l'affichage est parfait sous firefox, mais sous ie6, le contenu positionné en absolu est décalé à droite loin, très loin de la ou il devrait être

Je crois que ca correspond au bug qui est décrit ici :
http://www.test.blog-and-blues.org/haslayout/tests/absolute1.html

Ce que je ne comprends pas dans cet article, c'est qu'il est dit qu'il suffit de fixer le "layout" par exemple par le biais d'une balise width dans le conteneur positionné en relatif, hors j'ai bien défini un width:800px; dans ce conteneur.

Pourriez vous m'éclairer sur ce petit problème ?

Pour info les conteneurs concernés :
Le conteneur :

#contenu{
	position:relative;
	zoom:1;
	float:left;
	width:800px; /* ici je créé bien un layout ? */
	margin:15px 0 30px 0;
}

La position absolue :

 ul#liensDroite{
 	padding-left:640px;
	position: absolute;
	bottom:0.1em;
	width:164px;
	list-style:none;
	/*margin:90px 0 0 0 !important;
	margin:96px 0 0 0;*/
}

Merci,
Modifié par Beleg (09 Aug 2007 - 10:17)

Hello,

Si j'en crois ton code:

 ul#liensDroite{
 	padding-left:640px;
	position: absolute;
	bottom:0.1em;
	width:164px;
	list-style:none;
}

Tu places le bord inférieur du bloc (propriété bottom, mais aucun des bords latéraux. Bref, il te faudrait probablement un peu de left: 0px, right: 0px, ou autre valeur.
Par ailleurs, le padding de 640px me semble superflu, voire casse-gueule. Non?

Pour le HasLayout sur div#contenu, il est même en triple:
- la propriété width avec toute autre valeur que "auto": HasLayout;
- la propriété zoom: HasLayout;
- la propriété float avec toute autre valeur que "none": HasLayout.

Oui le problème venait de la, je placais le bord droit a l'aide du padding, ce qui fonctionne sous firefox mais n'est pas pertinent comme tu le fais justement remarquer.
Ca semble fonctionner maintenant, un des (nombreux) bugs ie/ff que j'ai est résolu, merci bien

Question innocente.
Reprenons mon image ci dessus (bon faut l'imaginer bien positionnée)
Imaginons qu'au dessus de liens, j'ai un autre ul qui contient une liste de breves.
Imaginons que le texte de la zone centrale est moins long que les breves, on va donc logiquement avoir un chevauchement entre les breves et les liens.

CSS permet il d'eviter cela ? C'est à dire, que la zone de lien soit collé au bas du texte, mais que si la liste de breves devient trop longue, alors celle-ci "pousse" le lien plus bas ?

Beleg a écrit :
CSS permet il d'eviter cela ? C'est à dire, que la zone de lien soit collé au bas du texte, mais que si la liste de breves devient trop longue, alors celle-ci "pousse" le lien plus bas ?

Si tes liens du bas sont positionnés en absolu, ils ne seront repoussés par rien. C'est le principe du positionnement absolu.

Cependant, on peut ruser. Si tu sais que ton bloc de liens positionné en absolu aura une hauteur donnée (et même si c'est variable, disons que tu l'estimes à 100-150px), tu peux donner un padding-bottom au conteneur, ou un padding-bottom ou margin-bottom (en faisant attention à la fusion des marges) à la liste de brèves. Bref, tu ménages un espace qui restera toujours vide, disons de 150px de haut, où ton bloc positionné en absolu viendra se loger.

Est-ce que l'explication est claire?

Si besoin, un exemple:

[b]HTML:[/b]
<div id="conteneur">
<div id="machin1">...</div>
<div id="machin2">...</div>
</div>

[b]CSS:[/b]
div#conteneur {
position: relative;
width: 300px;
padding-bottom: 150px;
}
div#machin1 { /* rien de spécial, positionnement statique... */ }
div#machin2 {
position: absolute;
bottom: 0;
left: 0;
width: 250px;
max-height: 140px;
overflow: auto;
}

Bon, pour le max-height et le overflow: auto, j'avoue que j'en rajoute un peu...