Как сделать градиент на всю ширину?

Question

[rhost]

Есть страница fiddle.jshell.net/ZadEm/1

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

Answer 1

[barkalov]

Не понятно, что именно вы хотите получить в результате.
PS: И фиддл совершенно не информативный, вы бы раскрасили элементы ярче и по-разному.

Comments

[rhost]

Блоки с градиентом не получается растянуть по ширине окна так чтобы не было скролла + так что бы можно было нормально позиционировать сайдбар

[barkalov]

@hoOstel fiddle.jshell.net/8BZ3T так что ли?

[rhost]

@barkalov нет, вот пример того что я хочу fiddle.jshell.net/cJ9yD/1 но этот вариант не подходит из-за горизонтального скролла.

[barkalov]

Хеадер не должен находиться над сайдбаром? Справа от сайдбара тоже должны продолжаться градиенты, но уже без одержимого? Что должно "резиниться"?

Может вам стоит в паинте нарисовать набросок? А то ей-богу, ничего не понятно. Плюс эти псевдо-селекторы :before - не ясно, то ли вам действительно так нужно, то ли это попытка решить какую-то несуществующую проблему.

[rhost]

@barkalov причем header то) он наверху, растягивается и его трогать вообще не надо. Да, справа от сайдбара тоже должны продолжаться градиенты но уже без содержимого блока, "резиниться" только градиент и все.

[barkalov]

Ну у вас хеадер в макете не висит над сайдбаром, заканчивается раньше, по этому и спрашиваю.

То есть сайдбар должен быть по-середине экрана (раз слева и справа от него градиенты)? 8-/ Какая часть градиента резинится левая или правая? Или обе?

Нет, рисуйте макет, иначе так вам никто не поможет.

[rhost]

@barkalov https://pp.vk.me/c619916/v619916689/111ca/4hmfFTqh... пойдет?

[barkalov]

Другое дело! Теперь ясно. Через несколько часов освобожусь - помогу, не теряйте.

[barkalov]

@hoOstel barkalov.ru/toster/hoOstel.html Посмотрите комментарии, я разбил CSS на две части, чтоб было проще. Что непонятно спрашивайте.

[barkalov]

@hoOstel PS: фидл - jsfiddle.net/uKPNP

[rhost]

@barkalov все же вы не совсем правильно поняли, блоки не должны быть резиновыми, у них должна быть ширина 960px + они должны быть всегда в середине как и сайд бар.
Вот мой вариант fiddle.jshell.net/SNL9f/1 но в нем есть недочет, если нажать на колесо мыши и повести мышку вправо то мы увидим градиент.

[barkalov]

добавьте к
.block-inner {
max-width: 960px;
margin: 0 auto;
}
Тогда контент будет по центру. Но сайдбар будет всё равно справа.

Чтобы сайдбар был внутри 960px блока, выравнивающегося по середине, сайдбар должен находится внутри max-width блока, а это значит, что либо градиенты не будут растягиваться по всей ширине так как сами будут ограничены 960px, либо сайдбар будет растягивать собой первый градиентный блок по высоте (если сайдбар положить прямо в него).

Ваша версия имеет не недочёт, а она в принципе неверно спроектирована. Но, если вам уж так нужно убрать скролл, то добавьте в свой макет.
body {
overflow-x: hidden;
}
И приходите снова, когда придёт осознание, что всё нужно переделывать по-другому. )

[rhost]

@barkalov "max-width: 960px;" помог но сайдбар, он у вас прилеплен к правой стороне страницы а нужно чтобы он был прилеплен к правой стороне блока 960px в своем примере я это показал.

[barkalov]

@hoOstel barkalov.ru/toster/hoOstel2.html

[rhost]

@barkalov Спасибо вам, вариант хороший но я уже решил свою проблемы добавил "overflow-x: hidden;" не в body а в див который все держит :)

[barkalov]

это неправильно.

[rhost]

@barkalov по другому не сделаешь

Answer 2

[Юрий Лобанов]

Градиент-то здесь причем?

подскажите пожалуйста как можно решить это

Решить это можно изучив стандартные способы верстки, например вот htmlbook.ru/layout

Comments

[rhost]

притом, градиент фон у блока который имеет фиксированный размер, поэтому и накинул его через before.
Мне нужно растянуть градиент на всю ширину страницы при этому сохранить размер блока я пробовал двумя способами и в каждом есть недочет.
Способ первый:
fiddle.jshell.net/JctR7 - убрать position:relative в container, все работает НО тогда нельзя нормально расположить сайд бар, он будет всегда ездить.
Способ второй
fiddle.jshell.net/SNL9f - задать градиенту ширину 9к px и передвинуть +- 3к в левую сторону, все работает НО есть нижний скролл который мешает, да его можно убрать с помощью overflow но возможность скролла останется. ( жмешь на колесо и перемещаем мышь в правую сторону )

Так как же все же растянуть градиент на всю страницу и оставить ширину у блока?)

[Юрий Лобанов]

@hoOstel
У Вас есть макет того, что Вы хотите сделать?

[rhost]

Нет, я же вроде бы объяснил что хочу сделать, разве нет?

[Юрий Лобанов]

@hoOstel ну насчет градиента-то все понятно, я только не понимаю почему Вы пытаетесь сделать через одно место. Фактически Вы хотите, чтобы Ваш градиент был фоном элемента шириной 1280px, при этом располагался на всю ширину браузера. Не понятно что за проблема с header, что за желание позиционировать абсолютом? Потому и прошу макет, так как уверен, что все сделать можно проще.

[rhost]

@iiil C header проблем нету, его вообще можно не трогать, главное блоки с градиентом. Абсолют нужен для того чтобы градиент был на всю ширину страницы, я не вижу как же ещё можно закинуть градиент к блоку у которого фиксированная ширина.

[Юрий Лобанов]

@hoOstel ладно, ждите, когда Вам помогут или предоставьте макет. Вы же не просто так рисуете свои градиенты, наверное есть какая-то идея, где там будет контент, что будет в полосах и так далее. Абсолют для верстки подходит редко. Дело Ваше.

[rhost]

@iiil по середине полосок тобишь в блоке "content" будут блоки с данными ( картинки,текст), если не абсолют то как же ещё можно растянуть градиент?

[Юрий Лобанов]

@hoOstel и соответственно эти полоски будут динамически растягиваться в зависимости от высоты контента?

[rhost]

@iiil там градиент от синего до белого (фон у сайта белый) можно ему задать высоту ~200px так что нет, не будет растягиваться динамически