IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Mise en page VS responsive design


Sujet :

Responsive design en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Inscrit en
    Mai 2009
    Messages
    587
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 587
    Par défaut Mise en page VS responsive design
    Bonjour et bonne année à tous.

    Décidément, je n'arrive pas à me faire au "responsive design". Il me semble pourtant que mon besoin est simple et légitime : je veux partager mon écran en cinq zones immuables. J'espérais y arriver à l'aide du concept de "grid" : dans mon CSS, j'ai cod" :
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    body {margin: 0; display: grid; grid-template-columns : 3fr 2fr 3fr; 
                    grid-template-rows : 1fr 1fr;}
     
    .colonne11 { grid-column: 1; grid-row: 1; overflow: auto;  border: 1px solid black;} 
    .colonne12 { grid-column: 1; grid-row: 2; overflow: auto; border: 1px solid black;} 
    .colonne2  { grid-column: 2; grid-row: 1 / 2; max-height : 652px; border: 1px solid black;} 
    .colonne31 { grid-column: 3; grid-row: 1; overflow: auto; border: 1px solid black;} 
    .colonne32 { grid-column: 3; grid-row: 2; overflow: auto; border: 1px solid black;}
    Dans les deux colonnes de gauche, pas de problème : les contenus sont (pour le moment...?) bien maîtrisés. Mais les deux zones de droite sont destinées à visualiser (sous forme de tables) les contenus de deux tables SQLite : elles peuvent être grandes. Cela pourrait se résoudre très simplement avec des ascenseurs dans les tables. Mais non ! Sans doute au nom du sacro-saint concept de "responsive design" messire Firefox passe un temps considérable à faire des calculs (enfin, c'est comme ça que j’interprète le temps de réponse) aboutissant à un résultat absurde : j'ai un ascenseur à droite, pour toute la "page" qu'il faut faire descendre DIX FOIS pour la parcourir en entier. Au cours de ces dix étapes, on voit apparaitre ici ou là des bouts des contenu des colonnes de gauche, et l'une des tables (dans l'état actuel de la base de données) a encore un ascenseur !

    J'ai été long et verbeux, mais j'espère assez clair. Savez-vous si je dois renoncer à mon projet, ou s'il y a une solution "ergonomique" ?

    Merci d'avance.

  2. #2
    Membre chevronné
    Homme Profil pro
    Urbaniste
    Inscrit en
    Août 2023
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : Août 2023
    Messages : 387
    Par défaut
    rien compris. exemple svp.

  3. #3
    Membre éclairé
    Inscrit en
    Mai 2009
    Messages
    587
    Détails du profil
    Informations forums :
    Inscription : Mai 2009
    Messages : 587
    Par défaut
    Ben c'est pas facile, il y a beaucoup de lignes de code. J'ai défini cinq zones censées remplir tout l'écran, mais pas plus, mais si une zone déborde, au lieu de lui mettre un ascenseur, Firefox l'agrandi, et met donc un ascenseur à tout l'écran, ce qui envoie les autres zones n'importe où.

    C'est plus clair ?

  4. #4
    Membre chevronné
    Homme Profil pro
    Urbaniste
    Inscrit en
    Août 2023
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : Août 2023
    Messages : 387
    Par défaut
    Bonjour,

    Il faut faire une version simple qui démontre du problème pour démontrer que l'on a compris l'origine du souci.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <html>
        <head>
            <style>
    body {margin: 0; display: grid; grid-template-columns : 3fr 2fr 3fr; 
                    grid-template-rows : 1fr 1fr;}
     
    .colonne11 { grid-column: 1; grid-row: 1; overflow: auto;  border: 1px solid black;} 
    .colonne12 { grid-column: 1; grid-row: 2; overflow: auto; border: 1px solid black;} 
    .colonne2  { grid-column: 2; grid-row: 1 / 2; max-height : 652px; border: 1px solid black;} 
    .colonne31 { grid-column: 3; grid-row: 1; overflow: auto; border: 1px solid black;} 
    .colonne32 { grid-column: 3; grid-row: 2; overflow: auto; border: 1px solid black;}
            </style>
        </head>
        <body>
            <div>a</div>
            <div>b</div>
            <div>c</div>
            <div>d</div>
            <div>e</div>
            <div>f</div>
        </body>
    </html>

    Pas de soucis.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <html>
        <head>
            <style>
    body {margin: 0; display: grid; grid-template-columns : 3fr 2fr 3fr; 
                    grid-template-rows : 1fr 1fr;}
     
    .colonne11 { grid-column: 1; grid-row: 1; overflow: auto;  border: 1px solid black;} 
    .colonne12 { grid-column: 1; grid-row: 2; overflow: auto; border: 1px solid black;} 
    .colonne2  { grid-column: 2; grid-row: 1 / 2; max-height : 652px; border: 1px solid black;} 
    .colonne31 { grid-column: 3; grid-row: 1; overflow: auto; border: 1px solid black;} 
    .colonne32 { grid-column: 3; grid-row: 2; overflow: auto; border: 1px solid black;}
            </style>
        </head>
        <body>
            <div>a</div>
            <div>b</div>
            <div><div style="width:1200px;height:1200px;">c</div></div>
            <div>d</div>
            <div>e</div>
            <div>f</div>
        </body>
    </html>

    Des soucis.

    De là à dire que c'est votre problème, aucune idée.

    Bonne journée.

Discussions similaires

  1. Page en Responsive design
    Par steph-0329 dans le forum Mise en page CSS
    Réponses: 0
    Dernier message: 11/04/2020, 19h34
  2. [Débutant] creation d'une mise en page avec sharepoint designer 2013
    Par lilichiw dans le forum Développement Sharepoint
    Réponses: 1
    Dernier message: 28/11/2016, 15h52
  3. [2.2.0][Designer] Mise en page : alignement
    Par sleigh dans le forum BIRT
    Réponses: 2
    Dernier message: 18/09/2007, 10h44
  4. [Designer] Mise en page sous birt
    Par ruby_robber dans le forum BIRT
    Réponses: 3
    Dernier message: 08/08/2007, 14h31
  5. Response.AddHeader et mise en page
    Par audrey_ dans le forum ASP
    Réponses: 5
    Dernier message: 21/11/2005, 10h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo