Arguments pour convertir une personne aux DIV et SPAN au lieu de TABLE

[JanoLapin]

Pour faire avancer le débat entre les pour , les contres, et les ni pour ni contre bien au contraire, ce serait bien si quelqu'un avait un site de vraie vulgarisation sur la mise en page <div>, parce qu' ahma c'est là que àa pêche...

[Zecat]

Chaque collègue rencontré depuis a eu le même parcours, chacun à essayé FULL <DIV>, a sué, pleuré, et est revenu aux <TABLE>.

Pourtant, franchement, backoffice ou pas, entre afficher en tables et en div c'est franchement en div que c'est le plus simple.
La difficulté, c'est de franchir un cap "psychologique" et "graphique", mais une fois que c'est fait, franchement, tu ne peux plus t'en détacher

oui oui c est dans ma to do list de ... 2012

[HawkEye]

Pour faire avancer le débat entre les pour , les contres, et les ni pour ni contre bien au contraire, ce serait bien si quelqu'un avait un site de vraie vulgarisation sur la mise en page <div>, parce qu' ahma c'est là que àa pêche...

> http://www.alsacreations.com/ What Else ?

[JanoLapin]

Pour faire avancer le débat entre les pour , les contres, et les ni pour ni contre bien au contraire, ce serait bien si quelqu'un avait un site de vraie vulgarisation sur la mise en page <div>, parce qu' ahma c'est là que àa pêche...

> http://www.alsacreations.com/ What Else ?

justement, c'est un peu ça le problème: il n 'y a pas de site passerelle pour apprendre à passer des tables aux div. Du coup on ne peut conseiller que des sites, fort bien fait au demeurant, (what else, tu as raison) qui repartent entièrement de zéro, ou du moins donnent cette impression. C'est assez décourageant...

Un peu comme un type habitué à conduire une voiture, qui souhaiterait passer à la camionnnette (non pas à la F1 ) et à qui on dirait qu'il doit repasser son permis.

Pour les pros site de programmation web, il y a surement un créneau à prendre...

[Blount]

Je ne comprend pas le problème. Quand on passe des tableaux aux blocs « div », il n'y a rien à réapprendre. Bien sur, si tu ne connais pas le CSS, là oui, tu repars de zéro. Mais il en serait plus que temps

Dans pas longtemps, nous allons tous devoir réapprendre une nouvelle façon de faire en utilisant les nouvelles balises HTML5 (header, article, etc.). Mais là, c'est un changement un peu plus compliqué.

Seule la réponse à la question « comment faire pour avoir cet affichage ? » change. Au lieu d'avoir une vision de tableau, tu as une vision de bloc. Qui est en fin de compte pareil (les «td» passe en «div» auxquels tu appliques du CSS).

[moira]

Le passage au HTML5 est nettement plus facile que le passage Table -> Div.

D'un coté on a de la sémantique pure et de l'autre, on a (pour moi ;p) du bidouillage en terme de paramétrage des div où tu dois limite mesurer pour mettre au pixel près. Sans compter que c'est mal / pas supporté par les anciennes version des navigateurs et que malheureusement, quand tu fais du B2B, t'as plus souvent ces dinosaures que les plus récents !!

Personnellement, le CSS est très utile pour la mis en forme des éléments, mais pour la mise en page je galère. Et pourtant, j'ai de la bouteille !

[spout]

Personnellement, le CSS est très utile pour la mis en forme des éléments, mais pour la mise en page je galère. Et pourtant, j'ai de la bouteille !

Il y a des grids CSS, c'est génial pour la synergie infographiste / intégrateur HTML/CSS.

[fredfan]

C'est bien les grids mais c'est quand même paradoxal de supprimer les tables pour les recréer en CSS
Malgré tous ses atouts, en particulier dans la simplification du code HTML, le CSS est quand même passé à côté d'instructions de positionnement efficaces et simples.

[Blount]

Le seul inconvénient pour moi est l'utilisation de « float » qui introduit des bugs d'affichage si c'est mal conçu.

Exemple :

Symptôme :
1 - bloc passe en dessous d'un autre


2 - le conteneur des blocs flottant perd sa hauteur.


Solution bug 1 :
La largeur totale des éléments fils ne doit pas dépasser la largeur du conteneur. Cela comprend : les marges, les paddings, les bordures et bien évidemment la largeur des blocs eux mêmes.
Si vous souhaitez une largeur de 150 pixel pour le menu par exemple, il faut déduire les autres valeurs. Si vous avez une bordure gauche de 1px, un padding droit et gauche de 10px, vous mettrez en « width » : 119px.

Solution bug 2 :
Il faut mettre un fils qui force le parent à reprendre son état normal, l'astuce est donc d'utiliser la propriété « clear » du CSS. J'ai pour cela l'habitude d'utiliser un span de cette ménière :

Code: Tout sélectionner

<span class="clear">&nbsp;</span>

Avec le CSS suivant :

Code: Tout sélectionner

span.clear {
    font-size: 1px;
    display: block;
    clear: both;
    visibility: hidden;
}

Une fois ces habitudes prises, c'est un jeu d'enfant


@fredfan : il ne faut pas confondre utilisation des balises <table> et la position en grid. Ce n'est pas du tout la même chose.

[JanoLapin]

@blount: tu vois que l'on peut expliquer clairement et de façon adaptée en quoi consiste le passage des <table> aux <div>. Mais aucun site ne fait cela vraiment: tous repartent de zéro, et tu te trouves devant une montagne...

Par ailleurs, j'ai commencé à regarder le html5, ça m'a l'air quand même nettement plus simple (je ne parle pas de css3)

[Blount]

J'essayerai de faire un article sur mon blog en reprenant mon poste précédent, ce sera plus adapté qu'ici (en plus, ce n'est pas trop le sujet).

Pour le HTML5, ce qui me pose problème, c'est l'utilisation correcte des balises, je n'ai pas encore approfondi la chose.

[Robinson]

@blount: tu vois que l'on peut expliquer clairement et de façon adaptée en quoi consiste le passage des <table> aux <div>. Mais aucun site ne fait cela vraiment: tous repartent de zéro, et tu te trouves devant une montagne...

Par ailleurs, j'ai commencé à regarder le html5, ça m'a l'air quand même nettement plus simple (je ne parle pas de css3)

Peut-être car il n'y a strictement aucun rapport entre div et table ?

Comment effectuer une transition entre deux éléments complètement différents ?

Il n'y a pas d'équivalents, c'est bien ça le gros bonus ! On cesse d'utiliser une architecture archaïque pour passer au modulaire qui ouvre de nouvelles portes.

[JanoLapin]

personellement, je me reconnais parfaitement dans les propos de moira.

en B2B, le full div c'est loin d'être toujours la panacée..

[Blount]

Juste pour mon ignorance, B2B veut dire ?

[Zecat]

Bord... de Bord.. ok