28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je me met de plus en plus sérieusement à la mise en page sans table en utilisant un maximum les possibiltés CSS, et en respectant les normes W3C

J'ai fais mon premier essai (un blog) visible ici : http://wynystory.free.fr

Là j'ai laissé des bordes de 1px pour voir les bordures mais c'est juste pour la conception.
Le problème : sous IE, l'affichage est OK, mais sous Firefox, les div qui contiennent les articles se prennent pas en compte leurs contenus Smiley confus et donc l'affichage est complétement flingué Smiley decu

Quelqu'un saurait comment-faire pour arranger ça ? J'ai cherché longtemps et j'ai fais mille tests mais je vois pas d'où vient le problème et surtout si c'est possible de le corriger...

Merci d'avance Smiley smile
Jeremy
Zut, ma réponse détaillée s'est perdue dans un crash généralisée de mon portable. Voici donc, faute de temps pour l'instant, la version brève :

Le comportement d'IE, certes conforme à ce que tu voulais, est dû à ses bugs sur les flottants et la hauteur. En revanche, celui de Firefox est normal.

- solution 1 (traditionnelle) : ajouter en fin de .article un <hr /> doté d'une propriété clear:both .

- solution 2, (récente et plus tentante) : modifier le overflow: visible de .article pour mettre à la place un overflow: auto

.article
{
	...
	overflow:auto;
}


Je n'ai pas testé, mais on est bien dans le cas de figure théorique de cette dernière solution. Auquel cas, tu auras la satisfaction d'avoir une CSS2.1, ce qui est nettement plus chic qu'une vulgaire CSS2.0 Smiley lol

Sinon, ta page est sans doute problématique pour :
- le choix du charset: il est possible que tu aies vraiment besoin d'iso-8859-2, mais au cas où... Ce ne serait pas plutôt du iso-8859-1 ?
- le choix du DTD XHTML1.1, servi improprement en tant que HTML, inutile a priori (tu te sers de <ruby> ?), etc. Auquel cas, repasser en XHTML1.0, svp.
- le profile sur HTML.
- le balisage où quelques <p> et autres <h2>, etc. seraient les bienvenus pour remplacer des <div> injustifiées.
Modifié par Laurent Denis (27 Mar 2005 - 13:28)
Merci beaucoup de t'être penché sur mon cas.
Je vais étudier ça et améliorer ça en suivant tes conseils.
Je vous tiendrez au courant Smiley cligne
Sous Safari Mac ça tangue un peu, tu as les blocs gris (en dessous) tout ramassés en haut... c'est normal ?
Justement c'était le principal problème Smiley cligne

J'ai étudié tes indications Laurent et j'ai fais pas mal de trouvailles intéressantes merci beaucoup ! Smiley smile