Discussion :

[themadmax]

Bonjour,

Il y a quelques années jetait Webmaster amateur et utilisé à foison les tableaux pour la mise en page. Bien que je trouver cela assez galère j'arrivai généralement à mes fins. Me voila aujourd'hui de nouveau dans le développement Web, et entendant beaucoup de bien des DIV, je me réalise actuellement un nouveau portail. Mettant de coté les tableaux pour les DIV, je m'arrache les cheveux pour la mise en page, je m'arrache les cheveux pour caler mes calques correctement et quand tout vas bien je change de navigateur et c'est n'importe quoi !
Bien que je possède pas l'expérience pour juger de cette "innovation" j'aimerai savoir comment vous procéder pour réaliser un mise en page (les grande étapes), comment vous faites pour "debuguer" (je passe mon temps à commenter des lignes du CSS qui pourrai être fautives ). Et aussi vous n'etes pas retourné aussi au tableau, au un mixe des deux ( je vois encore pas mal de site en tableau ).

Merci de me rassurer.

[alband85]

'lut !

Effectivement, le CSS (par l'intermédiaire des DIV) est plus casse-tête puisque "moins visuel".
Cependant, au final, c'est beaucoup plus souple (pas besoin de tout refaire si tu changes ta charte graphique), plus léger (pas de TR, TD & co à charger en plus) et tu sépares le contenu de la forme (le code est donc plus lisible et plus "polyvalent").

Allez, courage ! On finit toujours pas y arriver

[trotters213]

Il y a plusieurs raison d'utiliser les div plutôt que les tableaux ::

• C'est sémantiquement incorrect : les tableaux sont utilisés pour afficher des données tabulaires et non pour faire de la mise en page.
• La multiplication des balises nécessaires à la déclaration des tableaux alourdit grandement le code et le rend illisible donc l'affichage est plus long (surtout en cas d'utilisation de tableaux imbriqués).
• L'accessibilité est réduite pour les lecteurs d'écran ou les navigateurs non-graphiques (donc pour les non-voyants entre autre).
• Avec l'avènement du XHTML et la séparation du fond et de la forme, il est préférable d'utiliser des balises <div> couplées aux feuilles de styles CSS (un bon petit tuto)

Ensuite pour réduire les différences entre le rendu sur différents navigateurs, assure toi d'avoir un code valide XHTML 1.0 Transitional au moins. Pour cela utilise le validateur W3C ainsi que le bon DOCTYPE.

[Strix]

Salut themadmax

Bon, je risque de te sembler un poil désagréable et je m'en excuse, ce n'est pas le but

C'est un sondage qui n'est pas très utile car beaucoup te diront que le duo Div/CSS est beaucoup plus performant que la mise en page par tableau(x)...
Et c'est un sujet qui a été traité à de très très nombreuses reprises !

alband85 et trotters213 t'ont déjà donné les principales raisons et quand tu regardes bon nombre de sujets, tu t'apercevras que beaucoup de membres conseillent le duo plutôt que les tableaux, même si ce n'est pas la question posée !

Donc les tableaux sont utiles, mais pour afficher... un tableau

Et il en est de même pour les (I)frames, elles ne sont pas conseillées et notamment pour un problème de référencement.

Une petite adresse en plus de celle de trotters213 pour la validation du CSS : http://jigsaw.w3.org/css-validator/
Et d'autres outils !

Voilà.

Bon développement Div/CSS

[themadmax]

Je vous remercie de vos réponses. Mais en tant que développeur je comprend le modèle Contenu/Présentation. Tout ceci est génial pour faire des sites assez basique. Par exemple, mon site doit "péter" graphiquement, première chose que je veut mètre en place des boites à bord arrondi. Bon je regarde des tutorials, et donc il me faut 10 ou 12 lignes de code HTML et le double en CSS, pour faire cela. L'argument que les balises <td> alourdissent tombe à l'eau ! (D'ailleurs trouvé moi un site ou le poids de la page est de l'ordre du poids des images!).
Pour parler de "sémantique", si on pense à toutes les choses que l'on utilisent quotidiennement qui n'était destiné à cela à la base (Internet, Micro-Onde, Le LSD ,... ).
Bon merci pour votre aide, mais je reste sur mon idée le DIV/CSS c'est bien mais pas top !

[MasterOfChakhaL]

Salut,

Il est vrai que le css peut vite devenir costaud, mais il se trouvera dans le cache de ton navigateur, donc a part a la premire visite, l'argument tient toujours la route.

L'interêt peut aussi apparaitre le jour ou tu t'interessera a des médias autres que l'écran d'ordi (téléphone, pda, lecteurs d'écran, impression). Plutot que de tout refaire, tu te conteras de refaire la mise en page via css et p'tet même rien du tout si le design était prévu pour adaptable.

L'interet de la séparation contenu/presentation, c'est aussi que cela te force à te concentrer sur le contenu. Ce genre de réflexion ne peut être que bénifique si tu penses au référencement.

Ton exemple des boites arrondis n'est pas spécialement bien choisi. Avec des tableaux, il te faudra un tableau, trois lignes et neuf cellules, avec des div, un maximum de 4 fera l'affaire (avec une image qui contient tes quatres coins.)
Tu peux aussi envisager de le faire avec une seul div. Avec du javascript non intrusif, il te suffit d'ajouter tout ce qui peut faire joli autour tout en gardant quelque chose de respectable pour les navigateurs sans javascript.