БЛОГ НА HUSL


Почему сдвигается блок, и как его разместить?

Автор вопроса: Igor

Не могу работать с блоком , который идет сразу после заголовка и по идее должен находиться правее относительно меню. Что делать? При 1152-% масштабе все работает, а начиная от 1153, не отображаетсявведите сюда описание изображения

  body {
  background-color: #F1F1F1;
  font-family: 'Playfair Display', serif;
  margin: 0;
}


/* HEAD */

.head {
  background-color: #FFFFFF;
  min-height: 80px;
  width: 100%;
  margin: 0;
  z-index: 10;
  display: inline-flex;
}


/* LOGO */

.logo img {
  height: 66px;
  margin-top: 7px;
  margin-left: 25px;
}


/* VERTICAL MENU */

#menuVertical {
  width: 57px;
  height: auto;
  position: fixed;
  z-index: 5;
  top: 80px;
  transition: .3;
}

#menuVertical ul {
  display: block;
  width: 57px;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

#menuVertical ul li {
  display: block;
  width: 57px;
  position: relative;
}

#menuVertical ul li a {
  position: relative;
  display: block;
  width: 57px;
  height: auto;
  box-sizing: border-box;
  line-height: 3em;
  padding: 10px 10px;
  background: #0D1217;
  transition: 0.3s;
}

#menuVertical ul li a:hover,
#menuVertical ul li:hover a {
  background: #161F27;
}

.menu {
  position: absolute;
  width: 57px;
  height: 100%;
  background-color: #0D1217;
  z-index: 3px;
}

.img_n {
  transition: 3.s;
}

.img_n:hover {
  transform: scale(1.3);
  /*margin-left: 5px;
	transition: .3s;*/
}


/* MEDIA MENU*/

@media screen and (max-width: 1152px) {
  .menu {
    width: 57px;
    transition: .3s;
  }
  #menuVertical ul li a {
    width: 57px;
    transition: .3s;
  }
  #menuVertical ul li {
    width: 57px;
  }
  @media screen and (min-width: 1152px) {
    .img_n img {
      display: none;
    }
  }
  /* BANNER */
  .banner {
    text-align: 100px;
  }
  .banner1 {
    border-color: red;
  }
<!DOCTYPE html>
<html>

<head>
  <!-- Mobile Specific Meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Favicon-->
  <link rel="shortcut icon" href="img/fav.png">
  <!-- Author Meta -->
  <meta name="author" content="colorlib">
  <!-- Meta Description -->
  <meta name="description" content="">
  <!-- Meta Keyword -->
  <meta name="keywords" content="">
  <!-- meta character set -->
  <meta charset="UTF-8">
  <!-- Site Title -->
  <title>Personal</title>

  <!--FONTS-->
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,800;0,900;1,400;1,900&display=swap" rel="stylesheet">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/banner.css">
</head>

<body>

  <header>
    <div class="head">
      <div class="logo">
        <a href="#"><img src="image/ico.png" alt="Логотип Professional Photography"></a>
      </div>
    </div>
  </header>
  <!--Nav-->
  <nav id="menuVertical">
    <ul>
      <li>
        <a href="#1">
          <div class="img_n"><img src="image/text.svg" alt=""></div>
        </a>
      </li>
      <li>
        <a href="#2">
          <div class="img_n"><img src="image/gallery.svg" alt=""></div>
        </a>
      </li>
      <li>
        <a href="#3">
          <div class="img_n"><img src="image/location.svg" alt=""></div>
        </a>
      </li>
      <li>
        <a href="#4">
          <div class="img_n"><img src="image/message.svg" alt=""></div>
        </a>
      </li>
      <li>
        <a href="#5">
          <div class="img_n"><img src="image/arrow.svg" alt=""></div>
        </a>
      </li>
  </nav>
  <div class="menu">
  </div>
  <!--MAIN-->

  <section class="banner">
    <div class="banner1">Welcome</div>
  </section>

</body>

</html>


Источник

Ответы (2 шт):

Автор решения: Sevastopol'

Если я правильно понял задачу, то вот: дело в одной строчке, прокомментировано в коде

  body {
  background-color: #F1F1F1;
  font-family: 'Playfair Display', serif;
  margin: 0;
}


/* HEAD */

.head {
  background-color: #FFFFFF;
  min-height: 80px;
  width: 100%;
  margin: 0;
  z-index: 10;
  display: inline-flex;
}


/* LOGO */

.logo img {
  height: 66px;
  margin-top: 7px;
  margin-left: 25px;
}


/* VERTICAL MENU */

#menuVertical {
  width: 57px;
  height: auto;
  position: fixed;
  z-index: 5;
  top: 80px;
  transition: .3;
}

#menuVertical ul {
  display: block;
  width: 57px;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

#menuVertical ul li {
  display: block;
  width: 57px;
  position: relative;
}

#menuVertical ul li a {
  position: relative;
  display: block;
  width: 57px;
  height: auto;
  box-sizing: border-box;
  line-height: 3em;
  padding: 10px 10px;
  background: #0D1217;
  transition: 0.3s;
}

#menuVertical ul li a:hover,
#menuVertical ul li:hover a {
  background: #161F27;
}

.menu {
  position: absolute;
  width: 57px;
  height: 100%;
  background-color: #0D1217;
  z-index: 3px;
}

.img_n {
  transition: 3.s;
}

.img_n:hover {
  transform: scale(1.3);
  /*margin-left: 5px;
	transition: .3s;*/
}

.banner {
  padding-left: 67px;
  /*Изменения здесь*/
}


/* MEDIA MENU*/

