Les CSS permettent de définir le style d'un objet de manière proche et détachée de la description de la page. Cependant, pour les tableaux, je n'arrive pas clairement à faire la part du HTML et la part des CSS.
 
Qui doit s'occuper du spacing et du width ?
 
Pour l'instant, je fais le padding et le border dans le fichier CSS, mais pour spacing, je n'ai pas trouvé la balise CSS. De plus, l'attribut width - comment dire - je ne suis pas convaincu que sa place soit dans le CSS.
 
En fait, je me demande si le découplage style/présentation, est vraiment si simple. Il m'apparait au contraire que tout est lié dans une page, notamment par le layout construit à l'aide des tables, justement.

Je me suis décidé à aller voir un site de référence, au hasard, w3school et voilà un copier coller de la permière table venue :
 

 
Alors moi, je fais comment ? Comme eux, ou avec des CSS ? Un mix peut-être ?

normalement le css, mais c'est le genre de trucs que je mets directement dans le code html (vu que c'est php qui génère la page, la structure est dans les appels de fonction).
 

le spacing d'une cellule = sa marge. couleur de fond de la table = visible lorsque la marge d'une cellule n'est pas nulle. (ensuite il y a une histoire de border-collapse).
 

ce n'est qu'un argument marketing. ça te permet effectivement de changer les couleurs, les images de fond, etc. mais la vraie présentation (la structure) est déjà présente dans les balises : <b>, <i>, <hx>, les <img> ajoutés (le plus souvant flottantes), etc.  
 
bref, ça te permet de séparer l'inutile du fondamental. le webmaster moyen est alors content car il peut changer l'inutile, ce qui plait à ceux qui se prétendent designers (regarde, je peux changer le stylesheet ! maintenant, c'est rouge ! )

j'ajouterai que si un jour les documents du web sont bien construits, une option 'ignore stylesheet' sera équivalente à 'skip intro' de flash - le bonheur !

Les CSS.

C'est border-spacing : http://www.yoyodesign.org/doc/w3c/ [...] ml#borders

A partir du moment où tu sépares contenu et présentation c'est forcément plus simple. Perso je trouve ça vite saoulant de modifier la largeur d'une cellule à un endroit et le padding à un  autre.

Merci pour border-spacing.
Néanmoins, j'irais assez dans le sens de youdontcare pour le côté artificiel que les CSS apportent à HTML. L'idée de séparer présentation et information est bonne, mais inappropriée à la réalité de la création d'une page web, où tout est inexorablement imbriqué.

Sinon, vous vous en servez de TH, TBODY et autres ?

au début, oui pour th. ensuite je suis passé par les css. bon exemple d'une customization qui dégrade la qualité du document ... (mais bon c'est de ma faute).

moi j'utiliserais th, et lui definirais un style particulier si nécéssaire
 
cela dit, cherrytree, je suppose deviner sur quoi tu bosses: pq as-tu besoin de tables??

Le W3C n'a rien à vendre, il ne fait pas de marketing.
 
On est actuellement dans une période transitoire, où coexistent les CSS et des tags/attributs de présentation en HTML. <u> n'existe plus en XHTML et les <hx> seront remplacés par <h> dans les prochaines normes.
 
Tu es encore dans un schéma classique où la présentation se fait à grands coups de tableaux et d'images. Ce style de document a vécu (pour des raisons maintes fois évoquées ici) et développer avec ça c'est créer des pages obsolètes. Alors bien sûr on a l'impression que c'est facile de faire une mise en page avec les tableaux, parce que c'est comme ça qu'on a toujours fait. Les CSS demandent un minimum d'apprentissage mais on s'aperçoit vite que ça sert à autre chose que de changer la couleur des liens.

