Foundation 6 - Используйте CSS для правильного расположения изображения заголовка и навигации

Я использую Foundation 6, чтобы попытаться создать изображение заголовка, которое перекрывает часть панели навигации. Он использует класс .row как адаптивный div.

HTML

<header class="row text-center">
  <a href="//google.com">
    <img src="path/to/horizontal banner image">
  </a>
 </header>

<nav>
  <div class="row text-center">
    <a href="//yahoo.com">Text here</a>
  </div>
</nav>

CSS

header{
  background-color: lightgreen;
}

nav{
  margin-top: -5%;
  font-size: 150%;
  background-color: lightblue;
}

http://jsfiddle.net/hvmt2j1j/

Как показано в приведенной выше скрипте, у меня есть изображение и панель навигации со ссылками. Само изображение тоже является ссылкой.

Однако я узнал, что:

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

Я новичок в этом, поэтому я считаю, что есть лучший способ структурировать теги <div> или CSS для достижения этой цели. Большое спасибо.


html css nav zurb-foundation zurb-foundation-6
person user3545752    schedule 23.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Мое предложение:

body {
  margin: 0;
}
header {
  background-color: #6C6;
  background-image: url("http://sweetclipart.com/multisite/sweetclipart/files/imagecache/middle/banner_white.png"), url("https://i.imgur.com/TILTsNC.png");
  background-repeat: no-repeat, repeat-x;
  background-position: top center, bottom;
  height: 189px;
  max-width: 100%;
  width: 550px;
}
.green {
  display: block;
  height: 80%;
}
.blue {
  display: block;
  font-size: 2em;
  height: 20%;
  text-align: center;
  text-decoration: none;
}
<header>
  <a class="green" href="https://www.google.com/"></a>
  <a class="blue" href="https://www.yahoo.com/">Text here</a>
</header>

Вы определяете заголовок всего с двумя элементами <a>, которые вы обрабатываете как блочное (поток в HTML5) содержимое, то есть они будут вести себя так же, как divs, но, конечно, будут кликабельны, потому что в конце концов они все еще являются ссылками. . Для этого вам нужно придать им стиль display: block. Затем нужно сложить два фона для <header>. Первый — это ваше изображение, а второй — светло-голубого цвета шириной 1 пиксель и высотой желаемой высоты синей области (в данном случае 20% от 189 пикселей). Подробнее об использовании нескольких фонов CSS< /em> (MDN).

person Przemek    schedule 23.02.2016
comment
Однако я хочу, чтобы часть изображения покрывала панель навигации. Вот почему я включил «margin-top: -5%;» но обнаружил те проблемы, которые я упомянул в вопросе. В вашем примере, если вы используете «margin-top: -5%;» на .blue синий цвет фона покрывает изображение. - person user3545752; 23.02.2016
comment
Спасибо. Однако, поскольку я использую Foundation в качестве CSS-фреймворка, как упоминалось выше, есть ли способ сделать его адаптивным? То есть размер изображения будет изменяться в соответствии с размером окна браузера (попробуйте изменить размер изображения в скрипке). - person user3545752; 23.02.2016