Reprise du message précédent :
* De la bonne utilisation de vertical-align
 
Selon les spécifications des CSS 2, vertical-align s'utilise dans les cas suivants :
 

 
Comme personne ne comprend ce charabia, je vais détailler.
 
Vertical-align s'utilise dans 2 cas :
 
Aux différents éléments qui constituent une ligne de texte :
 

 
Vertical-align peut s'appliquer ici sur l'image pour positionner verticalement le texte par rapport à celle-ci. Si j'applique à l'image la propriété :  
 

 
Le texte sera placé comme ceci :
 

 
 
Bien sûr on peut appliquer vertical-align sur autre chose que des images. N'importe quel élément en-ligne est concerné : SPAN, B, I, INPUT, etc...
 
Une application concrète de ceci est de créer des exposants et des indices. Par exemple si on prend la célèbre formule :
 

 
Pour avoir le 2 en exposant on pourra écrire :
 

 
Avec comme propriétés pour la classe sup :
 

 
Bon, bien sûr on peut utiliser ^... pour produire un résultat similaire, mais c'est pour l'exemple.
 
Voyons maintenant la deuxième utilisation de vertical-align.
 
 
Aux cellules de tableaux
 
Ce sont en effets des blocs qui "génèrent des boîtes en-ligne anonymes". Ils sont donc concernés par vertical-align d'après la spécification.
 
Ici l'utilisation de vertical-align est évidente. Elle est similaire à l'ancien attribut "valign" et permet de positionner verticalement un texte à l'intérieur d'une cellule si celle-ci est plus haute que l'ensemble du texte.
 
 
 
En conclusion, vertical-align ne permet pas :
 
 - De positionner verticalement un texte dans un bloc quelconque (DIV, P, etc...)
 - De positionner verticalement un bloc dans un autre bloc.
 
 
-> Si on souhaite positionner du texte verticalement dans un bloc :
 - soit on connait la hauteur de l'ensemble du texte et alors on peut utiliser le positionnement absolu ou relatif (ce qui revient à positionner un bloc dans un autre bloc);
 - soit on ne connait pas la hauteur de l'ensemble du texte, alors on peut donner au bloc la propriété :
 

 
de manière à ce que le bloc se comporte comme une cellule de tableau et que vertical-align soit effectif dessus.
 
 
-> Si on souhaite positionner verticalement un bloc dans un autre bloc :
 - soit on connait la hauteur des blocs et on peut utiliser le positionnement absolu ou relatif ;
 - soit on ne connait pas la hauteur du bloc intérieur et alors il n'y a pas de solution simple avec les CSS (voire pas de solution du tout )
 
 
Voilà, je n'ai pas fait le tour de la question : vertical-align peut prendre plein de valeurs différentes et je vous invite à jouer un peu avec pour voir les différences.

Un bon résumé sur la question des unités :
 
http://blog.dreams4net.com/article/2003-05-08-02h05 [fr]
 
 
Et encore des layouts :
 
http://www.fu2k.org/alex/css/
 
 
Un article sur Openweb pour faire un menu dynamique conforme aux standards et accessible :
 
http://openweb.eu.org/articles/menu_universel/ [fr]

interessant ton speech sur vertical align. Donc, j'ai pas du bien l'utiliser car je voulais acrocher un bloc a un bloc superieur (align top). Ce qui est curieux d'ailleurs, c'est que mozilla semble l'interpreter accroche mais pas IE6.
 
Pour le css et les tableaux, c'est parfois bizarre car il fait un cadre autour du tableau.
 
Voici ma page en dev (c'est un TP en php, je me suis fait plaisir a faire un truc html strict).
Avant de le mettre en ligne, le tableau principal n'etait pas centré avec mozilla.
 
Le fichier css correspondant est là
 
Vos avis ?

Oui j'aurais du préciser : vertical-align appliqué à une cellule de tableau (ou n'importe quel élément qui a la propriété "display: table-cell" ) aligne verticalement le texte mais aussi les blocs.
 
Dans ton cas tu as une cellule qui a comme propriété "vertical-align: top" et donc le tableau qui se trouve dedans est aligné en haut de la cellule. Ca marcherait aussi avec un DIV à la place du tableau.

Une FAQ qui ressemble à quelque chose...    
http://www.saila.com/usage/tips/

Quel beau topic, je vais prendre le tempsde recoder mon site. Je pense le faire en XHTML 1.0 transitional... Ca m'énerve trop de ne pas utiliser les target="_blank"

aux intégristes de l'xhtml, aux détesteurs du flash et des frames:
que pensez-vous de ce site?
http://nadasurf.com/  
 
il est quand meme fort joli, interface originale et relativement agréable.. meme certains trucs sont un peu déroutants, j'aime beaucoup.
 
bon si je devais le faire pour moi, je jette la frame. par contre, le flash comme ça, sobre et discret, j'aime bien... mais... est-ce qu'il y a un moyen propre de proposer une alternative?
 
je me souviens à mes débuts avoir faire du js pour detecter si flash etait installé ou pas et sinon, afficher un gif à la place de l'anim (ct de toutes petites anims style pub-timbres)... mais bon herm, ct y'a lgtps...
 

