Фон с аркой для резиновой вестки.

[maxakagaret]

Привествую профессионалов и новичков вкрстки.

Стокнулся с некоторой проблемой во время верстки сайта

Верстка резиновая и с ней как таковой проблем нет, чего не скажешь о фоне

Вот такой вот борк должен быть на главной странице.

И как это сдедать с помощью HTML/CSS - я понять не могу.

Решение с JS имеется, но прежде чем его применять, хотелось бы удостовериться что без JS не обойтись.

Еще раз подмечу, что верстка резиновая.

 

[Xenia Wanger]

Ну а если сделать блок красным цветом, ниже блок с тремя этими кнопками и марджином вверх их поднять (задать z-indeх, чтобы нижний блок перекрывал верхний)?

[post-rock]

Не пойму в чем проблема. Вырезал в фотошопке, и прилинковал к боди.

[maxakagaret]

Ну а если сделать блок красным цветом, ниже блок с тремя этими кнопками и марджином вверх их поднять (задать z-indeх, чтобы нижний блок перекрывал верхний)?

Видимо, я неточно изложил суть проблемы. Сложность заключается именно в нижней части фона - которая изогнута. Решение, конечно есть - фоновый рисунок с позиционированием по центру, но интересно именно html/css решение.

Не пойму в чем проблема. Вырезал в фотошопке, и прилинковал к боди.

Как я указал в описании проблема в том, что я пытаюсь найти решение с использованием именно html/css.

[post-rock]

Как я указал в описании проблема в том, что я пытаюсь найти решение с использованием именно html/css.

Отпишешь тут через пару лет, думаю решение найдешь)

[maxakagaret]

 

Как я указал в описании проблема в том, что я пытаюсь найти решение с использованием именно html/css.

Отпишешь тут через пару лет, думаю решение найдешь)

 

Ваша "ирония" неуместна. Советую обратить внимание, например, на http://htmlbook.ru/blog/golosovanie-za-luchshee-izobrazhenie

Или попроще http://htmlbook.ru/blog/treugolniki-cherez-css

Edited March 12, 2014 by maxakagaret

[post-rock]

Так братишка это совсем другое. Вот если решение найдется, тогда соглашусь что "ирония" не уместнa.

[maxakagaret]

Так братишка это совсем другое. Вот если решение найдется, тогда соглашусь что "ирония" не уместнa.

Без фамильярностей, пожалуйста. Решение состоит в том, чтобы div с абсолютным позиционированием позиционировать по центру родителя.

Edited March 12, 2014 by maxakagaret

[post-rock]

Решение состоит в том, чтобы div с абсолютным позиционированием позиционировать по центру родителя.

Что-то не вьеду. Если знаешь решение, зачем создавал тему и спрашивал как сделать)))
 

[npofopr]

Можно вставить блок с изогнутой нижней частью (есть же разные фигуры на css http://habrahabr.ru/post/126207/) между этими тремя кружками и заголовком. Чуть приподнять его еще, а кружки поставить слоем выше.

Но имхо, проще картинкой.

[maxakagaret]

Можно вставить блок с изогнутой нижней частью (есть же разные фигуры на css http://habrahabr.ru/post/126207/) между этими тремя кружками и заголовком. Чуть приподнять его еще, а кружки поставить слоем выше.

Но имхо, проще картинкой.

Спасибо за статью, почерпнул там интересную и полезную информацию. Однако проще - не значит лучше. Подгружать картинку 1500х300 для фона - не лучшее решение для оптимизации сайта. Но все же остается вопрос о позиционировании - насколько мне известно центрировать плавающий блок по центру так же, как фон (left:center), нельзя.

[darknebel]

Но все же остается вопрос о позиционировании

 

http://jsfiddle.net/3wZ9y/2/

 

Как Вам такой способ?

[SelenIT]

Как вариант, можно извернуться наподобие такого. Можно еще поколдовать с хитрой комбинацией линейных и радиальных градиентов, но боюсь, что аккуратно состыковать границы во всех браузерах окажется не так легко, как хочется. Ну и "лобовой" вариант — SVG-картинка в фоне (весить будет всего ничего, масштабироваться должна адекватно).

[maxakagaret]

Как вариант, можно извернуться наподобие такого. Можно еще поколдовать с хитрой комбинацией линейных и радиальных градиентов, но боюсь, что аккуратно состыковать границы во всех браузерах окажется не так легко, как хочется. Ну и "лобовой" вариант — SVG-картинка в фоне (весить будет всего ничего, масштабироваться должна адекватно).

Спасибо, хорошее решение. Правда совместимость несколько хуже, чем у border-radius.

 

 

Но все же остается вопрос о позиционировании

 

http://jsfiddle.net/3wZ9y/2/

 

Как Вам такой способ?

Неровно получается.

[SelenIT]

Ой, я ж забыл, что IE9 понимает трансформы (с -ms-, наверное, единственный реальный случай, когда этот префикс нужен). С ним вроде совместимость почти та же.

[maxakagaret]

Ой, я ж забыл, что IE9 понимает трансформы (с -ms-, наверное, единственный реальный случай, когда этот префикс нужен). С ним вроде совместимость почти та же.

Еще раз спасибо за предложеное решение. После некоторых модификаций прекрасно встало на шаблон.