youdontcare a écrit a écrit : bref, ça te permet de séparer l'inutile du fondamental. le webmaster moyen est alors content car il peut changer l'inutile, ce qui plait à ceux qui se prétendent designers (regarde, je peux changer le stylesheet ! maintenant, c'est rouge ! )

Bon ça c'est du troll.

Tu supposes bien, je suis en effet en train de faire le design du site Java@HFR. les tables servent surtout à l'affichage du menu et des différentes boites du site. J'ai opté pour une release simpliste, parce que je prends trop de temps pour le design que j'ai en tête. La bêta sera dispo demain si tout ce passe bien.
 
Vous risquez d'être un peu déçu par rapport aux objectifs : la v1.0 du site, c'est pour avoir un support visuel plus qu'autre chose. Les articles de qualité s'accumulent et on ne peut pas encore les lire. Alors je m'arrange au plus vite pour ne pas léser nos futurs heureux lecteurs.

c tres bien comme ça
par contre, comme viens de le dire gm_superstar: les tables pour le layout, c'est tabou, on en viendra tous à bout!
 
les tables ne doivent servir qu'a présenter des données sous forme de .. tableau.

Ben justement les design à coups de tableaux je trouve pas ça simple, mais les divs, j'ai vaguement l'impression que ça marche pas partout pareil, alors je me méfie. Quant aux grosses images, moi j'aime bien !
 
Ah, sinon, en fait je ne suis pas dans un schéma patati patata, je suis à poil dans ma chambre, sur un fauteuil en cuir type ministre.

Alors tu me proposes quoi, des divs avec layout absolute ?

je n'ai pas dit le contraire. outil != buzz généré par les medias & autres.
 

oui. et ? ça n'empêchera pas que l'info existera toujours dans un attribut class ou directement dans le <h>.  
 

DOH ??? où ai-je dit ça ? je n'aime pas la présentation tableau, je n'aime pas voir des images utilisées à la place de texte.  
 

je sais bien. et la majeure partie d'un document (lire : article) est structurée grâce aux tags de base : <hx>, <p>, <i>, <b>. rien à voir avec les css, et je me demande bien comment on pourrait s'en affranchir.
 

oui, une grossière exagération d'une mauvaise tendance.

Ce qui est prévu pour le <h> est révélateur de la tendance actuelle -> pousser vers une meilleure structuration du document. Aujourd'hui on peut mettre un <h2> sans qu'il y ait de <h1> avant. Avec <h> ce ne sera plus possible et il faudra jouer sur les sélecteurs des CSS.

Bon en fait on est d'accord. C'est bien le rôle du HTML de structurer/hiérarchiser le document. Cela dit, il faut voir qu'avec les CSS tu peux complètement boulverser la présentation des données (grâce notamment au positionnement absolu) et faire en sorte que ce qui s'affiche ne correspond pas à l'ordre normal des éléments tel qu'il est décrit dans le HTML.
Mais ce n'est pas une raison pour négliger la hiérarchie des éléments dans le document HTML, car celui-ci peut être destiné à être imprimé ou être consulté avec autre chose qu'un navigateur visuel.

Bof, quand on comme à toucher aux CSS c'est effectivement pour changer couleurs, bordures, fonds... et dans le cas d'un design simple ça suffit (et ce genre de design doit représenter la majorité des pages). C'est seulement lorsqu'on prend le temps de s'intéresser un peu plus aux CSS qu'on dépasse ce niveau.
Non, je ne vois pas ça comme une mauvaise tendance, juste une conséquence du fait qu'on est dans un période transitoire et que les CSS servent d'abord à modifier l'apparence.

hmm, sympathique.
 

oui. je ne compte plus le nombre de sites où il y a <br><br> au lieu d'un paragraphe ... et dès que tu veux copiercoller un paragraphe, boum.
 

période transitoire, oui. je considère toujours ça comme une mauvaise tendance.

Question ! je veux placer une image à 140px du bord gauche du document et 10 px du haut, je fais comment s'il vous plait !
 
- à la sauvage avec spacer.gif le bien nommé ?
- autre méthode propre, utilisant les CSS ? (cette méthode, je ne la connais pas)
 
C'est dur de désapprendre pour apprendre, je trouve.

margin-top: 10px; margin-left: ....

si ce n'est pas le premier élément du document, position: absolute; top: 10px; left: ...

margin-top, OK. Par contre margin-left, sachant que c'est le premier élément, ça va m'obliger à déclarer des retrait pour les objets suivants, c'est pas un peu curieux comme manière de faire ?

tu veux faire quoi ?

youdontcare a écrit a écrit : tu veux faire quoi ?

Mettre un titre à 100px de la gauche, 10px du haut, sous forme d'un gif (ou d'un png, patapai). Puis le reste doit être callé à 10px du bord par exemple.

comprends pas. si tu veux que les éléments suivants soient influencés par la position de cette image, tu utilises les marges. sinon, position absolue. mais je doute que tu en aies besoin.
 
dessin ?

Un instant pour le dessin.

Voilà le layout, c'est tout con.
 

 
En fait, y a deux colonnes sous un titre, placé à (100, 10), c'est tout.

oh merde l'autre he, il a une tablette graphique

--greg-- a écrit a écrit : oh merde l'autre he, il a une tablette graphique

