Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [CSS] Динамическая высота DIV'а / 16 сообщений из 16, страница 1 из 1
04.06.2008, 12:50
    #35353788
SweetApple
SweetApple
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
Подскажите, пожалуйста, как сделать, чтобы высота div'а была динамической, т.е. кратной определённому числу? В моём случае, в div'е может раполагаться различной длины текст, мне необходимо, чтобы значение высоты было кратно 42px (т.е в зависимости от длины расположенного в нём текста, высота div'а была или 42px или 84px или 126px и т.д.).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.06.2008, 13:11
    #35353878
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
Одно дело "динамически увеличиваться"... Другое дело увеличиваться "скачками". я по кратности примеров не встречал...

А чем вызвана потребность в "кратном" увеличении?
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.06.2008, 13:41
    #35354005
SweetApple
SweetApple
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
Вот сайт: http://kubik.yeslab.ru/
Левое меню выполнено в виде цветных блоков. В правой части - серые блоки (это и есть div'ы). Необходимо, что нижняя граница любого серого блока совпадала с нижней границей какого-нибудь цветного блока слева. Я рассчитала (пока ещё только примерно), что если высота серого блока будет кратна 42px (42px - суммарная высота цветной и белой полоски слева), то границы будут совпадать.
Если кто-нибудь сможет предложить иной способ реализации данной идеи, я внимательно слушаю :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.06.2008, 14:39
    #35354190
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
SweetAppleНеобходимо, что нижняя граница любого серого блока совпадала с нижней границей какого-нибудь цветного блока слева.
А высота серого блока произвольная? Их количество тоже произвольное?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.06.2008, 14:49
    #35354219
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
Сейчас у тебя серые идут с одинаковым отступом друг от друга... А иначе так не получится - расстояние между ними будет разное...

Кто код-то писал? Очень трудно смотреть...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.06.2008, 15:03
    #35354272
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
кратное увеличение высоты - разве только что с помощью js. Типа такого:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
<script>
window.onload = window.onresize = function()
{
	var cont = document.getElementById('container');
	var text = document.getElementById('text');
	cont.style.height = Math.ceil(text.offsetHeight/ 100 )* 100  + 'px';
}
</script>
<div id="container" style="background:gray">
	<div id="text">
		текст 
	</div>
</div>
Но верстка, основывающаяся на скриптах, - не самое удачное решение. Хотя бы даже потому, что ресайз разные браузеры обрабатываю по-разному (ие ведет обработку уже во время ресайза, а фф - постфактум). Лучше уж оставить как есть.

P.S. О меню. Белые буквы меню на пастельно-белесых фонах нечитаемы абсолютно . Цвета должны быть более контрастные. Это относится и к просто тексту - он тоже светловат.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.06.2008, 15:57
    #35354424
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
Если страничка выводится динамически (формируется скриптом - php, csp) можно расчитать количество строк в диве и поставить ширину принудительно
Код: plaintext
1.
2.
3.
4.
5.
6.
...
s text="какой-то текст"
s height=$$Height^sys(text)
&html<<div style='height:#(height)#;'>>
&html<   <p>#(text)#</p>>
&html<</div>>
...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.06.2008, 16:16
    #35354494
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
krvsaЕсли страничка выводится динамически (формируется скриптом - php, csp) можно расчитать количество строк в диве и поставить ширину принудительно

эт только если див будет иметь фиксированную ширину. Иначе при изменении размера страницы возможны разнообразные (в зависимости от браузера) последствия. А вообще - ни к чему это все.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.06.2008, 21:44
    #35355196
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
SweetApple...было кратно 42px...
Бред какой-то. Зачем?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.06.2008, 21:51
    #35355200
SweetApple
SweetApple
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
Код написан не мной. Сайт на Joomla. Моя задача - сверстать шаблон по готовому макету дизайна. (цвет блоков, текста и пр. придумано дизайнером, т.е. ко мне никакого отношения не имеет). Соответствие границ серых блоков и блоков левого меню - требование заказчика. Количество серых блоков - произвольное.
Попробую реализовать с помощью JS, отпишусь, получится или нет.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.06.2008, 22:01
    #35355214
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
Ну так illion уже написала. Так должно работать. В некоторых случаях вместо offsetHeight можно попробовать clientHeight. Только это как-то не комильфо.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.06.2008, 00:26
    #35355371
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
SweetApple(цвет блоков, текста и пр. придумано дизайнером, т.е. ко мне никакого отношения не имеет). Соответствие границ серых блоков и блоков левого меню - требование заказчика. Количество серых блоков - произвольное.
Попробую реализовать с помощью JS, отпишусь, получится или нет.
на js. И когда юзер будет менять размер страницы, дивы будут скакать от одного уровня к другому. Ваще отлично. Сайт с нечитаемым меню и прыгающим текстом. Имхо такое можно сразу в мусорку (без обид. Юзабилити стартовой страницы стремится к нулю). Хотя если это требование заказчика, и он им гордится, и оно оговорено где-то на бумаге (в ТЗ), то почему бы и нет. Получай фашист гранату!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.06.2008, 08:12
    #35355570
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
illionэт только если див будет иметь фиксированную ширину.
Ясное дело. Но у авторши именно такой случай...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.06.2008, 08:57
    #35355605
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
krvsa illionэт только если див будет иметь фиксированную ширину.
Ясное дело. Но у авторши именно такой случай...
ааа... Зашла на сайт. Ну хоть текст при ресайзе прыгать не будет, уже легче.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.06.2008, 21:08
    #35357932
mrJust
mrJust
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
>>SweetApple

предлогаю такие решения:
1. Использовать предопределенную высоту для всех блоков справа, кратную 44.
от этой величины отнять размер белого отступа под пунктоми слева (там наверное 22px)
например так:
Код: plaintext
1.
2.
3.
...css: 
.gray-box{background-color:gray;}
.gray-box.fixed{height:( 6 * 44 - 22 )px; margin-bottom:22px; overflow:hidden;}
<div class="gray-box fixed">Fixed gray box</div>

2. Использовать фиксированную высоту только для тех блоков, которые находятся на уровне меню. Можно думать, что для тех серых блоков, что находятся ниже левого меню, ширина не имеет значения.
Код: plaintext
1.
2.
3.
4.
<div class=gray-box fixed>блок на уровне меню</div>
<div class=gray-box fixed>блок на уровне меню</div>
... типа меню кончилось...
<div class=gray-box>блок под меню</div>
можно извратиться еще сильнее и сделать так:
Код: plaintext
1.
2.
3.
4.
5.
6.
.gray-box.fixed- 5 {height:( 5 * 44 - 22 )px; margin-bottom:22px; overflow:hidden;}
.gray-box.fixed- 2 {height:( 2 * 44 - 22 )px; margin-bottom:22px; overflow:hidden;}
<div class=gray-box fixed- 5 >блок на уровне меню</div>
<div class=gray-box fixed- 2 >блок на уровне меню</div>
... типа меню кончилось...
<div class=gray-box>блок под меню</div>
хреново то, что используя этот подход, Вы зависите от контента

3. если интересует только ИЕ, можно использовать expression , немного погуглив написать его не проблема

Но самый идеальный вариант, отказаться от всего этого бреда
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.06.2008, 09:39
    #35358398
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
[CSS] Динамическая высота DIV'а
mrJustНо самый идеальный вариант, отказаться от всего этого бреда

Эти дизайнеры такие затейники!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / [CSS] Динамическая высота DIV'а / 16 сообщений из 16, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 463ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1456391]:
 0ms
get settings:
 7ms
get forum list:
 16ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 151ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 60ms
get tp. blocked users:
 1ms
others: 210ms
total:  463ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]