Сложно структурировать веб-страницу

Я пытаюсь изучить css, html, медиа-запросы, flexbox и сетку. И я на самом деле пытаюсь сделать простую веб-страницу. Я не понимаю, почему у меня есть пустой красный блок под "hebergement/activité". Я ошибся в своей дроби div#container 1? У меня тоже такая же проблема со светло-зеленым блоком, от section#filtersContainer

Вот веб-страница в виде фрагмента:

body {
    background-color: whitesmoke;
    max-width: 992px;
    margin: auto;
}
h1,h2,h3,h4,h5,h6 {
    margin-top: 0px;
    margin-bottom: 0px;
}
p {
    margin-top: 0px;
    margin-bottom: 0px;
}
div#container1 {
    background-color: red;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 4fr 1fr;
    grid-template-areas: 
    "navBar"
    "main"
    "basDePage";
    height: 100vh;
}

div.headContainer {
    background-color: bisque;
    display: flex;
}
div.logo {
    background-color: cadetblue;
}
div.hybrid {
    background-color: darkcyan;
    flex-grow: 2;
}
div.hebergement {
    background-color: darkblue;
}
main#container2 {
    background-color: purple;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "section"
    "articles";
    grid-area: main;
}
section#filtersContainer {
    background-color: lightgreen;
    grid-area: section;
}
div.rechercheBar {
    background-color: silver;
    display: flex;
}
div.rechercheBarMobile {
    display: none;
}
div.filters {
    background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
}
div.filterRelou {
    display: flex;
    flex-wrap: wrap;
}
div.filter {
    background-color: azure;
    display: flex;
}
div.headInformation {
    background-color: slateblue;
    display: flex;
}
article#container3 {
    background-color: lightgreen;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
    "article1 article2"
    "article3 article3";
    grid-area: articles;
}
section.article1 {
    background-color: peru;
    grid-area: article1;
    border-radius: 15px;
    margin: 15px;
}

aside.article2 {
    background-color: indianred;
    grid-area: article2;
    border-radius: 15px;
    margin: 15px;
}

section.article3 {
    background-color: darkslateblue;
    grid-area: article3;
}

footer.basDePage {
    background-color: gray;
    grid-area: basDePage;

}
/*Format tablette*/
@media screen and (max-width: 992px) and (min-width: 769px) {
    header.navBar {
        background-color: lightpink;
    }
}

<!DOCTYPE html>
<html>
    <head>
        <!--<link rel = "stylesheet" href = "./css/style.css"/>-->
        <!--<link rel = "icon" href = "Google__Logo.ico"/>-->
    </head>
    <body>
       <div id = "container1">
            <header class = "navBar">
                <div class = "headContainer"> 
                    <div class = "logo">Logo</div>
                    <div class = "hybrid"></div>
                    <div class = "hebergement">
                        <nav>
                            <a href = "#">Hebergment</a>
                            <a href = "#">Activités</a>
                        </nav>
                    </div>
                </div>
            </header>
            <main id = "container2">
                <section id = "filtersContainer">
                    <h1>trouver votre hébergement</h1><p>En plain centre</p> 
                    <div class = "rechercheBar">
                        <i>icon</i>
                        <p>Marseille,France</p>
                        <p>bouton recherche</p>
                    </div>
                    <div class = "rechercheBarMobile">
                        <i>icon</i>
                        <p>Marseille,France</p>
                        <i>icon loupe</i>
                    </div>
                    <div class = "filters">
                        <p>Filtres:</p>
                        <div class = "filterRelou"> 
                            <div class = "filter">
                                <i>icon</i>
                                <p>Economique</p>
                            </div>
                            <div class = "filter">
                                <i>icon</i>
                                <p>Famille</p>
                            </div>
                        </div> 
                        <div class = "filter">
                            <i>icon</i>
                            <p>Romantique</p>
                        </div>
                        <div class = "filter">
                            <i>icon</i>
                            <p>Animaux</p>
                        </div>
                    </div>
                    <div class = "headInformation">
                        <i>icon</i>
                        <p>plus de 500...</p>
                    </div>
                </section>
                <article id = "container3">
                    <section class = "article1">Hébergement</section>
                    <aside class = "article2">Les plus populaires</aside>
                    <section class = "article3">Activités à Marseille</section>
                </article>
            </main>
            <footer class = "basDePage"> pied de page </footer>
       </div>
    </body>
</html>

Привет ??! Я сделал ваш код исполняемым фрагментом (используйте кнопку <>).

— 06.05.2022 10:19

html css

06.05.2022 10:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы настроили свою сетку таким образом:

div#container1 {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 4fr 1fr;
  grid-template-areas: "navBar" "main" "basDePage";
  height: 100vh;
}

