Записи с темой: основные блоки (список заголовков)
21:07 

предыдущая и следующая запись

-=Beautiful Art Community=-
один из ПЧ написал вот это
опа, забавный глюк нашла *наверное, это из-за моей оперы, но не могли бы вы проверить на каком-другом браузере*
вот с этой страницы apollo-jusu-sirds.diary.ru/p166918028.htm не перелистывается к "предыдущей записи". Эффект, как от обычного обновления - кнопка не срабатывает) До этой страницы всё отлично работало. Кэш чистила, толку ноль.


проверил и сам в хроме и опере и страница действительно обновляться, думаю она не одна такая, а может и единственная, сообщество большое. Собственно не могу понять в чем причина, единственное что я делал с этими элементами, поднял их выше .prevnext {margin-top: -50px !important; } собственно хотелось бы узнать это проблема решаема в ксс или мне в техподдержку идти?

@темы: основные блоки

07:36 

:before и :after

D Storm
Veni, vidi, vici.
Данная запись о том, как добавить в оформление текст непосредственно через CSS. В чём преимущество перед заранее приготовленным изображением с текстом? Во-первых, весит в разы меньше, во-вторых, проще оформить в стилистике самого дневника. Итак, к делу.

Вся фишка в селекторах. В данном случае, конкретно в двух: :before и :after, - которые добавляют блок текста до либо после блока, к которыму были применены, соответственно. Возьмём, к примеру, #add_block1. Применение селектора выглядит следующим образом:

#add_block1:before {content:"test text";}

Также в content можно прописывать url (только из БИ, разумеется) (синтаксис тот же, что и в background). Кроме того, в блоках с данными селекторами можно описывать непосредственно стиль текста и его положение на странице. Пример:

#add_block1:after {position:fixed; top:20px; left: 20px; color:#ff0000; text-shadow: 0 0 3px #ff0000; font-size:12px; content:"test text";}

Пожалуй, есть только одна проблема. Этот текст всё равно нельзя выделять и копировать, чтобы получить к нему доступ надо лезть в код страницы. Ну а в остальном - использование данных селекторов может быть весьма удобным.

@темы: diaryCSS, Дизайн, Мысли вслух, основные блоки, текст

07:19 

Разделение контента

D Storm
Veni, vidi, vici.
Здесь я расскажу о том, как с помощью CSS в дневнике реализовать отображение трёх различных блоков контента в ленте избранного, дневнике и режиме комментариев соответственно. Зачем это нужно? Как правило, для шлифовки сложного оформления, но могут быть и другие причины. So, let's start.

Для начала создаём в записи три блока для контента. Выглядеть они должны примерно так.



Зачем прописывать style="display:none"? Это скроет ненужные блоки в режиме ленты избранного, где ваш CSS не действует.

Итак, всё, что осталось - описать данные классы в CSS. Можете смело использовать следующий код:



И всё работает. Последняя строчка нужна для того, чтобы feed контент отображался в своём избранном (чужие и свои блоки такого типа) и в своём цитатнике. Также подразумевается, что в черновиках должны быть видны вообще все варианты.

Пример: лента, дневник, запись.

@темы: diaryCSS, Мысли вслух, основные блоки, текст

06:06 

разные стили для разных типов страниц

pink pony Polly
Делай, что хочешь, но делай это хорошо!
Здравствуйте. Подскажите пожалуйста, как задать отдельный стиль для страницы со списком заголовков? Здесь не указано имя селектора для списка заголовков, а по аналогии #JournalHeadline - не работает.

@темы: основные блоки

16:18 

Vamp in house
ничнто не истинно. все дозволено (с)
Дизайн делался под разрешение 1024 на 600. Подскажите пожалуйста можно ли подогнать это оформление так чтобы при разрешение экрана 1280 на 800 блок записей не съезжал?
Код:
Скрин в норме: Скрин при большем разрешении:

@темы: основные блоки

16:10 

Дополнительные блоки и вставка объектов

pink pony Polly
Делай, что хочешь, но делай это хорошо!
Здравствуйте, есть несколько вопросов... Поиском не получается, может быть я неправильно гуглю?
Довольно давно программеры дайри вроде бы ввели дополнительные блоки каждого элемента. Я об этом Diary Spirit. Дизайн дневника. Подскажите, не поднималась ли где-нибудь тема о произошедших изменениях и проблемах, возникающих в связи ними? Если не сможете припомнить тему, ответьте, пожалуйста на пару вопросов...

