ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Прокручивающаяся область !!!
17 сообщений из 17, страница 1 из 1
Прокручивающаяся область !!!
    #34708193
Andrey Ohotin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Andrey Ohotin
Гость
Ребят подскажите пожалуйста, как сделать область на странице. чтобы ее можно было прокручивать, а внутри нее была информация с картинками.. ооооооочень нужно!!!
Пожалуйста..
...
Рейтинг: 0 / 0
06.08.2007, 15:43
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #34708236
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Как вариант сделать фреймы...
----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
06.08.2007, 15:53
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #34708305
Фотография SkyLight
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SkyLight
Участник
Код: plaintext
1.
2.
<div style="width: 100%; height: 200px; overflow: auto">
Контент...........
</div>
...
Рейтинг: 0 / 0
06.08.2007, 16:10
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #34709237
Andrey Ohotin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Andrey Ohotin
Гость
я так понимаю, эти div можно вставлять в таблицу? то есть к примеру весь сайт статический, в середине имеет таблицу в которой можно поставить эти div и в этом месте появится прокручивающаяся область? в которую можно записать html код?
...
Рейтинг: 0 / 0
07.08.2007, 04:21
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #34709249
LINUXER
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
LINUXER
Участник
Andrey Ohotinя так понимаю, эти div можно вставлять в таблицу? то есть к примеру весь сайт статический, в середине имеет таблицу в которой можно поставить эти div и в этом месте появится прокручивающаяся область? в которую можно записать html код?
можно вставить в таблицу, в список, в другой див... такие вот чудеса=)
Прокручивающаяся область появится если размер содержимого будет больше дива
...
Рейтинг: 0 / 0
07.08.2007, 05:58
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #34709352
Блок А.Н.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок А.Н.
Участник
Нет, в таблицу div ставить нельзя.
Если вам нужно, чтобы прокручивалась часть таблицы, например правый столбец стоял, а все прокручивалось, или шапка таблицы стояла, а все двигалось - это серьезная игра со стилями, причем в разных браузерах результат не гарантируется

http://beholder-eye.info/2006/05/05/scroll-table
Есть ссылки и на этом форуме.
...
Рейтинг: 0 / 0
07.08.2007, 08:29
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #34709415
Блок А.Н.
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блок А.Н.
Участник
Поправлюсь: div можно вставить в ячейку таблицы, и прокручивать уже ячейку, но не факт, что вам это нужно :-)
...
Рейтинг: 0 / 0
07.08.2007, 09:18
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #35257046
Garisson
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Garisson
Гость
<body bgcolor="#ffffff">
<table width="100%" height=100% ID="Table1">
<tr>
<td>
<table width="100%" height="100%" border="1" cellpadding="1" cellspacing="0" bordercolor="#CCCCCC" bordercolordark="#ffffff" ID="Table4">
<tr bgcolor='#CCCCCC'>
<td align='center' width=10% colspan=1 rowspan=2> 984ufhybdvgtrskhnbtdgfjluetvgye887</td>
<td align='center' width=9% colspan=1 rowspan=2> kijfhgytgdfv,bopee97yr6fgvbdklpondbterdsmoitponmfdbgt</td>
<td align='center' width=10% colspan=1 rowspan=2> kgktuhgtuhg7858hhguugti</td>
<td align='center' width=20% colspan=2 rowspan=1> gjuhet</td>
<td align='center' width=9% colspan=1 rowspan=2> kgifjfhry6sgce6383hdbfgedw5366fgshcvfsrw62</td>
</tr>
<tr bgcolor='#CCCCCC'>
<td align='center' width=10% colspan=1 rowspan=1> kifgtrhuio</td>
<td align='center' width=10% colspan=1 rowspan=1> kifgtrhui</td>
</tr>
<tr id='tr_11' style='color:#FF0000'>
<td width='10%' align='Left' class='table-td' id='td0_7' style="color:#FF0000">kifgtrhuiokifgtrhuiokifgtrhuiokifgtrhuiokifgtrhuiorfg</td>
<td width='9%' align='Left' class='table-td' id='td0_8' style="color:#FF0000">a-51</td>
<td width='10%' align='Left' class='table-td' id='td0_9' style="color:#FF0000">12</td>
<td width='9%' align='Left' class='table-td' id='td0_10' style="color:#FF0000">12</td>
<td width='9%' align='Left' class='table-td' id='td0_11' style="color:#FF0000">0</td>
<td width='10%' align='Left' class='table-td' id='td0_12' style="color:#FF0000"> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
...
Рейтинг: 0 / 0
15.04.2008, 17:56
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #35257048
Garisson
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Garisson
Гость
Как заморозить у такой таблицы заголовок?
...
Рейтинг: 0 / 0
15.04.2008, 17:58
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #35257123
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
Я такое делал двумя дивами: верхний с заголовками, нижний с таблицей. Причем, сделал верхний шире, а в нижнем поставил постоянный скролл, чтобы представление содержимого дива и таблицы не менялось от наполнения. Для красоты у верхнего дива убрал нижний бордер и сделал стилевой бекграунд - получается очень даже симпатично.

