Многостраничный сайт - разная высота header

132
19 ноября 2019, 16:50

* { 
  margin: 0px; 
  padding: 0; 
} 
 
a { 
  text-decoration: none; 
} 
 
html { 
  overflow-x: hidden; 
} 
 
body { 
  font-family: 'Arial Bold', sans-serif; 
} 
 
header { 
  width: 100%; 
  background-color: #17191b; 
  display: flex; 
  height: 770px; 
  margin: 0 auto; 
} 
 
.page_stroyka header .header { 
  width: 100%; 
  height: 204px; 
} 
 
.page_stroyka header { 
  height: 204px; 
} 
 
.logo { 
  position: relative; 
  margin: 73px 0 0 90px; 
  display: block; 
} 
 
nav { 
  position: relative; 
  top: 65px; 
  left: -25px; 
  margin: 0px; 
  z-index: 5px; 
  display: inline-block; 
  height: 32px; 
  width: 100%; 
} 
 
ul { 
  display: inline-block; 
  margin: 0; 
  padding: 0; 
  list-style: none; 
} 
 
ul.menu>li { 
  float: left; 
  position: relative; 
  font-family: 'Arial Bold', sans-serif; 
  font-weight: bold; 
  margin-right: 88px; 
} 
 
ul.menu>li>a { 
  display: block; 
  padding: 10px; 
  color: white; 
  background-color: #17191b; 
  text-decoration: none; 
} 
 
ul.menu>li>a:hover { 
  background-color: #17191b; 
  border: 1px solid #fff; 
} 
 
ul.submenu { 
  display: none; 
  position: absolute; 
  width: 305px; 
  z-index: 15; 
  top: 36px; 
  left: 0; 
  background-color: white; 
  border: 1px solid #fff; 
} 
 
ul.submenu>li { 
  display: block; 
} 
 
ul.submenu>li>a { 
  display: block; 
  padding: 10px; 
  color: white; 
  background-color: #17191b; 
  text-decoration: none; 
} 
 
ul.submenu>li>a:hover { 
  background-color: #17191b; 
} 
 
ul.menu>li:hover>ul.submenu { 
  display: block; 
} 
 
.contact { 
  width: 50%; 
  position: relative; 
  color: #fff; 
  font-size: 24px; 
  font-family: 'Roboto Bold', sans-serif; 
  top: 117px; 
  left: 575px; 
  height: 25px 
} 
 
.call { 
  width: 50%; 
  position: relative; 
  top: 173px; 
  left: 330px; 
  font-size: 18px; 
  font-family: 'Arial Regular', sans-serif; 
  z-index: 30px; 
  height: 50px; 
} 
 
.call a { 
  border: 1px solid #fecd39; 
  padding: 15px 21px; 
  background-color: #fecd39; 
  color: #000; 
} 
 
.call a:hover { 
  background-color: #e2aa00; 
  border-color: #e2aa00; 
} 
 
.call a:active { 
  background-color: #e2aa00; 
  border-color: #785a00; 
  box-shadow: inset 0px 2px 3px 2px rgba(120, 90, 0, 0.5); 
} 
 
button.submit { 
  border: 1px solid #fecd39; 
  padding: 15px 21px; 
  background-color: #fecd39; 
  color: #000; 
  font-size: 18px; 
  font-family: 'Arial Regular', sans-serif; 
} 
 
.modal button { 
  margin-left: 50px; 
} 
 
.modal { 
  position: fixed; 
  /* фиксированное положение */ 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  /* background: rgba(23,25,27,0.5); /* цвет фона */ 
  z-index: 1050; 
  opacity: 0; 
  /* по умолчанию модальное окно прозрачно */ 
  -webkit-transition: opacity 200ms ease-in; 
  -moz-transition: opacity 200ms ease-in; 
  transition: opacity 200ms ease-in; 
  /* анимация перехода */ 
  pointer-events: none; 
  /* элемент невидим для событий мыши */ 
  margin: 0; 
  padding: 0; 
  /*  background: linear-gradient(to bottom, #000, #fff);*/ 
} 
 
 
/* при отображении модального окно */ 
 
.modal:target { 
  opacity: 1; 
  /* делаем окно видимым */ 
  pointer-events: auto; 
  /* элемент видим для событий мыши */ 
  overflow-y: auto; 
  /* добавляем прокрутку по y, когда элемент не помещается на страницу */ 
  /*opacity: 0.3;*/ 
} 
 
 
/* ширина модального окна и его отступы от экрана */ 
 