@темы: основные блоки

15:37 

Доброго времени суток!
Вопрос замены ссылок "Комментарии", "Подписаться", "В цитатник" поднимался уже не раз, но вразумительного ответа мной найдено не было.
читать дальше

@темы: фоновые картинки, текст, платный сервис, основные блоки, Дизайн

17:11 

Доброго времени суток!
Столкнулась с проблемой создания диза в темных тонах. Столкнулась с проблемой, что редактирование записи выглядит след образом:

Цвет текста задавала
#message {color: #ffffff !important;}
Каким образом указать читабельные цвета текста и всего меню? Как менять фон поля с заголовком?
Заранее большое спасибо за помощь!

@темы: Дизайн, основные блоки

04:05 

Kiwikata
малефикар
Доброй ночи.
1. Возникла проблема с изменением размеров даты поста и названия дневника в блочном дизайне, подскажите, пожалуйста)
код для названия:

код для даты поста:


Шрифт меняется, а размер и цвет - нет. Хотя заголовки нужного размера становятся через пост.
В табличном же дизайне название дневника принимает желаемый вид, а с датой такая же ерунда остается.

2. В комментариях пропали даты комментарием.
Вроде, ничего не убирала...
Весь код:

@темы: основные блоки, текст

14:27 

это всё она.
если не нужно драться, незачем и побеждать
Здраствуйте! нужна помощь...меню в дизайне должно отображаться вертикально, сбоку.отдельным блоком. типа как тут 7510.diary.ru/ получается,что сливаеться с боком записей(помоооогите(((
что не так с кодом? Буду безумно благодарна)
код дизайна

@темы: меню, основные блоки

22:47 

Проблема со страницей комментариев.

BON-BONE
Ты отвратительна, моя красавица!
Здравствуйте! Из серии глупых вопросов.
Дизайн я настроила, но стоит зайти в комментарии...

Посмотреть что получилось

То есть, имеется две проблемы:
1) Отступы, прописаные для .paragraph не действуют.
2) Блок с текстом комментария растянулся под аватары. Я пробовала регулировать ширину с помошью свойств #JournalComments .postInner. НО тут такая проблема: .postInner поста (на странице комментариев) должен быть шире, чем .postInner самих комментариев, так как в самом посте у меня отключены аватары, имя пользователя и подпись. Можно ли прописать ширину текста комментариев отельно, не меняя ширину блока записи на станице комментариев? #commentsArea .paragraph не работает.

Заранее спасибо.
запись создана: 20.08.2011 в 20:00

@темы: diaryCSS, основные блоки

02:50 

Mr.GG [DELETED user]
Не подскажите как убрать промежутки?

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

@темы: основные блоки, рамки и полоски

23:45 

это всё она.
если не нужно драться, незачем и побеждать
здравствуйте)у меня вот такой вопрос...если я хочу сделать єкстработтом больше чем основной блок записей....подскажите,возможно ли и как прописать....

@темы: diaryCSS, основные блоки

19:44 

Пробел между экстратопом и полем комментариев

Abigail
All of the love we left behind watching the flashbacks intertwine. I think our lives have just begun.
Сил моих больше нет на это смотреть: http://avitale.diary.ru/?tags=
Разделение блока комментариев и экстратопа происходит на всех страницах, где мало текста. Особенно пробел большой, когда редактируешь небольшой пост на дневнике. Что с этим можно сделать?

@темы: платный сервис, основные блоки

13:55 

Про размножение )))))))))))))

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

читать дальше

@темы: diaryCSS, основные блоки

18:14 

Закрытая запись

Termita
Everything burns
Подскажите КАК сделать картинку к закрытой записи
как тут

@темы: фоновые картинки, основные блоки, Дизайн

11:29 

Поиск по дневнику

