# Mise en page du Saint Grail

**URL:** <https://www.debian-fr.org/t/mise-en-page-du-saint-grail/87338>\
**Category:** Programmation\
**Created:** [Octobre 30, 2022, 1:46 UTC](https://www.debian-fr.org/t/mise-en-page-du-saint-grail/87338 "2022-10-30T13:46:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Octobre 30, 2022, 1:46 UTC](https://www.debian-fr.org/t/mise-en-page-du-saint-grail/87338/1 "2022-10-30T13:46:51Z")

</div>

Bonjour  
a tous les briscard du developpement web

Au vu de la multiplicite des methodes que l on trouve sur internet. je suis un peu perdu.  
POur ceux qui l on deja applique pourriez vous exposez des methodes simples avec FLEXBOX:

 ![HolyGrail.svg](https://www.debian-fr.org/uploads/default/original/2X/a/a8c6dd472260f7ebfcfefb9d2bc31ebd9150cdc8.png)

Merci d avance.

---

<div class="post-metadata">

**Author:** ![Zargos](https://www.debian-fr.org/user_avatar/www.debian-fr.org/zargos/32/10889_2.png) [@Zargos](https://www.debian-fr.org/u/Zargos)\
**Post date:** [Octobre 30, 2022, 2:29 UTC](https://www.debian-fr.org/t/mise-en-page-du-saint-grail/87338/2 "2022-10-30T14:29:05Z")

</div>

Bonjour,  
chaque rectangle est un bloc. Ce qui définit sa fonction c’est la façon dont tu les positionnes et leur contenu.  
fondamentalement ce sont tous des `<div .... > .... </div>`  
et c’est à travers les CSS que tu les mets en forme et leur position.

---

<div class="post-metadata">

**Author:** ![anon36725218](https://www.debian-fr.org/letter_avatar_proxy/v4/letter/a/8e8cbc/32.png) [@anon36725218](https://www.debian-fr.org/u/anon36725218)\
**Post date:** [Octobre 30, 2022, 3:44 UTC](https://www.debian-fr.org/t/mise-en-page-du-saint-grail/87338/3 "2022-10-30T15:44:52Z")

</div>

> **[How to Use CSS Grid Layout – Grid Properties Explained with Examples](https://www.freecodecamp.org/news/how-to-use-css-grid-layout/)**
>
> Have you ever had a problem positioning items on your web browser? Perhaps every time you try to think of a solution, you become tired and give up. If so, stay tuned as I reveal a new method for resolving these kinds of problems with minimal or no...

> **[CSS Grid and Custom Shapes, Part 1 | CSS-Tricks](https://css-tricks.com/css-grid-and-custom-shapes-part-1/)**
>
> In a previous article, I looked at CSS Grid's ability to create complex layouts using its auto-placement powers. I took that one step further in another

😉

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Octobre 30, 2022, 3:48 UTC](https://www.debian-fr.org/t/mise-en-page-du-saint-grail/87338/4 "2022-10-30T15:48:24Z")

</div>

Je poste mon code et demande des critiques cnonstructives

```auto
<!DOCTYPE html>

<html lang="fr">
        <head>
		      <meta charset="UTF-8">
              <meta name="description" content="grande salle remplie d'ordinateur pour s'initier au code">
			  <meta name="robots" content="index,follow">
               <link rel="shortcut icon" href="favicon.ico">
              <title>Day_of_the_42</title>
              <link rel="stylesheet" type="text/css" href="style.css">

        </head>
               
			   <body>

                    <div class="container">
                        <header>

                            <div class="day">
                              <img src="images/day_of_the_42.png" alt="day-of-the-42" width="" height="">

                            </div>

                            <div class="loupe">
                             <img src="images/loupe.png" alt="loupe" width="300" height="182">

                            </div>

                            <div class="reload">
                                <a href="https://www.disney.com"> <img src="images/reload.png" alt="reload" width="20" height="20"></a>

                            </div>

                            <div class="close">
                              <a href="https://www.relaischateaux.com"><img src="images/close.gif" alt="close" width="20" height="20"></a>

                            </div>

                        </header>
                            <main class="cluster">
                               <img src="images/cluster.jpg" alt="cluster" width="" height="" usemap="#visit_cluster">

                               <map name="visit_cluster">
                                    <area shape="circle" coords="900,394,81" target="_blank" rel="nofollow" rel="noreferrer" href="http://www.apple.com">
                                    <area shape="rect" coords="471,328,324,545" target="_blank" rel="nofollow" rel="noreferrer" href="http://www.ikea.com">

                                </map>
								<div class="dialogue">
      <p>

          Vous <strong>entrez</strong> alors dans une grande piece remplie <br>
           d'ordinateurs ...<br>
         -Bonjour,vous etes nouveau ici ? <br>
         <input type="text" size="40"> <button type="submit">Répondre</button>
     </p>
    

    </div>
								
                            </main>

                                 <aside class="left_sidebar">
                                      <img src="images/arrow.png" alt="Avancer" title="Avancer" width="88" height="80">
                                      <img src="images/main.png" alt="Prendre" title="Prendre" width="80" height="80">
                                      <img src="images/oeil.png" alt="Regarder" title="Regarder" width="80" height="80">
                                      <img src="images/outil.png" alt="Utiliser" title="Utiliser" width="80" height="80">
                                      <img src="images/chat-icon.png" alt="Parler" title="Parler" width="80" height="80">

                                  </aside>

                                 <aside class="right-sidebar">
                                       <img src="images/book.png" alt="book" title="book" width="80" height="80">
                                       <img src="images/towel.png" alt="towel" title="towel" width="80" height="80">
                                       <img src="images/brick.jpg" alt="Mur" title="Mur" width="80" height="80">

                                 </aside>

                    </div>

                      <footer>
                       </footer>

                </body>
</html>

```

J ai applique la methode decrite ci dessous  
[Flexbox](https://www.developerdrive.com/holy-grail-layout-flexbox/)  
avec le css j obtiens les deux barres laterales a gauche de la partie principale

mon css[https://pastebin.com/0KTm2TXt](https://pastebin.com/0KTm2TXt)

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Octobre 30, 2022, 3:53 UTC](https://www.debian-fr.org/t/mise-en-page-du-saint-grail/87338/5 "2022-10-30T15:53:25Z")

</div>

Merci pour ton message mais j ai une preference pour flexbox

---

<div class="post-metadata">

**Author:** ![anon36725218](https://www.debian-fr.org/letter_avatar_proxy/v4/letter/a/8e8cbc/32.png) [@anon36725218](https://www.debian-fr.org/u/anon36725218)\
**Post date:** [Octobre 30, 2022, 4:04 UTC](https://www.debian-fr.org/t/mise-en-page-du-saint-grail/87338/6 "2022-10-30T16:04:01Z")

</div>

> [@Pat66](#):
>
> une preference pour flexbox

ok, bonne journée !

---

<div class="post-metadata">

**Author:** ![Zargos](https://www.debian-fr.org/user_avatar/www.debian-fr.org/zargos/32/10889_2.png) [@Zargos](https://www.debian-fr.org/u/Zargos)\
**Post date:** [Octobre 30, 2022, 9:01 UTC](https://www.debian-fr.org/t/mise-en-page-du-saint-grail/87338/7 "2022-10-30T21:01:02Z")

</div>

> [@Pat66](#):
>
> avec le css j obtiens les deux barres laterales a gauche de la partie principale

C’est normal, à aucun moment tu ne précise les positionnements des div par rapports aux autres.  
pour ce qui est de main, header et footer, c’est une question de hierarchie mais à lintérieur ça ne dit pas comment sont les éléments. Donc ils sont mis comme ils viennent.  
l’élement aside n’est pas tilisé correctement semble-t-il (regarde ici: [https://html.com/tags/aside/](https://html.com/tags/aside/))  
Je crois que c’est pareil pour nav : [https://html.com/tags/nav/](https://html.com/tags/nav/)  
C’est normalement fait pour un menu horizontal, et non vertical.  
Et dans tous les cas, le positionnement n’est pas dans le code HTML mais dans le CSS dans lequel il manque le container.  
Quelque chose au final (que tu as quasiment fait):

```auto
@media all and (min-width: 768px) {
    .container {
        flex-direction: row;
        flex-wrap: wrap;    
    } 
    header, 
    footer {
        width: 100%;
    }
    main {
        flex: 2;
        order: 2;
        min-height: 80vh;
    }
    
    .left-sidebar {
        order: 1;
        flex: 1;
    }
    .right-sidebar {
        flex: 1;
        order: 3;
    }
    footer {
        order: 4;
    }
}

```

Pour finir, mon HTML5 commence a être un peu rouillé. 🙂

---

<div class="post-metadata">

**Author:** ![anon36725218](https://www.debian-fr.org/letter_avatar_proxy/v4/letter/a/8e8cbc/32.png) [@anon36725218](https://www.debian-fr.org/u/anon36725218)\
**Post date:** [Novembre 1, 2022, 10:00 UTC](https://www.debian-fr.org/t/mise-en-page-du-saint-grail/87338/8 "2022-11-01T10:00:32Z")

</div>

Je viens de recevoir ce lien si çà peut aider.

> **[CSS Flexbox Explained – Complete Guide to Flexible Containers and Flex Items](https://www.freecodecamp.org/news/css-flexbox-complete-guide/)**
>
> CSS Flexbox gives you the tools to create basic and advanced website layouts in flexible and responsive ways. This tutorial discusses everything you need to know to use Flexbox like a pro. Table of Contents 1. What Is Flexbox? 2. Flex Container...

Bonne journée.