Как реализовать такое на div?

Question

[techoproMas]

Добрый день. Помогите, пожалуйста, реализовать всё это на div`ах. Ни чего не понимаю в разметке... Мне нужно чтобы сайт был "резиновый". Если поставить шапке width:100% шапка растягивается только на видимую область, и получается если прокрутить горизонтальный скрол - шапки не будет.

Мне нужна шапка в которой по середине блок на 1200px(постоянный!), а если есть место слева и справа то оно пустое, если нету - блок меньше не становится, левый контейнер ниже постоянный 800px, правый 350px, все остальные отступы чтобы были резиновые, помогите пожалуйста...

P.S. Зато в Paint`е - я Бог! :-)

Comments

[ⓒⓢⓢ]

P.S. Зато в Paint`е - я Бог! :-)

И в формулировке вопроса тоже

В песочницу отправь свои наброски, так будет более понятны эти "мысли"

Answer 1

[Артём Сериков]

Данная проблема решается через медию

@media (min-width: 900px){
  .top-element { width: 1200px }
}

@media (min-width: 700px) {
  .top-element { 
    width:  650px;
    margin: 1px 1px 1px 1px;
  }
}

Сверху пример

И в такой манере прописываешь данный макет

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp - ссылочка на w3c, если есть вопросы

Comments

[Froggyweb]

вообще бред написан.

[techoproMas]

Froggyweb, почему бред? не правильно?

[Варлам Ерофеич]

techoproMas, - Да всё там правильно, только надписи местами поменять надо. Сперва узкие экраны описывать, а потом те, что "поширше", поскольку это min-width: . Вот только работать эта штука будет рывками, не как резиновая...

[Варлам Ерофеич]

techoproMas, а вот у "автора вопроса" - действительно непонятки. - Цитирую:

Мне нужно чтобы сайт был "резиновый".

и тут же:

Мне нужна шапка в которой по середине блок на 1200px(постоянный!)

- значит, шапка уже не резиновая.

левый контейнер ниже постоянный 800px, правый 350px,

контейнера - тоже не резиновые. Учитывая, что сайт состоит только из шапки и двух контейнеров с заранее указанными размерами - трудно понять, как он может стать резиновым... (?)

[techoproMas]

Варлам Ерофеич, мне нужно (для шапки) когда браузер меньше чем 1200 то показывать только шапку в 1200px, без отступов слева и справа, а по мере расширения браузера чтобы отступы появлялись.

[techoproMas]

Варлам Ерофеич, а как сделать чтобы был не рывками?

[Варлам Ерофеич]

techoproMas, вначале прочтём вот это:

Если поставить шапке width:100% шапка растягивается только на видимую область, и получается если прокрутить горизонтальный скрол - шапки не будет.

, но сразу возникает вопрос: Если шапка растянута на 100%, а не на 120% к примеру, или более %, откуда взялся горизонтальный скролл? А если горизонтальный скролл всё-таки есть - значит, кроме шапки там уже есть "нечто более широкое", о котором "автор" умалчивает... (?) В таких случаях говорят: "Мануалы - в студию!!!"... А гадать на пустом месте - бесполезно.
Вот у меня шапка-пример из простенького меню. - Где здесь горизонтальный скролл?
- Правильно, его здесь нет и пока не предвидится, поскольку в этой песочнице отсутствуют элементы шире ста процентов...