Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Очередной резиновый сайт, но уже по вертикали, Помогите с реализацией 
:(
    Опции темы
Kiseki
  Дата 2.1.2008, 15:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Суть вопроса такова, есть сайт на дивах, и нужно сделать его резиновым по высоте,

Всего три блока в контейнере,

первый (шапка) 100px (к примеру)
второй - всё остальное
третий - 50px

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

Такая верстка легко делается на таблицах, но как это сделать с помощью дивов, спасибо.
(хотябы пример)
PM MAIL Skype   Вверх
Georgio
Дата 2.1.2008, 16:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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

<html>
<head>
<meta http-equiv="Content-Language" content="ru">
<title>Пример</title>
</head>

<body>

<div style="width: 100%; height: 100px;">Логотип</div>
<div style="width: 100%;">
Контент<p>п</p>
<p>п</p>
<p>п</p>
<p>п</p>
<p>п</p>
<p>п</p>
<p>п</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;
</div>
<div style="width: 100%; height: 50px;">Низ</div>

</body>

</html>


Это что ли?


--------------------
Исторический сайт
Исторический форум
Юрий Макарцев
PM MAIL WWW ICQ Skype   Вверх
Kiseki
Дата 2.1.2008, 18:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Ммм, спасибо, но не совсем 

Мне надо так, но чтобы див с контентом был ликвидным, и увеличивался сам...


Мне лень обьяснять еще раз, но вот пример на таблицах, просто нужно вот такое же на дивы =)

(ыы, квирк, да не важно)
Код

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>New Page 1</title>
<style>
    /*Зы, для наглядности таблиц*/
    td { border: 1px solid #000 }
</style>
</head>
<body>

<table width="100%" height="100%" style="border-collapse: collapse;">
    <tr>
        <td height=100px>100пикселей</td>
    </tr>
    <tr>
        <td style="background: #CCC">А вот это всегда растягивается на всё остальное пространство</td>
    </tr>
    <tr>
        <td height=50px>50пикселей</td>
    </tr>
</table>

</body>
</html>
PM MAIL Skype   Вверх
Georgio
Дата 2.1.2008, 19:01 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 2
Всего: 5
Ага, понял, при резиновом дизайне никак, только если дивы с таблицами сочетать, на одникх дивах не получится. А зачем вам дивы обязательно? У них много минусов, это один из них. Я сам ушел от дивов, и верстаю таблицами, а дивы только тогда, когда они премлемы с тчоки зрения верстки  smile 


--------------------
Исторический сайт
Исторический форум
Юрий Макарцев
PM MAIL WWW ICQ Skype   Вверх
Kiseki
Дата 2.1.2008, 19:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Дивы нужны тк через css иногда придёться круто менять сайт, на таблицах, как известно, это всё слишком ограничено =)

Хмм, нуу а есть какое-то решение, даже если и с таблицой(всмысле только вот для этого обьектика, или для каркаса), или еще каак)) очень нужно.) Спасибо.
PM MAIL Skype   Вверх
Georgio
Дата 2.1.2008, 20:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 2
Всего: 5
Таблицы так же легко меняются через CSS, как и дивы.

Задаешь таблице класс и готово. Задай классы для таблиц и для ячеек, впиши параметры в файл CSS

Вариант решения на таблицах ты знаешь. http://htmlbook.ru - тут кликай на css в левом меню снизу, там все есть  smile 


--------------------
Исторический сайт
Исторический форум
Юрий Макарцев
PM MAIL WWW ICQ Skype   Вверх
December
Дата 2.1.2008, 20:32 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Antitheorist
****


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

Репутация: 1
Всего: 57
пример резинового по вертикали можно увидеть здесь
http://www.pmob.co.uk/temp/3colfixedtest_explained.htm
я проверял, реально работает под современными бродилками


--------------------
Для друзей с винграда - скидки на разработку сайтов
PM MAIL WWW ICQ   Вверх
Georgio
Дата 2.1.2008, 20:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 2
Всего: 5
Отлично!

Создавайте 2 CSS (для все и отедльный для ИЕ), играйте отрицатеотными значениями у дивом, подбирайте необходимые отступы и поля  smile 

А все так просто решалось с помощью старых добрых таблиц.

На худой конец просто поставьте картинку форматом 1px на 618 px в контент и не парьтесь  smile 


--------------------
Исторический сайт
Исторический форум
Юрий Макарцев
PM MAIL WWW ICQ Skype   Вверх
Kiseki
Дата 2.1.2008, 20:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

Репутация: нет
Всего: нет
Пардон)) не увидел новых ответов)) читаю))

Кстати, насчет двух CSS, то это и так используется на сайте, так что, ничего страшного %))

Это сообщение отредактировал(а) Kiseki - 2.1.2008, 21:53
PM MAIL Skype   Вверх
bazzjr
Дата 9.1.2008, 13:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 2
Всего: 6
Вообщем если тема актуальна, то есть довольно таки неплохой варик вертикального выравнивания.
код простой и можно дорабатывать. у меня ушло пол дня что бы сообразить таки именно такой вариант кода. а так конечно очень много вариантов я перебрал!!! и в каждом варике есть свои + и -.
-- НИЖЕ КОД --

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>100% вертикальный выравнивание dav'a</title>

<style type="text/css">
html, body {
  height:100%;
  }
#bod {
  position:relative;
  min-height:100%; max-height:100%;background-color:#CCCCCC;overflow:auto; overflow-y:scroll; overflow-x:hidden;
#head{
}
#cont {
  padding-bottom:3em; background-color:#00FFFF;
  }
#bott {
  position:relative; background-color:#006600;
  height:3em; 
  margin:-3em 0 0;
  }
</style>

</head>
<body>

<div id="bod">
  <div id="head">Шапка</div> 
  <div id="cont">Контент<br />
    Страница статичная и 100% по высоте.<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
    1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
    1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br /></div>
</div>
<div id="bott">Низ</div>

</body>
</html>




да забыл... у меня в IE 6 не работает статичность(т.е. нат полосы прокрутки если контент выходит за 100% height).
если кто придложит свой варик решения-то буду очень рад!!!

Это сообщение отредактировал(а) bazzjr - 9.1.2008, 13:47
PM MAIL ICQ   Вверх
NDenis
Дата 9.1.2008, 16:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

Репутация: 8
Всего: 8
все достаточно простенько, сам пользуюсь таким шаблоном
смотрим страницу, и стили
PM MAIL   Вверх
December
Дата 9.1.2008, 17:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Antitheorist
****


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

Репутация: 1
Всего: 57
NDenis, на скриптах и с опасными хаками - не самое лучшее решение


--------------------
Для друзей с винграда - скидки на разработку сайтов
PM MAIL WWW ICQ   Вверх
NDenis
Дата 9.1.2008, 19:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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

NDenis, на скриптах и с опасными хаками - не самое лучшее решение

вы про expression? у меня (и у других людей, с кем я работаю) с ним не было пока никаких проблем
а какие еще скрипты?
PM MAIL   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0574 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.