Position absolute

[Striker]

Bonjour à tous,

J'aurait voulu savoir si il était possible de forcer la taille d'un bloc contenant par rapport à un bloc en position: absolute

Pour que vous visualisiez mon problème, voici une partie du code HTML

<div id="page">	
   <div id="column-content"></div>
   <div id="column-left"></div>
   <div id="column-right"></div>
</div>

Je n'ai indiquer que les blocs et non leur contenu.

page : correspond au bloc qui donne un background différent de celui du body et qui décale le contenu des bords du navigateur

column-content : bloc de contenu qui est centrer

column-left et column-right : colonnes contenant le menu et situer à droite et à gauche du bloc de contenu. Les deux blocs sont en position: absolute

Mon problème :

Lorsque le menu de droite ou de gauche est plus important que le bloc de contenu, les menu débordent du bloc page.

Voici un exemple avec un menu à droite sur un autre site que le mien :

http://openweb.eu.org/articles/test/

Existe t il une solution à cela ?

J'avais penser utiliser des blocs en float mais le problème est que lorsque le contenu central est plus garnd que les menu celui ci vient s'aligner sous le menu de droite... comme c'est le cas pour n'importe quel float

Merci pour votre aide.

PS : je suis en train de refaire mon site aux standards (c'est pas trop tôt !) donc je travail en local. C'est pour cette raison que je vous donne un exemple de mon problème qui est visible sur un autre site.

[Perrine]

Salut Striker

La page vers Openweb tombe sur une 404.

Ta mise en page utilisant 3 colonnes, tu trouveras de nombreux tutoriaux sur le net pour les réaliser.

Au hasard, Monique en parle sur un post et le tutoriel est accessible depuis cette page

J'espère que c'est ce que tu cherchais

[Striker]

Merci de ta réponse,

J'utilise Firefox et c'est justement la page 404 de Openweb qui bug.

J'ai le menu de droite qui déborde du cadre blanc. Et c'est justement ce problème que je rencontre.

Je vais regarder les liens que tu m'a donné mais me suis pas mal documenter avant de poster donc peut d'espoire de trouver une réponse à mon problème, mais on sait jamais

[Striker]

Les liens sont tres interressant, j'aurait surement du commencer par chercher sur le forum du Hub

Je vais tester les propositions de solution avec menu en position: absolute car cela permet de mettre le contenu avant les menu dans le HTML.

Beaucoup plus interessant pour les navigateurs texte et le référencement.

Merci pour la réponse rapide

[Perrine]

J'utilise Firefox et c'est justement la page 404 de Openweb qui bug.

J'ai le menu de droite qui déborde du cadre blanc. Et c'est justement ce problème que je rencontre.

<{POST_SNAPBACK}>

Oops, oui quelle nulle

Désolée, j'ai pas du tout fait gaffe

Je vais tester les propositions de solution avec menu en position: absolute car cela permet de mettre le contenu avant les menu dans le HTML.

Beaucoup plus interessant pour les navigateurs texte et le référencement.

A voir, les avis sont partagés sur ce point mais peut-être que la recommandation 10.2 Accessiweb va mettre tout le monde d'accord

[Striker]

A voir, les avis sont partagés sur ce point mais peut-être que la recommandation 10.2 Accessiweb va mettre tout le monde d'accord

<{POST_SNAPBACK}>

Ce serait pas la recommandation 10.3

Et effectivement elle règlerais le problème.

Merci pour le lien.

Pour ce qui est de la position : absolute je ne vait pouvoir l'utiliser car il n'existe aucune solution pour eviter que les menus ne débordent du cadre qui les contient.

Donc ca va être la solution avec le float que tu a ici

http://www.pixy.cz/blogg/clanky/css-3col-layout/

(le lien vient du topic donnée plus haut par Azon)

Je n'ai pas encore tester, mais j'espère bien avoir la réponse à mon problème avec cette solution

Modifié 18 Mars 2005 par Striker

[artxtra]

Sur Alsacreations, ils conseillent de mettre les div#menu en premier, puis le div#contenu en dernier de manière à ce qu'il garde la priorité dans le flux (..comme il est le dernier à être lu).

L'autre astuce est de passer par un min-height="100%" pour 100% de la fenêtre du navigateur (à regler selon besoin perso) ou un height="auto", mais c'est vrai que c'est casse-bonbon ( ) comme pb !

[Striker]

J'ai résolu mon problème en utilisant le float sur les 3 colonnes qui sont menu1, contenu, menu2

Mettre les 3 colonnes en float m'a permis de respecter la recommandation 10.3 Accessiweb qui conseil d'avoir au niveau du code le même ordre d'apparition qu'au niveau graphique.

Je suis content de voir que j'était sur la bonne voix avec le float, je m'était tromper sur la facon de faire du cleaner pour maintenir les 3 colonnes.

Merci à tous de votre aide.

Modifié 27 Mars 2005 par Striker