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

Langages de programmation Discussion :

Aide maquette responsive


Sujet :

Langages de programmation

  1. #1
    Membre averti
    Homme Profil pro
    Inscrit en
    Avril 2013
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Avril 2013
    Messages : 23
    Par défaut Aide maquette responsive
    Bonjour à toutes et à tous,
    J'ai bricolé une petite maquette de dashboard et je souhaite faire en sorte que celle ci soit 100% responsive avec les vignettes qui prennent la totalité de l'écran, peu importe l'écran.
    Le but est de diffuser sur un téléviseur, donc scroll impossible.
    Pourriez vous jeter un petit coup d'oeil au code car je suis bloqué.

    Nb.: Le principal est le rendu visuel, je m'en fiche de la qualité du code car c'est juste une démo.

    Par avance un grand merci à vouscode.txt

  2. #2
    Membre chevronné
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2022
    Messages
    265
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 21
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Industrie

    Informations forums :
    Inscription : Juin 2022
    Messages : 265
    Par défaut
    Bonjour,
    Tu peux regarder display : grid;
    Tu affiches ça dans une grille qui s'adapte en contenu , tu peux rajouté des gaps etc ...
    Pour les lignes et les colonnes :
    https://developer.mozilla.org/en-US/...mplate-columns
    https://developer.mozilla.org/en-US/...-template-rows
    Cdt
    Un problème sans solution est un problème mal posé. (Albert Einstein)

  3. #3
    Membre averti
    Homme Profil pro
    Inscrit en
    Avril 2013
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Avril 2013
    Messages : 23
    Par défaut
    Tout d'abord merci d'avoir pris le temps de répondre. Je suis novice en codage, j'ai ajouté ceci :
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    Mais toutes les vignettes n'entrent pas dans la page, si vous pouvez me guider svp. Voici la partie css mise à jour sinon vous avez l'intégralité de mon code en PJ du premier message. Encore merci

    <style>
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    }

    body {
    background: #333;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    }

    .dashboard {
    display: grid;
    gap: 10px;
    width: 90%;
    height: 90vh;
    grid-template-columns: auto auto;
    grid-template-rows: auto;
    }

    .card {
    background: #f39c12;
    padding: 20px;
    text-align: center;
    font-size: 1.5em;
    border-radius: 10px;

    }

    .values {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Ajout pour la responsivité */
    }

    .value p {
    margin: 5px 0;
    font-size: 0.8em; /* Réduction de la taille de la police pour la responsivité */
    }
    .stock-section {
    background-color: #333;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    }

    .ventes-section {
    background-color: #333;
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
    }


    </style>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Débutant] Aide sur le fonctionnement de Response.Write
    Par JoKeRR dans le forum ASP.NET
    Réponses: 1
    Dernier message: 31/08/2018, 12h12
  2. Réponses: 2
    Dernier message: 27/04/2016, 11h20
  3. Réponses: 1
    Dernier message: 10/01/2015, 15h36
  4. petite aide sur response.write
    Par xclear dans le forum ASP
    Réponses: 8
    Dernier message: 21/06/2006, 15h14

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