Reprise du message précédent :
T'as oublié un "  à la fin  
 

 
       y'a des jours ... où la concentration est à revoir ...

 
Sympa cet éditeur, merci de me l'avoir communiqué; je ne connaissais pas.
Est-ce qu'il est possible de réduire la taille de l'écran comme sur Jsfiddle ?
Je ne connais pas encore toutes ses possibilités.
 
https://codepen.io/ikalkul/pen/vYPYmqK

Dans la page d'accueil, en réduisant l'écran, je supprime les deux petites photos qui n'ont pas une importance capitale, elles sont plutôt décoratives.

Je décortique codepen, OK pour le plein écran.
Choisir un préprocesseur, ça sert à quoi ? (y'en a un sur le PC ... rire).
Lequel choisir ?

Dans ton cas à rien à part ajouter de la complexité. Commence par être à l'aise avec les basiques ce sera déjà bien suffisant pour le moment.
 
Personnellement j'utilise Sass, mais encore une fois te complique pas avec ça, surtout qu'il va te falloir utiliser vscode ou un autre éditeur plus avancé.
 
 
https://developer.mozilla.org/fr/do [...] eprocessor

 
Je viens de découvrir ça, à propos de l'héritage :

Je crois que ça va m'être très utile, dans certains de mes problèmes d'héritage !

Salut, oui c'est une solution, mais normalement tu as rarement besoin d'utiliser cette propriété, tu as juste a définir la nouvelle propriété qui va "override" la propriété héritée, désolé je sais même pas commence on dit en français je trouve pas de bon mot (redéfinir, écraser).
 

Il est vrai que je n'avais jamais  vu cette possibilité sur des sites, ou je n'ai pas fait suffisemment attention.
 
Donc pour "annuler" un héritage, je dois définir l'élément suivant, ou changer certaines propriètés, avec une class ?
Il y a des cas où cela ne semble pas fonctionner, mais cela provient sans doute de ma façon de procéder ...
 
Ca a le mérite de me repositionner par rapport aux héritages.

Il y a un autre truc en css qui est un peu moins connu et qui s'appelle si je me trompe pas la "spécificité", ce qui fait que certaines propriétés vont être override par celles du sélecteur qui a la "spécificité" la plus haute.  
 
Par exemple #id a une spécificité plus élevé que .ma-classe et donc aura la "priorité"
 
Ce qui fait que des fois ce que tu fais est sans effet (je fait des rimes).  
 
En cuisine il y a un système de calcul fait par le navigateur qui va donner un score de priorité.  
 
Ce que tu peux retenir :  
 
Les styles en ligne ont toujours une spécificité plus élevée que les sélecteurs.
 
Exemple : style="color: blue;"
 
Mais je te déconseille fortement de les utiliser c'est une mauvaise pratique.
 
Les sélecteurs d'ID ont une spécificité plus élevée que les classes, les attributs et les pseudo-classes.  
 
Exemple : #navbar.
 
Les classes, les attributs et les pseudo-classes ont une spécificité plus élevée que les sélecteurs de type et les pseudo-éléments.
 
Exemples :
Classe : .highlight.
Attribut : [href].
Pseudo-classe : :hover.
 
Les sélecteurs universels, les combinators et la pseudo-classe de négation n'augmentent pas la spécificité
 
Exemple :
 
Universel : *.
Combinator : div p.
Négation : :not(.example).
 
 
Sinon tu sais que tu n'es pas obligé de me quoter à chaque fois, surtout quand nos messages sont à la suite.

Tu as lu dans mes pensées, je suis en plein dans le sujet.
https://developer.mozilla.org/fr/do [...] nheritance
 
Ce qui me permet de constater que j'utilisais des sélecteurs universels sans trop comprendre.

Voilà un exemple dans lequel je nage dans le bonheur (enfin presque). Je sens que je vais y passer un bon moment ...

Allez Harmo, au boulot (moi aussi je rime ...).

Je reprends les sélecteurs de type, de class et d'iD.
Les sélecteurs d'attribut.
Les pseudo-classes et pseudo-éléments.
La cascade et l'héritage.
Ca va me permettre de simplifier certains de mes codes en évitant des répétitions inutiles.
Je dois reconnaître que j'en utilisais sans trop comprendre ce que je codais, ça n'est pas la bonne méthode.

Je n'arrive pas à rendre responsifs des tableaux; j'ai trouvé ce code en javascript, mais je n'arrive pas à le rendre fonctionnel ... pour le texte et les photos, pas de problème. Je ne suis pas expert en java.
 
https://jsfiddle.net/ahbuym8f/

Salut,  
 
Cela fait longtemps mais je jette un oeil régulièrement au topic. Juste pas beaucoup de temps l'année dernière et ça va continuer à moins de tomber au chômage.
 
Premièrement, bien faire attention, il y a le Java et le Javascript, c'est bien des langages de programmation mais la comparaison s'arrête presque là. Les deux langages sont totalement différents, il n'y en a pas un issu de l'autre.
 
Souvent on commence le Javascript en glanant des petits scripts à droite et à gauche comme tu l'as fait mais forcément on ne comprend alors pas vraiment comment ils fonctionnent. Je ne peux pas te dire de ne pas le faire, mais dans ce cas là faut ensuite passer beaucoup de temps à essayer de le comprendre quand il ne fonctionne pas. Et là ta mauvaise compréhension de l'Anglais va être encore plus handicapante...
 
Premièrement, sur JsFiddle, tu ne l'as pas mis au bon endroit, il y a un encart spécial pour le Javascript. Ta fenêtre est principalement divisée en 4, une partie pour le HTML, une partie pour le CSS, une partie pour le Javascript et enfin la dernière partie pour la prévisualisation.
 
Je te laisse-donc passer le code dans le bon encart. Il ne fonctionnera toujours pas, il y a une petite modification à apporter pour qu'il s'adapte au reste de ton code.
Et enfin ton exemple permet que légèrement de mettre en évidence son fonctionnement, il faut retravailler ton exemple de tableau.

 
Salut,    
Tout d'abord je te souhaite de ne jamais connaître le chômage    
Autant pour moi, en ce qui concerne l'emplacement du javascript, faute d’inattention ! Tellement peu habitué à l'utiliser. Je commence tout doucement.
Mes sites commencent à s'étoffer, ça progresse.
Le problème avec les tableaux, comme pour beaucoup d'autres réalisations, c'est qu'il y a tellement de manières de procéder, que je ne connais pas encore la meilleure ...
Je vois que pour les tableaux, on peut utiliser thead, tbody, est-ce important ? Ou th, tr, td sont suffisants ?
Pour l'instant, je crée des tableaux simples, mais il y en a qui sont plus compliqués (lapalissade   ).
Bonne continuation pour cette nouvelle année, que je te souhaite bonne.  

Le tableau, tout comme une page HTML en général, peut se composer d'un "en-tête", un "corps" et un "pied de page" si je puis dire.
Thead sert à définir l'en-tête (en général l'intitulé des colonnes), le tbody le contenu du tableau (les données) et tfooter les conclusions du tableau (totaux, etc.).
C'est vraiment designé pour le tableau "scientifique" avec des intitulés en première ligne, des chiffres dans les suivantes, et les totaux en dernière ligne on va dire.

