28111 sujets

CSS et mise en forme, CSS3

[Résolu] Grid vs table

Pages :
Bonjour à tous
Dans le cadre de la rénovation par partie de mon site, je vous soumets le cas suivant:
https://www.alma-musica.net/tests/legende.html
Il s'agit des paroles d'une pièce de Tchaïkovsky.
Chaque vers est présenté de trois façons: le texte originel, une translittération phonétique et la traduction en français.
La structure utilisée consiste à définir une <table> avec 3 colonnes, ce qui assure que les vers sont face à face.
La question: comment supprimer les <table> et autres <tr>, <td>, etc et assurer la même présentation en Grid Layout, tout en permettant une présentation différente sur petits écrans, avec les trois versions présentées l'une au dessus de l'autre.
Actuellement je n'ai pas d'autre façon d'adapter cette page aux petits écrans que de réduire la taille des caractères.
Modifié par PapyJP (25 Jan 2020 - 15:16)
Merci de vos réponses
@JPB
Y aurait il un moyen pour que ça ne prenne pas systématiquement toute la largeur de l'écran ?
Pour cet exemple, ce ,'est pas très gênant, mais j'en ai d'autres où il n'y a que 2 colonnes (pas de phonétique)
upload/1579970057-48769-barechu.png
ou même une seule colonne (texte en français)
upload/1579970088-48769-lafemmesauvage.png

