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 ?

css sur 2 colonnes

Tableau en CSS

Mode arborescent

Discussions similaires

Partager

Partager