HTML5 и CSS3 Использование нескольких псевдо-классов и свойств translateX / Y

Question

Итак, прежде всего, позвольте мне признать, что я не лучший в программировании, я графический дизайнер, но я пытаюсь научить себя HTML5. Мне удалось устранить большинство моих проблем, но сейчас я в тупике.

По сути, моя проблема заключается в том, что когда вы щелкаете по миниатюре внутри фрейма, она выравнивает миниатюру в самой верхней части экрана. Я попытался добавить translateY к классу "page", и я также попробовал это сделать на страницах iframe, но это привело к смещению основного изображения.

Моя тестовая страница на сайте http://www.brodylahd.com/index2

В ответ на Кошку Чен

да, я думаю, что это то, что мне нужно сделать ... но будет ли оно по-прежнему иметь такое же горизонтальное движение?

Answer 1

Эта проблема связана с переходом на якоря в iframe, поэтому браузеры стремятся сосредоточиться на содержании в них, если вы нацеливаетесь на них.

Самое простое решение в вашем случае (но не идеальное)) должен контролировать место прокрутки, поэтому, если вы добавите

#a1 { position:relative; top: -186px; }
#wrapper { position:relative; top: 186px; }

Страница будет центрирована более визуально правильно, но все равно будет прокручиваться.

Если вы хотите сделать ещеиспользуя CSS, вы можете попытаться изменить поведение ваших ссылок + #aN:target .page{…} на то, которое будет использовать метки и переключатели, которые будут идти до блоков .page: #aN:checked+.page{…}, но я не уверен, что браузеры будут или не будутне прокручивать страницу, когда вы используете радио вместо ссылок.

Answer 2

Ссылки на миниатюры, выравнивающие контейнер в самом верху экрана при нажатии, потому что вы используете якоря ( Uri Fragments ), такие как # a1 # a2 # a3 в атрибутах href.

Вы можете попытаться удалить эти фрагменты или предотвратить перемещение на странице, используя небольшой обходной путь JavaScript, например:

$('#thumbs').find('a').bind('click', function() {
    return false;
})