a écrit :
Concernant le positionnement absolu, il doit être relatif à un élément "relative" si je ne m'abuse.
Je n'ai pas vu de "position:relative" dans le code que tu m'as communiqué. Est-ce que j'ai raté un épisode de la série?
j'ai présenté deux cas:
.
row-1 .cell:first-child {
padding-left: 2.5em;
position: relative;
}
.row-1 .cell:first-child .icon {
top: 1em;
left: 0.75em;
position: absolute;
}
J'ai bien mis un positionnement relative. À noter qu'un position relative sur une cellule de tableau(td ou table-cell) peut poser des problèmes de compatibilité (notamment sur des versions pas si vieilles de Firefox). Ajouter une div pour cette solution est plus sûr.
.row-2 .cell:first-child {
padding-left: 2.5em;
}
.row-2 .icon {
margin-left: -1.75em;
float: left;
}
Ici j'ai mis float:left pour que l'icone sorte du flux, et qu'ainsi elle n'influe plus sur le texte.
PapyJP a écrit :
Il m'arrive bien d'utiliser les table-*, mais justement pas dans les cas où il s'agit de "vraies tables" mais des cas où je voudrais qu'un élément se comporte "comme si" c'était un élément de table.
[…]
Peux tu me dire ce qu'on gagne à appeler "div", puis en les stylant, des choses qui sont effectivement des table-rows et des table-cells plutôt que les appeler stupidement "tr" et "td" (ou "th")?
Loin de moi l'idée de faire la chasse intégriste aux tableaux. N'ayant aucune notion du contexte j'ai choisi l'un plutôt que l'autre grâce à l'art avisé du pifomètre.
Dans le cas que tu présentes c'est en quelques sorte des données tabulaires, donc non ça ne me choque pas d'utiliser table. Ce forum ne présente pas des données tabulaires mais utilise un tableau. Je n'en fait pas de l'urticaire pour autant.
Les grands avantages du mode tabulaire en CSS sont une très grande souplesse, qui permet de faire de nombreuses choses, sans toucher à la structure, par exemple voici ce quelques exemples à partir d'une simple liste:
http://codepen.io/anon/pen/YPLREQ (pas mal d'autres exemples par ici:
http://www.alsacreations.com/tuto/lire/1522-le-modele-tabulaire-en-css.html)
En utilisant la création d'éléments anonymes, (table-row/table-cell), et en alternant les blocks/table-cell etc. Si on y rajoute la création d'élément par :before et :after cela devient vraiment très souple. Cette souplesse permet de rendre la structure agnostique de la présentation. Cela à de nombreux avantages: réutilisation d'un même code dans différents contextes (différentes pages, voir sites), mais aussi aujourd'hui dans le cas des media-queries.
Si c'est juste pour ajouter deux couches de divs pour styler un tableau en CSS, c'est relativement peu pertinent, et c'est malheureusement ce que trop de monde a cru comprendre de ce mode de faire. Le but serait plutôt de ne rien rajouter, de ne pas remplacer par des div des td/tr juste pour faire genre, mais plutôt de réfléchir à sa structure de donnée logique en premier lieu, en choisissant de balises et des classes qui ont du sens. Bien sûr c'est un vœu pieu et pas toujours entièrement réalisable, c'est là qu'il faut savoir faire preuve de pragmatisme plutôt que d'intégrisme.
À l'opposé, lorsque l'on juge cette présentation nécessaire à la compréhension, alors la table est plus adaptée, vu que justement elle va s'afficher juste par défaut quel que soit le contexte, et qu'il faudra volontairement «casser» la présentation par table si nécessaire (display: block) dans des cas particulier.
Pour moi ce dernier point est un élément crucial: quel est le cas particulier? La présentation en tableau ou la présentation en flux vertical? Est-ce que je fait un flux vertical sur mobile parce que je n'ai pas d'autres choix mais que je juge cela pas exceptionnel. Ou est-ce que je fait une présentation tabulaire quand j'ai pas mal de place pour profiter de la largeur (mais que ça n'apporte rien à la visualisation de l'information). C'est une définition un peu plus souple souple que celle de ceux qui martèlent le : des tableaux pour des données tabulaires sinon NIET.
Pour conclure il y a des cas particuliers, comme par exemple l'utilisation de colsapn / rowspan où on peut se brosser avec du CSS. Ou juste la flemme/temps disponible parfois (un tableau dans l'éditeur d'un CMS plutôt que de devoir redéployer le code du site
.
