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
    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 ?

  2. #2

  3. #3
    Futur Membre du Club
    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
    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

###raw>template_hook.ano_emploi###