0

Верстаю макет. Для блоков header и section задал общий div, чтобы установить общий фон. введите сюда описание изображения

<body>
<div class="main-wrapper">
    <header class="header">
  <div class="container">
    <div class="navtop">
      <a href="#" class="logo"
        ><img src="img/logo.svg" alt="icon: logo" class="logo__image"
      /></a>
      <ul class="navtop-menu">
        <li class="navtop-menu__item">
          <a href="#" class="navtop-menu__link--active">Home</a>
        </li>
        <li class="navtop-menu__item">
          <a href="#" class="navtop-menu__link">Features</a>
        </li>
        <li class="navtop-menu__item">
          <a href="#" class="navtop-menu__link">Services</a>
        </li>
        <li class="navtop-menu__item">
          <a href="#" class="navtop-menu__link">Contact</a>
        </li>
        <li class="navtop-menu__item">
          <a href="#" class="navtop-menu__link">FAQ</a>
        </li>
      </ul>
      <div class="navtop-buttons">
        <button class="navtop-buttons__signin">Sign In</button>
        <button class="navtop-buttons__getstarted">Get Started</button>
      </div>
    </div>
    <!-- /.navtop -->
  </div>
</header>
<!-- /.header -->
<section class="hero">
  <div class="container">
    <p>в работе</p>
  </div>

</section>
<!-- /.hero -->
</div>

и css: .main &-wrapper background: url('../img/bg-blue.svg') no-repeat fixed, url('../img/bg-grey.svg') 100% 780px no-repeat height: 840px ну и... header position: relative top: 20px

Правильно ли так позиционировать header? И как теперь отодвинуть следующую секцию? Как правильно верстать макеты, где фоновый рисунок на 2 секции? введите сюда описание изображения

Извиняюсь, не всю секцию выложил. Там именно рисунок на фоне... введите сюда описание изображения

1
  • Допустим HEADER у вас высотой 100px. Конкретно для этой страницы HEADER-у можно задать "z-index: 1; position: relative; margin-bottom: -100px" и он целиком провалится в нижнюю секцию с уникальным фоном. На остальных безфоновых страницах HEADER просто будет 100px.
    – NoSkill
    13 апр 2021 в 16:15

1 ответ 1

1

Зачем усложнять жизнь? Зачем фоновый рисунок на две секции?

body {
  margin: 0;
}

header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  padding: .5em 1em;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

section {
  display: block;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right, #05f 70%, transparent 70%);
  padding-top: 3em;
  box-sizing: border-box;
}

h1 {
  margin: 0;
}
<header>
  <span>Logo</span>
  <nav>
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
    <span>Link</span>
  </nav>
</header>
<section>
  <h1>Hello world</h1>
</section>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.