Листинг страниц

[39546284]

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

Пример - в моём дневнике. Не думаю, что где-то на дневниках такое есть.
Скрины - первая страница избранного, где-то в середине ленты и вторая страница: первых две - на мониторе 20", вторые две - что-то около 15":

Код:

 {_______________ листинг страниц pageBar ____________________________}
 #pageBar {margin: -20px 0px -40px -10px !important; width: 610px !important; }
 #pageBar a {margin: 0 5px 0 5 font: bold 13pt Colonna MT; color:#000; text-shadow: 0px 0px 3px #755353 ; text-decoration: none; }
 #pageBar a:hover { text-shadow: 0px 0px 4px #a88585 ; text-decoration: none; }
 .pages_str {display: block; position: fixed; bottom: 10 height: 25 left: 35 right: 35 }
 .pages_str td {width: 100% !important; height: 20 }
 .pages_str a {background: rgba(0, 0, 0, 0.6); padding: 5px 8px !important; border: 1px solid #332424 !important; -moz-border-radius: 2 -webkit-border-radius: 2 -o-border-radius: 2 border-radius: 2 font-size: 11pt !important; }
 .pages_str a:hover { padding: 5px 8px !important; -moz-border-radius: 2 -webkit-border-radius: 2 -o-border-radius: 2 border-radius: 2 border: 1px solid #332424 !important; font-size: 11pt !important; color:#000; text-shadow: 0px 0px 4px #a88585 !important; }
 .pageBar td a {-moz-border-radius: 2 -webkit-border-radius: 2 -o-border-radius: 2 border-radius: 2 border-color: #332424 !important; background: rgba(0, 0, 0, 0.6); padding: 5px 8px !important; }
 .pageBar td a:hover, #favGroups a:hover {background-image: none !important; background: rgba(0, 0, 0, 0.8) !important; -moz-border-radius: 2 -webkit-border-radius: 2 -o-border-radius: 2 border-radius: 2 border: 1px solid #332424 !important; -webkit-box-shadow: 0px 0px 3px #332424; -moz-box-shadow: 0px 0px 3px #332424; box-shadow: 0px 0px 3px #332424; }
 .pageBar td strong { text-decoration: none; -moz-border-radius: 2 -webkit-border-radius: 2 -o-border-radius: 2 border-radius: 2 border: 1px solid #332424 !important; -webkit-box-shadow: 0px 0px 3px #332424; -moz-box-shadow: 0px 0px 3px #332424; box-shadow: 0px 0px 3px #332424; font: bold 13pt Colonna MT !important; color:#000000; text-shadow: 0.5px 0.5px 4px #a88585; background: rgba(0, 0, 0, 0.5); padding: 5px 9px 6px 9px !important; }

Правда, этот код со всеми настройками оформления (шрифты, цвета фонов и текста, отступы и прочее), прописанных для нынешнего дизайна моего дневника. И, по-традиции, с вопросами по деталям кодировки обращайтесь в комменты.
Разбираем код:

— #pageBar - ширина блока с нумерацией страниц.
— #pageBar a - оформление ссылок в этом блоке до наведения мышки.
— #pageBar a:hover - оформление ссылок в нумерации страниц после наведения мышки.
— .pages_str - ТЕ САМЫЕ кнопки листинга страниц, тут - фиксирование блока и его позиционирование.
— .pages_str td - ширина и высота табличного элемента, в который вписаны ссылки на сами кнопки. Особенность в атрибуте width: 100% !important; , который задаёт ширину этого элемента на всё окно браузера, чтобы кнопки "примостились" у боковых границ окна с небольшим отступом, который прописан в предыдущем селекторе. Тут можно "играться" этим параметром сколько душе угодно.
— .pages_str a - оформление ссылок этих кнопок до наведения мышки.
— .pages_str a:hover - оформление ссылок этих кнопок после наведения мышки.
— .pageBar td a - оформление блоков (табличных ячеек), в которые вписаны все ссылки
(нумерация, кнопки листинга) блока листинга страниц до наведения мушки.
— .pageBar td a:hover, #favGroups a:hover - то же что и предыдущее, тольк после наведения мышки.
— .pageBar td strong - оформление активной ссылки на номер активной страницы.

Вообще говоря, конечный результат мне видится немного другим, более художественным. Да пока с его доведением до представляемого никак не получается справиться. Вот и решила поделиться тем, что есть. Может кому-то удастся развить и обогатить. Ну, или же, когда сама доведу до ума, либо дополню этот пост, либо создам новый, где всё распишу.

А вот так звучит моё настроение. В нём крик чаек где-то вдалеке, плеск океанских волн и захватывающее дух усыпанное звёздами ночное небо.

Это не оригинальный трек, а:

Armin van Buuren - John O Callaghan ft Lo-Fi Sugar -
«Never Fade Away»
- Andy Duguid Mix - On The Beach Intro Edit

Да, я слушаю и транс. Красивый, на мой взгляд, транс. И мне ооочень нравится. Наверное, просто хочу на море. А лучше - к океану.

• Вспыхнула очередная сверхновая идея! Просто грандиозная! Сама обалдела от размаха. Пока никому ничего не скажу. Предпочитаю не говорить о том, что существует в сфере незримого. Как только удастся реализовать хотя бы наброски, покажу. Это будет что-то радикально новенькое. Когда всё это воплощать? Итак две уже подвисли в воздухе.