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

Consultez la formation SEO spéciale Wordpress
par WebRankInfo / Ranking Metrics

JanoLapin
WRInaute accro
WRInaute accro
 
Messages: 4815
Enregistré le: 21 Sep 2008

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

Message le Mer Mai 11, 2011 23:29

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
WRInaute accro
WRInaute accro
 
Messages: 12446
Enregistré le: 1 Mar 2005

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

Message le Mer Mai 11, 2011 23:34

HawkEye a écrit:
boby55 a écrit: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 :mrgreen:


HawkEye
Modérateur
Modérateur
 
Messages: 18187
Enregistré le: 23 Fév 2004

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

Message le Jeu Mai 12, 2011 1:59

JanoLapin a écrit: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
WRInaute accro
WRInaute accro
 
Messages: 4815
Enregistré le: 21 Sep 2008

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

Message le Jeu Mai 12, 2011 8:46

HawkEye a écrit:
JanoLapin a écrit: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 :mrgreen: ) 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
WRInaute impliqué
WRInaute impliqué
 
Messages: 727
Enregistré le: 18 Nov 2010

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

Message le Jeu Mai 12, 2011 9:19

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
WRInaute discret
WRInaute discret
 
Messages: 94
Enregistré le: 2 Jan 2007

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

Message le Jeu Mai 12, 2011 9:36

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
WRInaute accro
WRInaute accro
 
Messages: 8329
Enregistré le: 14 Mai 2003

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

Message le Jeu Mai 12, 2011 9:45

moira a écrit: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
WRInaute accro
WRInaute accro
 
Messages: 3306
Enregistré le: 2 Juil 2008

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

Message le Jeu Mai 12, 2011 10:01

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
WRInaute impliqué
WRInaute impliqué
 
Messages: 727
Enregistré le: 18 Nov 2010

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

Message le Jeu Mai 12, 2011 10:01

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

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

2 - le conteneur des blocs flottant perd sa hauteur.
Image

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
WRInaute accro
WRInaute accro
 
Messages: 4815
Enregistré le: 21 Sep 2008

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

Message le Jeu Mai 12, 2011 10:13

@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
WRInaute impliqué
WRInaute impliqué
 
Messages: 727
Enregistré le: 18 Nov 2010

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

Message le Jeu Mai 12, 2011 10:21

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
WRInaute passionné
WRInaute passionné
 
Messages: 2286
Enregistré le: 25 Oct 2005

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

Message le Jeu Mai 12, 2011 10:24

JanoLapin a écrit:@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 ? :roll:

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
WRInaute accro
WRInaute accro
 
Messages: 4815
Enregistré le: 21 Sep 2008

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

Message le Jeu Mai 12, 2011 10:27

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
WRInaute impliqué
WRInaute impliqué
 
Messages: 727
Enregistré le: 18 Nov 2010

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

Message le Jeu Mai 12, 2011 10:30

Juste pour mon ignorance, B2B veut dire ?


Zecat
WRInaute accro
WRInaute accro
 
Messages: 12446
Enregistré le: 1 Mar 2005

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

Message le Jeu Mai 12, 2011 10:35

Bord... de Bord.. :?: ok :arrow: :mrgreen:


boby55
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 420
Enregistré le: 2 Avr 2008

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

Message le Jeu Mai 12, 2011 10:36

JanoLapin a écrit:personellement, je me reconnais parfaitement dans les propos de moira.

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



+1 :roll:

(avec des clients sous IE6 surtout .. et oui ça existe encore :wink: )


spout
WRInaute accro
WRInaute accro
 
Messages: 8329
Enregistré le: 14 Mai 2003

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

Message le Jeu Mai 12, 2011 11:11

Blount a écrit:Juste pour mon ignorance, B2B veut dire ?

http://tinyurl.com/67t9lty :mrgreen:


Marie-Aude
Modérateur
Modérateur
 
Messages: 18372
Enregistré le: 5 Juin 2006

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

