Bug de mise en page qui disparait en actualisant...

Bonjour a tous,
j'ai un probleme de mise en page, mais je ne suis meme pas certain qu'il vienne d'une erreur dans ma feuille CSS...
En effet j'ai opté pour une mise en page ainsi schematisée :



mais quand on arrive sur le site, la partie #menu (à droite en vert) passe sous la partie #zonetexte (à gauche en fuschia).
Ce qui est étrange et me fait douter que ce soit un probleme de CSS est que l'alignement correct se rétablit dès que l'on actualise la page dans le navigateur.

J'ai mis beaucoup plus d'informations sur la page d'accueil du site en question : http://artoffillusion.free.fr/artoffillusion_accueil.php
(je vous fais grace de l'image d'accueil inachevée ) .
Vous pourrez y trouver aussi l'ensemble du code sous forme de zip.

j'ai vraiment besoin d'un coup de pouce, jusqu'a maintenant j'ai reussi a me debrouiller tout seul en lisant quantité de tutos et de posts (merci beaucoup à leurs auteurs au passage, Alsa, OpenWeb et le Site-du-Zero pour citer ceux qui m'ont le plus servi) mais je suis encore ingnorant de beaucoup de choses... et là je sèche monstrueusement

"Allez, c'est bientot Noel quoi... un bon geste ... j'y crois a mort !"
TchaO tout le monde

PS : voui je sais... "il est un peu kitch le site oueb du mossieur" vous me direz
edit : bizarre le lien ne fonctionne pas, l'adresse est pourtant correcte...
edit 2 : ca devrait marcher la, merci Raphael
Modifié le 14 Dec 2004 - 12:35

Bebair a écrit :

edit : bizarre le lien ne fonctionne pas, l'adresse est pourtant correcte...

Salut,

As-tu commencé par lire l'Aide du forum, et plus particulièrement le point "12- Liens et URL dans le forum" ?

Attention à la compatibilité ! (j'ai vu des "display:table" etc. qui ne valent rien de bon à mon humble avis)

Fait aussi un tour sur :
http://www.alsacreations.com/articles/cellules/

Salut,
j'ai eu le même souci que toi, j'ai posté à ce propos d'ailleurs, mais personne n'a pu faire avancer la chose... ce truc bizarre reste à élucider.

http://forum.alsacreations.com/topic.php?fid=4&tid=559&s=

/Edit/
Je rajoute d'ailleurs que le rafraichissement de la page ne règle pas le problème, si tu rafraichis la page plusieurs fois, tu devrais avoir un coup tout calé un coup décalé, de façon aléatoire....
Modifié le 14 Dec 2004 - 12:48

Salut,
merci de vos réponses tout d'abord... à leur lumière il apparait évident que le problème vient en effet des "display : table;" et "display : table-cell;" ... chose dont je n'étais pas certain du tout... au début je pensais à un probleme d'image qu'il aurait fallu précharger ou quelque chose du genre, piste vite abandonnée...

g41687 --> j'avais deja lu et testé l'article que tu me conseilles... Malheureusement cette technique quoique souvent utile, presente un inconcénient (majeur dans mon cas) :
Seule la partie centrale est capable de pousser les colonnes vers le bas (voir le second exemple de l'article)
De plus la couleur du fond et celle des deux menus doivent etre les memes. Bon c'est vrai qu'on peut s'en accomoder facilement dans la plupart des sites, je chipote un peu là. J'imagine qu'avec un background transparent pour les deux menus latéraux et une image de fond judicieusement conçue en background du bloc conteneur, ça doit donner un aspect tres correct.

Mon probleme vient du fait que sur mon site, le menu de droite peut changer de taille en fonction du choix que fait l'utilisateur pour ouvrir ou rétrécir les sections du menu. Je voudrais donc que la hauteur de la partie centrale du site soit fixée par la hauteur du menu si elle dépasse celle de la zone de texte, et réciproquement. Dans l'exemple que tu me cites, si la zone de menu est plus grande alors elle déborde sur la zone de pied en la chevauchant.
En plus je me sers de ce site perso, comme sorte de brouillon pour un site plus important, et j'aimerai pouvoir faire une présentation modulable qui pourrait contenir 3 colonnes (voir plus eventuellement) toujours avec cette restriction sur les hauteurs ajustées entre elles.

cktoon --> je suis allé voir les topics Display:table instable et [Comportements étranges] Mise en page 2 colonnes de même hauteur.
C'est tout a fait le même problème que le mien, toutes les remarques et suggestions vont me permettre de gagner du temps en évitant des tentatives inutiles.

Le coup du bug qui apparait quand tu inseres la ligne

a écrit :

<body>
<div id="top">Nouvel élément</div>
<div id="conteneur">
<div id="gauche">ma colonne de gauche</div>
<div id="droite">ma colonne de droite</div>
</div>
</body>

me laisse songeur... c'est peut etre une piste

Je précise que j'ai aussi consulté les liens suivants :
Blog & Blues : Des colonnes de même hauteurs en CSS
Alsa Blog : 22-display-vous-connaissez

Ironie de la chose, ça fonctionne sous IE et la "dégradation acceptable" dont parle l'auteur de Blog & Blues devient le moindre de mes soucis actuels... puisqu'au moins le menu reste à gauche ! Du coup je m'interroge pas mal au sujets des standards et de leur respect dans les navigateurs récents tels Firefox...
Regardez la compatibliité de "display" sur l'altruiste et sur la doc Css de Mediabox.

Je vais finir par utiliser le vieux <table> même si je vous entends d'ici crier a l'hérésie en atendant je continue a tester sur mon site et vous pouvez toujours venir y jeter un oeil, j'y ajoute des remarques etc assez souvent.

Une idée, un conseil, une remarque, une question...? lachez vous

Jette aussi un oeil sur:
http://www.alistapart.com/articles/fauxcolumns/

Courage ! On y arrive tous (petit à petit)

je ne vois pas vraiment la différence avec le tuto de Raphael : Des Cellules "étirables" (CSS) que tu m'indiquais la dernière fois... c'est la même méthode non ? Je ne suis pas certain de saisir tout ce que l'auteur dit dans ce passage :

a écrit :

Whatever floats your boat

While I use absolute positioning to create a two-column layout on my own site, equally fine results can be achieved via the float property (as seen here at ALA).

The same idea applies: tile the background image, then float a column in position to overlay the faux-column backdrop behind.

... en particulier comment fait-il pour afficher la zone de "pied de page" ???
j'avoue que j'ai encore un peu de mal (voir beaucoup) à assimiler les comportements des positionnements 'absolute', 'relative' et autres 'float'... je relis les tuto, mais j'ai du mal à imprimer en quelques sortes.. . C'est quand même curieux de la part de l'auteur de ne pas donner un exemple concret de feuille CSS, ya juste une ligne pour centrer son image (en plus ça c'est fastoche )... la vraie astuce c'est de rajouter le pied de page... il ajoute un <div> avec "float" ? mais "left" ou "right" ? et comment il fait "l'overlay" ?
... bon en attendant avec les <table> ça marche sans soucis sous IE, Moz et Firefox même si c'est pas du Xhtml

ceci dit.. Merci a toi de te pencher sur mon probleme et de me conseiller