Пару страниц назад дважды обсуждалась подобная тема. Там вроде другое решение, но люди остались довольны.
...
Рейтинг: 0 / 0
15.04.2008, 18:19
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #35258018
Garisson
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Garisson
Гость
что то не получается обратится к дивам таким образом что я не так делаю?
<body bgcolor="#ffffff">
<table width="100%" height=100% ID="Table1">
<tr>
<td>
<table width="100%" height="100%" border="1" cellpadding="1" cellspacing="0" bordercolor="#CCCCCC" bordercolordark="#ffffff" ID="Table4">
<div>
<tr bgcolor='#CCCCCC'>
<td align='center' width=10% colspan=1 rowspan=2> 984ufhybdvgtrskhnbtdgfjluetvgye887</td>
<td align='center' width=9% colspan=1 rowspan=2> kijfhgytgdfv,bopee97yr6fgvbdklpondbterdsmoitponmfdbgt</td>
<td align='center' width=10% colspan=1 rowspan=2> kgktuhgtuhg7858hhguugti</td>
<td align='center' width=20% colspan=2 rowspan=1> gjuhet</td>
<td align='center' width=9% colspan=1 rowspan=2> kgifjfhry6sgce6383hdbfgedw5366fgshcvfsrw62</td>
</tr>
<tr bgcolor='#CCCCCC'>
<td align='center' width=10% colspan=1 rowspan=1> kifgtrhuio</td>
<td align='center' width=10% colspan=1 rowspan=1> kifgtrhui</td>
</tr>
</div>
<div style="font-size: 14px; background-color: lime">
<tr id='tr_11' style='color:#FF0000'>
<td width='10%' align='Left' class='table-td' id='td0_7' style="color:#FF0000">kifgtrhuiokifgtrhuiokifgtrhuiokifgtrhuiokifgtrhuiorfg</td>
<td width='9%' align='Left' class='table-td' id='td0_8' style="color:#FF0000">a-51</td>
<td width='10%' align='Left' class='table-td' id='td0_9' style="color:#FF0000">12</td>
<td width='9%' align='Left' class='table-td' id='td0_10' style="color:#FF0000">12</td>
<td width='9%' align='Left' class='table-td' id='td0_11' style="color:#FF0000">0</td>
<td width='10%' align='Left' class='table-td' id='td0_12' style="color:#FF0000"> </td>
</tr>
</div>
</table>
</td>
</tr>
</table>
</body>
...
Рейтинг: 0 / 0
16.04.2008, 10:41
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #35259036
Garisson
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Garisson
Гость
Нашел ответ в другой ветке:
<body bgcolor="#ffffff">
<div id="container" style="width: 100%">
<table border="1" cellpadding="1" cellspacing="0" width="100%" bordercolor="#CCCCCC" bordercolordark="#ffffff">
<thead>
<tr bgcolor='#CCCCCC'>
<td align='center' width=10% colspan=1 rowspan=2> 984ufhybdvgtrskhnbtdgfjluetvgye887</td>
<td align='center' width=9% colspan=1 rowspan=2> kijfhgytgdfv,bopee97yr6fgvbdklpondbterdsmoitponmfdbgt</td>
<td align='center' width=10% colspan=1 rowspan=2> kgktuhgtuhg7858hhguugti</td>
<td align='center' width=20% colspan=2 rowspan=1> gjuhet</td>
<td align='center' width=9% colspan=1 rowspan=2> kgifjfhry6sgce6383hdbfgedw5366fgshcvfsrw62</td>
</tr>
<tr bgcolor='#CCCCCC'>
<td align='center' width=10% colspan=1 rowspan=1> kifgtrhuio</td>
<td align='center' width=10% colspan=1 rowspan=1> kifgtrhui</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr bgcolor="#A0D0A0">
<td>Total</td>
</tr>
</tfoot>
</table>
</div>
</body>

<script type="text/javascript">
var c = document.getElementById('container');
var t = c.firstChild;
var tH = t.tHead;
var tB = t.tBodies[0];
var tF = t.tFoot;

c.style.height = "100%";
c.style.overflowY = "auto";
c.style.overflowX = "visible";

var header = t.cloneNode(false);
header.appendChild(tH.cloneNode(true));
c.parentNode.insertBefore(header, c);

header.style.position = 'absolute';
header.style.top = (c.offsetTop) + 'px';

var footer = t.cloneNode(false);
footer.appendChild(tF.cloneNode(true));
c.parentNode.insertBefore(footer, c.nextSibling);

footer.style.position = 'absolute';

