HTML和CSS导航图像悬停和主要内容显示在栏下方

时间:2017-12-12 04:38:50

标签: html css alignment navbar display

代码: https://hastebin.com/otemiveduh.xml

问题描述:当导航栏的部分下方添加了另一个元素(如p-tag)时,有两个问题。它将隐藏在导航栏下方。此外,第二个错误是,当突出显示图像时,它不会改变整个高度的背景颜色,如果我更改了不同部分中的任何其他代码,则会破坏图像的垂直对齐。我一直坚持这个错误,并且必须转向社区寻求帮助。

<HTML>

<Head>
  <style>
    body {
      margin: 0;
    }
    
    div.Header {}
    
    div.Navigation {
      padding: 0;
      margin: 0;
      list-style: none;
      line-height: 50px;
      height: 50px;
      width: 100%;
      background-color: #001a33;
      position: absolute;
      overflow: hidden;
      z-index: 2;
      flex-direction: row;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    }
    
    div.Navigation>a {
      display: block;
      flex-grow: 1;
      text-align: center;
    }
    
    div.Navigation a img {
      height: 22.1;
      width: 44;
      vertical-align: middle;
    }
    
    div.Navigation a:visited,
    div.Navigation a:active,
    div.Navigation a:link {
      color: white;
      text-decoration: none;
    }
    
    div.separator {
      margin-left: 60%;
    }
    
    div.Navigation a:hover {
      background-color: #000d1a;
    }
  </style>
</Head>

<Body>
  <div class="Header">
    <div class="Navigation">
      <a href="#"><img src="icons/home-button.png" /></a>
      <a href="#">Ongoing Projects</a>
      <a href="#">Purchase Service</a>

      <div class="separator"></div>

      <a href="#">Employment</a>
      <a href="#">Portfolio</a>
      <a href="#">About</a>

    </div>
  </div>

  <div class="Main">

  </div>

  <div class="Footer">

  </div>
</Body>

</HTML>

1 个答案:

答案 0 :(得分:0)

您在导航中使用绝对位置,因此您需要向主要内容添加填充,以便能够在不进入导航的情况下添加内容。您还有一个无用的元素可以在导航的两个部分之间进行分离。相反,您只需使用margin-left:auto

您还缺少图像高度/宽度的单位:

body {
  margin: 0;
}

div.Navigation {
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 50px;
  height: 50px;
  width: 100%;
  background-color: #001a33;
  position: absolute;
  overflow: hidden;
  z-index: 2;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

div.Navigation>a {
  display: block;
  text-align: center;
  padding:0 10px;
}

div.Navigation>a:nth-child(4) {
  margin-left: auto;
}

div.Navigation a img {
  height: 22.1px;
  width: 44px;
  vertical-align: middle;
}

div.Navigation a:visited,
div.Navigation a:active,
div.Navigation a:link {
  color: white;
  text-decoration: none;
}

div.Navigation a:hover {
  background-color: #000d1a;
}

.Main {
  padding-top:55px;
}
<div class="Header">
  <div class="Navigation">
    <a href="#"><img src="https://lorempixel.com/100/100/" /></a>
    <a href="#">Ongoing Projects</a>
    <a href="#">Purchase Service</a>
    <a href="#">Employment</a>
    <a href="#">Portfolio</a>
    <a href="#">About</a>

  </div>
</div>

<div class="Main">
  <p>Content</p>
</div>

<div class="Footer">

</div>