@gcyrillus je ne vois pas de différence notable avec ce que j'ai fait
Modifié par PapyJP (25 Jan 2020 - 17:36)
Salut,
PapyJP a aussi demandé comment mettre, en version mobiles sous grid, les trois colonnes les unes en dessous des autres. Je réponds à cette question, sans pousser vers grid si les tables fonctionnent d'une façon satisfaisante. Les noms des items sont arbitraires. Je n'ai pas bien compris s'il s'agissait de refaire tout le site ou juste mettre grid dans la partie tables (ce qui me paraît un peu aventureux). C'est du grossier, vite fait, à adapter et finaliser. Je ne connais rien aux tables et ne peux t'en dire plus.
/*############################## Pour les mobiles ################## */
@media (max-width: 36em) {
.contenair {
	display: grid;
	grid-template-columns: 1fr 2fr 3fr;/* Ou toute autres valeurs divisant le contenair en trois */
	grid-template-rows: repeat(3,auto);
	grid-gap:5px; /* Ou plus !*/
	min-height: 100vh;
}
.table1 {
	grid-column: 1 /span 3; 
	grid-row: 1;
	background-color:lightblue;	
	font-size: 1em;
	font-family: Arial;
    	display: flex;
  	justify-content: center;
  	align-items: center;	
}
.table2 {
	grid-column: 1 /span 3 ; 
	grid-row: 2;
	background-color:lightblue;
  	font-size: 1em;
    	font-family: Arial;   	
    	display: flex;
  	justify-content: center;
  	align-items: center;	
}
.table3 {
	grid-column: 1 /span 3 ; 
	grid-row: 3;
	background-color:lightblue;
  	font-size: 1em;
    	font-family: Arial;    	
    	display: flex;
  	justify-content: center;
  	align-items: center;	
}


</style>
<body>
   <div class="contenair">
   <div class="table1">Matable1</div>
   <div class="table2">Matable2</div>
   <div class="table3">Matable3</div>
</body>
</html>

Modifié par Bongota (25 Jan 2020 - 17:58)
Modérateur
PapyJP a écrit :

@gcyrillus je ne vois pas de différence notable avec ce que j'ai fait


les cellules s'empilent et c’était la raison et la question de mon intervention, il te suffit de regrouper chaque colonne en une seule cellule si un reset sur le display te suffit.

je n'ai pas touché a ton HTML, qui, sans aucun style reste lisible et compréhensible.
Modifié par gcyrillus (25 Jan 2020 - 18:08)
PapyJP a écrit :
Bonjour à tous
Dans le cadre de la rénovation par partie de mon site, je vous soumets le cas suivant:
https://www.alma-musica.net/tests/legende.html
Il s'agit des paroles d'une pièce de Tchaïkovsky.
Chaque vers est présenté de trois façons: le texte originel, une translittération phonétique et la traduction en français.
La structure utilisée consiste à définir une &lt;table&gt; avec 3 colonnes, ce qui assure que les vers sont face à face.
La question: comment supprimer les &lt;table&gt; et autres &lt;tr&gt;, &lt;td&gt;, etc et assurer la même présentation en Grid Layout, tout en permettant une présentation différente sur petits écrans, avec les trois versions présentées l'une au dessus de l'autre.
Actuellement je n'ai pas d'autre façon d'adapter cette page aux petits écrans que de réduire la taille des caractères.

Bonjour,
Juste un suggestion...
Compte tenu du contexte que tu décris (définition + explications) perso je m'orienterais plutôt vers une structure du type ci-dessous (extraite de Mozilla MDN) :
<dl>
  <dt>Firefox</dt>
  <dd>Un navigateur Web libre, open-source, multi-plateforme
      dévelopé par la Mozilla Corporation et des centaines de
      volontaires.</dd>
  <dd>Le petit panda, panda roux, panda fuligineux ou panda 
      éclatant (Ailurus fulgens), est un mammifère originaire 
      de l'Himalaya et de la Chine méridionale.</dd>
  <!-- D'autres termes et leurs définitions/descriptions -->
</dl>

Problème de "responsive" réglé et il me semble que la structure ci-dessus, plus proche sémantiquement de ton besoin, sera prise comme telle par les moteurs de recherche.
Peut-être peux-tu conserver la structure en tableau pour les résolutions larges, mais je pense que tu perdrais en sémantique, outre le fait qu'il faudrait jouer sur les media queries et avoir potentiellement du texte dupliqué (table écrans large / DL écran portables et tablettes).
Bonne journée.
Merci de vos réponses, je vais regarder cela de plus près.
En ce qui concerne le html, il est généré par un programme php, pas de problème pour changer ce que le programme génère.
Le texte originel est dans un fichier xml, avec cette structure:

<lyrics>
    <author>...</author>
    <title>...</title>
    <original lang="ru">
        <title>...</title>
        <strophe>.........</strophe>
        <strophe>.........</strophe>
        <strophe>.........</strophe>
    </original>
    <phonetics>
            /* même structure */
    </phonetics>
    <translation lang="fr">
            /* même structure */
    </translation>
</text>

Les vers sont déterminés par des \n dans le texte des strophes.
Le programme tient compte des cas où par erreur les versions n'ont pas le même nombre de strophes ou le même nombre de vers par strophe.

J'aurais pu faire le travail en xslt, mais je n'ai pas gardé un très bon souvenir de ce langage dans le passé.
Modifié par PapyJP (26 Jan 2020 - 10:37)
@sepecat
Je ne vois pas en quoi cette structure ressemble à ce que je fais actuellement
Peux tu me donner un lien vers la page HTML en question?
Pour moi l'utilisation de balises sémantiques sert à favoriser la maintenance du code. Je n'ai jamais constaté que ça change grand chose dans le référencement d'une page.
upload/1580048610-48769-legende.png
https://www.alma-musica.net/tests/legende2.html
C'est comme le Canada dry: ça ressemble à ce que je veux faire, mais ça ne le fait pas.
Ce qui ne va pas:
1) les blocs bleus s'étalent en largeur, ce qui fait que le titre centré n'est pas centré sur le texte
2) si je supprime un vers, les strophes ne s'alignent pas
3) le CSS n'a pas l'air de pouvoir s'adapter à un nombre de colonnes variables: c'est trois colonnes, point barre. S'il y en a un nombre différent il faut changer le CSS.
Pour le moment, c'est loin de ce que fait ma version courante.
Comment traiter ce problème.
Modifié par PapyJP (26 Jan 2020 - 15:28)
Salut,
une suggestion, tu ajoutes min-height:12em; sur "section.strophe", ou d'autres valeurs en fonction de ton texte. Sur grid, tu mets :
	.wrapper {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;/*Pour avoir les trois colonnes*/
				grid-template-rows: auto;/* Là, c'est toi qui va décider de la hauteur des lignes, ainsi que de leur nombre. J'ai mis auto provisoirement pour les essais.*/
				grid-gap: 10px;}


Le titre pas centré ? Il l'est, mais c'est plutôt le texte qu'il faut centrer. 

.verse{
			display: flex;
  			justify-content: center;}