Message le Jeu Mai 12, 2011 11:16

J'ai un peu de mal à comprendre certaines choses...

Je crois qu'il ne faut pas confondre "le div" et "la créativité débordante du graphiste" ... et rajouter par dessus l'exigence de l'exactitude au pixel près par rapport à la création du graphiste dans tous les navigateurs.

A partir de ce moment là, il est parfaitement possible de faire des versions dégradées de façon acceptable sous IE6, avec les feuilles de styles conditionnelles, voir un chouia de tables conditionnelles dans le code (le site d'exemple de menus déroulants en css purement compatibles IE6 est une très bonne leçon pour ça)

Il est parfois un peu difficile de faire comprendre au client que "ses" clients (surtout en B2B) ne vont pas faire joujou à mettre le site dans plusieurs navigateurs. Il faut aussi lui faire comprendre qu'il ne maitrise pas la largeur d'affichage, la définition, chez son client final, pour arriver à des arrangements raisonnables

Sinon, il fait un site full flash, et basta :D (ah non, il n'aura plus les mobiles...)


fredfan
WRInaute accro
WRInaute accro
 
Messages: 3306
Enregistré le: 2 Juil 2008

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

Message le Jeu Mai 12, 2011 11:21

Ca vaut le coup de passer tester http://www.csszengarden.com/tr/francais/ pour la liberté de présentation qu'apporte le CSS

nervusdm
WRInaute impliqué
WRInaute impliqué
 
Messages: 703
Enregistré le: 5 Jan 2008

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

Message le Jeu Mai 12, 2011 12:34

Les tables et les div font tout deux parties des nos outils de progs. Il faut réussir à les utiliser les deux ;p sans être trop pro "l'un" ou "l'autre" !

Topsitemaker
WRInaute impliqué
WRInaute impliqué
 
Messages: 643
Enregistré le: 19 Nov 2006

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

Message le Jeu Mai 12, 2011 12:43

Bonjour,

Je jongle entre les <table> et les <div>, les 2 sont essentiels à la bonne conception d'un site. c'est comme la guéguerre Windows, MAc et Linux tous les systèmes sont bons.

L'inconvénient du <div> c'est d'en connaitre le vocabulaire et la définitions exactes CSS (float, clear:both ... parmi les plus exotiques) pour design-er ce que l'on veut faire.

Le principal inconvénient du <table>, à mes yeux, c'est qu'un site conçu avec une table qui englobe toutes les parties du site, va s'afficher une fois que toutes les cellules de la table soient chargés. Donc on aura une impression que le site est lent car on remarquera ce temps d'arrêt du chargement provoqué par la table.

moira
WRInaute discret
WRInaute discret
 
Messages: 94
Enregistré le: 2 Jan 2007

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

Message le Jeu Mai 12, 2011 13:13

B2B : Business To Business - Un professionnel qui s'adresse à un professionnel
Tu as aussi du B2C : Business To Customer et C2C (bon là, ca devrait aller ;p)

@marie-aude : je comprends tes arguments. Simplement, j'aime avoir en temps que société le même design partout (l'un de mes mots fétiches est homogénéité), et en temps que développeur, je n'ai pas envie 1) de me poser des questions sur les rustines à poser pour que le rendu soit identique partout 2) de devoir jouer du pixel à tâton pour positionner mes éléments.

Mais j'avoue qu'une fois le CSS maîtrisé parfaitement, ce doit être aussi rapide à intégrer dans les 2 cas (et certainement plus malléable en CSS).


cedric_g
WRInaute accro
WRInaute accro
 
Messages: 3620
Enregistré le: 18 Jan 2006

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

Message le Jeu Mai 12, 2011 13:14

Bonjour

Pour ma part j'ai "basculé" vers les DIV fin 2006, reléguant les tableaux... pour les données tabulaires (comme il se doit :twisted: )

À l'avantage des DIV :
- légèreté du code (je me souviens sur ma galerie photo, lors du passage TAB > DIV j'ai gagné en moyenne... 40% de poids au niveau des pages HTML !)
- maintenabilité
- souplesse (genre je veux basculer une sidebar de l'autre côté pour voir ce que ça fait... Un coup de CSS et hop !)
- accessibilité (et par ce biais... claire participation à l'optimisation technique pour le SEO car on peut grâce aux CSS faire "passer" le contenu au-dessus du reste dans le code ;) )
- souplesse pour le multi-supports (clients lourds, mobiles, iPad... mais aussi facilité de mise en oeuvre des feuilles de styles pour l'impression !)
- facilité d'ajustement et de mise au point en conception (merci Firebug :mrgreen: )
- dans une certaine mesure, séparation entre la sémantique/le fond (code xhtml) et la présentation/la forme (css) : on y sera pleinement avec HTML5


Après c'est pas non plus sorcier d'appréhender l'essentiel : padding, margin, float, clear (je résume !)

Parce que les DIV, finalement, leur difficulté de mise en oeuvre, c'est au niveau du CSS, pas du code de la page qu'on la retrouve et ce n'est pas plus mal :)


loran750
WRInaute passionné
WRInaute passionné
 
Messages: 2353
Enregistré le: 15 Mar 2005

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

Message le Jeu Mai 12, 2011 13:17

@Marie-Aude, j'ai convaincu il y a longtemps mon infographiste d'utiliser Flash à outrance... ce n'est pas pour y revenir :p

tiens, par curiosité, je me demande comment les infographistes font pour découper une maquette photoshop en gabarit html/css.

Robinson
WRInaute passionné
WRInaute passionné
 
Messages: 2286
Enregistré le: 25 Oct 2005

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

Message le Jeu Mai 12, 2011 13:28

loran750 a écrit:@Marie-Aude, j'ai convaincu il y a longtemps mon infographiste d'utiliser Flash à outrance... ce n'est pas pour y revenir :p

tiens, par curiosité, je me demande comment les infographistes font pour découper une maquette photoshop en gabarit html/css.

C'est le boulot le plus détestable qui soit :lol:
Il devient d'ailleurs très difficile de trouver des personnes pour réaliser cela ^^

Mais il y a de bons outils qui aident grandement (mais excusez je n'ai plus le nom en tête).


fredfan
WRInaute accro
WRInaute accro
 
Messages: 3306
Enregistré le: 2 Juil 2008

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

Message le Jeu Mai 12, 2011 13:40

Robinson a écrit:Mais il y a de bons outils qui aident grandement (mais excusez je n'ai plus le nom en tête).

Si ça te revient ça m'intéresse :)


Leonick
WRInaute accro
WRInaute accro
 
Messages: 22677
Enregistré le: 8 Aoû 2004

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

Message le Jeu Mai 12, 2011 13:42

Blount a écrit:J'ai pour cela l'habitude d'utiliser un span de cette manière :
Code: Tout sélectionner
<span class="clear">&nbsp;</span>
plutôt que d'utiliser
Code: Tout sélectionner
<span class="clear">&nbsp;</span>
autant utiliser
Code: Tout sélectionner
<hr class="clear" />
c'est plus concis.
Sinon, pour en revenir à l'utilité des div vs table : dans une galerie photos, tu peux ajuster le nombre de photos par ligne par rapport à la largeur utile du navigateur, avec des float. Ca évite, par exemple, d'avoir des ascenseurs horizontaux


spout
WRInaute accro
WRInaute accro
 
Messages: 8329
Enregistré le: 14 Mai 2003

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

Message le Jeu Mai 12, 2011 13:48

Leonick a écrit:Sinon, pour en revenir à l'utilité des div vs table : dans une galerie photos, tu peux ajuster le nombre de photos par ligne par rapport à la largeur utile du navigateur, avec des float. Ca évite, par exemple, d'avoir des ascenseurs horizontaux

Ho oui c'est bien vrai ! float left + width en % et on peut ajuster le nombre de colonnes en CSS, tandis qu'avec des tables tu dois modifier ton code HTML/PHP modulo machin :D


Marie-Aude
Modérateur
Modérateur
 
Messages: 18372
Enregistré le: 5 Juin 2006

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

Message le Jeu Mai 12, 2011 13:57

Il y a quand même l'outil tranche pour cela, :)

Personnellement, je fais le boulot moi même, en ayant les fichiers PSD "avec toutes les couches, tout, tout, tout" (y compris les fonts, les motifs, etc) car le découpage dépend trop de la façon de créer le style.

Récemment je suis intervenue sur un site en hauteur fixe, avec "tout" en image de fond (-http://nierada-marketing.de), pour intégrer le blog (pas encore en ligne). J'ai transformé pas mal d'images (cadres, bandes, etc.) en simples bordures sous css, avec une feuille de style alternative pour IE "avant css3", c'est plus léger, plus facile à maintenir, et beaucoup plus fluide, notamment en hauteur.
Si j'avais dû garder les images de fonds, c'était déjà nettement plus de code, et je ne l'imagine pas en tables.


@moira il y a plusieurs choses différentes. L'homogénéité du design est une chose. Elle se joue autant sur le web que sur le print. Or malheureusement, quels que soient tes efforts, tu ne pourras jamais maitriser le calibrage de l'écran du visiteur. Entre une homogénéité et une identité totale entre deux navigateurs (qui prend la peine d'afficher côte à côte sur le même écran la même page d'un site sous deux navigateurs différents pour pointer les différences ?) il y a une énorme différence, aussi en termes d'efforts.
Fais tu en sorte que les boutons submit, les ascendeurs dans les zones de texte, soient identiques entre IE, FF, Opéra et Safari ? (par exemple... parmi d'autres).
Par ailleurs, c'est pour les tables comme pour les div, quand tu connais ton outil, tu ne tâtonnes pas au pixel près. Quand je tâtonne, c'est parce que j'ai la flemme de prendre ma calculette pour préparer mon modèle de boîte :D. C'est réellement une question de temps d'apprentissage.
J'ai fait mon tout premier site en tables, sans vraiment maîtriser.
Prise d'un élan suicidaire, j'ai décidé d'en faire la v2 en div.
J'ai ai passé trois semaines de nuits blanches. Mais j'ai oublié ce que c'est qu'un gif d'espacement :D

j'aime avoir en temps que société le même design partout (l'un de mes mots fétiches est homogénéité), et en temps que développeur, je n'ai pas envie 1) de me poser des questions sur les rustines à poser pour que le rendu soit identique partout 2) de devoir jouer du pixel à tâton pour positionner mes éléments.


Blount
WRInaute impliqué
WRInaute impliqué
 
Messages: 727
Enregistré le: 18 Nov 2010

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

Message le Jeu Mai 12, 2011 14:13

loran750 a écrit:@Marie-Aude, j'ai convaincu il y a longtemps mon infographiste d'utiliser Flash à outrance... ce n'est pas pour y revenir :p

tiens, par curiosité, je me demande comment les infographistes font pour découper une maquette photoshop en gabarit html/css.


C'est de l'intégration. Et comme le dit Marie-Aude, avec les sources graphiques, ça va tout seul. Je ne suis pas infographiste (pas du tout même), et pourtant j'ai déjà intégré des maquettes au pixel près (j'exagère un peu ^^). Quand je regarde une maquette, je ne vois pas la beauté du graphisme, je vois simplement les principaux blocs, avec leur contenu et position (genre Néo, qui voit le code du programme en cours :D).
C'est peut-être le fait de ne pas être designer (ni l'auteur) qui me permet de faire de l'intégration facilement.


Formation recommandée sur ce thème :

Formation SEO spéciale Wordpress : apprenez à optimiser le référencement naturel d'un site fait avec Wordpress... Formation Ranking Metrics animée par un expert SEO / Wordpress.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :