Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2010, 21:31
Аспирант
Отправить личное сообщение для peter888 Посмотреть профиль Найти все сообщения от peter888
 
Регистрация: 24.07.2009
Сообщений: 60

Несколько елементов подряд в одном DIV’e без скрола
Помогите, пожалуйста, решить проблему.
Есть DIV:
<div id="t1" style="width: 520px; height: 300px; overflow: hidden; content: '\2026'; position: relative; z-index: 2; white-space: nowrap;">Елементы (несколько дивов подряд)</div>

Мне надо, чтоб не зависимо сколько елементов есть в етом диве все елементы, которые не помещаються были в одной строке ("прятались").
Если в этот див вписать простой длинный текст, то все работает - текст прячется и не идет в новой строке, а если вписываю в этот див несколько дивов или таблиц, то они (если не помещаються по ширине) отображаються в новой строке.
Как их заставить прятатся?
Ответить с цитированием
  #2 (permalink)  
Старый 02.04.2010, 00:01
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

white-space: nowrap работает для текстовой строки. Див - блок, и никоим образом не часть текстовой строки.

Есть одно решение: задайте всем этим элементам display: inline или inline-block.
Но решение это чрезжопное и в ие6 работать не будет.
Ответить с цитированием
  #3 (permalink)  
Старый 02.04.2010, 00:39
Аспирант
Отправить личное сообщение для peter888 Посмотреть профиль Найти все сообщения от peter888
 
Регистрация: 24.07.2009
Сообщений: 60

м-да.. вобше вот для чего мне это было нужно:
я хотел в этом блоке поместить 67 блоков. Ширина главного блока равно ширине этих малениких внутри блоков умножено на два, Т.е я хотел, чтоб отображались только два блока из 67. А также поместить вде кнопки: назад и вперед. Если жму вперед, то
document.getElementById('t1').scrollLeft = document.getElementById('t1').scrollLeft + 150
, т.е . показываеться уже блоки 2 и 3, если еще раз нажать, то 3 и 4. Кнопка назад - наоборот.
Можно ли както сделать другим способом, есть какието варианты?
Вот здесь на главной есть пример http://wwjd.ru, хотя может быть и немношко другой принцып скрипта

Последний раз редактировалось peter888, 02.04.2010 в 00:43.
Ответить с цитированием
  #4 (permalink)  
Старый 02.04.2010, 01:02
Аватар для PeaceCoder
Профессор
Отправить личное сообщение для PeaceCoder Посмотреть профиль Найти все сообщения от PeaceCoder
 
Регистрация: 15.12.2009
Сообщений: 742

Тот пример который Вы дали сделан так:
Есть главный блок в котором показываются слайды с position: relative;
В нем каждый слайд имеет position: absolute;
и изменяется значение left. Если показывать конкретный блок не нужно - visibility: hidden;
__________________
Настоящий программист думает и осознает сам решение задачи, а не копирует другие мысли, не осознавая их (c)
Относись к человеку так же, как хотелось бы отношения к себе (с)
Все нужно там, где оно нужно, а все не нужно нигде (с) Gozar
B~Vladi: А кто такой JavaScript стрелок?! micscr: это тот, кто не jQuery танкист.
Программы становятся медленнее быстрее, чем компьютеры становятся быстрее (с) Никлаус Вирт
Ответить с цитированием
  #5 (permalink)  
Старый 02.04.2010, 01:22
Аспирант
Отправить личное сообщение для peter888 Посмотреть профиль Найти все сообщения от peter888
 
Регистрация: 24.07.2009
Сообщений: 60

Вроди получилось:
.div_fon {background: url(image/imgg.gif); background-repeat: no-repeat; width: 251px; height: 147px}
<table border="0" cellspacing="10" align="center">
	<tr>
		<td><span id="down" onclick="document.getElementById('t1').scrollLeft = document.getElementById('t1').scrollLeft-251;">Назад</span></td>
		<td> 
<div id="t1" style="width: 520px; height: 300px; overflow: hidden; content: '\2026'; position: relative; z-index: 2; white-space: nowrap;">
<div style="float: left; position: absolute" class="div_fon"> 111 </div>
<div style="float: left; position: absolute; margin-left: 251px" class="div_fon"> 222 </div>
<div style="float: left; position: absolute; margin-left: 502px" class="div_fon"> 333 </div>
<div style="float: left; position: absolute;  margin-left: 753px" class="div_fon"> 444 </div>
</div>	
		</td>
		<td><span id="up" onclick="document.getElementById('t1').scrollLeft = document.getElementById('t1').scrollLeft+251;">Вперед</span></td>
	</tr>
</table>
Спасибо всем

Последний раз редактировалось peter888, 02.04.2010 в 01:32.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прокрутка без скрола zerg Общие вопросы Javascript 20 10.07.2010 23:24