@media screen and (max-width: 1152px) {
  .menu {
    width: 57px;
    transition: .3s;
  }
  #menuVertical ul li a {
    width: 57px;
    transition: .3s;
  }
  #menuVertical ul li {
    width: 57px;
  }
  @media screen and (min-width: 1152px) {
    .img_n img {
      display: none;
    }
  }
  /* BANNER */
  .banner {}
  .banner1 {
    border-color: red;
  }
<header>
  <div class="head">
    <div class="logo">
      <a href="#"><img src="image/ico.png" alt="Логотип Professional Photography"></a>
    </div>
  </div>
</header>
<!--Nav-->
<nav id="menuVertical">
  <ul>
    <li>
      <a href="#1">
        <div class="img_n"><img src="image/text.svg" alt=""></div>
      </a>
    </li>
    <li>
      <a href="#2">
        <div class="img_n"><img src="image/gallery.svg" alt=""></div>
      </a>
    </li>
    <li>
      <a href="#3">
        <div class="img_n"><img src="image/location.svg" alt=""></div>
      </a>
    </li>
    <li>
      <a href="#4">
        <div class="img_n"><img src="image/message.svg" alt=""></div>
      </a>
    </li>
    <li>
      <a href="#5">
        <div class="img_n"><img src="image/arrow.svg" alt=""></div>
      </a>
    </li>
</nav>
<div class="menu">
</div>
<!--MAIN-->

<section class="banner">
  <div class="banner1">Welcome</div>
</section>

→ Ссылка
Автор решения: Игорь Чумаченко

Мой тебе большой совет, создай блок родитель для контента, чтобы каждому блоку сейчас не задавать отступ слева. Так как тебе нужно двигать из-за того что меню фиксед перекрывает контент. Просто все будешь закидывать в блок родителя который этот отступ сделает один раз. Сохранишь и строки кода и свои нервы) На примере показал назвал блок .main

Будь здоров ;)

  body {
  background-color: #F1F1F1;
  font-family: 'Playfair Display', serif;
  margin: 0;
}


/* HEAD */

.head {
  background-color: #FFFFFF;
  min-height: 80px;
  width: 100%;
  margin: 0;
  z-index: 10;
  display: inline-flex;
}


/* LOGO */

.logo img {
  height: 66px;
  margin-top: 7px;
  margin-left: 25px;
}


/* VERTICAL MENU */

#menuVertical {
  width: 57px;
  height: auto;
  position: fixed;
  z-index: 5;
  top: 80px;
  transition: .3;
}

#menuVertical ul {
  display: block;
  width: 57px;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

#menuVertical ul li {
  display: block;
  width: 57px;
  position: relative;
}

#menuVertical ul li a {
  position: relative;
  display: block;
  width: 57px;
  height: auto;
  box-sizing: border-box;
  line-height: 3em;
  padding: 10px 10px;
  background: #0D1217;
  transition: 0.3s;
}

#menuVertical ul li a:hover,
#menuVertical ul li:hover a {
  background: #161F27;
}

.menu {
  position: absolute;
  width: 57px;
  height: 100%;
  background-color: #0D1217;
  z-index: 3px;
}

.img_n {
  transition: 3.s;
}

.img_n:hover {
  transform: scale(1.3);
  /*margin-left: 5px;
	transition: .3s;*/
}

   .main {
  margin-left: 70px
   }

/* MEDIA MENU*/

@media screen and (max-width: 1152px) {
  .menu {
    width: 57px;
    transition: .3s;
  }
  #menuVertical ul li a {
    width: 57px;
    transition: .3s;
  }
  #menuVertical ul li {
    width: 57px;
  }
  @media screen and (min-width: 1152px) {
    .img_n img {
      display: none;
    }
  }
  /* BANNER */
  .banner {
    text-align: 100px;
  }
  .banner1 {
    border-color: red;
  }
<!DOCTYPE html>
<html>

<head>
  <!-- Mobile Specific Meta -->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Favicon-->
  <link rel="shortcut icon" href="img/fav.png">
  <!-- Author Meta -->
  <meta name="author" content="colorlib">
  <!-- Meta Description -->
  <meta name="description" content="">
  <!-- Meta Keyword -->
  <meta name="keywords" content="">
  <!-- meta character set -->
  <meta charset="UTF-8">
  <!-- Site Title -->
  <title>Personal</title>

  <!--FONTS-->
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,800;0,900;1,400;1,900&display=swap" rel="stylesheet">
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" type="text/css" href="css/banner.css">
</head>

<body>

  <header>
    <div class="head">
      <div class="logo">
        <a href="#"><img src="image/ico.png" alt="Логотип Professional Photography"></a>
      </div>
    </div>
  </header>
  <!--Nav-->
  <nav id="menuVertical">
    <ul>
      <li>
        <a href="#1">
          <div class="img_n"><img src="image/text.svg" alt=""></div>
        </a>
      </li>
      <li>
        <a href="#2">
          <div class="img_n"><img src="image/gallery.svg" alt=""></div>
        </a>
      </li>
      <li>
        <a href="#3">
          <div class="img_n"><img src="image/location.svg" alt=""></div>
        </a>
      </li>
      <li>
        <a href="#4">
          <div class="img_n"><img src="image/message.svg" alt=""></div>
        </a>
      </li>
      <li>
        <a href="#5">
          <div class="img_n"><img src="image/arrow.svg" alt=""></div>
        </a>
      </li>
  </nav>
  <div class="menu">
  </div>
  <!--MAIN-->
  <div class="main">
    <section class="banner">
      <div class="banner1">Welcome</div>
    </section>
  </div>
</body>

</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.