Why is the section block created in the header section?

S

Sergey Vasenin2017-07-25 17:52:28

css

Sergey Vasenin, 2017-07-25 17:52:28

I can’t understand why Section is created in the block where the menu is located, this is the first time I see this

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<body>
<header class="site-header">
  <div class="container">
    <div class="d33">
    </div>
  </div>

  <nav class="site-nav">
    <div class="container">
      <ul>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Staff</a></li>
        <li><a href="">Articles</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>
<section class="stn-servises">
  <h2 class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">fdfdf</div>
      <div class="col-md-6 col-lg-3"></div>
      <div class="col-md-6 col-lg-3"></div>
      <div class="col-md-6 col-lg-3"></div>
    </div>
  </h2>
</section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="js/bootstrap.js"></script>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}

body
{
  background: #ebebeb;
}

header
{
  height: 135px;
}

.site-header
{
  height: 65px;
  background: #373737;
}


.site-nav
{
  height: 65px;
  background: #474747;
}
.d33 {
width: 80px; height: 65px; 
background: #f26c4f;
position: relative;
}
.d33:before {
content: "";
width: 0; 
height: 0;
position: absolute; left: 100%; 
top: calc(50% - 12px);
border-top: 12px solid transparent;
border-left: 14px solid #f26c4f;
border-bottom: 12px solid transparent;}


ul
  {
    margin: 0;
    padding: 0;
    display:flex;
  }
  ul li
  {
  list-style: none;
    position: relative;
    padding: 0 25px 0 20px;
  }
  
li:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 10px;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background: #767676;
}

li:last-child:after {
  display: none;
}

  ul li a
  {
    display: block;
    font-size: 12px;
    font-family: arial;
    text-decoration: none;
    font-weight: 400;
    color: #fff;
  box-sizing: border-box;
    line-height: 65px;
    height: 65px;
    
  }

 a:hover {
  border-bottom: 3px solid #f26c4f;
  box-sizing: border-box;
   text-decoration: none;
   color: #fff;
}

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

A

Andrew, 2017-07-25
@emin313

You set the height of the header tag to 135px, and then redefine it on the same element via the .site-header class selector to 65px, and that's where the collapse happens.
https://jsfiddle.net/p999yde8/

I

Ivan, 2017-07-25
@Za0r

https://www.youtube.com/watch?v=NRkr7be8sw8