Как сверстать такой хедер?

Question

[Гриша Никольский]

Привет. Мне нужно сделать хедер, который будет адаптивно растягиваться по ширине всего экрана. Мне нужно создать вокруг этого хедера белую рамку в 20px так, чтобы они тоже входили в этот экран и не появлялось скрола вниз или вправо.
Абсолютное позиционирование ни к чему хорошему не приводит - justme.matdev.ru/index-zoom-slider.html
Даже при правильной расстановке z-index, ссылка "let's start" все равно скрыта под этим полотном (.header-border).

Answer 1

[romy4]

не знаю что вы там делали, но если меню задать z-index, то оно прекрасно ощущает себя сверху

Comments

[Гриша Никольский]

Я не говорю про меню. Я говорю про ссылку "let's start". Посмотрите в свойства CSS и убедитесь в том, что z-index блока, где эта ссылка лежит выше, чем сама рамка, а при этом рамка его перекрывает.

[Гриша Никольский]

Хотя вот тут(justme.matdev.ru/index-image.html) это отлично работает и ссылка тоже доступна. Я не понимаю, вроде код-то почти одинаковый.

[romy4]

Гриша Никольский: не вижу чтобы с ней было что-то не так

[Гриша Никольский]

Ну при наведении на ссылку должен появляться cursor: pointer. Вот если вы рассмотрите сайт, который я скинул изначально, то вы увидите, что ссылка эта не доступна, она не кликабельна. Это случается из-за того, что ее перекрывает блок .header-border. Но я не могу понять, почему перекрывает.

[romy4]

Гриша Никольский: да в исходном есть проблема. а всё потому что .header-image имеет зиндекс=0, а надо больше 200

[Гриша Никольский]

romy4: да, но в таком случае перекроется .header-border и рамки не будет видно :)

[romy4]

Гриша Никольский: так сделайте .header-border рамку такую же

[Гриша Никольский]

romy4: если z-index'ы у элементов одинаковые, то поверх ложится тот, что ниже в коде.

[romy4]

Гриша Никольский: не нужно одинаковые. поставьте ему 300
> надо больше 200

[Гриша Никольский]

romy4: Это никак не поможет, ведь в таком случае перекроется .header-border и рамка будет не видна. Я загрузил этот код на хостинг, можете посмотреть.

[romy4]

Гриша Никольский: добавьте .header-image { border: 20px solid white; }

[Гриша Никольский]

romy4: в таком случае этот border будет вне моего монитора. А нужно сделать так, чтобы блок, который растягивается на всю ширину экрана включал в себя этот border. Короче, если юзать border, то появится скролл (если представить, что после хедера у нас ничего нет).

[romy4]

Гриша Никольский: нет. он будет как нужно

[Гриша Никольский]

romy4: Однако. Спасибо огромное за уделенное время!

Answer 2

[Михаил Еникеев]

Попробуйте подключить bootstrap3 и с помощью его меню сделать свое и + к нему добавить affix плагин
Меню
Affix

Comments

[Гриша Никольский]

Не совсем понял для чего мне меню...