css sur 2 colonnes

**grosfaignan** · 14/01/2020, 14h34

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 ?

Invité · 14/01/2020, 16h12

Bonjour,

je te conseille d'utiliser les balises HTML5 :

**grosfaignan** · 14/01/2020, 16h14

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

**grosfaignan** · 15/01/2020, 17h28

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

css sur 2 colonnes

Tableau en CSS

Discussions similaires

Partager

Partager