Как центрировать блок при сужении?

Question

[survivor2005]

Коллеги, добрый вечер, вопрос тупой, но мало ли, надо убедиться, что это не возможно)
В общем дали мне макет, на нем есть с небольшими отступами по краям всякие линии декоративные. Я их сделал с помощью linear-gradient. Но дело в том, что при сужении экрана, правая сторона как бы сужается и исчезают эти полосы, а хотело бы что б они всегда были по краям браузера. Я так понял это не реально?

Answer 1

[protasovmikhail]

Привет.
Вам необходимо на блок, который красится в градиент, поставить width в 100%. И при сужении он будет перерисовываться.

Вообще делают так - делают блок под фон с позиционированием абсолют и далее поверх лепят. И далее его уже растягивают.
Однако я вижу у вас полосы над картинкой. Т.е. у вас блок над всем этим.
Т.е. у вас блок, далее в нем блок/блоки с картинками и поверх всего ваш блок с градиентом. Вам нужно выделить родительский блок для всего этого. И далее дать ему 100% широты. Далее по цепочке давать всем блокам это свойство вплоть до того блока где градиент.

Ну а вообще, да, код давайте

Comments

[survivor2005]

Спасибо добрый человек, я попробую и отпишусь. Если не получится, код пришлю. Ещё раз спасибо.

[survivor2005]

не получается, вот пример https://codepen.io/survivor2005/pen/xxbVdom

[protasovmikhail]

survivor2005, чувак, ты пишешь - хочу блок 100% ширины, но не более N пикселей, далее градиент делаешь в разметке пикселей до N, а потом сжимаешь окно браузера до меньше N пикселей. Градиент то рисуется по пиксельной разметке!

background: -webkit-linear-gradient(left, #FBF3F1 10%, #0072DA 10%, #0072DA 12%, #D4CFDC 12%, #D4CFDC 20%, #FBF3F1 20%, #FBF3F1 90%, #7A7CAB 90%, #7A7CAB 92%, #FBF3F1 92%, #FBF3F1 95%, #0072DA 95%, #0072DA 97%, #FBF3F1 97%);

твое все.

Я объяснил суть, если надо задавай еще вопросы. Пиксели к пикселям! Резину к процентам! Либо программно пересчитывай и обновляй css код на лету.

[survivor2005]

protasovmikhail, а там видишь в чем прикол, некоторый линии заходят на блоки, получается без бефор и афтер не обойтись, но даже с ними не все так гладко. Нельзя почему то задать к примеру блоку с полоской z-index: 1, а его beforу z-index: 3 например. Главным считается почему то z-index который для псевдоэлемента, или наоборот (уже не помню), но как то они зависимы друг от друга. По крайней мере у меня не получается адекватно отделить блок от его псевдоэлемента. Макет изначально конечно не простой. где то там наложена одна линия где то другая. Вот примерно что у меня вышло по совету Nixtone с бефорами web.skyorg.ru/tenerife
А вот часть макета

Answer 2

[Nixtone]

Код давай..

Comments

[survivor2005]

https://codepen.io/survivor2005/pen/xxbVdom

[Nixtone]

survivor2005, одно из главных требований верстки это гибкость. В твоем случае, довольно костыльно наделано, чушь полная, тут с нуля переписать бы. Градиенты так использовать сложно и не гибко, тем более что самого градиента как такового нету. Для задачи нарисовать такие линии, используй псевдоэлементы :before :after

.about-tenerife-trip {
  position: relative;
}
.about-tenerife-trip:before {
  content: '';
  display: block;
  background: #0072da;
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 5px;
}

и так далее, ну и свойством z-index:; раскидывай что выше, что ниже.

[survivor2005]

спасибо большое, буду пробовать, отпишусь.

[survivor2005]

Nixtone, Все заработало, спасибо большое!

[protasovmikhail]

survivor2005, я согласен с коментатором выше. Но плодить элементы в плоскости ранжируя их через z index не советую, не зря же вложенность элементов есть. Но вы не поняли суть передачи параметров дочерним элементам. А так же что если начали резину тянуть (адаптив делать) для блока, то внутри через пиксели уже ничего не делается, так как они меняются постоянно, в этом и смысл резинового дизайна.

ПС. Вообще через пиксели делается и далее, но для кнопок скажем отступы, или паддинг, или минимальная/максимальная ширина, маргин.

Как бы вам объяснить, резиновый дизаин должен растягиваться, это значит что мы не знаем конечную ширину экрана (и высоту) и не можем сказать - ну вот фон будет 100 пикселей под него и верстай или любой другой элемент будет 100 пикселей внутри этой резиновой конструкции. Так что в % все резиновое.

А уже внутри делайте функциональные блоки с min-width:px; width:%; margin чтобы не портить юзабилити.