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 :

css sur 2 colonnes


Sujet :

Tableau en CSS

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Collégien
    Inscrit en
    juillet 2019
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Collégien

    Informations forums :
    Inscription : juillet 2019
    Messages : 7
    Points : 5
    Points
    5
    Par défaut css sur 2 colonnes
    bonjour

    voici mon
    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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <!doctype html>
    <html lang="fr">
     
    <head>
        <meta charset="utf-8">
        <title>Titre de la page</title>
        <link rel="stylesheet" href="shell.css">
    </head>
     
    <body>
        <section>
            <div class="body">
                <div class="header">
                    <div class="c1"><p>lorem</p> </div>
                    <div class="c2"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, molestias.</p></div>
                </div>
                <div class="content">
                    <div class="c1">
                            <p>0</p>
                            <p>1</p>
                            <p>2</p>
                            <p>3</p>
                            <p>4</p>
                            <p>5</p>
                            <p>5</p>
                            <p>6</p>
                            <p>7</p>
                            <p>8</p>
                    </div>
                    <div class="c2">
                        <p></p>
                    </div>
                </div>
     
            </div>
        </section>
    </body>
     
    </html>
    (j'ai virer les lorem pour prendre moin de place...)

    et le script css correspondant
    Code : 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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
     
    @media screen and (min-width: 980px) {
      .body {
        width: 100%;
        /* margin: 2%; */
        display: grid;
        grid-gap: 1px;
        grid-auto-rows: minmax(50px, auto);
        background-image: url(wallpaper_www.wallpaperhi.com_28.jpg);
        background-attachment: fixed;
        background-repeat: no-repeat;
     
      }
      .header {
        /* width: auto;
        height: 50px; */
        display: flex;
        position: fixed;
        grid-row: 1;
        background-color: blue;
      }
     
      .content {
        display: flex;
        width: 100%;
        grid-row: 2;
      }
      .c1 {
        width: 50px;
        text-align: left;
        /* background: rgba(13, 0, 31, 0.897); */
        /* background-repeat: repeat-y; */
        grid-column: 1;
        height: 100%;
        border-right: 1px;
        color: rgba(0, 255, 255);
        margin: 1%;
      }
      .content > .c1 {
        background: rgba(13, 0, 31, 0.897);
        background-repeat: repeat;
      }
      .c2 {
        grid-column: 2;
        width: 800px;
        padding: 0.5%;
        text-align: left;
        color: rgb(239, 242, 245);
        height: 100%;
        border-left: 1px;
        margin: 0.8%;
     
      }
      p {
        width: auto ;
        text-align: justify;
        margin: 1%;
        padding: 1%;
      }
    }
    je precise que je debute ^^
    le resultat que j'obtient est en piece jointe, pas franchement folichon...

    pour expliqué mon code j'ai :

    une <div class="body"> qui regroupe l'ensemble de l'affichage avec une <div class="header"> qui contient 1 a 2 ligne d'infos dans la <div class="commandEcho">
    et une <div class="content"> qui contient 2 balise <div class="c1"> et <div class="c2">
    la ou ça pèche c'est que je cherche :

    • 1 a avoir ma balise class=header composée de 2 colonne
    • 1.A) une pour la class=prompt pas très large et
    • 1.B) une autre pour la class=commandEcho qui prend le reste de la place
    • 2 je voudrais que les element contenue dans ma class="header" soit static (donc j'ai mis position:fixed; ce qui fonctionne) et que le texte inclus dans ma class=content puisse defiler en dessous (ça marche)
    • 3 je voudrais que ma class=content contienne 2 colonne class=c1 et classe=c2 formatée de la meme façon que mes 2 colonne de la classe=header a par au niveau du background d’où la ligne .content > .c1 {
    • et je ne sais pas comment m'y prendre


    par contre ce que je ne comprend pas c'est que mes marge et l'indentation de mon texte soit différentes. qu'est ce que cloche ?
    Images attachées Images attachées  

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    16 316
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 16 316
    Points : 33 346
    Points
    33 346
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Collégien
    Inscrit en
    juillet 2019
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Collégien

    Informations forums :
    Inscription : juillet 2019
    Messages : 7
    Points : 5
    Points
    5
    Par défaut
    pourquoi les div c'est pas des balises html5 ?

    [EDIT]
    j'ai trouver

    Pour ce qui est de l'utilisation de position, c'est normal : les éléments ainsi positionnés sortent du flux d'éléments, ils ne se réfèrent donc plus à rien d'autre qu'au viewport (la zone de rendu). Pour ton menu, tu peux appliquer left: 0; right: 0; top: 0;
    donc pas le choix faut le formater a la main si j'ai bien compris...

  4. #4
    Futur Membre du Club
    Homme Profil pro
    Collégien
    Inscrit en
    juillet 2019
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Vienne (Limousin)

    Informations professionnelles :
    Activité : Collégien

    Informations forums :
    Inscription : juillet 2019
    Messages : 7
    Points : 5
    Points
    5
    Par défaut
    j'ai resolu une partie du problème en réduisant mon code CSS pour y allez pas a pas par contre maintenant j'ai un problème d'espacement entre les block flex, pas moyen de réduire l'espace entre les 2 block.
    Code : 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
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
     
    @media screen and (min-width: 980px) {
      .body {
        width: 850px;/*on définit la largeur de l'ensemble pour qu'elle corresponde au cadre dans lequel elle sera intégrée */
        display: flex; /*on définit la propriété flex pour bénéficier de cette composante sur l’ensemble de la page */
        flex-direction: column; /*ont veut que l'empilement des block se fasse en colonne */
        margin: 1%; /*ont affecte des marge au conteneur principale */
        /* background-image: url(wallpaper_www.wallpaperhi.com_28.jpg); */ /*background pas encore posé je le ferait a la fin pour plus de lisibilité */
        color: black/*ont définit la couleur du texte pour l'ensemble de la page dans le conteneur principale */
      }
      .header {  
        width: inherit;/*ont définit la largeur du block a celle du conteneur parent*/
        display: inherit;/*idem pour la valeur de display qui nous permet de récupérer l'element flex */
        position: fixed; /*ont ajuste la position a fixed pour que l'element reste visible*/
        background-color: rgba(63, 4, 4, 0.753); /*la couleur de fond de la partie fixe */
     
      }
      .content {
        width: inherit;/*ont définit la largeur du block a celle du conteneur parent*/
        display: inherit;/*idem pour la valeur de display qui nous permet de récupérer l'element flex */
      }
     
      .c1 {
        width: 7.5%;/*ont définit la largeur de la première colonne*/
        background-color: rgba(25, 25, 112, 0.712);/*puis l'arrière plans*/
        text-align: center;/*puis l'alignement du texte*/
        border-right: 1px solid black;/*puis la bordure*/
      }
      .c2 {
        width: 92.5%; /*idem que .c1*/
        text-align: justify;
        margin-left: 1%;/*avec en plus une marge et un padding*/
        border-left: 1px solid black;
        padding-left: 3%;
      }
    }
    [EDIT] j'ai fini par trouver une solution pas très propre mais bon j'ai mis une margin-top negative sur le block 2

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

Discussions similaires

  1. Réponses: 14
    Dernier message: 17/03/2006, 20h45
  2. Réponses: 5
    Dernier message: 06/03/2006, 18h38
  3. Changer de charset sur certaines colones
    Par goblin dans le forum MS SQL Server
    Réponses: 4
    Dernier message: 16/11/2005, 23h59
  4. Affecter une valleur sur une colone d'un DBGRID
    Par richard038 dans le forum Bases de données
    Réponses: 4
    Dernier message: 03/09/2005, 16h20
  5. css sur le submit et button
    Par mic79 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 19/01/2005, 10h51

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