Правильно ли сверстано?

Question

[gleendo]

Пробую верстать макет. Сверстал шапку. Но теперь появились несколько вопросов.
1) Правильно ли сверстаны кнопка, лого, изображение телефона.? Я их позиционировал абсолютно...верно ли это? или нужно как то по другому?
2) Не могу понять, как верстать такой блок при помощи сетки, например того же бутстрапа. Нужно ли вообще в этом случае использовать готовую сетку...Просто в этой части макета не виже явных блоков, которые можно было бы обозначить за столбцы.

Ссылка на скрин сверстанно части:
https://cloud.mail.ru/public/GNao/pcwVPQQKF

Скрин сверстаной части:


Верстка отдельными блоками с использованием margin(без абсолютного позиционирования) как посоветовали в комментариях:
Codepen - www.codepen.io/evg_/pen/pJOVZe?editors=100
FullSize - www.codepen.io/evg_/full/pJOVZe

Answer 1

[GreatRash]

Телефон абсолютом вполне правильно. Да и всё остальное тоже. Не вижу ни одной причины почему в данном случае абсолют - плохо. И никто из комментаторов такой причины не назвал.

Comments

[GreatRash]

Александр А: На сколько?

[GreatRash]

Александр А: "Сильно" - это на сколько?

[GreatRash]

Александр А: В миллисекундах пожалуйста.

[GreatRash]

Александр А: Т.е. вы голословно утверждаете, что будет медленнее. Вот вам анекдот в тему:

- Гиви, докажи, что этот треугольник равнобедренный.
- Мамой клянусь!

Answer 2

[littleguga]

1. Не надо бутстрапа.
2. Воспользуйтесь в следующий раз jsbin/jsfiddle.
3. Разбейте на части.
Например:
верхняя часть, где находится блок с буквой p
контент - заголовки и кнопка
футер - вылезающий телефон - он накладывается на остальные из-за z-index.

Comments

[gleendo]

Хорошо отделить вернюю часть шапки среднюю с текстом и кнопкой можно, а как быть с телефоном? Как его наложить на средний блок? отрицательный margin и z-index?

[Serj-One]

con_: Верно, отрицательный маргин. Z-index здесь не нужен.

[gleendo]

littleguga Вот сверстал блоками без абсолютных позиций. Посмотрите, нормально ли.
Codepen - codepen.io/evg_/pen/pJOVZe?editors=100
FullSize Codepen - codepen.io/evg_/full/pJOVZe

[littleguga]

con_: если у Вас в задаче не было адаптивности - то на мой взгляд вполне очень даже хорошо. Только посоветовал бы заголовки обернуть не в <p>, а в div/h1/h2. Но это уже мелочи.

[gleendo]

littleguga: Адаптивность пока не к чему...Верстаю пока что просто так..для практики. На счет заголовков вы правы, надо было обернуть в h1/h2..
Спасибо за ответ.

Answer 3

[Aleksandr]

Зачем тут абсолютом верстать?

Comments

[gleendo]

Нужно просто margin у них указывать? или еще как то? что посоветуете?

[Aleksandr]

куча способов) можно через float. Можно просто margin