Décalage étrange sous firefox

[Cleden]

Bonjour,

Hier, j'ai été pris par une soudaine envie de simplifier à fond la forme d'un de mes sites.

Tout marche à peu près correctement ormis une chose.

J'ai une sorte de décalage. Des éléments du contenu de droite semblent être influencé par le menu de gauche. Ces décalages sont visibles sur les pages:

- http://www.cleden-cap-sizun.com

- http://www.cleden-cap-sizun.com/ccs-bibliographie.htm

- http://www.cleden-cap-sizun.com/ccs-villages.html

Désolé si la réponse vous simple évidente, je ne suis pas un expert en CSS et me contente généralement de copier et de modifier des choses trouvées sur d'autres sites.

Merci d'avance,

Loïc.

[Perrine]

Bonjour Cleden

Je suis pas sure de ce que je vais dire mais je pense que ça vient des div spacer et leur clear:both que tu as mis après le div #newsd sur l'index et après chaque div présentant les villages.

Par défaut un div est un bloc donc chaque élement positionné après le div sera à la ligne suivante, tu n'as donc pas besoin d'un clear:both pour passer à la ligne. Sinon, je ne vois pas pourquoi tu as utilisé le clear:both ici.

J'espère que ça pourra t'aider

Edit : J'avais pas fait attention que le problème ne survient que dans FF. Sous IE, pas de souci.

Essaie aussi de corriger ton code

Modifié 17 Janvier 2005 par Azon

[Maxim]

c'est un des principals problèmes du positionnement flottant.

Tu positionnes ta barre verticale de menu avec un float: left;

En general, c'est bien, mais ça veut dire exit (sauf exceptions) le positionnement flottant pour le contenu ! Car un seul emploi de clear: left ou both te renvera forcement en bas de ton menu !!! Il vaut donc mieux etre bien sur de ne jamais a avoir a employer de clear ! (sauf le right car toi, tu na pas de menu positionné a droite)

Malheureusement on ne peut pas specifier de niveau de clear, un peu comme un break; dans une boucle en php par exemple : break(2); sortira de 2 boucles et pas plus !

A qd css3 pour resoudre cela... ?

Alors, ce que tu peu faire comme tu n'as que deux "colones", c'est de positionner le cadre de contenu en float right ainsi, plus ce probleme.

De plus, sémantiquement, cela te fera placer le contenu avant le menu dans le html, et c'est mieux, enfin, je trouve. (Le menu etant qd mm assez secondaire)

Sur mon site, j'ai deux barres de menus, donc cette option part un peu a l'eau, enfin fodra que je réétudie la question qd j'aurai du temps. Du coup je suis passé en positionnement absolu pour les menus lateraux autour du contenu. Mais, un petit problème survient ! Qd le contenu est plus court que les menus, et ben les menus depassent en bas, le bas de ma page s'allignat avec le bas du contenu ! Je suis obligé de specifié un <p style="margin-bottom: XXXpx"> </p> different en bas de chaque page ou le problème se pose !! (en ne parlant pas des calculs que je dois faire dans le cas de page dynamiques dont la taille peut varier du simple à l'octuple !)

A qd une propriété relative genre :

#unediv { minheight: #autrediv.height; }

Vivement css 3 !!!!!!!

[Cleden]

Merci à vous deux, grâce à vos réponse, je suis parvenu à résoudre mon problème.

Maxim, j'ai mis la colonne de gauche en float: left, désormais tout est en place. J'en ai profité pour placer le contenu avant le menu.

Azon, j'ai corrigé les quelques fautes de syntaxe, uniquement sur la page d'accueil (pour l'instant).

Loïc.