mise en page css et dream

[Mado]

bonjour

http://wiki.cesep.levillage.org/dwmx.html

j'ai trouve cet article interessant alors je vous le mets

[LaurentDenis]

Un bon tutoriel d'initiation, en effet. Merci !

[LaurentDenis]

Quelques remarques cependant :

Le HTML

La dtd choisie (XHTML transitionnel) est un bon choix, mais la précéder du prologue XML est une mauvaise idée. Le prologue va basculer certains navigateurs en mode de rendu CSS "quirks" au lieu du mode standard, ce qui peut poser des difficultés de positionnement et de dimensionnement en particulier. Donc, supprimer la ligne <?xml version="1.0" encoding="iso-8859-1"?>

<div id="logo"> et <div id="navigation"> sont placées avant la <div id="content">, ce qui donnera un médiocre résultat dans les navigateurs ne supportant pas la feuille de style (texte, lecteurs d'écran, anciens navigateurs graphiques...). Comme le logo et le menu sont par la suite positionnés avec CSS en position: absolute, autant donner à la page une meilleure structure, plus accessible :

<div id="content">
...
</div>
<div id="menu">
...
</div>
<div id="logo">
...
</div>

L'image utilisée comme logo est un texte mis en image. Donc inaccessible dans un navigateur non graphique, à moins que l'attribut alt soit correctement utilisé :

- alt="" comme dans l'article pour masquer totalement l'image (sans attribut alt, elle sera signalée par le mot "image", par le nom du fichier source...) dans les navigateurs textes, lecteurs d'écran... A faire si l'image ne contient en fait aucune information et qu'elle est jugée purement décorative.

- alt ="_ici le texte contenu dans l'image" dans le cas contraire, pour que l'information soit rendue quelque-soit le media.

la CSS

La colonne de menu est dimensionnée en pixels. Une dimension en % (unités relatives) donnerait une plus grande fluidité à la page selon la largeur d'affichage.

Le choix des % comme unité pour les tailles de caractères risque de réserver des surprises selon les configurations des utilisateurs. Préférer une taille en % (65% par exemple) fixée au niveau du body et déterminer ensuite les tailles en em, en faisant attention à ne pas descendre en dessous de 1em. Pour approfondir et mieux exploiter cette méthode (avec des tailles plus petites), voir l'excellent "How to size text using ems" de Matthew Thomas, http://www.clagnut.com/blog/348/ [edit : traduit ici en français : http://blog-and-blues.org/weblog/2004/05/24/214-font-size-em ]

Modifié 24 Mai 2004 par LaurentDenis

[Raphael]

bonjour

http://wiki.cesep.levillage.org/dwmx.html

j'ai trouve cet article interessant alors je vous le mets

Pour info, la source originale sur Macromédia : http://www.macromedia.com/fr/devnet/mx/dre...ess_layout.html

(d'ailleurs, vu le copyright, je pense que la page que tu cites aurait pu donner ses sources)