A voir également:
- Responsive CSS table
- Logo responsive css ✓ - Forum - HTML
- Centrer une image css responsive ✓ - Forum - CSS
- Problème CSS - Responsive Design ✓ - Forum - CSS
- Table en css ✓ - Forum - CSS
- [CSS] display: {block|none}; TABLE sous IE??? ✓ - Forum - CSS
9 réponses
jordane45
- Messages postés
- 32050
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 11 avril 2021
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.
Cordialement,
Jordane
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.
Cordialement,
Jordane
Herve_be
- Messages postés
- 895
- Date d'inscription
- mercredi 4 août 2010
- Statut
- Membre
- Dernière intervention
- 21 mars 2021
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.
jordane45
- Messages postés
- 32050
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 11 avril 2021
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
Herve_be
- Messages postés
- 895
- Date d'inscription
- mercredi 4 août 2010
- Statut
- Membre
- Dernière intervention
- 21 mars 2021
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
jordane45
- Messages postés
- 32050
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 11 avril 2021
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.
Herve_be
- Messages postés
- 895
- Date d'inscription
- mercredi 4 août 2010
- Statut
- Membre
- Dernière intervention
- 21 mars 2021
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;}
...
}
Herve_be
- Messages postés
- 895
- Date d'inscription
- mercredi 4 août 2010
- Statut
- Membre
- Dernière intervention
- 21 mars 2021
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
Herve_be
- Messages postés
- 895
- Date d'inscription
- mercredi 4 août 2010
- Statut
- Membre
- Dernière intervention
- 21 mars 2021
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 ?
Herve_be
- Messages postés
- 895
- Date d'inscription
- mercredi 4 août 2010
- Statut
- Membre
- Dernière intervention
- 21 mars 2021
Personne ne sait comment on peut afficher des éléments de taille proportionnelle à celle de l'écran ?
helpinghands
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...
Herve_be
- Messages postés
- 895
- Date d'inscription
- mercredi 4 août 2010
- Statut
- Membre
- Dernière intervention
- 21 mars 2021
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.
Herve_be
- Messages postés
- 895
- Date d'inscription
- mercredi 4 août 2010
- Statut
- Membre
- Dernière intervention
- 21 mars 2021
Voilà, ça fonctionne
- pour les écrans plus larges que 1200 pixels la table mesure 1200 px de large, on voit l'image de fond;
- pour les écrans plus petits les largeurs sont définies en vw, la table occupe toute la largeur.
- pour les écrans plus larges que 1200 pixels la table mesure 1200 px de large, on voit l'image de fond;
- pour les écrans plus petits les largeurs sont définies en vw, la table occupe toute la largeur.
