Jump to content
  • 0

проблема с Оперой!


brainless
 Share

Question

есть div {overflow:hidden;}

в нём - длинная таблица

table

...

tr

td - a href="#img1" /a - /td

td - img id="img2" / - /td

td - a href="#img3" /a - /td

/tr

...

/table

и содержимое tr-/tr полностью занимает окно div'а, позволяя переключаться между картинками с помощью ссылок и якорей (такая вот галерея на одном сухом html).

проблема:

в Opera переключения, при overflow:hidden, не работают, а тут, как Вы понимаете, прокрутка категорически не нужна... что делать? код валидный, xhtml 1.0 strict и css 2.1, но не работает эта пижня только в Opera %( хотя, IE7 и 8 не проверял, но если в 6 работает, то и там должно, я думаю :)

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0
( хотя, IE7 и 8 не проверял, но если в 6 работает, то и там должно, я думаю :)

наивный ты человек :) , неужели ток новенький в верстке, ИЕ6 самый глючный и поэтому по разному ся ведет с 7 и 8 братом - лучше проверь везде :-) IETester тебе в помощь

Link to comment
Share on other sites

  • 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

<head>
<title>page</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="robots" content="noarchive, noodp" />
<style type="text/css">

body {background: #abc;}
table {border-collapse: collapse; border: 0;}
td {padding: 0;}

div {border: solid black 1px; width: 200px; height: 150px;}
.div1 {overflow:hidden;}
.div2 {overflow:scroll;}

img {width: 200px; height: 100px; border: 0;}
img,a {display: block;}

a {width: 100px; height: 50px; outline: none;}
.a0 {background: black;}
.a0:hover {background: white;}
.a1,.a2 {background: gray;}
.a1:hover,.a2:hover {background: red;}


#h1,#s1 {background: orange;}
#h2,#s2 {background: green;}
#h3,#s3 {background: yellow;}
#h4,#s4 {background: blue;}

</style>
</head>
<body>


<p>hidden</p>
<div class="div1">
<table>

<tr>
<td colspan="2"><img src="1.gif" id="h1" alt=""/></td>
</tr><tr>
<td><a class="a0"></a></td>
<td><a class="a2" href="#h2"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="h2" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#h1"></a></td>
<td><a class="a2" href="#h3"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="h3" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#h2"></a></td>
<td><a class="a2" href="#h4"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="h4" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#h3"></a></td>
<td><a class="a0"></a></td>
</tr>

</table>
</div>


<p>scroll</p>
<div class="div2">
<table>

<tr>
<td colspan="2"><img src="1.gif" id="s1" alt=""/></td>
</tr><tr>
<td><a class="a0"></a></td>
<td><a class="a2" href="#s2"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s2" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s1"></a></td>
<td><a class="a2" href="#s3"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s3" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s2"></a></td>
<td><a class="a2" href="#s4"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s4" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s3"></a></td>
<td><a class="a0"></a></td>
</tr>

</table>
</div>


</body>
</html>

link КАК ЭТО ВЫГЛЯДИТ link

вот здесь я сделал два примера для сравнения: с overflow:hidden и с overflow:scroll у элемента div, внутри которого таблица (в обоих примерах она одинаковая).

в браузере OPERA (TonKhaO, я говорил как раз о том, что даже в IE6 нормально всё работает, проблема с Оперой. а если и в IE6 работает нормально, то в 7 и 8 - подавно, хотя и не проверял) первый пример не работает, работает только второй, но нужна не перемотка, а "переключалка"! вот как сделать так, чтобы и в Опере она работала???

проверял на FireFox3.5, Opera10, GoogleChrome - в WinXP и Mac OS X10.5, Safari4 (Mac) и IE6 (WinXP)

Link to comment
Share on other sites

  • 0

похоже, никто мне не может помочь))) только разработчики Оперы, наверное...

я бы и object с документом использовал (типа как iframe, если кто не в курсе), но нужно, чтобы в адресной строке появлялся id, чтобы была возможность дать ссылку к какой-либо картинке.

может, есть какие-нибудь альтернативы?

Link to comment
Share on other sites

  • 0

Хех, прикольно, да действительно не работает ;)

Придлагаю сделать выкрутас по этому поводу

Div с классом div1 обернуть ещё в один к примеру с классом div1_1

а в css'e сделать так:

div {border: solid black 1px; width: 200px; height: 150px;}
.div1_1 {overflow:hidden;}
.div1 {overflow:auto; width: 217px;}
.div2 {overflow:scroll;}

тогда в опере заработает

Link to comment
Share on other sites

  • 0
Извращение какое-то.

Да но это ответное извращение, потому что тока опера почему-то не двигает див который в overflow: hidden

везде где не пробовал всё двигается, хотя даже не знаю кто прав, опера или все остальные

Link to comment
Share on other sites

  • 0

это "извращение" приходило мне в голову, но я даже не пробовал, потому как полагаю, что, если в закрытом от скролла блоке будет находиться открытый к скроллу блок, то появится неудобный момент с тем, что это окошко можно будет просто прокрутить колёсиком мышки %) тогда зачем якори? можно не париться и делать как все, вообще. но специально для Вас я попробую сейчас и покажу...

