[Résolu] Structure d'un site : tableaux ou css ? questionnement.

Bonjour à tous,
J'ai remarqué qu'il y a de nombreux bugs avec le CSS, notamment lorsqu'on utilise le zoom sur une page web, le design d'un site, s'il est complexe, est massacré. Y'a juste à naviguer sur le web et constater : des éléments vont se chevaucher, changer de position, etc. Ce site web (alsacreations) n'est structurellement pas très complexe donc il n'est pas trop atteint mais tout de même, le kiwi en pied de page se coupe en deux si on dézoom. Bon ok c'est plus pratique pour le bouffer je vous l'accorde mais je sais éplucher mon kiwi tout seul.
A côté de ça, il suffirait de faire un simple tableau pour résoudre tous ces problèmes.
D'où mon questionnement, pourquoi ne pas utiliser des tableaux pour la structure d'un site et faire la mise en page non-structurelle avec le css ? Pourquoi on me dit partout qu'il faut faire avec le css alors que moi je constate que le css c'est blindés de bugs ?

problème résolu, c'est un bug avec les bordures, voici la solution :
http://forum.alsacreations.com/topic-4-73142-1-Structure-dun-site--tableaux-ou-css--questionnement.html#p484596
Modifié par miaouss (18 Sep 2014 - 02:56)

Je t'invite à te renseigner sur le web en utilisant le mots-clé sémantique.

Les tableaux ne doivent être utilisés que pour présenter des données tabulaires, ou des contenus qui sont naturellement disposés en colonnes et en lignes. Les utiliser pour de la mise en page, c'est faire de la mauvaise sémantique, et il a déjà été maintes fois démontré que c'est mauvais pour le référencement, que c'est lourd, que c'est moins maintenable, que c'est plus lent à se charger, sans parler de l'accessibilité.

Par contre, d'après ce que je sais, il semblerait que les nouveaux modes de positionnement CSS reprennent la voie du « faire rentrer des blocs de contenu dans des grilles et des cases », sous une autre forme. Je n'en sais pas plus, je ne suis pas expert en CSS, mais voir du côté des flexbox.

+1, les tableaux ont une valeur sémantique.

Si les sites ne s’adaptent pas à ta gestuelle, c’est simplement qu’ils sont mal intégrés ou que c’est un choix du concepteur. Ça ne vient pas nécessairement des CSS d’ailleurs, une mauvaise utilisation de la meta viewport peut rendre un site abominable à consulter sur certain écrans.

PS : la plupart des sites web sont très mal faits. Alsacréations ou Openweb sont certes simple mais sont de petit bijoux par rapport au niveau global des sites web.

Bonjour,

il y a moyen en CSS de réaliser ce que tu demandes. Éviter la propriété height ou maîtriser overflow: hidden (ça doit prendre des années par contre, parce que le BFC c'est surpuissant donc "éviter overflow: hidden tant qu'on maîtrise pas") pour commencer.
Je n'ai pas regardé pour le kiwi mais il n'apporte aucune information, ce n'est pas la même conséquence qu'un texte coupé

Des exemples très probables de sites dont le rendu est correct : Galerie des sites labellisés par AccessiWeb (on doit pouvoir zoomer jusqu'à 200% sans perte d'information, c'est un critère d'accessibilité en rapport avec le sujet) et je suppose qu'il en est de même avec la List90plus de Bitvtest (liste similaire de sites respectant 90% des critères d'accessibilité du référentiel allemand BITV, similaire au RGAA français, selon l'audit de l'organisme Bitvtest... je connais pas plus que ça donc à vérifier).
EDIT : ça veut pas dire que la méthode d'intégration est bien faite, genre tout cibler avec des id, des sélecteurs faits avec 1 classe, 2 id et 2 éléments et avoir 200 ko de CSS pour 10 pages, mais le résultat est en tout cas correct.
Modifié par Felipe (16 Sep 2014 - 08:46)

Le site que tu m'as cité se déforme en dé-zoomant et sur firefox à 100% il n'affiche tout simplement pas le même nombre de bloc par ligne que sur chrome
J'ai vraiment du mal avec le css, je n'arrive pas à faire une présentation de site parfaitement stable alors que c'est si facilement réalisable avec des tableaux. Je suis sur le point de laisser tomber le css pour la structure et utiliser des tableaux, quitte à avoir une "mauvaise sémantique". Le css est vraiment instable, je n'arrive pas à l’appréhender, ça fait 3 jours que bloque à essayer de comprendre son comportement et je n'y arrive pas, alors quand ça bloque je bidouille : et ça marche. mais j'ai trop l'impression de jouer aux dés

Voilà j'ai finalement trouvé la réponse à mes questions.
Il s'agit bel et bien d'un bug avec la fonction border. Pour éviter ça il faut prévoir un width fixe, et plus large que nécessaire, au moins 30 pixels de plus par bloc. Ou mettre un box-shadow: 0 0 0 1px; à la place des bordures. Pour une raison inexpliquée, quand on fait un zoom-out les bordures prennent plus de place et ça décale tout. J'espère qu'un jour ça aidera quelqu'un

Je re-up car j'ai trouvé une fonction css qui corrige ce problème :

.test {
box-sizing:border-box;
width:100px;
border:1px solid black; }

avec l'attribut "border-box" la valeur de width prendra en compte (quoi qu'il arrive) la taille des bordures, peu importe le niveau de zoom du navigateur. ça résout tous les problèmes voilà je partage ça avec vous au cas où vous ne le saviez pas et n'oubliez pas que les retours de chariot et les espaces entre les balises html génèrent des espaces vides entre les blocs (et cela même si vous initialisez margin et padding à 0).
pour corriger ça il suffit de coller les balises html entre elles et de mettre un commentaire entre chaque retour de chariot, exemple :

<!-- cas n°1 -->
<img /><!--
--><img /> <!-- les 2 images seront collés -->

<!-- cas n°2 -->
<img /><img /> <!-- les 2 images seront collés -->

<!-- cas n°3 -->
<img />
<img /> <!-- il y aura un espace entre les 2 images sauf sur IE -->

<!-- cas n°4 -->
<img /> <img /><!-- il y aura un espace entre les 2 images sauf sur IE -->

Modifié par miaouss (18 Sep 2014 - 03:00)

Le CSS c'est comme de la maçonnerie. Si on ne met pas les bons ingrédients... la construction risque de se casser la gueule. Et parfois, la technologie vient à notre secours sur certaines problématique. C'est le cas de la fonctionnalité border-box. Mais encore faut-il être au courant qu'elle existe.

Le CSS n'est pas compliqué, le plus gros travail est celui de connaitre les attributs qui y sont disponibles. Donc ne te décourage pas et prend simplement le temps d'aller lire des sujets (comme ce forum) sur ce code, même quand tu ne cherche rien.