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 forme de ma page


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Par défaut Mise en forme de ma page
    Bonjour,

    Voilà 15 ans que j'ai pas touché à de dev Web et j'avoue qu'avec toutes ces nouvelles solutions je suis plutôt perdu mais je m'adapte vite j'ai besoin d'un coup de pouce

    J'ai commencé à dev une petite apppli web (PC ET mobile vu que sur mobile pas tout ne passe pour mon entreprise ou je dois afficher un planning (a partir d'une BDD SQL existante) donc pas réinventer la roue mais pas loin vu que le presta actuel est incapable de fournir une solution aux demandes actuelles.

    Ce que je souhaite est plutôt simple dans ma tête mais de là a le mettre en place en CSS je suis perdu

    Voici une image simpliste de ce que je veux :


    Ce que souhaite :

    En gros c'est un affichage planning (tableau de tâches des gens (nombre fluctuant suivant l'agence) suivant le jour de la semaine) avec si possible un affichage des tâches style "outlook" donc affichage des tâches sur plusieurs jours par dessus le tableau (en espérant que ce que j'exprime sois compréhensible mais ça j'imagine que ce sera dans un prochain temps le tout est d'avoir le bon layout dans un 1er temps)

    - que la navbar soit fixe et prennent toujours la largeur de l'écran (je pense avoir compris en bootstrap comment faire un menu responsive et adapté sur mobile ou PC avec disparition du bouton et affichage du menu dans la navbar au dessus de 500px par ex)

    - que la colonne de gauche soit toujours visible

    - que le reste du tableau donc les colonnes de droite à partir de la 2eme soient de largeur fixes et en mode "iframe" (terme sorti d'outre tombe)

    Donc en gros que la partie haute et gauche dans l'image ci dessus soient fixes et TOUJOURS visible, que le menu soit en mode collapse (donc que le reste partie de gauche et contenu de droite descende d'un cran) et que seule la partie data soit "déplaçable" en mode slide et que bien sur le tout fonctionne sur mobile !!!

    J'ai lu, relu et surlu de nombreux tutos bootstrap mais j'avoue qu'il me faut une aide !

    En espérant que ma demande soit claire

    Bien à vous

    iLtG

  2. #2
    Membre Expert Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 895
    Par défaut
    Hello,

    Voici un petit CodePen qui me semble correspondre à ce que tu as décrit
    https://codepen.io/DarkStar123456/pen/JjNzBBE

    Il est basé sur Bootstrap 5; qui utilise justement la même présentation dans sa documentation
    Doc BS 5 : https://getbootstrap.com/docs/5.1/ge.../introduction/

  3. #3
    Membre averti
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Par défaut
    Hello et merci de t'intéresser au pb.

    Du coup je me doutais que je m'étais exprimé comme une poire alors je retente

    En fait ce que je veux c que (dans ton ex la partie verte) la sidebar soit collée à gauche et en fixed

    et que le contenu de droite (donc du coup le cadre rouge) soit en hauteur fixe et qu'il puisse scroller uniquement vers la droite car ce sera un tableau avec un nombre de personne défini par agence

    D'où mon terme utilisé "iframe" car je veux que la navbar et la sidebar en gros ne bouge JAMAIS de place à l'écran mais qu'on puisse uniquement scroller à droite pour faire défiler un tableau a hauteur fixe (un peu comme un Excel auquel on aurait figer la premiere colonne et la 1er ligne (désolé lol je ne sais pas comment mieux l'exprimer)

    Je m'en vais de ce pas retenter un autre schéma plus "parlant" au cas ou

  4. #4
    Membre averti
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Par défaut
    Nom : Layout.png
Affichages : 154
Taille : 136,0 Ko

    Voilà donc je commente :

    La Navbar (entournée de bleu) : hauteur fixe, ancrée en haut, largeur écran, responsive, avec menu en toggle en cas de largeur < 500px par ex

    La sidebar (entourée de vert) : largeur fixe, ancrée à gauche, hauteur écran (enfin écran - hauteur navbar), responsive suivant hauteur écran

    Le contenu (la partie rouge) : hauteur fixe, largeur fixe, HORIZONTALEMENT scrollable pour afficher X personnes suivant les agences

    En espérant que je me sois mieux exprimé mais là j'avoue être à mon max

    iLtG

  5. #5
    Membre Expert Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 895
    Par défaut
    Hello,

    J'ai réalisé un nouveau Codepen : https://codepen.io/DarkStar123456/pen/YzVMBRP

    Comment ça se passe :
    - on défini la première colonne en position: absolute;- on va lui donner une largeur (33.3vw vu qu'il y a 3 colonnes visibles dans l'exemple) histoire de pouvoir ensuite "déplacer" tous les contenus à droite de cette colonne
    - on défini un wrapper (.table-wrapper), qui va faire 100vw de large. Soit width: 66.6vw + margin-left: 33.3vw afin de les déplacer à droite de la première colonne
    - finalement, on force toutes les colonnes th et td à une width de 33.3vw

  6. #6
    Membre averti
    Homme Profil pro
    Responsable de service informatique
    Inscrit en
    Janvier 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de service informatique
    Secteur : Transports

    Informations forums :
    Inscription : Janvier 2013
    Messages : 29
    Par défaut
    Hello,

    Merci bien, je m'en vais regarder ça de plus près mais ça me parait être exactement ce qu'il me faut !!!

    Je fais un retour en éditant ce message

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

Discussions similaires

  1. Garder la mise en forme d'une page web à l'impression
    Par 7ider5 dans le forum Débuter
    Réponses: 2
    Dernier message: 21/02/2013, 13h10
  2. Mise en forme "encadrée" des pages
    Par Benoît1989 dans le forum Mise en forme
    Réponses: 1
    Dernier message: 24/10/2012, 00h13
  3. [XL-2003] Mise en forme d'une page en VBA
    Par Naru80 dans le forum Macros et VBA Excel
    Réponses: 13
    Dernier message: 05/11/2011, 09h31
  4. [XL-2003] Mise en forme d'une page en VBA
    Par Naru80 dans le forum Macros et VBA Excel
    Réponses: 6
    Dernier message: 24/10/2011, 22h43
  5. Comment se passer des <table> pour la mise en forme d'une page
    Par gael dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 12/11/2008, 20h06

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