.modal-dialog { 
  position: relative; 
  width: 39%; 
  height: 244px; 
  margin: 10px; 
} 
 
@media (min-width: 576px) { 
  .modal-dialog { 
    max-width: 500px; 
    margin: 30px auto; 
    /* для отображения модального окна по центру */ 
  } 
} 
 
 
/* свойства для блока, содержащего контент модального окна */ 
 
.modal-content { 
  position: relative; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: vertical; 
  -webkit-box-direction: normal; 
  -webkit-flex-direction: column; 
  -ms-flex-direction: column; 
  flex-direction: column; 
  background-color: #17191b; 
  -webkit-background-clip: padding-box; 
  background-clip: padding-box; 
  border: 1px rgba(255, 255, 255, .2); 
  border-radius: .3rem; 
  outline: 0; 
} 
 
@media (min-width: 768px) { 
  .modal-content { 
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5); 
    /*box-shadow: 0 5px 15px rgba(0,0,0,.5);*/ 
  } 
} 
 
 
/* свойства для заголовка модального окна */ 
 
.modal-header { 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-box-pack: justify; 
  -webkit-justify-content: space-between; 
  -ms-flex-pack: justify; 
  justify-content: space-between; 
  padding: 15px; 
} 
 
.modal-title { 
  margin-top: 0; 
  margin-bottom: 0; 
  line-height: 1.5; 
  font-size: 24px; 
  font-weight: 500; 
  font-family: "Roboto Regular" sans-serif; 
  color: #fff; 
  text-align: center; 
} 
 
 
/* свойства для кнопки "Закрыть" */ 
 
.close { 
  float: right; 
  font-family: sans-serif; 
  font-size: 24px; 
  font-weight: 700; 
  line-height: 1; 
  color: #fff; 
  text-shadow: none; 
  text-decoration: none; 
} 
 
 
/* свойства для блока, содержащего основное содержимое окна */ 
 
.modal-body { 
  position: relative; 
  -webkit-box-flex: 1; 
  -webkit-flex: 1 1 auto; 
  -ms-flex: 1 1 auto; 
  flex: 1 1 auto; 
  padding: 15px; 
  overflow: auto; 
  font-size: 16px; 
  font-family: "Roboto Regular" sans-serif; 
  color: #fff; 
  line-height: 1.5; 
} 
 
.send button { 
  border: 1px solid #fecd39; 
  padding: 15px 21px; 
  background-color: #fecd39; 
  color: #000; 
  font-size: 18px; 
  font-family: 'Arial Regular', sans-serif; 
} 
 
.name { 
  float: left; 
} 
 
.phone { 
  float: left; 
} 
 
.email { 
  float: left; 
} 
 
.msg { 
  float: left; 
} 
 
.name-1 { 
  float: right; 
} 
 
.phone-1 { 
  float: right; 
} 
 
.email-1 { 
  float: right; 
} 
 
.msg-1 { 
  float: right; 
} 
 
footer { 
  background-color: #17191b; 
  height: 261px; 
  width: 100%; 
} 
 
footer .cont { 
  position: relative; 
  left: 15%; 
} 
 
footer .cont a { 
  color: #fff; 
  font-family: "Arial Bold" sans-serif; 
  font-size: 24px; 
} 
 
footer .activity { 
  position: relative; 
  top: -45px; 
  left: 35.6%; 
  color: #fff; 
  line-height: 2; 
} 
 
footer .activity .direction { 
  color: #fff; 
  font-size: 24px; 
  font-family: "Arial Bold" sans-serif; 
} 
 
footer .activity a { 
  color: #fff; 
  font-family: "Arial Bold" sans-serif; 
  font-size: 20px; 
} 
 
footer .number { 
  position: relative; 
  top: -275px; 
  left: 82%; 
  color: #fff; 
  font-size: 24px; 
} 
 
main .stroyka { 
  width: 100%; 
  height: 2560px; 
} 
 
main .about_stroyka h1 { 
  position: relative; 
  top: 72px; 
  left: 20%; 
  font-size: 40px; 
  font-family: "Roboto Bold" sans-serif; 
  color: #fff; 
  text-shadow: 0 32px 27px black; 
} 
 
main .about_stroyka p { 
  height: 230px; 
  width: 65.4%; 
  position: relative; 
  top: 126px; 
  left: 20%; 
  color: #fff; 
  font-size: 22px; 
  font-family: "Roboto Regular" sans-serif; 
} 
 
main .about_stroyka img { 
  position: relative; 
  top: 170px; 
} 
 
main .numbers-s { 
  margin-top: 0; 
  position: relative; 
  top: 250px; 
  height: 55px; 
} 
 