j'avais pas capté qu'il y avait plusieurs layouts du meme site, et que seule la css changeait
impressionant

Quelques conseils rapides pour passer du HTML au XHTML + CSS :
http://tom.me.uk/html-to-css/

gm_ .... je viens de commencer la lecture de ce fabuleux tomik (je suis a la page 4). bravo pour l'initiative    
 
une toute pitite contribution
 
importer une feuille de style (autre méthode) :

Oui, certes. Mais je ne l'ai pas mise avant parce que :
 
- la déclaration via <style> et <link> couvre 99% des besoins et ne perturbe pas celui qui veut commencer.
- je vois plus les @import un moyen de filtrer NS 4 (et là il y a des liens)
- @import a plus de sens en conjonction avec les attributs de media :
 

exacto ! merci pour les précisions  

 
   (très très bon)

Hop ! Le tableau de compatibilité suivant a été mis à jour :  
 
http://macedition.com/cb/resources [...] pport.html
 
Plus de propriétés testées et ajout de IE 6 Win et Safari/Konqueror

excellent

Hum... en fait je l'avais déjà dans la liste mais il a été grandement remanié. J'ai édité mon message

question : mozilla sous Mac ne gere pas ça...

 
   
ca passe niquel sous IE 5 (MAc)
.. pas testé sous win
 
edit : correction  

Ca dépend à quoi tu l'appliques...
 
Et puis c'est margin-left

 
ouais  .. j'ai mal recopié c'est tout !!!
... et je l'appliques a un div

Ben alors je sais pas. Il faudrait l'URL de la page.

 
l'est pas en ligne pour le moment ....
merci  

j'en sais rien mais je replante un drapal   .. fait chier joce tout mes drapeaux ont sauté
désolé de ne pouvoir t'aider hotshot  

 
Oui, tous les browsers récents et graphiques bien sûr.
 
Un bloc positionné de façon relative l'est par rapport à son conteneur.

non, un bloc positioné en relatif est positionné relativement à sa place normal dans le flux normal.

 
en simple ca veut dire?
 

http://www.tantek.com/map.html

 
meme avec une page de base, le w3c validator me donne tjrs ca
 
Note: The HTTP Content-Type header sent by your web browser (unknown) did not contain a "charset" parameter, but the Content-Type was one of the XML text/* sub-types (text/xml). The relevant specification (RFC 3023) specifies a strong default of "us-ascii" for such documents so we will use this value regardless of any encoding you may have indicated elsewhere. If you would like to use a different encoding, you should arrange to have your browser send this new encoding information.  
Note: The Validator XML support has some limitations.  
 

sinon je me frotte à un autre probleme:
 
j'aimerais avoir "3 colonnes"
 
la première, alignée à gauche, a un width de 128 et un height de 128
la troisième, alignée à droite, a un width de 172 et un height de 128
 
le problème, c la 2e, j'aimerais qu'elle utilse l'espace restant entre mon bloc gauche et mon bloc droit, et si je lui spécifit pas de width, elle prends 100%

C'est peut etre une limitation du parser XML.
En fait, ta double déclaration XML/DTD me surprends. Est ce valide?
 
Le code suivant passe correctement le validateur:

Quelques cours d'anglais ne feraient pas de tort à certains...
Tu n'as pas indiqué avec quel jeu de caractère tu travailles dans ta page, c'est tout.

il l'a précisé dans la déclaration XML, mais pas en meta html, l'ajout de celle ci ne modifie pas le message d'erreur.
D'où la question: cela a t il un sens de déclarer du XML ici?

J'ai fait un PNG transparent, et je souhaiterais l'afficher dans un div au dessus de ma page de manière à ce que l'on voit ce qu'il y a en dessous par transparence (en position:fixed). Malheureusement, même avec moz', il est parfaitement opaque.  
 
J'ai raté quelque chose ? Comment faire pour que l'on puisse voir à travers ?

 
voici mon implémentation XHTML minimale (et valide).
 

oui et non. la déclaration xml a du sens si tu comptes parser ton site comme du xml. Hors ce que le validateur vérifie, c'est uniquement la syntaxe du HTML, donc il faut le mettre dans la meta, comme dans ton dernier exemple.

tu sais me le mailer? que je regarde ou ca merde.

 
c'est aussi ce que j'avais essayé. C'est certes valide, mais cela ne retire pas la note du W3C. D'ou l'interogation à propos de la limitation XML.
D'ailleurs, le meme code sans le meta donne le meme résultat si le fichier commence par <?xml
 

Tu devrais regarder les liens vers modèles de mise en page en première page...
 
Tu dois mettre la 1ère et 3ème colonne en flottants. Quand à la seconde, elle ne doit pas avoir d'indication de largeur mais doit avoir de marges gauche et droite de la taile de 2 autres colonnes.

Chez moi ça valide sans problème. Elle est sur un serveur cette page ?

qqun m'explique comment il fait ses hexagones l'autre gugusse dans l'url que j'ai postée un peu plus haut?