LINUX.ORG.RU

html верстка: разный background в фоне

 ,


0

1

ЛОР прошу помочь. Впервые сталкиваюсь с такой проблемой. Нужен правильный «true» способ сверстать макет без картинок в фоне.

Должен получиться такой header https://i.imgur.com/EjRC3Fh.png ( https://imgur.com/a/WcjUE )

Проблема в том, что только с картинкой в фоне такое возможно реализовать и то без «резиности». Как это сделать с background-color ?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Как такое реализовать?</title>
    <style>
            body {
                background-color:#f4f4f4;
            }

            header {
                background-color:#c1c1c1;
                height:550px;
            }
            .container {
                margin: 0 auto;
                width:1024px;
                max-width:100%;
                background-color:transparent;
            }
            header .layer1 {

            }
    </style>
</head>
<body>
<header>
        <!-- [зеленый div ? или background] -->
        <div class="container">
            <div class="layer1">
                [логотип] [резиновый div c прозрачным фоном]
            </div>
        </nav>
        <!-- [синий div ? или background] -->
</header>
</body>
</html>

Воткни в контейнер три дива, самому контейнеру задай display: flex. Тем дивам, что добавишь в контейнер настрой flex-grow.

Простое резиновое решение готово.

П.С. Флексбоксы сильно облегчают жизнь. Использую около года, еще ни разу не пожалел.

Deleted ()
Последнее исправление: Bizun (всего исправлений: 1)
Ответ на: комментарий от morkovkin

А, это. Торадиционные варианты float, inline-block. Новомодные (не костыльные, но не работают в ископаемых браузерах) flex(-box) и grid. Ну и ещё таблицей можно сверстать, но это сейчас моветон.
Это классическая задача, называется «как сделать три колонки, две фиксированных и одну резиновую»

MrClon ★★★★★ ()
Ответ на: комментарий от MrClon

Похоже у меня задача не из простых.

MrClon, если решать задачу в стиле 3-х колонок, то все три колонки должны быть резиновые, причем крайние одинаковой ширины. Что еще сложнее реализовать.

morkovkin ()
Ответ на: комментарий от morkovkin

Подскажите, так если реализовать, это правильно? Или есть еще более красивое решение, без position: absolute?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Как такое реализовать?</title>
    <style>
            body {
                background-color:#f4f4f4;
            }

            header {
                background-color:#c1c1c1;
                height:550px;
                overflow: hidden;
            }
            .container {
                margin: 0 auto;
                width:1024px;
                max-width:100%;
                background-color:transparent;
            }
            header .block-left {
                position: absolute;
                background-color: green;
                width: 2000px;
                margin-left: -2000px;
                height: 100%;
            }
            header .block-right {
                position: absolute;
                background-color: blue;
                width: 2000px;
                margin-right: -2000px;
                height: 100%;
                right: 0;
                top: 0;
            }
            header .layer1 {
                width: 100%;
                position: relative;
            }
    </style>
</head>
<body>
<header>
        <div class="container">

            <div class="layer1">
                <div class="block-left"></div>
                [логотип] [резиновый div c прозрачным фоном]
                <br><br><br><br>
                <div class="block-right"></div>
            </div>
        </div>
</header>
</body>

morkovkin ()
Ответ на: комментарий от morkovkin

Да, разобраться в css задача не из простых. У меня пара месяцев ушла в своё время.
Если собираешься работать с вёрсткой чаще раза в год то осиль ознакомиться с основами этого дела, сэкономишь себе кучу времени и нервов

MrClon ★★★★★ ()
Ответ на: комментарий от morkovkin

У flex единственный недостаток - это поддержка некробраузерами, хотя даже IE11 их поддерживает, пусть и не полностью. У css grid поддержка еще хуже, но думаю в этом году уже можно пользоваться.

Если сомневаешься, поддерживает ли нужный тебе браузер определенное свойство, смотри https://caniuse.com

hippi90 ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.