Aucune obligation, tu peux faire avec pour plus de lisibilité de ton code et une meilleure gestion par ton CSS, mais tu peux aussi faire sans car ça reste de la sémantique.

 
OK ça marche, c'est bien ce que je pensais, mais une confirmation ne nuit pas.  
Il ne me reste plus qu'à régler le problème de ce tableau en responsive et j'en aurai terminé avec ce site.
Merci pour tes réponses.

Est-ce que je peux considérer que c'est correct, en responsive ?
 
https://jsfiddle.net/L0t4xuv7/

Je ne sais pas, quel est ton objectif ? Qu'est-ce que tu veux faire quand l'écran est trop petit ou trop grand ?
 
Sinon, dans le HTML, à l'intérieur du tbody, tes cellules (td) en dehors de la première ligne ne sont pas écrites à l'intérieur des lignes (tr).
Et dans le CSS tu as :

Cela ne veut rien dire au niveau du sélecteur. Tu sélectionnes les table, thead, tbody, tr, th et td on attend donc que tu modifies une propriété CSS pour cette sélection. Mais non à la place tu écries une sélection des thead pour lesquels tu vas modifier la propriété display.

Je veux que les tableaux s'adaptent à la taille de l'écran.
J'avoue n'avoir pas bien compris ce qui est demandé dans la media ...
Je ne sais pas non plus si l'utilisation de data-label est utile ? Je peux obtenir le même affichage sans.
J'ai suivi le code d'un tutoriel .... pas concluant ...
Pas encore à l'aise non plus avec les sélections multiples, à revoir.

Quand tu dis que tu veux que ton tableau s'adapte à la taille de l'écran, tu veux dire quoi exactement ? Car ici, tu dis que quand ton écran n'est plus assez large on enlève la première ligne (l'intitulé des colonnes) et ça n'a vraiment aucun sens : tu vas enlever une information essentielle pour réduire la hauteur du contenu quand tu manques de largeur...
 
L'objectif du responsive ce n'est pas de supprimer des informations mais de présenter différemment ta page en fonction des dimensions de l'utilisateur.
 
Donc avec ton exemple j'ai vraiment du mal à voir où tu veux en venir.
 
Pour les attributs data-*, cela a une utilité quand tu veux interférer avec du JS ou du CSS dans des cas très spécifiques. Aucune utilité pour toi actuellement.
 
Sinon ta requête media dit simplement : pour l'affichage sur écran quand la largeur d'affichage est moindre ou égale à 700 pixels.

Je crois que je vais repartir à zéro, concernant ce sujet et prendre le temps de mieux le décortiquer. Quand j'aurai créé une centaine de tableaux, je serai plus à l'aise.
Suivre un tuto accéléré n'est pas toujours facile pour un débutant, je vais plutôt chercher un suport écrit.
On va y arriver?

Oui, le problème des tutos c'est de bien comprendre les exemples, arriver à voir les subtilités qu'ils veulent mettre en avant.

Perso, un tableau responsive j'ai du mal à voir. Tu peux inverser colonnes et lignes mais sinon ça reste très limité en degrés de liberté.

Tu as des trucs de ce genre : https://codepen.io/team/css-tricks/pen/wXgJww et https://codepen.io/geoffyuen/pen/DZxEKy
Ou tu transforme ton tableau en suite d'article mais ce n'est pas toujours pertinent.
Sans compter qu'il faut mettre du contenu en dur dans la css ou surcharger chaque td avec du contenu informatif.
 
Moi la plupart du temps je me contente de mettre le tableau dans un div avec un overflow-x pour que le tableau soit scrolable sans affecter le reste de la page.
 
Enfin y'a des techniques pour "fixer" la première ligne ou la première colonne :
https://codepen.io/team/pierbridge/pres/obLZRW/top/
https://codepen.io/paulobrien/pen/gWoVzN
Ça peut aussi être une solution, tout dépend des données à afficher quoi...

Hello ici    
 
Il y a quelques temps de ça j'avais un projet qui impliquait de faire des tableaux, du coup j'avais mis de côté quelques articles dont celui-ci
 
https://adamlynch.com/flexible-data [...] -css-grid/

 
Salut à tous, j'ai de la lecture, merci pour vos réponses.
Avec overflow j'avais obtenu un scroll, mais partant du principe qu'il vaut mieux éviter le scroll pour les portables, j'ai pensé que ça n'est pas la bonne solution ...
En vous lisant, et en lisant d'autres articles sur le sujet, je me rends compte qu'effectivement, les possibilités sont limitées, en fonction du résultat à obtenir.
Etre un peu trop perfectionniste n'est pas toujours un avantage.
Les tableaux que j'ai à reproduire sont simples, un caption, un thead, un tbody, tr, th, td, quelques cellules vides. Il y a quatre tableaux. Quelques chiffres à mettre en gras, un peu de padding pour aérer les cellules.
 
