Фоновые изображения за панелями навигации и позиционирования

Я почти там, где я хочу быть с этим небольшим экспериментом. Я новичок в css3 и до сих пор с удовольствием изучаю некоторые вещи.

Я пытаюсь заставить навигационную панель отображать / показывать в div с фоновым изображением над ним. ключ в том, что изображение bg должно располагаться поверх навигационной панели, как на этой ссылке ниже.

http://visionsic.github.io/DSW_II/img/example.jpg

Фактически правильно закодированная функциональная панель навигации находится здесь:

http://visionsic.github.io/DSW_II/test.html

У меня проблемы с получением полного фонового изображения для отображения в верхней части навигационной панели.

Фоновое изображение имеет ширину 704 пикселей и высоту 318 пикселей. Панель навигации имеет высоту 65px и такую ​​же ширину 704px. Таким образом, полный размер высоты div составляет 383 пикселя. Я хочу подчеркнуть, что я не хочу, чтобы навигационная панель накладывалась на изображение, я хочу, чтобы это было изображение bg, а затем навигационная панель.

Настоящий нефункциональный код выглядит следующим образом:

.mm_pres_main {
  background-image: url(../img/mm_main_tab_d.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: auto;
}
.mm_pres_main #mm_lft_nav_div {
  margin: 0%;
  background-position: 0%;
  background-color: #004E27;
  max-width: 704px;
  max-height: 100px;
  background-repeat: no-repeat;
  position: relative;
}
.mm_pres_main #mm_lft_nav_div nav {
  text-align: center;
  max-width: 704px;
  width: 100%;
  max-height: 100%;
  margin-top: 0%;
  display: block;
  position: absolute;
}
.mm_pres_main #mm_lft_nav_div nav:after {
  content: "";
  display: table;
  clear: both;
}
.mm_pres_main #mm_lft_nav_div nav ul {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  position: relative;
}
.mm_pres_main #mm_lft_nav_div nav ul li {
  font-size: 1.1em;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
  font-weight: lighter;
  text-align: center;
  list-style: none;
  line-height: 1.1em;
  position: absolute;
  padding: 6.5% 0% 0% 0%;
  height: 100px;
  width: 60px;
  color: #FCE011;
  display: inline-block;
  float: left;
  min-width: 20%;
  background-color: #004E27;
  overflow: auto;
}
.mm_pres_main #mm_lft_nav_div nav ul li.bio_icon,
.mm_pres_main #mm_lft_nav_div nav ul li.stat_icon,
.mm_pres_main #mm_lft_nav_div nav ul li.img_icon,
.mm_pres_main #mm_lft_nav_div nav ul li.vid_icon,
.mm_pres_main #mm_lft_nav_div nav ul li.fut_icon {
  position: relative;
  max-height: 100px;
  max-width: 60px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: 100px 40px;
  display: block;
  overflow: auto;
}
.mm_pres_main #mm_lft_nav_div nav ul li.bio_icon {
  background-image: url(../svg/bio_ore_ylw.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.stat_icon {
  background-image: url(../svg/stats_ore_ylw.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.img_icon {
  background-image: url(../svg/img_ore_ylw.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.vid_icon {
  background-image: url(../svg/vids_ore_ylw.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.fut_icon {
  background-image: url(../svg/fut_ore_ylw.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.bio_icon a,
.mm_pres_main #mm_lft_nav_div nav ul li.stat_icon a,
.mm_pres_main #mm_lft_nav_div nav ul li.img_icon a,
.mm_pres_main #mm_lft_nav_div nav ul li.vid_icon a,
.mm_pres_main #mm_lft_nav_div nav ul li.fut_icon a {
  clear: left;
  position: relative;
  display: block;
  max-height: 60px;
  text-decoration: none;
  color: #F6EF1B;
  overflow: auto;
}
.mm_pres_main #mm_lft_nav_div nav ul li:hover {
  background-color: #F6EF1B;
}
.mm_pres_main #mm_lft_nav_div nav ul li:hover a {
  color: #004E27;
  cursor: pointer;
}
.mm_pres_main #mm_lft_nav_div nav ul li.bio_icon:hover {
  background-image: url(../svg/bio_ore_grn.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.stat_icon:hover {
  background-image: url(../svg/stats_ore_grn.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.img_icon:hover {
  background-image: url(../svg/img_ore_grn.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.vid_icon:hover {
  background-image: url(../svg/vids_ore_grn.svg);
}
.mm_pres_main #mm_lft_nav_div nav ul li.fut_icon:hover {
  background-image: url(../svg/fut_ore_grn.svg);
}
<!doctype html>
<html>
<!----------------------Head Content Area----------------------------------------------->

<head>
  <meta charset="UTF-8">
  <title>test background nav expirement</title>
  <meta name="viewport" content="width=device-width, maximum scale=1.0, minimum scale=1.0, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/subnav.css">
</head>
<!----------------------Body Content Area----------------------------------------------->

<body>
  <!----------------------Main Presentation Content Area----------------------------------------------->
  <div class="mm_pres_main">
    <!----------------------Left Sub-Navigational Content Area----------------------------------------------->
    <div id="mm_lft_nav_div">
      <nav>
        <ul>
          <li class="bio_icon"><a href="#bio">Bio</a>
          </li>
          <li class="stat_icon"><a href="#stats">Stats</a>
          </li>
          <li class="img_icon"><a href="#images">Images</a>
          </li>
          <li class="vid_icon"><a href="#videos">Videos</a>
          </li>
          <li class="fut_icon"><a href="#future">Future</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

</body>

</html>

Источник

1 ответ

Попробуйте добавить отступы к основному div, такого же размера, как высота nav. Затем установите абсолютную позицию навигации и выровняйте ее по нижней части div. Убедитесь, что позиция основного div установлена ​​относительно.

Источник
Другие вопросы по тегам