Version complète: sur le forum Webmaster Hub : Position absolute
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
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
CODE
<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 smile.gif

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 wink.gif
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 smile.gif
Striker
Les liens sont tres interressant, j'aurait surement du commencer par chercher sur le forum du Hub wink.gif
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 smile.gif
Perrine
CITATION(Striker @ vendredi 18 mars 2005, 15h09)
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.
*


Oops, oui quelle nulle tongue.gif
Désolée, j'ai pas du tout fait gaffe blush.gif

CITATION
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 wink.gif
Striker
CITATION(Azon @ vendredi 18 mars 2005, 19h17)
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 wink.gif
*

Ce serait pas la recommandation 10.3 tongue.gif
Et effectivement elle règlerais le problème.
Merci pour le lien. smile.gif

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 smile.gif
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 ( hypocrite.gif ) 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. smile.gif

Merci à tous de votre aide.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.