Только что прочитал тему overflow:scroll. У меня суть примерно та же, но картина совсем другая.
Конструкция
CODE:<div style="height:255px; overflow-y: scroll;">
работает у меня только в IE.
Firefox и NS вываливают текст за пределы дива, Опера (8) чуть покультурнее "газообразно" наращивает див по тексту.
Прочитав тему, поэкспериментировал с пикселями и процентами, с таблицей и без. Один этот самый...
Ещё побаловался с display:inline, block, inline-block. В случае inline Firefox выдал картинку, почти аналогичную Опере. И всё.
Ифрейм не хочу, потому что хостинг, на котором будет этот сайт (hut2.ru), лепит туда здоровенный баннер.
Хотя пока пришлось сделать страничку для "Осла" и её дубль с ифреймом для всех остальных нафиг-пофиг-нефигаторов.
Подумал, что, может быть, заковыка в том, что у меня там 2 дива-близнеца с разным контентом, вот "скелет" общей идеи (опускаю все дизайнерские прибамбасы):
CODE:<head>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<style type="text/css">
#raz, #dva {
position: absolute;
left: 1px;
top: 0;
width: 586px;
height: 255px;
overflow-y: scroll;
}
</style>
</head>
<body>
<table><tr><td>
<!-- ... -->
<!-- ... -->
<!-- ... -->
<div>
<form>
<input type="button" value="По жанрам" onClick="document.getElementById('raz').style.visibility='visible'; document.getElementById('dva').style.visibility='hidden';">
<input type="button" value="По именам" onClick="document.getElementById('raz').style.visibility='hidden'; document.getElementById('dva').style.visibility='visible';">
</form>
</div>
<!-- Это див-папа, чтобы абсолютно позиционировать деток-близняшек в нуль -->
<div style="position: relative;">
<div id="raz" style="visibility: visible;">
<!-- перечень муз. произведений по жанрам -->
</div>
<div id="dva" style="visibility: hidden;">
<!-- перечень муз. произведений по авторам -->
</div>
</div>
<!-- ... -->
<!-- ... -->
</td></tr></table>
</body> |