Par contre là, le texte est aussi justifié au centre, ce qui peut moins te plaire. À toi de trouver la solution.
Ou alors :
.verse{
			display: flex;
  	justify-content: left;margin:10px;
  	}

J'ai testé rapidement chez moi, ça fonctionne, avec ton code source. C'est responsive jusqu'à un certain point, après, tu devras adapter (voir mon mail d'hier).
Modifié par Bongota (26 Jan 2020 - 17:16)
PapyJP a écrit :
@sepecat
Je ne vois pas en quoi cette structure ressemble à ce que je fais actuellement
Peux tu me donner un lien vers la page HTML en question?
Pour moi l'utilisation de balises sémantiques sert à favoriser la maintenance du code. Je n'ai jamais constaté que ça change grand chose dans le référencement d'une page.

Que nenni.... la sémantique n'a rien à voir avec la maintenance du code.
Il s'agit simplement de permettre d'identifier dans un flux entrant les îlots de données qui ont "du sens", c'est à dire qu'un moteur de recherche pourra associer à une notion ou un contexte quelconque (ex. date de publication, auteur, etc.).
Ta problématique est exactement la même puisque, en gros, tu dois afficher des suites de termes / définitions.
Si tu le présentes sous forme de table classique, un moteur de recherche ou tout autre outil analysant la structure du document n'y verra que du texte, certes sous forme tabulaire, mais sans aucune signification particulière.
Si tu utilises le balisage dédié que j'indiquais, l'analyseur de flux pourra en déduire qu'il s'agit d'une suite de termes / définitions et pourra, mais ce n'est pas une obligation, l'intégrer dans ses propres algorithmes pour le promouvoir ou non avec cette approche sémantique.
Edit : oups, j'oubliais le lien vers la (page MDN traitant des balises définitions).
Modifié par sepecat (26 Jan 2020 - 18:00)
@sepecat
Ce que je veux dire par "maintenance du code" c'est qu'il est infiniment plus simple à un être humain de lire des balises HTML5 que des <div> et des <span> imbriquées.
J'ai cessé depuis pas mal de temps de m'intéresser au référencement, parce que les sites dont je m'occupe sont utilisés par des habitués, mais quand je m'en étais préoccupé, je n'avais pas trouvé que les balises sémantiques changeaient grand chose au référencement. Cela a pu changer entre temps.
Toujours pas compris le rapport entre des textes côte à côte et des <dl> et <dd>
Modifié par PapyJP (26 Jan 2020 - 21:17)
@Bongota
Cela me semble une façon compliquée de changer ce qui marche pour quelque chose qui ne semble pas donner de meilleurs résultats.
Je pense qu'on n'a pas fini d'utiliser des <table> pour présenter des données qui n'ont rien de tabulaire. En tout cas je crains que ce ne soit pas de mon vivant, vu mon âge avancé.
À toi de voir. Je pensais que :
upload/1580066843-67790-screenshot-2020-1-26lngendesa.png

c'était quand même mieux que ce que tu avais montré plus haut.
Et avec ma proposition, tu peux ajouter ou enlever une ligne, sans que le contenu de la cellule d'en face bouge. Mais tu connais mieux la problématique de ton site que moi.
Bonne continuation.
Je ne pense pas. Les tailles identiques ne sont pas ce que je cherche à faire.
Mon code permet d’ajouter ou d’enlever des lignes en gardant le tout aligné.
PapyJP a écrit :
Ce que je veux dire par "maintenance du code" c'est qu'il est infiniment plus simple à un être humain de lire des balises HTML5 que des &lt;div&gt; et des &lt;span&gt; imbriquées.

