0

Получается, что левая и правая части - разные градиенты сверху и заливка фона разная у них: у одного - зеленая, у другого - белая. А по центру - div шириной 1000 пикселей...

Вот у меня дилемма. Как сверстать так, чтоб 2 разных фона по бокам растягивались на всю ширину экрана, но при этом центральная часть была стабильно 1000px?

Меня интересует верстка самого каркаса.

Добавлено.

Да нет, просто есть такой макет...

<di v class="left">тут должен быть левый градиент зеленый в салатовый,</div>
<di v class="center">тут должен быть блок 1000 пикселей</div>
<di v class="right">тут должен быть левый градиент зеленый в белый,</div>

Какие CSS для каждого прописать, чтоб работало нормально? Ну или как их расставить? Может 1 в другой надо поместить или ещё что-то?..

3
  • Опиши свою проблему по подробней.. ты используешь iframe или что то другое?
    – webDev_
    18 окт 2011 в 12:14
  • Добавлено в вопрос.
    – Oll
    18 окт 2011 в 12:24
  • Может поговорите с горе дизайнером, я думаю ему просто было облом правую сторону делать, мол и так понятно, особенно это касается исчезновения зеленоватого фона после градиента.
    – makregistr
    18 окт 2011 в 16:52

3 ответа 3

1

Если разрывается голова от невозможности без яваскрипта сделать вёрстку блоками, может плюнуть и сделать таблицей? 3 ячейки, первая и последняя шириной "*", должно сработать в теории...

4
  • А можно подробнее про таблицы с шириной "*"... не встречал такого...
    – Oll
    18 окт 2011 в 12:48
  • 2
    Если не ошибаюсь, записывалось так. Ширина "" означает заполнение остатка пространства. Столбцы со звёздами должны делить это пространство между собой... <table> <tr> <td width=""></td><td width="1000"></td><td width="*"></td> </tr> </table> Может попробовать 100% ширины у крайних ячеек таблицы... и 1000px по середине через CSS...
    – qnub
    18 окт 2011 в 12:51
  • Спасибо огромное... я так заверстался дивами, что про таблицы совершенно и забыл :) Считал, верстка таблицами - каменный веком. Сейчас буду снова возвращаться понемногу и к таблицам. Помог следующий код: <table width="100%" cellpadding="0px" cellspacing="0px" border="0"> <tr> <td></td> <td width="1000px"></td> <td></td> </tr> </table>
    – Oll
    18 окт 2011 в 12:58
  • понимаю, дивы удобно и к ним быстро привыкаешь, но не всегда имеют тривиальное решение :)
    – qnub
    18 окт 2011 в 13:00
0

Попробуй так: Левый градиент через background для html Правый для body


Не всем этот способ нравиться: 2 div пустых будут

<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
    <div class="content"></div>
</div>

.wrapper {
    position: relative;
}
.left{
  width: 50%;
  height: 600px;
  position: absolute;
  top: 0;
  right: 50%;
  background-color: pink;
}

.right{
  width: 50%;
  height: 600px;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: lightblue;
}

.content{
  width: 1000px;
  height: 500px;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
}
3
  • 1
    А как ты сделаешь чтоб он растягивался да ещё и на пол экрана только??? Тут получается, что надо 2 растягивающихся градиента... и все бы ничего, можно было б и по 50% кинуть... но тут надо ещё и по центру чтобы было 1000 пикселей... а Пиксели с % неособо дружат...
    – Oll
    18 окт 2011 в 13:24
  • Да, с body и html не подумавши ляпнул. I'am sorry. Я добавил другой вариант, может пригодится, но лично мне он не по душе.
    – omgwtf
    18 окт 2011 в 13:44
  • Такой вариант я тоже пробовал... но тогда если появляется прокрутка то неизвестно как сделать боковые дивы по высоте... height: auto !important; height: 100%; min-height: 100%; И так неканает даже...
    – Oll
    18 окт 2011 в 14:56
0

Вот посмотри тут, только картинки нужно нормально вырезать, но сам лайаут такой как надо (два половинки с разным фоном, высота на весь экран, ширина 1000 пикселей), кроссбраузерность проверял в ие7-8 и фф

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.