ПОдскажите пожалуйста, как сделать, чтобы поиск по дневнику был виден постоянно, а не открывался по ссылке?
Конструкция: #YaSearchForm {visibility:visible !important;}
Не работает :(

@темы: платный сервис, основные блоки, меню, Дизайн, diaryCSS

10:35 

Reckless
Добрый день.
В настоящее время только-только начинаю разбирать стили и то, как из писать здесь, в дневниках, хотя общее представление о CSS имеется (до этого был написан код и сделан дизайн для платформы mybb), и вот уже на самыхъ начальных этапах сталкиваюсь с проблемой:
все основные элементы смещаются относительно центра примерно на 10 пикселей влево, причем во всех браузерах кроме эксплорера. Есть подозрение, что это как-то связано со скролл-баром и его шириной. Не могли бы Вы подсказать, в чем проблема, и как ее решить?

Код:


Появился еще один вопрос. И хотелось бы получить если не ответ, то ссылку на место, где можно почерпнуть необходимую информацию.
Имеется шапочка для дневника следующего формата:

Хотелось бы сделать из нее меню такого типа, чтобы при наведении на лестницу слов слева, направо, в горизонтальную строчку появлялись пункты меню, написанные таким же шрифтом, но меньшего размера на прозрачном фоне. Возможно ли это сделать, а если да, то как?
запись создана: 18.07.2011 в 15:42

@темы: основные блоки, меню, Дизайн

09:51 

Иллюзия анимации

D Storm
Veni, vidi, vici.
Нет, речь, разумеется, не о гиф. Но о спрайтах.

Идея проста. Берём несколько блоков, вкладываем друг в друга, привязываем на одно место (через position:absolute и position:relative (или position:absolute \ position:fixed) на внешнем), прописываем отношения по hover'ам. Загвоздка в том, что hover не срабатывает просто при появлении блока под курсором, статус проверяется при движении мышью. На практике, если цель - заставить чуть более плавно, чем обычно, выплыть (появиться фейдом, загореться или ещё что) какой-то элемент в дизайне дневника, это не будет проблемой, потому что попиксельно мышь никто не двигает. Ещё один момент - реагирует css быстро (по мере продвижения курсора на каждый пиксель (при быстром движении - на каждый шаг, там он больше 1px)), а значит лучше бы иметь систему вложенных блоков побольше (чтобы было больше кадров) (что можно сделать искуственно в эпиграфе или посте, но при проработке дизайна днева не получится, ведь приходится придерживаться изначально заданных кол-ва и структуры блоков).

По поводу отношений между вложенными блоками. Вариант первый - при наведении на первый блок (скажем, q1) мы прослеживаем его hover и применяем стиль ко вложенному блоку (например, q2) (q1:hover q2{...}), потом также к последующему и т.п. до последнего (при этом в конце анимация остановится). Вариант второй - изначально видны все, но при наведении они скрываются (я в примере просто сводил height и width к 1px, но можно придумать что интереснее, с тем же clip'ом, скажем (забавно, но display:none не сработал)); при этом, "анимация" циклична, но тут один большой фейл - hover в данном случае (разумеется) проходит через все уровни сразу, и вылетают, соответственно, по сути рандомные кадры.

Об изображении. Как уже говорил, тут целесообразно использовать спрайты. Т.е. большое изображение, состоящее из маленьких кадров (пример). При навешивании background'а мы просто двигаем это самое изображение. Так мы сразу его кэшируем, что весьма удобно, ибо избавляет от хлопот с предварительным кэшингом. В моём примере я не убирал отработавшие фреймы (т.е. всё видно одновременно). На деле, чтобы убрать их достаточно снять bg на hover'е (qX:hover {background:none;}).

Кроме того. Не обязательно закручивать эту штуку именно с bg и спрайтами, можно по тому же принципу hover'ов на вложенных блоках прописывать разные стили (позицию, размеры, прозрачность, сглаженность углов... что угодно, в общем) на разных элементах.

На практике ещё нигде не применял, но небольшой пример сделал. Тут.

Как-то так. Надеюсь, кому-нибудь пригодится\покажется интересным. Придумаю что ещё интересное (по этому или другому поводу) - отпишу где-нибудь тут.

@темы: фоновые картинки, платный сервис, основные блоки, Мысли вслух, diaryCSS

10:57 

River Wild
розовый дурман хранит меня от горя и бед
Здравствуйте :)
У меня в дизайне внезапно страница "все темы" выглядит вот так:
Смотреть.
Они очевидно съехали вправо, там даже имеется миниатюрный скролл-бар. Как бы вернуть на законное место?
Код дизайна, если что:

Заранее спасибо.

@темы: diaryCSS, основные блоки

@CSS — стилизация дневников

главная