Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.07.2013, 11:28
Новичок на форуме
Отправить личное сообщение для Mary-Jay Посмотреть профиль Найти все сообщения от Mary-Jay
 
Регистрация: 24.07.2013
Сообщений: 5

Резиновые дивы с прокруткой Java Script
Доброго времени суток.
Проблема вот в чем - нужно сделать весь сайт резиновым, внутренний блок с видео может быть с фиксированными шириной и высотой, а блок с сообщениями должен быть резиновым (когда не будет видео он должен занимать все пространство контента), но когда видео присутствует и пользователи пишут большое количество сообщений блок сообщений не должен растягиваться, а появлялись полосы прокрутки.

Изображения прикрепляю (второе изображение - дизайн). Буду благодарна за любую помощь.
Изображения:
Тип файла: jpg 1.jpg (9.4 Кб, 11 просмотров)
Тип файла: jpg 2.jpg (12.2 Кб, 8 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 24.07.2013, 11:43
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

Все, что вы описали, решается исключительно css.
Ответить с цитированием
  #3 (permalink)  
Старый 24.07.2013, 11:55
Новичок на форуме
Отправить личное сообщение для Mary-Jay Посмотреть профиль Найти все сообщения от Mary-Jay
 
Регистрация: 24.07.2013
Сообщений: 5

Дело в том что с помощью css не получается. Получается сделать либо резиновый блок сообщений но без прокрутки, либо с прокруткой, но ограниченный в высоту.
Ответить с цитированием
  #4 (permalink)  
Старый 24.07.2013, 12:03
Аватар для animhotep
Профессор
Отправить личное сообщение для animhotep Посмотреть профиль Найти все сообщения от animhotep
 
Регистрация: 17.01.2013
Сообщений: 887

выложи код, посмотрим
Ответить с цитированием
  #5 (permalink)  
Старый 24.07.2013, 12:14
Новичок на форуме
Отправить личное сообщение для Mary-Jay Посмотреть профиль Найти все сообщения от Mary-Jay
 
Регистрация: 24.07.2013
Сообщений: 5

Заказчик попросил верстать таблицей. Пробовала обернуть блоки в дивчик (wrap-center), чтобы ограничить, но проблема с прокруткой остается.
<td width="80%" bgcolor="#990033" valign="top">
<div class="wrap-center">
<div class="video-block" align="center">
<div class="video-block-inner">
<span class="video-inner">&nbsp;</span>
</div>
</div>
<div class="message-block" id="message-block">
<input name="" value="63" id="last-id-massage" type="hidden" />
<div class="chat" style="">
<span class="author"><font class="title-text">Автор: </font><font class="dynamic-text">erye</font></span>
<span class="time title-text">2013-05-11 20:33:48-№1 </span>
<hr />
<p class="text">Текст сообщения Текст сообщенияТекст сообщения Текст сообщения Текст сообщения Текст сообщения <br />Текст сообщения Текст сообщения</p>
</div>
<div class="chat" style="">
<span class="author"><font class="title-text">Автор: </font><font class="dynamic-text">erye</font></span>
<span class="time title-text">2013-05-11 20:33:48-№1 </span>
<hr />
<p class="text">Текст сообщения Текст сообщенияТекст сообщения Текст сообщения Текст сообщения Текст сообщения <br />Текст сообщения Текст сообщения</p>
</div>
<div class="chat" style="">
<span class="author"><font class="title-text">Автор: </font><font class="dynamic-text">erye</font></span>
<span class="time title-text">2013-05-11 20:33:48-№1 </span>
<hr />
<p class="text">Текст сообщения Текст сообщенияТекст сообщения Текст сообщения Текст сообщения Текст сообщения <br />Текст сообщения Текст сообщения</p>
</div>
<div class="chat" style="">
<span class="author"><font class="title-text">Автор: </font><font class="dynamic-text">erye</font></span>
<span class="time title-text">2013-05-11 20:33:48-№1 </span>
<hr />
<p class="text">Текст сообщения Текст сообщенияТекст сообщения Текст сообщения Текст сообщения Текст сообщения <br />Текст сообщения Текст сообщения</p>
</div>
</div><!-- .message-block -->
</div> <!--.wrap-center -->
</td>

/****CSS******/
.video-block { background: url("../img/layout/sidemiddle/panel_2.png"); height: 282px; width: 721px; position:relative; padding: 5px; border-radius: 3px; margin-bottom: 9px; margin-left: 7px; }
.video-block-inner { position: relative; height: 272px; width: 465px; background: url(../img/layout/sidemiddle/video.png); margin: 5px; }

.video-inner { position: absolute; top: 5px; left: 5px; height: 257px; width: 450px;background: url(../img/layout/sidemiddle/video_inner.png); }

.message-block { position: relative; padding: 5px; width: 721px; height: auto !important; min-height: 100%; background: #c7d1d3; background: -webkit-linear-gradient(top, #cdd4d7, #acb9be); background: -moz-linear-gradient(top, #cdd4d7, #acb9be); background: -o-linear-gradient(top, #cdd4d7, #acb9be); background: -ms-linear-gradient(top, #cdd4d7, #acb9be); -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -khtml-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; overflow: auto; margin-left: 7px; border-top: 1px solid #b0b5b7; border-left: 1px solid #c8c8c8; border-right: 1px solid #c8c8c8; }

.wrap-table { max-height: 100%; }
Ответить с цитированием
  #6 (permalink)  
Старый 24.07.2013, 12:28
Новичок на форуме
Отправить личное сообщение для Mary-Jay Посмотреть профиль Найти все сообщения от Mary-Jay
 
Регистрация: 24.07.2013
Сообщений: 5

Беда в том, что я не могу ограничить блок сообщений, т.к. если не будет видео он должен растягиваться и занимать освободившееся место, а блок с видео схлопываться.
Ответить с цитированием
  #7 (permalink)  
Старый 24.07.2013, 13:07
Профессор
Отправить личное сообщение для Kvark Посмотреть профиль Найти все сообщения от Kvark
 
Регистрация: 02.04.2013
Сообщений: 225

имхо таблица это зло, переубедите заказчика
Ответить с цитированием
  #8 (permalink)  
Старый 24.07.2013, 13:39
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

Сообщение от Kvark Посмотреть сообщение
имхо таблица это зло, переубедите заказчика
можете рассказать почему? если можно, то с примером (можно "на пальцах")
Ответить с цитированием
  #9 (permalink)  
Старый 24.07.2013, 13:48
Новичок на форуме
Отправить личное сообщение для Mary-Jay Посмотреть профиль Найти все сообщения от Mary-Jay
 
Регистрация: 24.07.2013
Сообщений: 5

Ребят, есть ли такое свойство в ява скрипт, которое бы рассчитывало высоту блока сообщений, кода блок с видео схлопывается?
Ответить с цитированием
  #10 (permalink)  
Старый 24.07.2013, 13:57
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

<!DOCTYPE HTML>
<html>
  <head>
	  <meta charset="utf-8">
  </head>
  <body>
		<div id="d">
		</div>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<style type="text/css">
	#d
	{
	width: 30px;
	height: 300px;
	}
	</style>
    <script type="text/javascript">
	alert($('#d').height());
    </script>
  </body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите расшифровать java script evgenn Общие вопросы Javascript 2 24.01.2013 09:57
Требуется программист Java Script Дитрий Андрияшкин Работа 0 03.08.2011 21:44
нажать кнопку с java script alerzo Events/DOM/Window 7 04.01.2011 15:49
В IE java Script Error! Хелп! web64 Общие вопросы Javascript 5 04.09.2008 17:09
HELP: Java Script Error: “text” is undefined Aram Khachaturyan Общие вопросы Javascript 2 11.04.2008 16:57