La nuance m'échappe...
DIV et SPAN sont des balises HTML5 au même titre que les autres, du moins me semble-t-il à la lecture des spécifications.
Si tu préfères une imbrication de TABLE / THEAD / TBODY / TFOOT / TR / TH / TD, pourquoi pas, chacun est libre d'utiliser la structure qu'il veut pour ses conceptions.
Côté lisibilité je ne suis pas sûr que ce soit préférable mais, encore une fois, si tu as utilisé des tables depuis des décennies et qu'elles te conviennent alors perso je n'y vois aucun inconvénient et tu montes ton site comme tu l'entends.
Par contre, je ne vois plus alors l'utilité qu'il peut y avoir à se poser la question tables vs grid.
Je note au passage que l'une des versions que tu nous a soumises fait un usage intensif des SECTION / DIV / SPAN dont tu précises dans ton commentaire qu'elles sont réputées moins lisibles que les "balises HTML5".
Moi toujours pas comprendre la subtilité sous-entendue.
PapyJP a écrit :
J'ai cessé depuis pas mal de temps de m'intéresser au référencement, parce que les sites dont je m'occupe sont utilisés par des habitués, mais quand je m'en étais préoccupé, je n'avais pas trouvé que les balises sémantiques changeaient grand chose au référencement. Cela a pu changer entre temps.

La sémantique n'est pas une fin en soi. Si tu estimes que le trafic de ton site est établi et qu'il te convient, alors ne change rien.
Pour ma part, considérer que des gens aient phosphoré pour nous pondre des balises sémantiques juste histoire d'occuper leur temps et que les moteurs de recherche n'en tiennent pas compte paraît un tantinet réducteur. La lecture des différents articles parus sur le sujet ne va pas dans ce sens.
Après, je le répète, chacun voit quelle est la finalité de son site et, si la sémantique t'apparaît inutile, eh bien oublie là tout simplement.
PapyJP a écrit :
Toujours pas compris le rapport entre des textes côte à côte et des &lt;dl&gt; et &lt;dd&gt;

Je crois que tu mélanges sémantique et présentation.
Je ne suis pas un évangéliste des balises DL / DT / DD et n'ai aucune vocation à le devenir. Si tu ne vois pas à quoi elles servent et ce qu'elle peuvent t'apporter, là encore ne les utilises pas et reste sur une structure à base de tables.
Ceci dit, tu peux remplacer lesdites balises par autant de P ou de DIV.
Obtenir une présentation tabulaire en écran large / blocs superposés en écrans types portables. est tout à fait possible via CSS sans passer par des tables, mais si tu aimes les TR / TD ou les SECTION / SPAN imbriquées parce que tu les pratiques depuis longtemps et que tu t'y sens à l'aise alors ne change rien et continue dans cette voie.
Modérateur
Je me permet de revenir sur le sujet , la partie en gras dans :
PapyJP a écrit :
...
La question: comment supprimer les &lt;table&gt; et autres &lt;tr&gt;, &lt;td&gt;, etc et assurer la même présentation en Grid Layout, tout en permettant une présentation différente sur petits écrans, avec les trois versions présentées l'une au dessus de l'autre.
Actuellement je n'ai pas d'autre façon d'adapter cette page aux petits écrans que de réduire la taille des caractères.
...

semble avoir était occulté par tous .

Quel est donc le résultat escompté ?

* une refonte HTML sans aucune différence à l'affichage avec un maintient de la reduction de la taille des caractéres ?

* une refonte visuelle avec les trois version l'une sur l'autre ?

Je zappe toujours la partie table en grid ou flex en la mettant justement sur le compte d'une demande d'aide sur le sujet et pas du tout sur une rechute de divite, un <table> peut prendre un reset en display:grid et un div peut prendre un reset en display:table .

Peut tu en fait clarifier ta question sur l'aspect

* visuel , (organisation des contenus sur petit/grand écrans )

* CSS

* HTML

Que tu souhaiterais reprendre, de façon a ce que l'on te propose des approches pertinentes.

passer des table/tr/td/p en section/div/p/span a peut d’intérêt à mon sens et probablement pas le sens de ta question.

Cdt,
gcyrillus a écrit :
Je me permet de revenir sur le sujet , la partie en gras ... semble avoir était occulté par tous .

Pour ma part, la question initiale me semblait être comment :
a) aligner horizontalement chaque triplette verset / translittération / légende sur écran large
b) faire apparaître chaque élément de ce triptyque en les empilant (bloc) sur écran de taille réduite
C'est pourquoi j'ai utilisé la formule : Obtenir une présentation tabulaire en écran large / blocs superposés en écrans types portables dans l'une de mes réponses.
Ceci dit, je peux m'être trompé dans l'analyse du besoin et une clarification serait, en effet, la bienvenue.
Cdt.
Pages :
Sujet clos
Aller à