main .desc-s { 
  position: relative; 
  top: 300px; 
} 
 
main .numbers-s p { 
  width: 15%; 
  font-size: 72px; 
  color: #519fa5; 
} 
 
main .numbers-s .n1-s { 
  position: relative; 
  left: 25%; 
} 
 
.t1-s { 
  width: 11.1%; 
  position: relative; 
  left: 25%; 
  top: -30px; 
  font-size: 20px; 
  font-family: "Roboto Regular" sans-serif; 
  color: #fff; 
  line-height: 1.5; 
} 
 
main .numbers-s .n2-s { 
  position: relative; 
  left: 50%; 
  top: -78px; 
} 
 
.t2-s { 
  position: relative; 
  top: -90px; 
  left: 50%; 
  font-size: 20px; 
  font-family: "Roboto Regular" sans-serif; 
  color: #fff; 
  line-height: 1.5; 
} 
 
main .numbers-s .n3-s { 
  position: relative; 
  left: 75%; 
  top: -162px; 
} 
 
.t3-s { 
  position: relative; 
  top: -150px; 
  left: 75%; 
  font-size: 20px; 
  font-family: "Roboto Regular" sans-serif; 
  color: #fff; 
  line-height: 1.5; 
} 
 
main .building { 
  position: relative; 
  top: 250px; 
  left: 20%; 
} 
 
main .building h1 { 
  font-size: 30px; 
  font-family: "Roboto Bold" sans-serif; 
  color: #fff; 
} 
 
main .building p { 
  width: 65.4%; 
  font-size: 20px; 
  font-family: "Roboto Regular" sans-serif; 
  color: #fff; 
} 
 
main .b4-s { 
  font-size: 18px; 
  font-family: 'Arial Regular', sans-serif; 
  position: relative; 
  top: 358px; 
  text-align: center; 
} 
 
main .b4-s a { 
  border: 1px solid #fecd39; 
  padding: 15px 1%; 
  background-color: #fecd39; 
  color: #000; 
} 
 
.b4-s a:hover { 
  background-color: #e2aa00; 
  border-color: #e2aa00; 
} 
 
.b4-s a:active { 
  background-color: #e2aa00; 
  border-color: #785a00; 
  box-shadow: inset 0px 2px 3px 2px rgba(120, 90, 0, 0.5); 
} 
 
main { 
  display: flex; 
  flex-direction: column; 
  width: 100%; 
  background-color: #17191b; 
  height: 1830px; 
}
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Stroyka</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <link rel="stylesheet" href="style.css"> 
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
  <link href="http://allfont.ru/allfont.css?fonts=arial-narrow-bold" rel="stylesheet" type="text/css" /> 
</head> 
 
