formatage de page html en colonne

14 janvier 2020 à 11:31:25

bonjour

je cherche a créer un style css pour une page html qui devrais avoir un code un peut dans ce genre la au final

<!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="prompt">blalba</div>
                <div class="commandEcho">dlkqfjhqfkljhsdkldhfklqsdhqksjsfdkhdfqksdhqkdfjhdfsq</div>
            </div>
            <div class="content">
                <div class="c1">
                    <pre>
                </pre>
                </div>
                <div class="c2">
                    <p>
                        <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad dicta repellat accusamus in
                            ratione atque sint repellendus voluptate fuga, esse, numquam dolorem officia quam quidem
                            eius minus eveniet reprehenderit tenetur.</span>
                        <span>Cupiditate, et ad. Odio harum assumenda iure ipsam odit necessitatibus error ipsa iusto.
                            Adipisci ducimus a sapiente fugit, eveniet, corrupti libero velit qui dolore odio optio
                            accusantium, expedita ipsa suscipit.</span>
                        <span>Deserunt exercitationem necessitatibus temporibus, quas repellat officiis nulla. Repellat
                            aut eaque consequatur atque animi labore doloremque dolor fugit! Sunt distinctio illum modi
                            cupiditate voluptates adipisci optio sequi blanditiis beatae laboriosam!</span>
                        <span>Nulla aut, pariatur blanditiis deserunt vero ea ad? Modi veritatis ab corporis praesentium
                            repudiandae officiis autem, obcaecati eius ad hic voluptas adipisci inventore nemo?
                            Asperiores, quae. Ipsam consequuntur reprehenderit fugiat.</span>
                        <span>Aliquam, dignissimos. Beatae aspernatur repellendus ullam molestiae sunt earum aliquid
                            necessitatibus error? Doloribus quas molestiae modi quaerat sapiente. Soluta, repellendus
                            ullam. Dolor ipsam possimus, fugit voluptatum ipsum voluptate quas. Ad.</span>
                    </p>
                    <p>
                        <span>Temporibus sint ipsa animi nulla, optio soluta vitae sed voluptatibus velit consectetur
                            magnam doloremque, modi nam sunt. Officiis numquam maxime perspiciatis sed fugit facilis,
                            pariatur velit ex amet nemo nam?</span>
                        <span>Doloribus dolorem quas cum, ducimus, animi laudantium id, magni labore alias odit optio
                            nostrum? Dolores qui consequatur excepturi pariatur. Ratione ipsum nesciunt ab, doloremque
                            sunt tempora laboriosam nobis ea tempore.</span>
                        <span>Explicabo aut saepe consequuntur ducimus error. Libero quidem placeat sunt ab quis
                            voluptas voluptates enim exercitationem, nesciunt odit hic totam ut officiis inventore
                            temporibus, officia labore consequatur vero ducimus eaque!</span>
                        <span>Alias error, repellendus animi similique quia ipsum ea? Ut dolore corrupti deleniti? Quo
                            fugit inventore aperiam accusamus excepturi harum odio explicabo amet? Temporibus quo
                            adipisci dolorum dicta quidem aliquam praesentium.</span>
                        <span>Veniam recusandae eligendi officiis excepturi maxime corrupti porro, maiores error facere
                            consequuntur aperiam a autem facilis nobis expedita deleniti non. Odit iusto consequatur
                            quia excepturi nihil, recusandae at magni vel?</span>
                    </p>
                </div>
            </div>

        </div>
    </section>
</body>

</html>

en gros c'est pas grand chose :

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 ca 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 qu prend le reste de la place
2 je voudrais que cette element soit static et que le texte inclus dans ma class=content puisse defiler en dessous
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

et je ne sais pas comment m'y prendre

-
Edité par CharlesDelepelaire 14 janvier 2020 à 12:09:00

AlainPré

14 janvier 2020 à 18:37:33

Pour afficher sur 2 colonnes, voir la propriété CSS columns (mais les colonnes auront une largeur identique).
Sinon il y a aussi les flex-box, très souples pour gérer les largeurs de colonnes en fixe ou en dynamique.
Pour que le texte inclus dans ma class=content défile en dessous le mieux est de mettre float:left; sur le bloc header.

Si tu as besoin de liens ais moi signe, mais la technique des flex-box est maintenant assez classique.

Alain - Linkedin

CharlesDelepelaire

15 janvier 2020 à 10:13:07

j'ai tenter la position float:left; pour gérer mon block <div class="header"> en fixe et le block <div class="content"> qui defile en dessous mais visiblement ca marche pas alors que position:fixed; ca marche mais ca fous le bordel dans ma presentation. et le fait de placer la classe body en flex n'arrange pas tellement la situtation

@media screen and (min-width: 980px) {
  .body {
    width: 500px;
    /* display: flex;
    flex-direction: column; */
  }
  .header {
    background-color: lawngreen;
    position: fixed;
  }
  .content {
    background-color: lightblue;
  }
  
  .c1 {
    color: hotpink;
  }
  .c2 {
    color: gray;
  }

  p {
    color: black;
  }
}

[EDIT]j'ai regler une partie du problem comme ceci :

@media screen and (min-width: 980px) {
  .body {
    width: 850px;
    display: flex;
    flex-direction: column;
    margin: 1%;
    justify-content: flex-start;
    /* background-image: url(wallpaper_www.wallpaperhi.com_28.jpg); */
    color: black;

  }
  .header {  
    width: inherit;
    display: inherit;
    position: fixed;
    background-color: rgba(63, 4, 4, 0.753);
  }
  .content {
    width: inherit;
    display: inherit;
  }
  
  .c1 {
    width: 50px;
    background-color: rgba(25, 25, 112, 0.712);
    text-align: center;
  }
  .c2 {
    width: 800px;
    text-align: justify;
    margin-left: 1%;
    border-left: 1px solid black;
    padding-left: 2%;
  }
}

par contre j'ai maintenant un souci a savoir l'espace laisser entre les 2 .element flex (.content et .header) qui dependent de .body

-
Edité par CharlesDelepelaire 15 janvier 2020 à 16:03:52

AlainPré

15 janvier 2020 à 18:30:02

Il fallait pas mettre flex-direction sur column. C'est le contraire de ce que tu veux.
Pour l'espace ça peut se gérer avec les marges tout simplement.

Alain - Linkedin

CharlesDelepelaire

15 janvier 2020 à 18:48:34

en fait j'ai mit flex-direction:column; par ce que je veut c'est que mes block content et header se retrouve l'un sous l'autre.

par contre curieusement si je vire la propriété flex-direction j'ai toujours le meme resultat d'affichage en colonne ce qui ne devrait pas etre le cas.

enfin dernier point j'ai fini par reussir a virer l'espace en mettant une marge... negative dans le .content (avec fex-direction:column activé) et une marge normale sans le flex column.

la page est visible ici : http://xlibs.zd.fr/testFolder/shellHome.html. ce qui m'ennuie c'est le residue de marge qu'ont a quand ont navigue jusqu'au bas de la page.

si je pouvais trouver une solution pour faire en sorte que le texte disparaisse lorsqu'il glisse en dessous de la partie fixe

[EDIT] j'ai aussi un bout de marge de m**de au dessus de la position="fixed" qui doit faire environ 5px qui apparait quand ont scroll

-
Edité par CharlesDelepelaire 15 janvier 2020 à 20:25:08

CharlesDelepelaire

19 janvier 2020 à 13:39:43

UP de quel coté dois-je chercher pour ce petit desagrement ?