[Résolu] Positionnement absolu : besoin d'éclaircissement

Bonjour à tous,

Après avoir minutieusement parcouru le site et celui d'openweb, j'ai décidé de me mettre au full CSS.
Dans mon idée, je suis parti sur un modèle proposé sur ce site (largeur fixe, header, menu, footer) avec l'envie d'utiliser le positionnement absolu qui me permettrait d'organiser le code de ma page comme je le voulais.

Je me suis donc mis à la tâche et bien sûr je connais mes premiers problèmes... rien d'étonnant jusque là.

La page en question est sur http://bojo.free.fr/jojo/test/index.htm et montre ce que je veux réalisé en css. j'ai mis un tableau (le code n'est pas propre mais c'est juste pr l'exemple) et la traduction que j'en ai faite en CSS.
et voici donc mes problèmes:

1) comment centrer par exemple en hauteur le rectangle rouge sans utiliser la position relative (j'ai essayé les autres attributs margin-top, ... sans succès)
2) comment insérer du texte en dessous du rectangle vert. ce serait très certainement un bloc <h2>. suis-je obligé de le sortir complètement du flux via l'utilisation de la position absolu ?
3) Derniere question: quand je suis dans un bloc positionné en absolu, le flux à l'interieur de ce bloc se positionne par rapport à ce bloc, c'est bien ca ? (donc positionnement normal ou possibilité de float)

Merci d'avance de vos pistes car même après avoir lu tous les cours, ces thèmes restent parfois encore trop flous
Modifié le 17 Dec 2004 - 12:20

Salut Jojo,

Je t'invite à suivre scrupuleusement la Méthodologie qui se trouve en post-it du salon CSS, tu y trouveras des choses intéressantes.

Pour ce qui est de tes questions :

1) c'est un sujet maintes fois posé ici. Tu trouveras la réponse en utilisant l'outil de Recherche et en cherchant "alignement vertical" par exemple.

2) Si ton texte est un bloc <h2> il ira automatiquement à la ligne, c'est la définition même des éléments de bloc. Inutile donc de lui rajouter un positionnement.

3) "quand je suis dans un bloc positionné en absolu, le flux à l'interieur de ce bloc se positionne par rapport à ce bloc, c'est bien ca ?" --> le flux normal se fait toujours par rapport à l'élément parent, qu'il soit ou non positionné. Par contre, un élément positionné en absolu, relatif ou flottant ne se place pas par rapport à l'élément parent, mais par rapport au premier ancêtre positionné.

J'ai appris quelque chose avec le positionnement par rapport aux ancêtres!
J'ai voulu faire tout ça en pratique mais je me casse un peu les dents
Je voulais faire un système d'infobules - ce n'est qu'un test, inutile de m'incendier parce que le code n'est orienté que sur le visuel . J'ai donc inclu des span dans des liens qui ne prennent un comportement de bloc qu'au survol du lien en question, positionné lui en relative pour positionner le span à 100% du dessus et de la gauche de celui çi, soit à son coin inférieur droit. mais voila, sous msie ça foire, et c'est loin d'être parfait sous mozilla.
Sous msie le :hover fonctionne bel et bien vu qu'il s'agit d'un <a>, mais rien ne se produit, sauf si je retire le positionnement relatif du lien ET l'absolu du span. Sous mozilla le bloc du span ne prends pas en compte le contenu, comme si sa dimension était nulle, alors qu'il contient du texte. Il prends en compte les bordures et le background, mais seulement sur un bloc d'épaisseur nulle et de 1em de haut. Tout fonctionne à merveille avec une image ou quand je donne des dimensions fixe en largeur au bloc, ce qui est pas franchement pratique/esthétique pour les commentaires courts. une valeure "auto" ne change rien.
http://www.mentalwarp.com/~moob/tmp/bulles_lien/
testé avec mozilla 1.8alpha5, msieWin 6.0

edit: je viens de voir que sous firefox il envoyait le bloc bcp plus à droite (d'une distance que j'estime à la largeur du paragraphe contenant...)
Shit happens

ça vous laisse perplexe ou peut-être faut-il que je crée un nouveau sujet? merci de m'éclairer.

Effectivement, si tu crées un nouveau sujet ce sera mieux.

au passage merci Raphael pr les conseils. même si j'avais déjà cherché mais pas assez.

c'est chose faite