Бессоница от CSS-верстки в три колонки

S4
На сайте с 13.10.2008
Offline
72
1394

Вопрос по верстке. Не получается сделать (без использования "table") три колонки. Условие, чтобы центральная была фиксированной ширины, а колонки по краям изменялись в зависимости от размера окна. При чем фон у каждой колонки является сложным изображением. Крайние колонки продолжают изображение по центру и фон у них полностью не виден (см. пояснительный рисунок).

Я спать не могу из-за этой задачки. Надеюсь, для кого-то это орешки. Спасибо!

jpg CSS_bez_sna.jpg
Ткач
На сайте с 29.04.2007
Offline
95
#1

левому блоку задайте ширину и обтекание слева, правому ширину и обтекание справа, центральному отступы внешние справа и слева по той ширине, которая указана для этих колонок

при помощи float обтекания, а не так как сейчас на примере, это совсем другая тема

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
[Удален]
#2

Посмотрите шаблоны от Ласто. Там есть решение Ваших проблем.

S4
На сайте с 13.10.2008
Offline
72
#3

Ткач, я не могу задать ширину крайних колонок. Я ее не знаю. Пытался в процентах, но что-то все соскакивает вверх.

Насчет рисунка - это не пример. Это желаемый результат. А в коде естественно пытался и обтекание задавать.

Вот мои попытки:

<div>

<div class="topleft"></div>

<div class="topright"></div>

<div class="topunder"></div>

</div>

CSS

.topunder {background:url(../pic/topunder.jpg) top center repeat-x; height:20px; width:930px; margin:auto;}

.topleft {background:url(../pic/topleft.jpg) top right repeat-x; height:20px; float:left;}

.topright {background:url(../pic/topright.jpg) top left repeat-x; height:20px; float:right;}

Но из-за отсутствия ширины, колонки не видны...

drunas
На сайте с 11.08.2008
Offline
49
#4

судя по тому что у вас уже с шапки в 3 колонки начались вопросы, впереди их будет ещё очень много.

Совет - разберитесь как устроен какой-либо готовый css-фрэймворк, а лучше несколько.

В них обычно учтены все варианты.

слушаю 95.2 - rock radio (http://timerider.ru)
Ткач
На сайте с 29.04.2007
Offline
95
#5

очему маржин авто? маржин авто должен быть только по краям.

а вообще мне слабо верится что верстать нужно имено так. Можно посмотреть на джипег макета?

N_MONax
На сайте с 22.08.2007
Offline
112
#6

Вот мне тоже кажется что тут проблема не в исполнении, а в неправильно поставленной задаче...

Полный спектр услуг в интернете. Быстро, Качественно, Дорого. Пишите в личку.
koteiko
На сайте с 12.11.2008
Offline
9
#7

ТС, http://blog.html.it/layoutgala/ вам в помощь, там и фикс и резина, в качетсве учебного материала самое оно

Бодрый абузоустройчивый хостинг (http://www.hoster24.ru/billing/aff.php?aff=050) от 8$ Как юзать попапы без пессимизации (http://t1er.ru/popunder-clickunder/)
HS
На сайте с 15.05.2009
Offline
50
#8

А что использование таблиц для этого уже не подходит?

Или есть нюансы, благодаря которым использование только CSS при верстке в чем-то превосходит таблицы?

S4
На сайте с 13.10.2008
Offline
72
#9

Может быть и задача неправильно поставлена. Но такие моменты могут встретиться еще. Во многих сайтах хитро сделали по краям фон одного цвета. Да и вообще люди делают на table. Может таким способом вообще нельзя сверстать на div'ах?..

Svetle4ok добавил 17.05.2009 в 10:32

koteiko:
ТС, http://blog.html.it/layoutgala/ вам в помощь, там и фикс и резина, в качетсве учебного материала самое оно

Хорошая вещь. Моего варианта нет. Здесь при трехколоночной верстке у центральной колонки задаются margin либо в пикселях, либо в процентах, ну а боковые как всегда прижимаются к краям float'ем. У моих колонок нет содержимого. Это так оформление. Представьте, я создаю одну колонку по центру с текстом, а по краям от нее будет фон с травой да еще и с тенью. Единственным вариантом наверно будет включить тень внутрь центральной колонки, а траву в фон родительского блока. Только трава это ж не просто цвет какой-то, она должна продолжать изображение граничащих элементов.

Делаю вывод: нельзя сверстать, как хочется. Буду делать таблицей.

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