Great Rash, а что гуд?)) не смешите, право. что гуд, а что не гуд, это каждый сам решает. по-моему, здесь есть очевидная выгода: картинки загружаются все сразу, поэтому такая галерея просматривается "без задержек", и не надо загромождать новыми страницами, лишним кодом, теми же скриптами, потому что и так всё отлично работает, на одном здоровом html, и, что важно, есть возможность дать ссылку прямо к нужной картинке в галерее. минимализм во плоти.

понимаете, смысл весь в якорях и этих прямых ссылках, тут поможет только тот скрипт, который заставит Оперу работать с таким кодом, как надо, или что там. но, к сожалению, я в скриптах не шарю) обхожусь знаниями html, и, как видно, довольно успешно, за исключением одного браузерного нюанса, которому посвящена эта тема...

хочу заметить, что этот способ во многом универсален, не только для галерей. на месте картинок может быть и текст, и другое наполнение сайта, выгода в том, что всё это находится на одной странице (сайт из одной страницы!). "...com/about" = "...com/#about" и другие вариации, разве это не удобно? кажется, это ещё и быстрее... безусловно, это не панацея, и крупный контент даже при такой организации надо разделять, зато уже на меньшее количество частей. а вот для микросайтов это воистину способ из способов!

думаю, Опера не одном человеку в этом месте крылья сломала ;)

Link to comment
Share on other sites

  • 0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

<head>
<title>page2</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="robots" content="noarchive, noodp" />
<style type="text/css">

body {background: #abc;}
table {border-collapse: collapse; border: 0;}
td {padding: 0;}

.div1 {overflow: hidden; border: solid black 1px; width: 200px; height: 150px;}
.div2 {overflow: scroll; border:0; width: 220px; height: 170px;}

img {width: 200px; height: 100px; border: 0;}
img,a {display: block;}

a {width: 100px; height: 50px; outline: none;}
.a0 {background: black;}
.a0:hover {background: white;}
.a1,.a2 {background: gray;}
.a1:hover,.a2:hover {background: red;}


#h1,#s1 {background: orange;}
#h2,#s2 {background: green;}
#h3,#s3 {background: yellow;}
#h4,#s4 {background: blue;}

</style>
</head>
<body>


<p>hidden+scroll</p>
<div class="div1">

<div class="div2">
<table>

<tr>
<td colspan="2"><img src="1.gif" id="s1" alt=""/></td>
</tr><tr>
<td><a class="a0"></a></td>
<td><a class="a2" href="#s2"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s2" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s1"></a></td>
<td><a class="a2" href="#s3"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s3" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s2"></a></td>
<td><a class="a2" href="#s4"></a></td>
</tr>

<tr>
<td colspan="2"><img src="1.gif" id="s4" alt=""/></td>
</tr><tr>
<td><a class="a1" href="#s3"></a></td>
<td><a class="a0"></a></td>
</tr>

</table>
</div>

</div>

</body>
</html>

link КАК ЭТО ВЫГЛЯДИТ link

вот, двойной div, внешний без скролла, второй - с ним. какбе кнопки-то теперь и в Опере работают, но можно и мышкой прокрутить. что и требовалось доказать.

в ходе эксперимента выяснилось: overflow:hidden блокирует возможность скроллить блочную область мышкой во всех браузерах (проверял, конечно, не во всех), но способность переходить по якорям внутри этой области не имеет только Опера.

дополнительный вопрос, который, возможно, поможет решить проблему:

если вместо div использовать object, внутри которого так же будет таблица с якорями и ссылками на них, КАК нужно оформить его, чтобы не прописывать display:block, но отобразить в нём его содержимое, а также использовать overflow:hidden для получения конечного результата в виде искомой галереи?

вот данные задачи:

<object type="text/html" style="overflow:hidden">
<table>...</table>
</object>

задача по сути глупая, но главный вопрос в том, можно ли сделать подобное, используя не div, а object?

Link to comment
Share on other sites

  • 0

так... боюсь, что использовать object вместо div невозможно. потом, ошибка задачи в том, - я только что заметил, - что object является блочным элементом (я так думаю), а значит при overflow:hidden была бы та же самая история, что и с div, то есть ничего бы это не решило.

однако есть другая возможная конфигурация: использовать object как iframe, а внутри object расположить оригинальный div с таблицей галереи. потому как, если путь к объекту в атрибутах object указан неправильный, то object не отображается (отображается, но его не видно. это можно проверить, задав ему border), зато отображается то, что находится в нём.

таким образом, можно написать маленький скрипт, который бы задавал данные атрибуту data в object... правда, я не знаю, насколько это можно, потому что в js совсем не шарю(

<object data="переменная" type="text/html">
<div><table>...</table></div>
</object>

и скрипт, который бы задавал значение переменной,
что-то вроде "if Opera { переменная = page.html }" (простите моё косноязычие),
а если это не-Опера, то скрипт не среагирует, а значит останется "неправильный адрес" в виде имени переменной,
тогда object не отобразится, а отобразится div, который находится внутри.
то есть изменения минимальны, главное, чтоб работало...
зато, если скрипт в браузере не включён, то галерею нельзя будет просмотреть только в Опере %) и к чёрту

/вот тут я процитировал это в новую тему, а то всё-таки раздел здесь о другом/

также в ходе этого эксперимента выяснилось, что в iframe и object_как_iframe при overflow:hidden в Опере содержимое всё равно можно прокрутить. такая вот подставная эта Опера оказалась. казнить нельзя помиловать... придётся тогда делать в таком object каждой картинке отдельную страницу.

вощем, тему up, всех с новым годом и всё такое

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy