Responsive CSS table
Résolu
Herve_be
Messages postés
1110
Date d'inscription
Statut
Membre
Dernière intervention
-
Herve_be Messages postés 1110 Date d'inscription Statut Membre Dernière intervention -
Herve_be Messages postés 1110 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Table html responsive
- Table ascii - Guide
- Table des matières word - Guide
- Table des caractères - Guide
- Aucune entrée de table des matières n'a été trouvée. - Forum Word
- No bootable partition in table ✓ - Forum Windows
9 réponses
Bonjour
La réponse est dans la question... Il faut rendre ton site responsive.
A noter qu'on n'utilise plus des tableaux pour faire la mise en page depuis des lustres...
Tourne toi vers un système de grid ou même le framework bootstrap.
La réponse est dans la question... Il faut rendre ton site responsive.
A noter qu'on n'utilise plus des tableaux pour faire la mise en page depuis des lustres...
Tourne toi vers un système de grid ou même le framework bootstrap.
Bonjour,
"Il faut rendre ton site responsive"
Ma question est : comment ?
J'ai bien trouvé des infos pour rendre un site dépendant de l'écran mais je ne comprends pas ce que je dois faire pour obtenir ce que je souhaite, c'est la raison pour laquelle je demande de l'aide.
"Il faut rendre ton site responsive"
Ma question est : comment ?
J'ai bien trouvé des infos pour rendre un site dépendant de l'écran mais je ne comprends pas ce que je dois faire pour obtenir ce que je souhaite, c'est la raison pour laquelle je demande de l'aide.
C'est pour ça que je t'invite à te tourner vers le framework css Bootstrap.
Il est conçu pour être responsive ...
Tu peux même trouver des sites qui te permettent de générer le "design"
par exemple : https://www.layoutit.com/build
Il est conçu pour être responsive ...
Tu peux même trouver des sites qui te permettent de générer le "design"
par exemple : https://www.layoutit.com/build
Je voudrais comprendre ce que je fais et pas avoir un CSS tout fait inextricable auquel je ne comprends rien.
Je voudrais simplement obtenir les 6 tables qu'on voit ici https://www.rudyv.be/Aquarium/Accueil.php
organisées comme ceci sur grand écran
ABC
DEF
comme cela sur petit
A
D
B
E
C
F
Je voudrais simplement obtenir les 6 tables qu'on voit ici https://www.rudyv.be/Aquarium/Accueil.php
organisées comme ceci sur grand écran
ABC
DEF
comme cela sur petit
A
D
B
E
C
F
Si tu veux tout coder toi même sans passer par des outils qui facilitent la vie.... et bien... tu n'as plus qu'une seule solution : Te former !
Il faut apprendre à utiliser les media queries
https://www.alsacreations.com/article/lire/930-css3-media-queries.html
https://www.google.com/search?q=tuto+css+responsive
Bon aprentissage.
Pour rappel : Ici on ne donne pas de code tout cuit.
Et puis, vu que tu veux apprendre ( et comprendre) ça n'aurait pas d'interet.
Donc, en effet, dans ton cas, il vaut mieux que tu suives des tutos pour apprendre.
Il faut apprendre à utiliser les media queries
https://www.alsacreations.com/article/lire/930-css3-media-queries.html
https://www.google.com/search?q=tuto+css+responsive
Bon aprentissage.
Pour rappel : Ici on ne donne pas de code tout cuit.
Et puis, vu que tu veux apprendre ( et comprendre) ça n'aurait pas d'interet.
Donc, en effet, dans ton cas, il vaut mieux que tu suives des tutos pour apprendre.
J'ai fait ceci, je suis satisfait du résultat
div.main { width: 1220px; margin: 0 auto; background-color:var(--MainDivBkgnd); border-style:none;} .Banniere {width: 1200px; display: block; padding-top: 10px; padding-bottom: 10px; margin: 0 auto; } ... /* Nouvelles règles si la fenêtre fait au plus 1024px de large */ @media screen and (max-width: 1024px) { div.main { width: 720px;} .Banniere {width: 700px;} ... }
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Par contre elle s'affiche toujours comme ceci
ABC
DEF
seule la taille diffère, je n'ai pas compris comment je pourrais l'afficher de lamême manière sur grand écran et comme ci-dessous sur petit
A
D
B
E
C
F
ABC
DEF
seule la taille diffère, je n'ai pas compris comment je pourrais l'afficher de lamême manière sur grand écran et comme ci-dessous sur petit
A
D
B
E
C
F
Bonjour,
Plutôt que 2 dimensions comme j'ai fait : 1.200 px qui devient 700 px si l'écran mesure moins de 1.024 px
j'aurais voulu que la dimension de la table soit proportionnelle à celle de l'écran
càd déclarer que la taille de l'écran (avec un max de 1.200 px) = 100%
et définir toutes les autres dimensions en pourcentage par rapport à ces 100%
pouvez-vous m'y aider ?
Plutôt que 2 dimensions comme j'ai fait : 1.200 px qui devient 700 px si l'écran mesure moins de 1.024 px
j'aurais voulu que la dimension de la table soit proportionnelle à celle de l'écran
càd déclarer que la taille de l'écran (avec un max de 1.200 px) = 100%
et définir toutes les autres dimensions en pourcentage par rapport à ces 100%
pouvez-vous m'y aider ?
Personne ne sait comment on peut afficher des éléments de taille proportionnelle à celle de l'écran ?
Salut,
"j'aurais voulu que la dimension de la table soit proportionnelle à celle de l'écran
càd déclarer que la taille de l'écran (avec un max de 1.200 px) = 100% "
Quelle table vu que vous les avez virés. Au passage le div aussi est à éviter depuis HTML5 sauf si les éléments contenus n'ont aucune "valeur" particulière(ce ne sont pas des éléments à repérer dans la page).
Vous avez les balise article et section par exemple qui définissent des sections ou articles de la page.
pourquoi 1200px ça correspond à quoi? quelqu'un qui a un écran en 800X600 ou en
2 515X886 les 1200 px seront trop grand ou trop petit pour un affichage correct.
Il y a aussi le ratio largeur hauteur qui rentre en compte. Par exemple parmi les formats les plus fréquents il y a le 2/3, 4/3, 16/9 donc idem 1200 de largeur sur un écran avec un autre ratio que celui que vous utilisez ça change la mise en page et ça s'appelle un bug d'affichage si tout n'est pas identique(proportionnellement) d'un écran à l'autre.
Une valeur en pixel ne peut pas être responsive puisqu'elle est fixée(absolue) et ne changera jamais.
Il ne faut pas utiliser de valeur dans une taille fixe mais bien proportionnelle comme ...heum le pourcentage pour une valeur en pourcentage, ou pour les lignes le quadratin(em).
Ce n'est pas responsive mais scalaire ou proportionnel ce qui est déjà un bon pas en avant.
https://www.w3.org/Style/Examples/007/units.fr.html
https://www.w3schools.com/css/css_units.asp
Responsive ça veut dire s'adapter à tous les écrans et les écrans ayants différentes tailles/ratio ou orientation(paysage ou portrait). Les media queries ça permet de faire différentes mises en pages selon des "paliers" définis par vous même.
Et pour ça il y a des liens plus hauts...regardez la réponse plutôt que de poser la même question...
"j'aurais voulu que la dimension de la table soit proportionnelle à celle de l'écran
càd déclarer que la taille de l'écran (avec un max de 1.200 px) = 100% "
Quelle table vu que vous les avez virés. Au passage le div aussi est à éviter depuis HTML5 sauf si les éléments contenus n'ont aucune "valeur" particulière(ce ne sont pas des éléments à repérer dans la page).
Vous avez les balise article et section par exemple qui définissent des sections ou articles de la page.
pourquoi 1200px ça correspond à quoi? quelqu'un qui a un écran en 800X600 ou en
2 515X886 les 1200 px seront trop grand ou trop petit pour un affichage correct.
Il y a aussi le ratio largeur hauteur qui rentre en compte. Par exemple parmi les formats les plus fréquents il y a le 2/3, 4/3, 16/9 donc idem 1200 de largeur sur un écran avec un autre ratio que celui que vous utilisez ça change la mise en page et ça s'appelle un bug d'affichage si tout n'est pas identique(proportionnellement) d'un écran à l'autre.
Une valeur en pixel ne peut pas être responsive puisqu'elle est fixée(absolue) et ne changera jamais.
Il ne faut pas utiliser de valeur dans une taille fixe mais bien proportionnelle comme ...heum le pourcentage pour une valeur en pourcentage, ou pour les lignes le quadratin(em).
Ce n'est pas responsive mais scalaire ou proportionnel ce qui est déjà un bon pas en avant.
https://www.w3.org/Style/Examples/007/units.fr.html
https://www.w3schools.com/css/css_units.asp
Responsive ça veut dire s'adapter à tous les écrans et les écrans ayants différentes tailles/ratio ou orientation(paysage ou portrait). Les media queries ça permet de faire différentes mises en pages selon des "paliers" définis par vous même.
Et pour ça il y a des liens plus hauts...regardez la réponse plutôt que de poser la même question...
Merci pour ta réponse qui va bien m'aider.
Tu m'as appris l'existence des unités vw et vh : je peux les utiliser pour afficher des éléments de taille proportionnelle à celle de l'écran, c'est ce que je cherchais, je vais essayer.
Je n'ai pas viré les tables et 1200px parce que ma fenêtre comporte une image de fond; si l'écran est plus large que 1200 px on peut montrer le fond derrière une table plus petite que le fond; si l'écran est moins large que 1200 px alors la table doit occuper toute la largeur de l'écran, le fond étant complètement masqué par la table; 1200 px étant, je le reconnais, une valeur arbitraire et ce n'est plus vraiment du Responsive quoique je puisse connaître la largeur de l'écran grâce aux media queries.
Tu m'as appris l'existence des unités vw et vh : je peux les utiliser pour afficher des éléments de taille proportionnelle à celle de l'écran, c'est ce que je cherchais, je vais essayer.
Je n'ai pas viré les tables et 1200px parce que ma fenêtre comporte une image de fond; si l'écran est plus large que 1200 px on peut montrer le fond derrière une table plus petite que le fond; si l'écran est moins large que 1200 px alors la table doit occuper toute la largeur de l'écran, le fond étant complètement masqué par la table; 1200 px étant, je le reconnais, une valeur arbitraire et ce n'est plus vraiment du Responsive quoique je puisse connaître la largeur de l'écran grâce aux media queries.