Загрузка...

How to make a website layout like this?

Thread in Frontend created by princ32 Oct 16, 2024. 494 views

  1. princ32
    princ32 Topic starter Oct 16, 2024 Батя съебался в восемь лет, мама любила дочку 218 Jan 24, 2018
    Всем привет! Подскажите, как надо написать html шаблон, что бы боковые sidebar 1, 2, 3 не зависили друг от друга? Коме не сложно накидайте структуру html, в какую группу элементов их включать? Я уже 2-ой день бьюсь и у меня что то уезжает. Самому элементарному примеру буду благодарен!

    [IMG]
     
    Oct 16, 2024
  2. vNoah
    vNoah Oct 16, 2024 Web dev. 6,365 Mar 3, 2020
    Так, а в чём именно проблема? Как они у тебя зависят?
    Типа ширина или высота?
     
    Oct 16, 2024
    1. princ32 Topic starter
      avatarvNoah, шапка и меню понятно, далее aside1 aside 2, main content b aside 3 я заворачиваю в div и распалогаю их по горизонтали. Но тогда aside 2 прилипает к aside 1 и я не могу сделать между ними растояние. padding перестает работать.
      Oct 16, 2024
    2. vNoah
      avatarprinc32, так, эээ, контенты aside1 aside2 нужно в отдельный <div>
      Типа левый
      Центр
      Правый
      И всё, +между ними расстояние... хз margin-bottom юзай, или если display: flex - gap
      Oct 16, 2024
    3. princ32 Topic starter
      avatarvNoah, ща попробуюв отдельный див div поместить
      Oct 16, 2024
  3. princ32
    princ32 Topic starter Oct 16, 2024 Батя съебался в восемь лет, мама любила дочку 218 Jan 24, 2018
    Code
    <div class="page">
    
    <div class="header">
    
        <h1>Header</h1>
    
    </div>
    
    <div class="nav">
    
        <p>Menu</p>
    
    </div>
    
    <div class="row">
    
        <div class="sidebar">
    
            <p>SIDE BAR 1</p>
    
        </div>
    
        <div class="sidebar">
    
            <p>SIDE BAR 2</p>
    
        </div>
    
        <div class="content">
    
            <p>My Content</p>
    
            <section>
    
                <div class="bloc1">TEXT</div>
    
                <div class="bloc2">TEXT</div>
    
            </section>
    
        </div>
    
        <div class="sidebar">
    
            <p>SIDE BAR 3</p>
    
        </div>
    
    </div>
    
    <div class="footer">
    
        <p>FOOTER</p>
    
    </div>
    
</div>
     
    Oct 16, 2024
  4. UnSad
    UnSad Oct 16, 2024 22 Jun 1, 2019
     
    Oct 16, 2024 Edited
  5. S_H_I_P
    S_H_I_P Oct 24, 2024 180 Sep 26, 2019
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout Page</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <header>HEADER</header>
    <menu>MENU</menu>
    <aside>ASIDE 1</aside>
    <aside>ASIDE 2</aside>
    <main>
    MAIN CONTENT
    <section>SECTION 1</section>
    <section>SECTION 2</section>
    </main>
    <aside>ASIDE 3</aside>
    <footer>FOOTER</footer>
    </body>
    </html>








    -------------------------------------





    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    body {
    font-family: Arial, sans-serif;
    display: grid;
    grid-template-areas:
    "header header header"
    "menu menu menu"
    "aside1 main aside3"
    "aside2 main aside3"
    "footer footer footer";
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto 1fr 1fr auto;
    gap: 10px;
    height: 100vh;
    }

    header {
    grid-area: header;
    background-color: #800040;
    padding: 20px;
    text-align: center;
    color: white;
    }

    .menu {
    grid-area: menu;
    background-color: #600032;
    padding: 15px;
    color: white;
    }

    .aside1 {
    grid-area: aside1;
    background-color: #A00055;
    padding: 15px;
    color: white;
    }

    .aside2 {
    grid-area: aside2;
    background-color: #900050;
    padding: 15px;
    color: white;
    }

    .aside3 {
    grid-area: aside3;
    background-color: #800060;
    padding: 15px;
    color: white;
    writing-mode: vertical-lr;
    text-align: center;
    }

    main {
    grid-area: main;
    background-color: #C00070;
    padding: 15px;
    color: white;
    }

    section {
    background-color: #E08090;
    margin: 10px;
    padding: 10px;
    }

    footer {
    grid-area: footer;
    background-color: #700035;
    padding: 20px;
    text-align: center;
    color: white;
    }
     
    Oct 24, 2024
Loading...