Feuille de style et tableaux

[Nerva]

Bonjour.

Je recherche toute information ou tutoriel conséquent sur la mise en page de tableaux via CSS. Je cherche surtout une manière de baliser qui allègerait au maximum les lignes de code.

Merci.

[nexxen]

Salut, une piste pour tes recherches:
OpenWeb => http://openweb.eu.org/articles/tableaux_css/

[Nerva]

Merci, ce site a l'air très intéressant.

En fait, je me suis mal exprimé. Ce que je recherche avant tout c'est de supprimer carrément les tableaux en les "simulant" et j'ai trouvé ceci qui correspond exactement à ce que je voulais :

http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS

L'utilisation de menus est vraiment très simple et les pages HTML très dépouillées...

[Florent V.]

Ce que je recherche avant tout c'est de supprimer carrément les tableaux en les "simulant"

Mouais, bof. La technique d'intégration HTML/CSS est quand même assez différente dans l'approche de la technique de découpage à coup de tableau de mise en page. Vouloir obtenir un tableau de mise en page en passant par des div par exemple, c'est se planter de démarche à mon humble avis.

Une petite lecture:
Quelle démarche suivre pour intégrer une maquette en page HTML/CSS ?

Sinon, pour les ressources en ligne: tout Openweb, tout Alsacréations.com, tout Pompage.net.

[e-kiwi]

il est intérréssant de supprimer les tableaux pour mettr en page son haut / menu / contenu / bas de site. je ne vois pas en quoi c'est se planter de demarche

[david11]

voila un autre site http://www.siteduzero.com

[Nerva]

Je ne voudrais pas me lancer dans un débat philosophique "Tableau Vs CSS" mais pour le problème qui se posait dans mon cas, c'était à peu près comme l'exemple du lien que j'ai inséré : un bandeau en haut, un bandeau en bas, et entre deux, un menu et un contenu.
Jusqu'alors, j'avais incorporé un tableau à deux colonnes mais je trouve l'usage du CSS bien plus simple et plus "élégant" qu'un tableau.

Malgré tout, il faut que je peaufine car c'est loin d'être parfait ; j'ai un "margin-left" de 20 pixels dans toutes mes pages (avec ou sans "tableau"), c'est nickel dans FF mais j'ai un décalage à droite dans IE (et donc peut-être aussi dans d'autres navigateurs). De plus, ma page (680 pixels de large) est centrée comme il faut dans FF mais est calée à gauche dans IE ; je précise que j'utilise Dreamweaver 6 pour la conception et qu'en affichage WYSIWYG, elle est également calée à gauche mais se centre correctement en visualisation, tout comme une fois chargée sur le serveur.

[jOoL]

il est intérréssant de supprimer les tableaux pour mettr en page son haut / menu / contenu / bas de site. je ne vois pas en quoi c'est se planter de demarche

Pour la mise en page c'est clair que c'est intéressant. Mais pour afficher des données dans un tableau, il est largement préférable d'utiliser ce qui a été conçu pour, soit la balise TABLE.

[Florent V.]

il est intérréssant de supprimer les tableaux pour mettr en page son haut / menu / contenu / bas de site. je ne vois pas en quoi c'est se planter de demarche

e-kiwi, je n'ai jamais dit cela.

Ce que j'ai dit:

La technique d'intégration HTML/CSS est quand même assez différente dans l'approche de la technique de découpage à coup de tableau de mise en page. Vouloir obtenir un tableau de mise en page en passant par des div par exemple, c'est se planter de démarche à mon humble avis.

Ce que je n'ai pas dit:

Vouloir obtenir une mise en page en passant par des div par exemple, c'est se planter de démarche à mon humble avis.

La nuance n'est pas excessivement subtile, il suffit de ne pas lire en diagonale.

[zeb]

j'ai un "margin-left" de 20 pixels dans toutes mes pages (avec ou sans "tableau"), c'est nickel dans FF mais j'ai un décalage à droite dans IE (et donc peut-être aussi dans d'autres navigateurs).

oublie vite l'usage du padding et du margin si tu veux rester compatible IE/ FF l'un va le considérer comme faisant partie du width l'autre non (d'ou décalage de l'affichage). Idem pour les border mais moins problématique dans la mesure ou le problème se situe a la hauteur de la bordure (souvent 1px)

un truc :
deux div imbriquées et un positionnement relatif avec un left qui correspond au padding recherché

[Dan_A]

De plus, ma page (680 pixels de large) est centrée comme il faut dans FF mais est calée à gauche dans IE ;

Il manque un DOCTYPE
Dreamweaver n'est pas le bon outil pour passer au HTML/CSS sans tableaux (quand ils ne sont pas sémantiquement corrects).

[Nerva]

Comme DOCTYPE, Dreamweaver me génère celui-ci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

[Florent V.]

oublie vite l'usage du padding et du margin si tu veux rester compatible IE/ FF l'un va le considérer comme faisant partie du width l'autre non (d'ou décalage de l'affichage).

Désolé, c'est faux à 90%.

IE5 utilise effectivement son modèle de boite propriétaire, dans lequel les bordures et padding sont retranchés à la largeur, pour peu qu'on ait spécifié une largeur fixe en pixels, pourcentages ou autre unité. Si la largeur n'est pas spécifiée (margin: auto), ça n'a aucun effet.

IE 6, IE 7, Firefox, Opera, Safari, Konqueror, etc., appliquent le modèle de boite CSS standard. Pour IE6 et 7, il faut bien entendu travailler en mode standard et non pas en mode Quirks, donc avec un Doctype complet avec URL de la DTD.

Pour les histoires de centrage via les marges automatiques qui ne marche pas dans IE: même problème, il faut travailler en mode standard et non pas en mode Quirks.

Travailler en mode Quirks pour faire de la mise en page CSS, c'est suicidaire.

[Florent V.]

Comme DOCTYPE, Dreamweaver me génère celui-ci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ce Doctype est incomplet. La page sera rendue en mode Quirks.

Utiliser ce générateur de squelettes (X)HTML pour avoir quelque chose de propre:
http://css.alsacreations.com/outils/squelettor/

[Dan_A]

DOCTYPE incomplet = mode quirks !
Utilise plutôt :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">