Резиновый дизайн DIV-ами

[Zeeeya]

Здравствуйте! Верстаю шаблон для Джумла-2.5, нужен шаблон на ДИВах

Вот сайт: Сайт

Левая колонка присутствует только на главной странице, на остальных поле контента должно растягиваться на всю ширину.

Совершенно запуталась с версткой!

Применила для элемента 1 абсолютное позиционирование, растягивается как нужно, но на главной почему-то элемент 2 и поле 4 продолжаются за левое поле...

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

ПОмогите, плиз!

[ShumNo]

не применять абсолютное позиционирование - зачем?

http://csstemplater.com/

[Modestes]

из-за абсалюта у вас там каша)

http://htmlbook.ru/samlayout/tipovye-makety/rezinovyi-dvukhkolonochnyi-maket

[Zeeeya]

ShumNo,Modestes, спасибо, абсолют убираю...

У меня все проблемы с этим блоком правым, без абсолюта ДИВы выстраиваются один под другим, не могу их на одну линию поставить, и вообще "слепить" этот блок из графических элементов (уголки и растягивающиеся, в зависимости от наполнения середины).

[Modestes]

вам дали ведь ссылки. или с генерируйте резиновый дизайн через онлайн сервис, либо почитайте зайдите в примеры макетов на этом сайте.

подсказка, float:left; к левому блоку

[crashtua]

Можете в моей теме forum.htmlbook.ru/index.php?showtopic=35402&pid=263019&st=0entry263019 посмотреть, как я сделал. Там графические уголки статического размера (25 х 25 пиксела) и середина толщиной в 1 пиксел высотой 25 пикселов, которая от контента раздувается ( правда та рамка, когда шырины хватает, занимает всю доступною ей область). Правда я не уверен на щет грамотности кода, вторая верстака в жизни

[Zeeeya]

Modestes, я именно дизайн растягивающегося блока со скругленными углами не могу реализовать...

crashtua, спасибище, пошла разбираться!

....

Одолела я его!!!

crashtua, ВЫ меня спасли!!!

вот мой код:

Сss

<!--вывод содержимого контента-->
<div><div class="main_header">
    <div class="main_top"></div>
    <div class="main_fon"><jdoc:include type="component" style="xhtml" /></div>
    <div class="main_bottom"></div>
</div>

.main_header{
margin-left: 35px;
margin-right: 35px;
margin-top: 10px;
overflow:hidden;
background: url(../images/mh1.png) no-repeat left top,
 url(../images/mh2.png) no-repeat right top,
 url(../images/mb1.png) no-repeat left bottom,
 url(../images/mb2.png) no-repeat right bottom;
}

.main_top {
height: 41px;
margin-left: 25px;/*На размер картинки угла*/
margin-right: 19px;/*На размер картинки угла*/
background: url(../images/main_header.png) repeat-x;

}						

.main_fon {
background: url(../images/main_fon.png) repeat;

}

.main_bottom {
height: 23px;
margin-left: 16px;/*На размер картинки угла*/
margin-right: 19px;/*На размер картинки угла*/
background: url(../images/main_bottom.png) repeat-x;	

}							

сайт: здесь

Edited June 9, 2012 by Zeeeya