Указав, что ваши строки равны 1fr 4fr 1fr, вы запрашиваете:

заголовок должен составлять 1 часть высоты страницы.
главное быть 4 доли от высоты страницы.
нижний колонтитул должен составлять 1 часть высоты страницы.

Если вы хотите, чтобы ваш заголовок был определенной высоты, установите желаемую высоту, например, 20 пикселей.

body {
  background-color: whitesmoke;
  max-width: 992px;
  margin: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

p {
  margin-top: 0px;
  margin-bottom: 0px;
}

div#container1 {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 18px 4fr 20px;
  grid-template-areas: "navBar" "main" "basDePage";
  height: 100vh;
}

div.headContainer {
  background-color: bisque;
  display: flex;
}

div.logo {
  background-color: cadetblue;
}

div.hybrid {
  background-color: darkcyan;
  flex-grow: 2;
}

div.hebergement {
  background-color: darkblue;
}

main#container2 {
  background-color: purple;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "section" "articles";
  grid-area: main;
}

section#filtersContainer {
  background-color: lightgreen;
  grid-area: section;
}

div.rechercheBar {
  background-color: silver;
  display: flex;
}

div.rechercheBarMobile {
  display: none;
}

div.filters {
  background-color: skyblue;
  display: flex;
  flex-wrap: wrap;
}

div.filterRelou {
  display: flex;
  flex-wrap: wrap;
}

div.filter {
  background-color: azure;
  display: flex;
}

div.headInformation {
  background-color: slateblue;
  display: flex;
}

article#container3 {
  background-color: lightgreen;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "article1 article2" "article3 article3";
  grid-area: articles;
}

section.article1 {
  background-color: peru;
  grid-area: article1;
  border-radius: 15px;
  margin: 15px;
}

aside.article2 {
  background-color: indianred;
  grid-area: article2;
  border-radius: 15px;
  margin: 15px;
}

section.article3 {
  background-color: darkslateblue;
  grid-area: article3;
}

footer.basDePage {
  background-color: gray;
  grid-area: basDePage;
}


/*Format tablette*/

@media screen and (max-width: 992px) and (min-width: 769px) {
  header.navBar {
    background-color: lightpink;
  }
}

<div id = "container1">
  <header class = "navBar">
    <div class = "headContainer">
      <div class = "logo">Logo</div>
      <div class = "hybrid"></div>
      <div class = "hebergement">
        <nav>
          <a href = "#">Hebergment</a>
          <a href = "#">Activités</a>
        </nav>
      </div>
    </div>
  </header>
  <main id = "container2">
    <section id = "filtersContainer">
      <h1>trouver votre hébergement</h1>
      <p>En plain centre</p>
      <div class = "rechercheBar">
        <i>icon</i>
        <p>Marseille,France</p>
        <p>bouton recherche</p>
      </div>
      <div class = "rechercheBarMobile">
        <i>icon</i>
        <p>Marseille,France</p>
        <i>icon loupe</i>
      </div>
      <div class = "filters">
        <p>Filtres:</p>
        <div class = "filterRelou">
          <div class = "filter">
            <i>icon</i>
            <p>Economique</p>
          </div>
          <div class = "filter">
            <i>icon</i>
            <p>Famille</p>
          </div>
        </div>
        <div class = "filter">
          <i>icon</i>
          <p>Romantique</p>
        </div>
        <div class = "filter">
          <i>icon</i>
          <p>Animaux</p>
        </div>
      </div>
      <div class = "headInformation">
        <i>icon</i>
        <p>plus de 500...</p>
      </div>
    </section>
    <article id = "container3">
      <section class = "article1">Hébergement</section>
      <aside class = "article2">Les plus populaires</aside>
      <section class = "article3">Activités à Marseille</section>
    </article>
  </main>
  <footer class = "basDePage"> pied de page </footer>
</div>

06.05.2022 10:18

Другие вопросы по теме

Гибкая обертка и выравнивание содержимого не работают

Javafx - изменить тему (CSS) в активном окне

Невозможно добавить высоту дочернему элементу, когда я добавляю положение относительно родителя

Когда я изменяю размер своего окна и уменьшаю его, я получаю этот белый пробел в нижней части моего проекта

Как расположить заголовок и кнопку по центру на одной строке?

Изменение размера высоты div во время преобразования для x и y

Объявить новую высоту и ширину для каждой новой страницы добавленного jspdf с помощью javascript

Удалить вертикальные поля между дочерними элементами Flex

Элемент Selenium Python XPATH не может найти элемент

Как разделить один список с помощью CSS

Сложно структурировать веб-страницу

Ответы 1

Другие вопросы по теме

Похожие вопросы