Peut être essayer GRID, aussi ...
J'ai de quoi occuper la journée  

Le plus simple à réaliser est effectivement overflow: overlay;
https://jsfiddle.net/gj183auz/
 
Je me connais, je ne vais pas m'arrêter là ...

Attention overlay (je ne connaissais pas j'ai cherché un peu ) ne fait pas parti du standard, apparemment c'est une propriété webkit (un des moteurs de rendu html/css utilisé par les navigateurs) qui fait la même chose que auto mais avec les ascenseur "par dessus" le contenu.
https://developer.mozilla.org/fr/do [...] ow-x#sect1
 
Je fait un truc plutôt comme ça :
https://jsfiddle.net/ocnwhu4j/

 
OK, ça n'était pas indiqué dans l'article que j'ai consulté.
Entre les subtilités du code, et l'interprétation des navigateurs, il y a de quoi perdre son latin, pour reprendre une vieille expression.
J'aurais dû me lancer dans le HTML il y a 20 ans, je serais plus en avance aujourd'hui    

 
J'ai rectifié avec overflow-x, c'est bon, ça scroll. Ajout d'une media queries sur certaines pages, pour modifier la taille et la position de certaines photos.
 

Il na faut pas se mélanger les pinceaux dans les couleurs ...
 
https://jsfiddle.net/9q51bu3k/

Pourquoi faut il doubler "element" dans les div ?
Sinon la dimension des box n'est pas la même en largeur.
 
https://jsfiddle.net/r8jt1Lqo/

Salut,  
 
Qu'est-ce que tu entends par là ? Je suis pas sûr d'avoir compris ta question.

 
   Hyppo,
 
 <div class="element element1"></div>
Pourquoi, dans cette class, on ne se contente pas de mettre simplement ="element1" au lieu de ="element element1"  ?
Vu qu'il y a un espace, si je supprime element pour ne laisser que element1, l'affichage du résultat n'est pas le même.
Est-ce pour la syntaxe, la sémantique ?
 
Ou est-ce je pourrais nommer la class ="banane banane1" (je vais tester ...).

Quand tu regardes les css associé, tu vois que les class element et element1 ne sont pas équivalente, chaque classe apporte ses règles de style.
element sert à definir une forme de bloc, alors que les déclinaisons element{X} avec x compris entre 1 et 3 changent des couleurs.
 
Ce serait plus simple avec des règles plus concrètes et moins semblable d'autant que dans ce cas tout les <div> enfants direct des <div class="container"> possède la classe donc au lieu de faire :

On aurait put avoir comme selecteur :

Tout en supprimant du html toutes les classes element.
Ça fonctionnerait aussi.

 
  Merci pour ta réponse,
J'ai encore du mal avec les sélecteurs du genre * > +, et les autres ... c'est pourquoi je vais les reprendre pour y voir plus clair.
En fait, il s'agit de deux class dans la même div; je m'en suis déjà servi, mais cet exemple m'a surpris alors que ça n'aurait pas dû.
Mauvaise concentration de ma part ...    

Oui, je me disais bien que ce n'était pas la première fois qu'on évoquait la possibilité d'avoir plusieurs classe pour certains nœud html.
 
Le séparateur > c'est pour préciser qu'on ne veut toucher que les enfants direct du noeud.

 
Il faut absolument que je maîtrise tout ça ... pour simplifier mon code et gagner du temps, bien qu'en retraite, le temps nous en avons.
Il me faudrait un prof à domicile    

Une approche des sélecteurs ...
Il va me falloir encore pratiquer pour tout assimiler, mais ça va mieux.  
 
https://jsfiddle.net/t835qwhk/1/