VPF::Зловещие DIV'ы - Форум программистов

Pitbul

Дата 29.11.2009, 17:43 (ссылка)

(нет голосов)

Загрузка ...

Fruzenshtein

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет

Добрый день!
Все знают такой шаблон когда есть шапка, потом 3 колонки: левая навигация, контент, правая навигация и потом подвал.

Задумка следующая: колонки будут размещаться в таком порядке, как написано выше, но код устроен так:

....
<div id="content">
контент
</div>

<div id="leftbar">
левая навигация
</div>

<div id="rightbar">
правая навигация
</div>
...

Вопрос: какой CSS прописать, что бы выравнивалось все как задумано и примыкало равномерно к шапке?
Пробовал через флоаты и абсолютное позиционирование, но БАРы все равно находятся под КОНТЕНТом smile

--------------------

### JAVA ###### programming ###

Ctulhy

Дата 29.11.2009, 18:15 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 137
Регистрация: 2.8.2008
Где: Россия, Курск

Репутация: 2
Всего: 2

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

--------------------

скучно в Москве и дождливо в Крыму.

SelenIT

Дата 29.11.2009, 18:18 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Если ширина колонок фиксированная — проще всего заfloatить все три колонки, а потом смещать на сколько нужно отрицательными полями.

Вот небольшой список вариантов (правда, в большинстве из них используются дополнительные обертки), вдруг что-то подойдет...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Pitbul

Дата 29.11.2009, 19:04 (ссылка)

(нет голосов)

Загрузка ...

Fruzenshtein

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет

я хочу, что бы шаблон был как на картинке (ширина фиксированая), но при этом HTML выглядел так:

....
<div id="content">
контент
</div>

<div id="leftbar">
левая навигация
</div>

<div id="rightbar">
правая навигация
</div>
...

Но не знаю, какой CSS для этого прописать, если бы HTML был таким:

....
<div id="leftbar">
левая навигация
</div>

<div id="content">
контент
</div>

<div id="rightbar">
правая навигация
</div>
...

То все понятно, просто - float: left; всем БЛОКам ставим и все тип топ.

Присоединённый файл ( Кол-во скачиваний: 11 )

wablon.jpg 36,25 Kb

--------------------

### JAVA ###### programming ###

blah

Дата 29.11.2009, 20:39 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

Код


<div id="content-holder">
    <div id="content">
    контент
    </div>
    <div id="leftbar">
    левая навигация
    </div>
</div>
<div id="rightbar">
правая навигация
</div>

Код


#content-holder{
width:...px;
float:left;
}
#content{
width:...px;
float:right;
}
#leftbar{
width:...px;
float:left;
}
#rightbar{
width:...px;
float:right;
}

Код


#content-holder{
width:...px;
float:left;
}
#content{
width:...px;
float:left;
}
#leftbar{
width:...px;
float:left;
}
#rightbar{
width:...px;
float:left;
}

Или так=) Для данного случая безразлично.

Это сообщение отредактировал(а) blah - 29.11.2009, 20:42

Pitbul

Дата 29.11.2009, 21:16 (ссылка)

(нет голосов)

Загрузка ...

Fruzenshtein

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет

blah

Спасибо, буду пробовать завтра=) А то сегодня уже запарился=)

--------------------

### JAVA ###### programming ###

brother79

Дата 30.11.2009, 07:30 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 471
Регистрация: 18.8.2009

Репутация: 1
Всего: 6

У меня на сайте можешь посмотреть http://www.nastandart.com, там правда немного сложновато, я давно делал, тогда ещё мало умел, но там как раз резиновое исполнение на весь экран, правда ещё и с верхним клапаном, через маргины, при том, что даже в 6-м ие всё гладко. smile

. Надеюсь файрбагом пользоваться умеешь?

--------------------

http://www.nastandart.com

Pitbul

Дата 30.11.2009, 17:02 (ссылка)

(нет голосов)

Загрузка ...

Fruzenshtein

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет

brother79, blah

Обоим спасибо=) Как я не додумался вложить два первых DIV'a в отдельный DIV, а потом уже вставлять третий=) Наверное засиделся за компом...
Респект, пацаны! smile

--------------------

### JAVA ###### programming ###

Violator

Дата 30.11.2009, 18:25 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

Pitbul,
а метод предложеный SelenIT не подходит? и не надо будет ничего вкладывать в отдельный див

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »