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

Question

techoproMas @techoproMas

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

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

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

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

Вопрос задан более трёх лет назад
124 просмотра

1 комментарий

Подписаться 1 Простой 1 комментарий

Пригласить эксперта

Ответы на вопрос 1

7 комментариев

Froggyweb @Froggyweb

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

Написано более трёх лет назад
techoproMas @techoproMas Автор вопроса

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

Написано более трёх лет назад
Варлам Ерофеич @warsand

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

Написано более трёх лет назад
Варлам Ерофеич @warsand

techoproMas, а вот у "автора вопроса" - действительно непонятки. - Цитирую:
Мне нужно чтобы сайт был "резиновый".
и тут же:
Мне нужна шапка в которой по середине блок на 1200px(постоянный!)
- значит, шапка уже не резиновая.
левый контейнер ниже постоянный 800px, правый 350px,
контейнера - тоже не резиновые. Учитывая, что сайт состоит только из шапки и двух контейнеров с заранее указанными размерами - трудно понять, как он может стать резиновым... (?)

Написано более трёх лет назад
techoproMas @techoproMas Автор вопроса

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

Написано более трёх лет назад
techoproMas @techoproMas Автор вопроса

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

Написано более трёх лет назад
Варлам Ерофеич @warsand

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

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 5 часов назад
- 63 просмотра
1

ответ
HTML

+1 ещё

Простой
Почему не работает pattern на input?
- 1 подписчик
- 5 часов назад
- 44 просмотра
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 9 часов назад
- 46 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- 9 часов назад
- 59 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- 13 часов назад
- 73 просмотра
0

ответов
JavaScript

+3 ещё

Средний
Какие есть способы организовать редкое добавление статей на сайт?
- 1 подписчик
- вчера
- 112 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сделать авто подтверждение?
- 2 подписчика
- вчера
- 139 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему не работает ссылка в HTML?
- 2 подписчика
- 16 апр.
- 137 просмотров
1

ответ
HTML

Простой
Почему не подключается спрайт SVG?
- 1 подписчик
- 16 апр.
- 72 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Как исправить прыгающий контент у сайта?
- 2 подписчика
- 15 апр.
- 217 просмотров
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

Тестировщик-стажёр

ITooLabs • Тула

от 35 000 до 40 000 ₽

Fullstack PHP Developer

Smapse Education

от 40 000 до 65 000 ₽

Настройка сервера

18 апр. 2024, в 21:56

2000 руб./за проект

Помощь с водпресс

18 апр. 2024, в 21:00

150 руб./за проект

Спарсить ссылки на все товары конкретного продавца в озон

18 апр. 2024, в 20:13

2000 руб./за проект

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

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

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

Answer 1 · 2018-07-18 18:30:54

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

@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, если есть вопросы

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт