Responsive CSS table [Résolu]

Signaler
Messages postés
823
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
20 septembre 2020
 -
Messages postés
823
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
20 septembre 2020
 -
Bonjour,
J'ai créé la table qu'on peut voir ici https://www.rudyv.be/Aquarium/Accueil.php
Elle est constituée d'une grande table (bords invisibles) qui contient un seul <TR> et 3 <TD>
dans chaque <TD> je mets 2 tables qui se retrouvent l'une en dessous de l'autre
j'ai mis le principe de ce code plus bas; les couleurs, épaisseurs des bords, ... sont définis par CSS.
Sur grand écran ça fonctionne très bien, mais sur Smartphone c'est trop large.
Comment obtenir la même chose sur grand écran mais avec toutes petites tables les unes en dessous des autres sur petit écran ?
J'ai essayé ceci https://www.rudyv.be/Aquarium/AccueilM.php mais c'est moche.
Les .css portent le même nom (sauf .css au lieu de .php).
Grand merci d'avance pour votre aide 

<TABLE>
     <TBODY>
          <TR>
               <TD>
               <table>
                    <tbody>
                         <tr>
                              <td>....</td>
                         </tr>
                    </tbody>
               </table>
               <table>
                    <tbody>
                         <tr>
                              <td>....</td>
                         </tr>
                    </tbody>
               </table>
               </TD>
               <TD>
                    Autre petite table
               </TD>
               <TD>
                    Autre petite table
               </TD>
          </TR>
     </TBODY>
</TABLE>
Afficher la suite

9 réponses

Réponse 1 / 9
Messages postés
29639
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 septembre 2020
 2 805
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
Réponse 2 / 9
Messages postés
823
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
20 septembre 2020
 1
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.
Signaler
Messages postés
29639
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 septembre 2020
 2 805
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
Réponse 3 / 9
Messages postés
823
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
20 septembre 2020
 1
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
Signaler
Messages postés
29639
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
30 septembre 2020
 2 805
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.
Réponse 4 / 9
Messages postés
823
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
20 septembre 2020
 1
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;} 
...
}
Réponse 5 / 9
Messages postés
823
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
20 septembre 2020
 1
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
Réponse 6 / 9
Messages postés
823
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
20 septembre 2020
 1
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 ?
Réponse 7 / 9
Messages postés
823
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
20 septembre 2020
 1
Personne ne sait comment on peut afficher des éléments de taille proportionnelle à celle de l'écran ?
Signaler

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...
Réponse 8 / 9
Messages postés
823
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
20 septembre 2020
 1
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.
Réponse 9 / 9
Messages postés
823
Date d'inscription
mercredi 4 août 2010
Statut
Membre
Dernière intervention
20 septembre 2020
 1
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.
Répondre Posez votre question