function generateRows(count){
for (var i = 0; i < count; i++)
with (tB.insertRow())
for (var j = 0; j < 6; j++)
insertCell(j).innerText = i + '/' + j;
}
function setEqualWidth(original, clon, colIndex){
for (var i = 0; i < clon.rows.length; i++)
if (clon.rows(i).cells.length > colIndex && original.rows(i).cells(colIndex).clientWidth)
{
clon.rows(i).cells(colIndex).noWrap = true;
clon.rows(i).cells(colIndex).style.width = (original.rows(i).cells(colIndex).clientWidth - t.cellPadding * 2) + 'px';
}
}
function makeEqualThemAll(){
var smallRows = c.clientHeight > t.offsetHeight;
c.style.paddingRight = smallRows ? '16px' : '0px';
footer.style.display = smallRows ? 'none' : 'block';

header.style.width =
footer.style.width = t.offsetWidth + 'px';

for (var i = 0; i < tB.rows(0).cells.length; i++)
{
setEqualWidth(tH, header, i);
setEqualWidth(tF, footer, i);
}

if (!smallRows)
footer.style.top = (c.offsetTop + c.offsetHeight - footer.offsetHeight) + 'px';
}

generateRows(200);
makeEqualThemAll();

window.onresize = makeEqualThemAll;
</script>
...
Рейтинг: 0 / 0
16.04.2008, 14:38
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #35259535
IgorAnton
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IgorAnton
Гость
<html>
<head> <title></title><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head>
<body bgcolor="#c0c0c0">
<form action="/WebModule/servlet" method="get">

<div id="vopros" style="border: double; top: 20px; left: 20 px; width: 400px; height: 400px; position:absolute; overflow: auto" >
<table border="1" cellpadding="0" width="400" height="60" rules="all" >

<tr>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
</tr>
<tr>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
</tr>
<tr>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
</tr>

<tr>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
</tr>
<tr>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
<td><img src="" width="100" height="100" /></td>
</tr>
</table>
</div>

</form>
</body>
</html>
...
Рейтинг: 0 / 0
16.04.2008, 16:20
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #35260578
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
GarissonНашел ответ в другой ветке:
...
[километр кода]
...


IE-only js-бред. К чему такие сложности, если что там написано, можно сделать с помощью нескольких строчек CSS: css-пример .
Правда, у автора той статьи (из которой пример) так и не получилось оперу одолеть. Кстати, есть у кого-нибудь мысли по поводу адаптации этого css-примера к Опере? Потому что у меня тоже не получилось, а интересно ведь.


IDVsbruckЯ такое делал двумя дивами: верхний с заголовками, нижний с таблицей. Причем, сделал верхний шире, а в нижнем поставил постоянный скролл, чтобы представление содержимого дива и таблицы не менялось от наполнения.
так это была одна таблица, в которой было два дива (один - с thead, другой - c tbody, если такое возможно вообще), или это было два отдельных дива (один - с заголовками, другой с собственно таблицей, тогда ширину заголовков как вычислял?) ?
...
Рейтинг: 0 / 0
17.04.2008, 06:23
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #35261275
Garisson
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Garisson
Гость
Согласен про милион строк кода, просто он генерится динамически всегда разный, в этом и была вся проблема приделать к нему скролл шапки
...
Рейтинг: 0 / 0
17.04.2008, 11:45
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #35261604
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
illionтак это была одна таблица, в которой было два дива (один - с thead, другой - c tbody, если такое возможно вообще), или это было два отдельных дива (один - с заголовками, другой с собственно таблицей, тогда ширину заголовков как вычислял?) ?

Два дива, две таблицы. Просто задавал ширину столбцов (вопрос непонятен). Чтобы не расползались столбцы - мог только первый, в остальные получал данные с сервера (время и суммы), поэтому они не могли увеличиться - сделал их с overflow, последние буквы могут прятаться, но пока такого не было. Последнюю ячейку в первом диве сделал шириной 16пх - по ширине скролла во втором диве. Впечатление от полученного элемента очень целостное - даже приаттачил его вместе с кнопками.
...
Рейтинг: 0 / 0
17.04.2008, 12:57
| Ответить | Цитировать | Написать  
Прокручивающаяся область !!!
    #35261705
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
IDVsbruck
Два дива, две таблицы. Просто задавал ширину столбцов (вопрос непонятен). Чтобы не расползались столбцы - мог только первый, в остальные получал данные с сервера (время и суммы), поэтому они не могли увеличиться
ну вот это я и спрашивала. Т.е. более-менее жестко задана ширина столбцов.
...
Рейтинг: 0 / 0
17.04.2008, 13:24
| Ответить | Цитировать | Написать  
17 сообщений из 17, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Прокручивающаяся область !!!
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&gotonew=1&tid=1456589]:
 0ms
get settings:
 12ms
get forum list:
 16ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 162ms
get topic data:
 8ms
get first new msg:
 4ms
get forum data:
 2ms
get page messages:
 36ms
get tp. blocked users:
 1ms
others: 221ms
total:  468ms
созд. / загр.: 468ms
x
x
Закрыть


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