<body id="page-stroyka"> 
  <header> 
    <div id="header"> 
      <div class="logo"> 
        <a href="index.html"><img src="header.jpg" width="365" height="90" /></a> 
      </div> 
    </div> 
    <div class="contact"> 
      <p>+7(499)161 99 92</p> 
    </div> 
    <div class="call"><a href="#window">ЗАКАЗАТЬ ЗВОНОК</a></div> 
    <div id="window" class="modal"> 
      <div class="modal-dialog"> 
        <div class="modal-content"> 
          <div class="modal-header"> 
            <h3 class="modal-title">Введите контакты для связи</h3> 
            <a href="#close" title="Close" class="close">×</a> 
          </div> 
          <div class="modal-body"> 
            <form id="contact-1" action="#" method="post" name="contact"> 
              <label for="name">Ваше имя           </label> 
              <input id="name-1" class="txt" name="name" type="name" placeholder=""><br> 
              <label for="phone">Телефон</label> 
              <input id="phone-1" class="txt" name="phone" type="phone" placeholder=""> <br> 
              <label for="email">Электронная почта</label> 
              <input id="email-1" class="txt" name="email" type="email" placeholder=""> <br> 
              <label for="msg">Комментарий</label> 
              <textarea id="msg-1" class="txtarea" name="msg" placeholder=""></textarea><br> 
              <button id="send">Заказать звонок</button> 
            </form> 
          </div> 
        </div> 
      </div> 
    </div> 
    <nav> 
      <ul class="menu"> 
        <li><a href="intex.html">ДЕЯТЕЛЬНОСТЬ</a> 
          <ul class="submenu"> 
            <li><a href="transport.html">Транспорт и логистика</a></li> 
            <li><a href="stroyka.html">Строительство и монтаж</a></li> 
            <li><a href="trade.html">Оптово-розничная торговля</a></li> 
          </ul> 
        </li> 
        <li><a href="index.html">КОНТАКТЫ</a></li> 
      </ul> 
    </nav> 
  </header> 
  <main class="stroyka"> 
    <div class="quote"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. </p> 
    </div> 
    <div class="about_stroyka"> 
      <h1>Строительно-монтажные работы</h1> 
      <p> ООО «Интэкс-Стайл» с 2014 года осуществляет строительно-монтажные работы любой сложности. Мы способны в короткий срок мобилизовать и сосредоточить на объекте необходимое количество персонала высокой квалификации, строительно-монтажной и грузоподъемной 
        техники, материальных ресурсов, инструментов и приспособлений. Наличие собственной специальной техники позволяет динамично перемещаться с одного объекта на другой. Каждый выполненный нами объект сдается в сроки и качественно, так как мы дорожим 
        нашими клиентами и выстраиваем долгосрочные отношения. 
      </p> 
      <img src="stroyka.png"> 
    </div> 
    <div class="numbers-s"> 
      <div class="n1-s"> 
        <p>30+</p> 
      </div> 
      <div class="n2-s"> 
        <p>900+</p> 
      </div> 
      <div class="n3-s"> 
        <p>75</p> 
      </div> 
    </div> 
    <div class="desc-s"> 
      <div class="t1-s"> 
        <p>выполненных <br>объектов</p> 
      </div> 
      <div class="t2-s"> 
        <p>сотрудников<br> на объектах</p> 
      </div> 
      <div class="t3-s"> 
        <p>единиц техники <br>на объектах</p> 
      </div> 
    </div> 
    <div class="building"> 
      <h1>Строительно-монтажные работы</h1> 
      <br><br> 
      <p>ООО «Интэкс-Стайл» предлагает выполнение следующих видов работ:<br><br> • Работы по организации строительства, реконструкции и капитального ремонта привлекаемым застройщиком или заказчиком (генеральным подрядчиком);<br> • Геодезические работы;<br>        • Подготовительные, земляные и свайные работы, в том числе по закреплению грунтов;<br> • Устройство монолитных и монтаж сборных бетонных и железобетонных конструкций;<br> • Монтаж металлических и деревянных конструкций;<br> • Защита строительных 
        конструкций, трубопроводов и оборудования;<br> • Устройство кровель и фасадные работы;<br> • Устройство внутренних инженерных систем и оборудования зданий и сооружений, наружных сетей водопровода, наружных сетей канализации, теплоснабжения и электрических 
        сетей; 
        <br> • Устройство объектов нефтяной и газовой промышленности;<br> • Монтажные и пусконаладочные работы; 
      </p> 
    </div> 
    <div class="b4-s"><a href="">ЗАКАЗАТЬ РАБОТЫ</a></div> 
  </main> 
  <footer> 
    <div class="cont"><a href=""> КОНТАКТЫ </a></div> 
    <div class="activity"> 
      <p> 
        <span class="direction">НАПРАВЛЕНИЯ <br>ДЕЯТЕЛЬНОСТИ<span>  
      <br>  
      <a href="">Транспорт и логистика</a>  
      <br/> 
      <a href="">Строительно-монтажные работы</a> 
      <br/> 
      <a href="">Оптово-розничная торговля</a> 
      </p> 
		</div> 
		<div class="number"> +7(499)161 99 92</div> 
	</footer> 
</body> 
</html>

на основной странице присутствует слайдер, на остальных нет. Как прописать разную высоту у других страниц? Файл css один на все странички. Еще и подвал съехал

Answer 1

Какой либо идентификатор добавить в body, и через css уже задавать высоту шапку. К примеру ID страниц прописать в классе body

READ ALSO
Расположение элементов в один ряд [закрыт]
HTML

Расположение элементов в один ряд [закрыт]

Есть страница на которой нужно расположить несколько элементов в рядИ у меня получилось но почему то в 2 разных случаях понадобилось делать...

 121
Принудительная отрисовка в v-for Vue
HTML

Принудительная отрисовка в v-for Vue

Есть такой v-for

 136
disabled у кнопки при нажатии на чекбокс
jQuery

disabled у кнопки при нажатии на чекбокс

Сделал, чтобы при нажатии на чекбокс disabled у кнопки убиралось, но как сделать, чтобы оно появлялось при повторном нажатии на чекбокс?

 128
Не могу получать доступ к ресурсам UserControl из Codebehind
c#

Не могу получать доступ к ресурсам UserControl из Codebehind

Создал простой юзер контрол и в его ресурсы положил сторибоард

 136