абсолютный блок и адаптивная вёрстка

[VeniVidiVici]

Возникла такая проблема.

Есть основная шапка сайта, которая должна находиться в блоке с контентом.

 

display absolute;

Всё отлично, хеадер сидит на блоке с контентом.

Прописал верхний padding для блока с контентом(чтобы текст не залезал под хеадер).

Но, при уменьшении ширины окна, высота хеадера становится больше, и контент всё таки оказывается под шапкой.

 

Вот пример:

http://jsfiddle.net/LOL1/dyxvm4jc/6/    (уменьшайте ширину экрана и увидите)

 

Как этого избежать?

Как вариант можно засунуть header прямо в section, но ведь смысл от этого поменяется? Получается что хеадер будет относиться не ко всему сайту, а только к разделу и это критично.

 

Ещё пара мелких вопросов:

1) Если в главной шапке есть заголовок сайта(h1) и адрес сайта(например site.ru) в какие теги нужно засовывать site.ru?

И в каких тегах обычно пишут почту и телефоны? тег adress вроде указывает на местоположение.

2) Сильно ли критично если размер h1 будет меньше размера h2? Плохо ли, если тегов h1 на сайте будет несколько?(2-3)

 

 

 

 

[Oversec]

У тебя будет шапка зализать на контент, потому что блоки со свойством position: absolut  выпадают из потока (почитай про это, если не понимаешь о чём я).

А в твоём случаи можно было бы воспользоваться div'ом с классом wrapper как сделал я

http://jsfiddle.net/7qbat8wa/

1)Если адрес сайта, то лучше в <a href="site.ru">Название сайта</a> (Если будет название сайта, то можешь и в h1 взять). Почту и телефон можешь писать хоть в div'е , вряд ли это сыграет большую роль (хотя некоторые могут и поспорить на эту тему)
2)Размер не столь важен, а вот с h1 могу сказать - его желательно использовать только 1 раз на одной странице, но если будет 2, не столь критично, но не переборщи. 

Edited September 13, 2015 by Oversec

[VeniVidiVici]

Oversec, я знаю что делает свойство position: absolut, оно добавлено чтобы шапка была на блоке с контентом(чтобы визуально выглядело именно так)

Просто засунуть хеадер в section нельзя - ведь шапка то главная и она должна относиться ко всему сайту. Правильно же?))

В твоём примере шапка находится выше контента, а мне нужно чтобы она была на нём.

Т.е. по дизайну шапка находится на блоке с контентом и она полупрозрачная.

Как-то так:

 

 

Из последних решений что мне приходили в голову - это писать медиазапросы(изменять паддинг внутри контента при изменении ширины окна, когда высота шапки будет увеличиваться)

 

По заголовкам, большое спасибо что ответил.

 

 

UPD: ещё 1 вариант решения, вместо абсолютного позиционирования использовать отрицательный отступ, контент уже гарантированно не будет залезать за шапку, но при изменении ширины, шапка на блоке с контентом находится не полностью(((  опять же править это медиазапросами. Больше пока ничего не придумал.

Edited September 13, 2015 by VeniVidiVici

[Oversec]

Oversec, я знаю что делает свойство position: absolut, оно добавлено чтобы шапка была на блоке с контентом(чтобы визуально выглядело именно так)

Просто засунуть хеадер в section нельзя - ведь шапка то главная и она должна относиться ко всему сайту. Правильно же?))

В твоём примере шапка находится выше контента, а мне нужно чтобы она была на нём.

Т.е. по дизайну шапка находится на блоке с контентом и она полупрозрачная.

Как-то так:

 

 

Из последних решений что мне приходили в голову - это писать медиазапросы(изменять паддинг внутри контента при изменении ширины окна, когда высота шапки будет увеличиваться)

 

По заголовкам, большое спасибо что ответил.

 

 

UPD: ещё 1 вариант решения, вместо абсолютного позиционирования использовать отрицательный отступ, контент уже гарантированно не будет залезать за шапку, но при изменении ширины, шапка на блоке с контентом находится не полностью(((  опять же править это медиазапросами. Больше пока ничего не придумал.

А, понял Вас. Но тут принцип тот же, создаёте основной блок и ему задаёте position: relative;  А там уже и прописываете шапку и блок контента. Надеюсь теперь я вас правильно понял. Размеры я изменял и везде нормально отображается. Просто для header стоит задать статичную длину, или у вас она должна быть динамическая?

http://jsfiddle.net/7qbat8wa/2/

Edited September 13, 2015 by Oversec

[VeniVidiVici]

Oversec, в рамках изучения адаптивной вёрстки, хеадер должен отображаться при любой ширине=) Но всё равно большое спасибо за советы.