C'est que pour les 3|33t !

Bon ben c'est pas compliqué à faire ça. 2 <div> principaux pour les  2 colonnes positionnés de manière absolue ou flottants, et dans chacun d'eux, un empilement de boîtes et d'images.
 
Edit: éventuellement on peut mettre l'image en dehors des colonnes et la positionner comme ça :
 
img#logo {
  display: block;
  margin: 10px 0px 0px 100px;
}

gm_superstar : je veux et exige que tu écrives un article court et concis sur tout ce que tu sais à propos des css. j'arrive pas à suivre, et le topic "vous utilisez quel norme..." est bcp trop long
 

Il faudra que je me documente sur cette notion de bloc, si je comprends bien, en fait TOUT est basé la dessus. En tous cas, ça semble être ce que je veux.

--greg-- a écrit a écrit : gm_superstar : je veux et exige que tu écrives un article court et concis sur tout ce que tu sais à propos des css. j'arrive pas à suivre, et le topic "vous utilisez quel norme..." est bcp trop long

Toi au moins tu n'y vas pas par quatre chemins !

 
Mon problème maintenant, c'est que je veux positionner mes blocs proprement sans table.
 
Je me suis documenté, j'ai donc trouvé l'attribut position, avec la valeur absolute. ça résoud le positionnement du bloc 1. Par contre comment indiquer proprement le positionnement du bloc 3, sachant, que la hauteur de 1 varie et que je veux un intervalle de 10px fixe entre 1 et 3 ? Idem pour 2 ?
 
Tous les layout que je trouve (antp.be, Mao France, Module-web) utilisent les tables pour résoudre mon problème. je veux faire sans.

Bon, en mettant 1 et 3 dans un div (absolute à la place de 1), et en déclarant la position de 3 relative avec un top: 10px; j'arrive à ce que je veux.
 
Par contre pour le positionnement de 2, je sèche lamentablement. A moins de fixer la largeur de 1, bien entendu, auquel cas, c'est trivial.
 
Sinon, comme je n'ai pas d'expérience à proprement parler, j'aimerai savoir si ce que je fais est bon, je veux dire utiliser du absolute, puis du relative, utiliser des div dans des div dans des div...

--greg-- a écrit a écrit : gm_superstar : je veux et exige que tu écrives un article court et concis sur tout ce que tu sais à propos des css. j'arrive pas à suivre, et le topic "vous utilisez quel norme..." est bcp trop long

Arf ! Oui oui, j'ai déjà commencé à écrire la FAQ, mais je suis un peu overbooké en ce moment.
 
Cela dit le topic ne fait que 8 pages pour l'instant. Quand on veut apprendre on prend son courage à 2 mains

Bien

Tes petites boîtes de gauche tu vas pas t'amuser à toutes les positionner (surtout si tu en as plus que 2)
 
Donc il faut commencer comme ça :
 

 
Et ensuite :

 
ouais moi j'ai utilisé des tables parce que j'ai mis à la norme un site qui l'était pas, pas le courage de tout refaire, puis je savais pas trop comment faire
j'attends que ce soit bien clair et que NS4 ait vraiment disparu

gm_superstar a écrit a écrit :   Arf ! Oui oui, j'ai déjà commencé à écrire la FAQ, mais je suis un peu overbooké en ce moment.   Cela dit le topic ne fait que 8 pages pour l'instant. Quand on veut apprendre on prend son courage à 2 mains

C'est ce que j'ai fait. J'ai lu le topic en entier.

gm_superstar a écrit a écrit :   Bien   Tes petites boîtes de gauche tu vas pas t'amuser à toutes les positionner (surtout si tu en as plus que 2)   Donc il faut commencer comme ça :   div#menus {   position: absolute;   left: 10px;   top: 10px;   width: 100px; }   div#contenu {   position: absolute;   left: 120px;   top: 10px;   width: 640px; /*A ajuster*/ }   div.bloc {   margin-bottom: 10px; }   Et ensuite : <div id="menus">   <div class="bloc">Bloc 1</div>   <div class="bloc">Bloc 3</div> </div> <div id="contenu">Bloc 2</div>

Cette solution me convient complètement. C'est donc celle que je vais utiliser pour le layout de mes pages. Merci. Une question cependant :
 
Imaginons, que la largeur de 1 ne soit pas 100px, mais 20%. Comment faire pour positionner 2 : je ne peux pas écrire left: 20% + 20px alors est-ce possible proprement ?

Dans ce cas tu utilises la marge :