Давайте сразу договоримся

Сразу оговорюсь касательно комментариев, замечаний, сообщений об ошибках и так далее - все опубликованные советы и примеры на 100% работоспособны, обкатаны и протестированы на совместимость со всеми основными браузерами на момент, если в пояснениях к какому-то конкертному примеру не указано иного.

Использование кодов из этой статьи Вы осуществляете на свой страх и риск.
Я не несу никакой ответсвенности за изменение внешнего вида Вашего дневника, либо возможных проблем, вызванных использованием css-кода из этой статьи.
Список примеров будет пополняться по мере возможности.

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

Если у Вас есть какое-то хорошее проверенное решение, которым Вы хотели бы поделиться - напишите о нем в комментарии, после проверки я внесу его в список со ссылкой на Вас.

Я всегда открыт для общения, однако не нужно задавать мне вопросы по css на u-mail или в icq - ответов не последует. Если вопрос по коду из этой статьи - воспользуйтесь комментариями. С другими вопросами советую обращаться в сообщество  diaryCSS.
Спасибо.

Надеюсь, Вы найдете здесь что-то полезное для себя


Справочник css селекторов:
Будет постепенно пополняться

Элемент дизайна - описание элемента в css

Предыдущая запсь - .prevPostLink
Следующая запись - .nextPostLink

u-mail - .umail
E-mail - .email
Дневник - .diary
Профиль - .profile
Добавить в цитатник - .addToQuote
Подписаться - .subscribe
Комментарии - .comments
Написать у себя - .quote_post

@темы - .atTag
@музыка - .atMusic
@настроение - .atMood

NEW! Элементы колонки меню:

#postsCalendar - Календарь записей
#albumLink - Альбом
#rssLink - RSS
#myDiaryLink - Мой дневник
#writeThisDiary - Новая запись
#umailLink - U-mail
#myFavLink - Избранное
#myQuotLink - Цитатник
#discussionLink - Дискуссии
#myProfileLink - Мой профиль
#optionsLink - Настройки
#myStatLink - Моя статистика
#photolibLink - Библиотека
#allDiaryLink - Все дневники
#mainpageLink - Главная страница
#favListLink - Список избранных
#pchListLink - Список ПЧ
#communityCatalogueLink - Каталог сообществ
#myCommunitiesLink - Мои сообщества
#randomDiaryLink - Случайный дневник
#diarySpiritLink - @дневники: изнутри
#diarySupportLink - Техподдержка
#paySupportLink - Техподдержка платных
#faqLink - FAQ
#iAmQuit - Выход
#more_login - Иконка входа под другим именем рядом с Выходом
#tagslistlink - Темы записей
#headlineList - Список заголовков
#comments - Комментарии
#subscribe - Подписаться
#addToQuote - Добавить в цитатник
#subscribeEmail - Подписаться на дневник
#addToFav - Добавить в избранное
#delFromFav - Удалить из избранного
#upInChart - Поднять в списке
#myLinksLink - Мои ссылки
#all_links - Ссылки

NEW!
#myDraftLink - Черновик
#thisDiaryPhoto - Фото владельца дневника



Что можно сделать с ссылками в меню?

1. Добавить к ссылками иконки:
#myFavLink {background: url('/userdir/0/0/0/0/0000/000000.gif') 2px 3px no-repeat; padding:0 0 0 20px !important; height:18px;}
Это минимально достаточная запись в плане используемых параметров.

Внимательно читаем пояснения!Самое главное здесь:
2px 3px - в примере задают положение фоновой картинки, относительно границ блока: первая цифра (2px) определяет отступ для фонового изображения слева, вторая (3px) - отступ сверху.
no-repeat - запрещает повторение картинки, если необходимо замостить фон по принципу обоев просто удалите no-repeat
Чтобы разрешить повторение картинки по принципу обоев: только по горизонтали - вместо no-repeat используйте repeat-x, только по вертикали - repeat-y
height - высота. Задается в px.
Должна быть не меньше высоты выводимого изображения.
padding - так называемый "внутренний" отступ. Задается обычно четырьмя числами в px
Первая цифра - отступ от верхнего края блока, вторая - от правого, третья - снизу, четвертая - слева.
Левый внутренний отступ должен быть не меньше ширины используемой иконки.
То есть запись padding:0 5px 10px 20px; задаст блоку внутренние отступы 0 сверху, 5 справа, 10 снизу и 20 слева.

Если все отступы одинаковые - достаточно записи типа padding:5px; - в этом случае отступ от любого края блока будет равен 5px
Если отступы сверху=снизу и слева=справа достаточно записи типа padding:5px 10px - в этом случае сверху и снизу отступ будет 5px, слева и справа по 10px.

Использовать можно изображения любого, разрешенного в библиотеке изображений формата.

2. Заменить текстовые ссылки в меню на изображения:
Применимо в том числе к музыке, настроению и @темам.

#myFavLink A {display:block; width:40px; height:25px; line-height:500px; overflow:hidden; background: #eee url('/userdir/0/0/0/0/0000/000000.gif') 2px 4px no-repeat;}

Для @тем код будет таким:
.atTag SPAN {display:block; width:40px; height:25px; line-height:500px; float:left; overflow:hidden; background: #eee url('/userdir/0/0/0/0/0000/00000.gif') 2px 4px no-repeat;}

Размещаем изображение в верхней части дневника, без использования эпиграфа.
Изображение будет расположено над блоком записей и колонкой меню, эпиграф при этом можно использовать для чего-то более полезного.

#extratop {background: #ccc url('/userdir/0/0/0/0/0000/00000.jpg') 0 0 no-repeat; height:100px; width:100%;}

no-repeat - запрещает повторение картинки, если необходимо замостить фон по принципу обоев просто удалите no-repeat
Чтобы разрешить повторение картинки по принципу обоев: только по горизонтали - вместо no-repeat используйте repeat-x, только по вертикали - repeat-y
height - определяет высоту вашей картинки

Задаем элементу прозрачность

Ниже приведен кросс-браузерный пример использования 50% прозрачности для блока меню (id=side)
#side {
filter: alpha(opacity=50); /* IE 5.5+ */
-moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
-khtml-opacity: 0.5; /* Konqueror 3.1+, Safari 1.1 */
opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9 */
}

Для IE 5.5 и выше - прозрачность задается числом от 0 до 100, для остальных браузеров - числом от 0.0 до 1.0 (чем больше число, тем более непрозрачным будет элемент).

Внимательно читаем об особенностях использования с Internet Explorer1. Фильтр можно применять лишь к элементу с установленным свойством height, или width, или position со значением absolute, или writingMode со значением tb-rl, или с contentEditable установленным в true.
2. Если при включенном методе сглаживания экранных шрифтов ClearType прозрачность применяется к элементу с текстом, текст визуально искажается. Для того чтобы исправить положение, для IE нужно задать фоновый цвет (CSS свойство background-color) для элемента к которому применяется прозрачность.

запись создана: 12.05.2007 в 01:14