Raummon

Блочная верстка

Recommended Posts

Добрый день, пытался разметить страничку по заданному макету с помощью тега <div>, но столкнулся с проблемой, отступы превращают собранные блоки в полную мешанину. Размеры всех блоков заданы в процентах, размер <body> задан в пикселях. Отступы между элементами и краями <body>, должны быть одинаковыми. Ссылка на код, прилагается. Буду рад любым советам, заранее спасибо.
https://jsfiddle.net/6v4t12yg/  

image.png

image.png

Edited by Raummon

Share this post


Link to post
Share on other sites

Посмотрите, как устроена сетка бутстрапа, или любого др. фреймоворка.  У них описано лучше, чем я сумею, да и с кучей примеров

Share this post


Link to post
Share on other sites

Бутстрап головного мозга блин. Вы по-другому умеете верстать? 

Мешанины не вижу. Починили?

Share this post


Link to post
Share on other sites

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

P.S. Насчет мешанины могу подсказать - присмотритесь ко второму скрину. Да и вопрос почитайте - проблема с добавлением отступов. а в коде их нет

Edited by Vlad_P

Share this post


Link to post
Share on other sites
31 минуту назад, Vlad_P сказал:

не знаю что у вас там с головой, может обыдловатость какая

Да вообще всё плохо. Да. 

Отступы надо задавать внутренним элементам https://jsfiddle.net/npofopr/yn3zacmo/
Ну и фон задавать уже им, если фон нужен. 
margin заменить на padding, скорее всего.

И я бы ещё поставил https://www.30secondsofcode.org/css/s/box-sizing-reset/

Ну и посмотреть в сторону flex.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,736
    Total Members
    3,128
    Most Online
    negedja
    Newest Member
    negedja
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.