[Анна Роддик]

Добрый день!
Возникла такая проблема: поставила в postsArea скроллбар и ограничила соответственно высоту. посты читаются нормально, а вот при открытии ссылки "комментарии" скроллбара нет и все утыкается в высоту wrapper (она тоже задана), то есть комментарии теперь в дневнике вообще невозможно оставлять и вообще читать все, что ниже того, что умещается в злосчастные 700px картинки с фоном. Как с этим справиться? Хотелось бы наверное чтобы там тоже скроллбар отображался и можно было бы вниз прокрутить...

Заранее благодарю

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

---

[персеида]

Скажите, а можно ли прописать такой код, чтобы аватарка главная (в меню которая) была видна, при том, что навигационная панель расположена вверху?
А то .avatar прописывает только все аватарки. А мне нужно только главную.

@темы: меню

---

[Леди Лу]

Прошу вашей помощи.
В стандартном IE дизайн выглядит так:


В Opera основной блок почему-то "размножается".
Куда какой код еще прописать?



Заранее благодарен.

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

---

[Настасья Филипповна 2.0]

Доброго времени суток, господа и дамы. Вновь смиренно прошу вашей помощи.
1. Можно ли блок записей подпихнуть под экстратоп? То ли у меня z-index не работает, то ли он тут вообще не при чем. Его вообще для page-c задавать можно?
2. В комментариях пропадает кусок меню и ник, если смотреть через хром. Или не пропадает кусок меню и ник, а пропадает название. Это вообще отчего может быть и как это исправить, чтобы все браузеры были довольны?


3. Блок меню ThisDiaryOwner не появляется. Код вот:
#thisDiaryOwner {position: absolute; top: 40px; left: 118px;z-index: 3;}
#thisDiaryOwner_title {display: block; width: 55px; height: 36px; line-height:38px; background: url('/userdir/2/1/5/2/215261/68640560.png') 100% 100% no-repeat !important}
#thisDiaryOwner ul {position: absolute; top: 0px; left: 40px;z-index: 3;}
Позиционирование уже какое только не задавала, все без толку.

Диз установлен здесь

запись создана: 29.04.2011 в 21:38

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

---

Неактивное меню

[Serenada]

Здравствуйте. С CSS я знакомо очень условно и вопрос у меня банальный, возможно, но по поиску сообщества ответа я не нашла.

Сделала дизайн на основе своего же старого, поменяла в основном фоновые картинки и цвета текста. Все работает, все отображается, но проблема с навигационной панелью. Я установила ее сверху, и она вся теперь неактивная: при наведении на пункты "Записи", "Мой дневник" и остальные меню не выпадает, не происходит вообще ничего. Название дневника тоже отображается в виде обычного текста, а не ссылки. Если поставить панель слева или справа - никаких проблем. Да, и при нынешнем расположении меню показывается только при загрузке страницы, секунды на две, а потом исчезает. Проблема не в браузере.
С чем это может быть связано и как это исправить?

@темы: меню

---

[бескрайняя]

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

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

---

[если бы не ты]

добрый вечер.
решила прописать меню,как отдельные ссылки.но не работает...
что не правильно?
#myDiaryLink { position: relative; left: 400px; top:5px; width:160px !important;font-weight: normal;font-size: 10pt;height:100px;width:130px !important; line-height:100% !;position: rabsolute;color: #fbe2bb;font-family:Palette;font-size:150%!important;}
по идее же должна вынестись ссылка на мой дневник,да?

---

[это всё она.]

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

как их убрать? или что с ними сделать можно? и со статиситикой?

display: non не помогает...спасибо.

@темы: меню

---

Доброго времени суток

[дымка осени]

Доброго времени суток
подскажите,пожалуйста,каким кодом вставляется разделить между записями? вот такой

Спасибо.

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

---

Редактор CSS.

[Bernadett-e]

Спрошу сначала здесь, потому что вероятность переадресации из "техподдержки" весьма велика.

1. По какому принципу редактор сортирует содержимое? Почему в одном случае новые пункты CSS кода остаются внизу списка, в других переносятся в произвольное место общего списка? Системы не вижу.

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

<div class="box">
            &lt;textarea name="css" id="journal_css" cols="80" rows="20" style="width: 98%" wrap="no" onkeyup="sz(this);"  onfocus="sz(this);" onstyle="overflow:hidden;">
   &lt;/textarea>
<hr> не хватает темы "служебные страницы"

@темы: diaryCSS

---

Список "любимые темы" - как его развернуть в длину?

[Bernadett-e]

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

Итак, хочу развернуть список "любимые темы". Высоту блока, в котором находится таблица с темами, я изменила так:
#my_tags { height: 400px !important; width: 100% !importan;}

Вот так выглядит список тем сейчас:

Хочется сделать так. Без горизонтальной полосы прокрутки. То есть, блок фиксированный по высоте и 100% по ширине.

Посмотрела код страницы.

<div id="my_tags">
            <table cellpadding="0" cellspacing="0"><tr valign="top"><td><ul> 
</ul></td><td><ul><li><input type="checkbox" id="favtg0" name="fvtags[]" value="тема записи" class="inp_check" /> <label for="favtg0">тема записи</label></li><li><input type="checkbox" id="favtg1" name="fvtags[]" value="тема записи" class="inp_check" /> <label for="favtg1">тема записи</label></li><li><input type="checkbox" id="favtg2" name="fvtags[]" value="тема записи" class="inp_check" /> <label for="favtg2">тема записи</label></li></ul></td></tr></table>
            <div class="clear"></div>
        </div> 

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

@темы: меню

---

CSS Windows

[D Storm]

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

Для начала, сам дизайн моего дневника. Уверен, его можно оптимизировать, знаю, в нём хватает лишнего. Моё оправдание - руки не дошли. Да, если решите использовать - пожалуйста, перекачайте изображения к себе в БИ и замените фон. Спасибо. )

Шрифт
заголовка: жирный 15
теста: обычный 14
гарнитура: Georgia

Цвет текста
заголовка: #dddddd
ссылки: #cccccc
записи: #bbbbbb
оффтопика: #555555

Цвет фона и границ
фона дневника: #
фона записи: #
фона заголовка: #
границы: #222222

CSS

 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Global--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 body {background:#dcd8fe url('/userdir/2/4/1/3/2413177/67759640.jpg') fixed repeat-x bottom;text-shadow:0 0 3px #888888;height:100%;overflow:auto;}
 h2{ text-shadow: 0 0 3px #666666; }
 hr {border-color:#222222;}
 div { cursor:default;}
 a {text-shadow:0 0 3px #888888;}
 a:hover {text-shadow:0 0 5px #cccccc;text-decoration:none !important;}
 #wrapper {margin-top:30px;margin-bottom:10px;}
 #wrapper,#page-c{width:880px !important; margin-left:auto !important; margin-right:auto !important; position:relative !important;opacity:1.00; filter:alpha(opacity=100))}
 #side{width:0px;text-align:center;}
 #extratop{height:180px;background:url('/userdir/2/4/1/3/2413177/67760414.png') 50% bottom no-repeat;margin-bottom:30px;margin-left:-0px;}
 .bordered {border-radius:15px 5px;-moz-border-radius:15px 5px;background:url('/userdir/2/4/1/3/2413177/67584206.png') !important;box-shadow:0 0 10px #000000;-moz-box-shadow:0 0 10px #000000;-webkit-box-shadow:0 0 10px #000000;}
 ::selection {text-shadow:0 0 5px #fff; color:#000;}
 #YaSearch {display:none !important;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Pager--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #pageBar { position:fixed; left:50%; top:50%; width:0px; background:none !important;opacity:0.9;filter:alpha(opacity=90);}
 #pageBar table{display:block;text-align:center;padding:15px 0px;width:30px;background:#000 !important;position:absolute;top:-28px; left:-490px;text-align:center; border-radius:25px 10px; -moz-border-radius:25px 10px; font-size:10pt; -moz-box-shadow: 0px 0px 10px #111; -webkit-box-shadow: 0px 0px 10px #111; box-shadow: 0px 0px 10px #111;overflow:hidden;}
 #pageBar table:hover { -moz-box-shadow: 0px 0px 10px #222; -webkit-box-shadow: 0px 0px 10px #222; box-shadow: 0px 0px 10px #222; }
 #pageBar tbody, #pageBar td, #pageBar tr { width:30px !important; }
 #pageBar a, #pageBar strong { display:block !important;}
 #pageBar a:hover { background:#161616; text-decoration:none; cursor:default;}
 #pageBar strong { background:#222; }
 #pageBar .pages_str { display:none; }
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Comments--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 .singleComment {position:relative;}
 .singleComment .paragraph {margin-left:20px;padding-top:10px;}
 .singleComment .postContent {position:relative;}
 .postTitle span{font-size:10pt; color:#999;text-shadow:0 0 3px #999;}
 .singleComment .authorName {text-align:center;}
 .singleComment .postTitle {margin-bottom:0px !important;}
 ._____0{1:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------UserInfo---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 .avatar {background:#000;text-align:center;overflow:hidden;}
 .avatar img {border-radius:15px;-moz-border-radius:15px;}
 .commentAuthor {width:16px;height:16px;overflow:hidden;position:absolute;top:-51px;left:-5px;background:url('/userdir/2/4/1/3/2413177/67789820.png');}
 .commentAuthor:hover {width:130px;height:auto;border-radius:15px;-moz-border-radius:15px;z-index:10;border:1px solid #111;box-shadow:0 0 10px #443;-moz-box-shadow:0 0 10px #443;-webkit-box-shadow:0 0 10px #443;background:url('/userdir/2/4/1/3/2413177/67583927.png');}
 .commentAuthor .avatar, .commentAuthor .sign {margin-top:10px;margin-left:24px;}
 .commentAuthor:hover .avatar, .commentAuthor:hover .sign {margin-left:5px;}
 .urlLink {padding-left:15px;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------PostInStream-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #postsArea .singlePost .authorName {display:none;}
 #postsArea .singlePost .postContent .commentAuthor {display:none;}
 #postsArea .singlePost .block_design .postInner {margin-left:0px;}
 #postsArea .singlePost .paragraph {width:100%; margin-left: 0px;}
 #postsArea .singlePost .block_design .paragraph {margin-left:0px;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Post----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 .postActionLinks{position:absolute; right:10px;z-index:1;}
 .postTitle {text-align:center; padding-top:3px !important;}
 #post0 .postTitle {text-align:center; padding-top:0px !important;}
 .singlePost, .singleComment {opacity:0.80;filter:alpha(opacity=80); border-color:#000000!important;}
 .singlePost:hover, .singleComment:hover {opacity:1;filter:alpha(opacity=100);}
 .paragraph a, #epigraph a{text-decoration:none;}
 .paragraph a:hover, #epigraph a:hover{text-decoration:underline;}
 .quote_text {border-left:3px solid #222222; border-right:3px solid #111111; padding: 0px 10px; margin: 0px 10px; color: #666;}
 .singlePost .postTitle span {font-size:8pt;display:block;margin-bottom:-3px;margin-left:22px;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Owner-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #thisDiaryInfo {top:205px !important;right:7px !important;}
 #thisDiaryInfo a{color:#888855;text-shadow:0 0 3px #222;}
 #thisDiaryInfo a:hover{color:#888855;text-shadow:0 0 5px #555;cursor:default;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ToTop-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #bottomNav {box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;background:none !important;border:none !important;height:1px;}
 #bottomNav li {display:none;}
 #bottom_up {display:block !important;position:fixed;right:50%; top:50%;opacity:0.9;filter:alpha(opacity=90);}
 #bottom_up a {position:absolute; top:-30px; right:-495px; width:30px; height:1px; background:url('/userdir/2/4/1/3/2413177/67709975.png'); padding-top:60px;clip:rect(0px 30px 60px 0px);}
 #bottom_up a:hover {background:url('/userdir/2/4/1/3/2413177/67759526.png');}
 ._____0{1:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Menu-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #more_login {display:none;}
 .top #side {margin-bottom:0px;}
 .top #side h1 {text-align:center; display:none;}
 #thisDiaryOwner li a,#thisDiaryLinks li a, #myDiaryLinks li a, #globalLinks li a, #myLinks li a {display:block;width:100%;background-color:#111;}
 #myDiaryLinks li span, #globalLinks li span, #myDiaryLinks li b, #globalLinks li b {margin:2px 2px 2px 5px;}
 #myLinks li a {padding: 2px 2px 2px 5px; width:130px;}
 #myLinks ul {width:137px;}
 #side .bordered:hover{-moz-box-shadow: 0px 0px 10px #111; -webkit-box-shadow: 0px 0px 10px #111; box-shadow: 0px 0px 10px #111; }
 #side .bordered { background:#222;opacity:0.9;filter:alpha(opacity=90);padding:1px 1px 2px 1px !important;border-radius: 9px 3px 9px 3px;-moz-border-radius: 9px 3px 9px 3px;}
 #side .bordered:hover{ opacity:1;filter:alpha(opacity=100);}
 .menuSection {text-shadow:0 0 3px #93a3da; }
 .menuSection ul{border-radius:15px 5px; -moz-border-radius:15px 5px;background:#000 !important;opacity:0.94;filter:alpha(opacity=94);}
 .menuSection a{border-radius: 9px 3px 9px 3px;-moz-border-radius: 9px 3px 9px 3px;padding:0px 1px;}
 .menuSection b {font-weight:normal;}
 .menuSection div ul{text-align:left;}
 #thisDiaryLinks li a {padding:2px 2px 2px 5px;width:123px;}
 #thisDiaryLinks ul {width:130px !important;}
 #thisDiaryOwner li a {padding:2px 2px 2px 5px;width:148px;}
 #thisDiaryOwner ul {width:155px !important;}
 #thisDiaryLinks li a:hover, #thisDiaryOwner li a:hover, #myDiaryLinks li a:hover, #globalLinks li a:hover, #myLinks li a:hover{background-color:#222;text-decoration:none;cursor:default;}
 #pchs {color: #000; text-shadow:none;}
 #pchs li{display:block; float:left;}
 #pchs li a {padding:0px 4px; background:#111;}
 #pchs li a:hover{background:#222; text-decoration:none; cursor:default;}
 #pchs li a font {text-shadow:0 0 3px #b00;}
 #pchs li a font:hover {text-shadow:0 0 3px #f00;}
 #tagslistlink br{display:none;}
 #TagsList span{padding-right:6px !important;}
 #login_form_title {display:none;}
 #authorAlbum, #albumLink, #all_links, #authorLiks, #lastComments {display:none;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------TopBar------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #topNav {display:inline !important; position:fixed; left:0px; top:0px; text-align:center; z-index:2; width:100%; height:10px; padding-top:1px; border-radius:0; -moz-border-radius:0; border-bottom:1px solid #000; margin:0px; padding-bottom:0px;opacity:0.4;filter:alpha(opacity=40);background:#000 url('/userdir/2/4/1/3/2413177/67713995.png') center center no-repeat !important;}
 #topNav ul {display:none;}
 #topNav:hover {opacity:0.80;filter:alpha(opacity=80);height:30px; background:url('/userdir/2/4/1/3/2413177/67714379.png') repeat-x !important;padding-top:1px;margin-top:0px;border:none;}
 #topNav:hover ul {display:inline;width:auto;margin:auto; }
 #topNav a{font-weight:bold;display:inline; padding:2px 10px 2px 10px; opacity:0.9;filter:alpha(opacity=90);color:#666; text-shadow:0 0 3px #333;}
 #topNav a:hover {opacity:1;filter:alpha(opacity=100);text-decoration:none;cursor:default;color:#aaa!important; text-shadow:0 0 3px #555!important;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------HoverSystem-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #postsArea, #epigraph, #epigraph:hover {background: none !important;border:none !important;box-shadow:none !important;-moz-box-shadow:none !important;-webkit-box-shadow:none !important;padding-top:0px !important;}
 .singlePost {height:21px !important; clip:rect(-10px 870px 31px -10px); position:relative;background:url('/userdir/2/4/1/3/2413177/67584206.png');margin:5px 0px !important;box-shadow:0 0 10px #222;-moz-box-shadow:0 0 10px #222;-webkit-box-shadow:0 0 10px #222;border-radius: 9px 3px 9px 3px;-moz-border-radius: 9px 3px 9px 3px;padding-top:0px !important; padding-bottom:5px !important;border:1px solid #333!important;}
 .singlePost:hover {box-shadow:0 0 10px #333;-moz-box-shadow:0 0 10px #333;-webkit-box-shadow:0 0 10px #333;}
 .singlePost .postTitle span {position:absolute;top:5px;left:10px;}
 .singlePost .postTitle h2 {margin-top:-2px !important;}
 .postDate {position:absolute;top:6px;left:66px;font-size:8pt !important;}
 .singlePost .postContent, .singlePost .postContent .postInner, .singlePost .postContent .postInner .paragraph {display:none;}
 .singlePost:hover .postContent {display:block; position:absolute; top:5px; right:41px; background:url('/userdir/2/4/1/3/2413177/67764497.png'); width:15px !important; height:15px;z-index:1;}
 .singlePost .postContent:hover {width:30px !important; right:26px;}
 .singlePost .postContent:hover .postInner {display:block; width:15px !important; height:15px; position:absolute; top:0px; right:0px; background:url('/userdir/2/4/1/3/2413177/67764497.png') -15px 0px;}
 .singlePost .postContent .postInner:hover {width:31px !important;right:-16px;}
 .singlePost .postContent .postInner:hover .paragraph {display:block; width:15px !important; height:1px; position:absolute; top:0px; right:0px; padding-top:15px !important; clip:rect(0px 15px 15px 0px); overflow:hidden !important;}
 .singlePost .postContent .postInner .paragraph:hover {width:100% !important;height:96% !important; position:fixed; top:0px; left:0px; clip:auto; background:url('/userdir/2/4/1/3/2413177/67584206.png'); z-index:100; padding:2% 0% !important; overflow:auto !important;text-shadow: 0 0 3px #666666;text-align:center !important;}
 .singlePost .postActionLinks {right:60px !important;top:4px;opacity:0.2;filter:alpha(opacity=20);}
 .order_button {height:1px;}
 #sortOrder {position:absolute;right:-13px;top:15px;float:none !important;}
 #sortOrder li {float:none;margin-top:5px;opacity:0.5;filter:alpha(opacity=50);}
 #sortOrder li:hover {opacity:0.8;filter:alpha(opacity=80);}
 .atMood {width:380px;height:1px; clip:rect(0px, 380px, 16px, 0px); padding-top:16px; background: url('/userdir/2/4/1/3/2413177/67911530.png'); position:fixed; top:3%; right:3%; z-index:120;}
 .atMood em {display:none;}
 .postLinksBackg {background:url('/userdir/2/4/1/3/2413177/67771391.png') no-repeat;position:absolute;top:5px;left:10px;width:16px;height:1px;padding-top:16px !important; clip:rect(0px 16px 16px 0px);width:16px;overflow:visible !important;}
 .singlePost .header {background:url('/userdir/2/4/1/3/2413177/67764050.png') 802px 5px no-repeat;height:21px;}
 .postLinksBackg .urlLink, .postLinksBackg .postLinks {display:none;}
 .postLinksBackg:hover {clip:auto; overflow:visible; width:200px; height: 250px; top:5px; left:-10px; background:none;}
 .postLinksBackg:hover .urlLink, .postLinksBackg:hover .postLinks {display:block;}
 .postLinksBackg:hover .urlLink a span {display:none;}
 .postLinksBackg:hover .urlLink a {position:absolute; top:0px; left: 20px !important; width:16px; height:16px; background: url('/userdir/2/4/1/3/2413177/67771631.png');z-index:30;}
 .postLinksBackg:hover .postLinks {padding:10px 5px; position:absolute; top:17px; left:10px; background:url('/userdir/2/4/1/3/2413177/67584206.png'); border-radius: 18px 6px;-moz-border-radius: 18px 6px; z-index:10; box-shadow:0 0 10px #443; -moz-box-shadow:0 0 10px #443; -webkit-box-shadow:0 0 10px #443;}
 .postLinksBackg:hover .postLinks li {display:block;margin:1px 6px;text-align:left;}
 .prevnext {display:none;}
 .singleComment .postLinksBackg .clear {background:none; left:0px;}
 .singleComment .postLinksBackg {left: 13px;}
 .singleComment .postLinksBackg:hover {height:140px;left:-7px;}
 .singleComment .postLinksBackg:hover .urlLink a {left:20px;}
 .postInnerText {text-align:justify;width:600px; padding: 20px; background:#222220; border-radius: 18px 6px; -moz-border-radius: 18px 6px; box-shadow: 0 0 10px #332; -moz-box-shadow: 0 0 10px #332; -webkit-box-shadow: 0 0 10px #332; margin: auto; margin-top:45px; overflow:auto !important; opacity:0.85; filter:alpha(opacity=85);}
 .postInnerText h1 {display:block; width:100%; text-align:center; background: #000; font-size: 17px; color: #dddddd; text-shadow: 0 0 5px #aaa; margin: 10px 0px 5px 0px !important; padding:5px 0px !important; border-radius: 15px 5px;-moz-border-radius: 15px 5px; box-shadow:0 0 10px #000; -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000;}
 .postInnerAlbum{width:100%; display:block; position:fixed; bottom:0px; left:0px; height: 1px; background: #151515 url('/userdir/2/4/1/3/2413177/67820636.png') center center no-repeat; z-index:200; box-shadow:0 -5 10px #444; -moz-box-shadow:0 -5 10px #444; -webkit-box-shadow:0 0 10px #222; opacity:0.95; filter:alpha(opacity=95); padding-top:33px; overflow:hidden;}
 .postInnerAlbum a, .postInnerAlbum span {display:none;}
 .postInnerAlbum:hover a, .postInnerAlbum:hover span {display:inline;}
 .postInnerAlbum:hover {opacity:1; filter:alpha(opacity=100); height:240px; background: #151515; padding: 15px 0px; overflow-x:auto; overflow-y:visible; white-space: nowrap; }
 .postInnerAlbum:hover img {margin:0px 10px; border-radius: 18px 6px; -moz-border-radius: 18px 6px; box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; display:inline !important;}
 .bigImage {position:fixed; left:50%; top:50%;z-index:240;}
 .bigImage a {position:absolute; left:-400px; top:-300px;}
 .bigImage img {border-radius: 30px 15px; -moz-border-radius: 30px 15px; opacity:1 !important; filter:alpha(opacity=100) !important;}
 .blackThing {position:fixed;z-index:230;width:100%; height:100%; top:0px; left:0px; background:#000; opacity:0.5; filter:alpha (opacity=50); display:block; visibility:visible;}
 .closeMe {position:fixed; background: url('/userdir/2/4/1/3/2413177/67825718.png'); width:55px; height:55px; right:10px; bottom: 10px; z-index:250; opacity:0.85; filter:alpha (opacity=85);}
 .closeMe:hover {opacity:1; filter:alpha (opacity=100);}
 .streamView {display:inline !important;}
 .singleView {display:none !important;}
 .lastPost .streamView {display:none !important;}
 .lastPost .singleView {display:inline !important; }
 .postInnerAlbum .LinkMore {width:320px !important;}
 #epigraph {opacity:1; filter:alpha(opacity=100);}
 #epigraph .postActionLinks {display:none;}
 #post0 .paragraph:hover:active {display:none;}
 #post0 .header {height:28px; background-position: 802px 7px;}
 #post0 .header h2 {display:block !important; background: url('/userdir/2/4/1/3/2413177/67988876.png') center center no-repeat; width:100%; height: 25px;padding-top: 3px;}
 #JournalDisclaymer #post0 .header h2 {background: none !important; color:#b4b4b3; text-shadow:0 0 3px #666;}
 #post0 .postInnerText {margin-bottom:35px;}
 #JournalFavorite .singlePost .postContent .postInner .paragraph:hover {text-align:justify !important; width:70% !important; padding: 2% 15% !important;}
 #JournalFavorite #postsArea .singlePost .authorName {display:block !important; text-align:right; position:absolute; top:2px; right: 63px;}
 #extrabottom {position:absolute; top:255px; left:-7px; background:url('/userdir/2/4/1/3/2413177/67991294.png') no-repeat; width:20px; height:20px;}
 #extrabottom:hover {display:block !important; position:absolute; width:310px; height:105px; top:255px; left:-10px; border-radius:18px 6px; -moz-border-radius:18px 6px; box-shadow:0 0 10px #000; -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; cursor:default; background: #000 url('/userdir/2/4/1/3/2413177/67991348.png') 0px 5px no-repeat; opacity:0.97; filter:alpha(opacity=97);}
 ._____0{1:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Icons-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 .atMusic {position:fixed; left:15px; top: 20px; height:55px; background:url('/userdir/2/4/1/3/2413177/67785260.png') no-repeat; padding-left: 55px; padding-top:20px;}
 .atMusic span{display:none;}
 .atTag {margin-top: -20px !important; padding-bottom: 40px !important;}
 .atTag a:hover {text-decoration:none;}
 .atTag span{display:none;}
 ._____0{1:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------AddBlocks---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #add_block1 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67759526.png');}
 #add_block2 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67714379.png');}
 #add_block3 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67583927.png');}
 #add_block4 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67764497.png');}
 #add_block5 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67911530.png');}
 #add_block6 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67785254.png');}
 #add_block7 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67785260.png');}
 #add_block8 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67771631.png');}
 #add_block9 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67820636.png');}
 #add_block10 {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67825718.png');}
 #extrabottom span {opacity:0;filter:alpha(opacity=0);position:absolute;top:0;left:0;background:url('/userdir/2/4/1/3/2413177/67991348.png');}
 ._____0{1:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Other-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------}
 #msg_form {padding:20px; background:url('/userdir/2/4/1/3/2413177/67584206.png'); border-radius: 18px 6px; -moz-border-radius: 18px 6px; box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000;}
 #new_post_title {text-shadow: 0 0 5px #222, 0 0 3px #333;}
 

Дальше несколько основных моментов, которые необходимо знать.

Во-первых, селекторы. Уверен, вам знаком :hover. А вы знаете, что его можно использовать не только на ссылках, но и на любых, в общем-то, элементах, а, главное, на блоках? При этом, можно изменять любые параметры, включая размеры, background и clip (читать здесь). Кроме того, можно управлять стилем child'а по hover'у на parent'е. Т.е. можно задать .style_1 {...}, .style_2 {...}, style_1 style_2 {...}, style_1:hover style_2 {...}. Ещё стоит обратить внимание на селектор :active - он применяется в момент нажатия кнопкой мыши по блоку и отключается, когда вы отпускаете кнопку. Как правило, он вполне себе бесполезен, но есть несколько способов его применить (в частности - для скрытия блока, который открывается по hover'у его parent'а или меньшего варианта его самого).

Во-вторых, кэширование. Если при наведении на какой-либо элемент вы меняете его background на изображение, ранее отсутствовавшее на странице, вы увидите, как оно подгружается, что, уверен, вам абсолютно не нужно. Как это исправить? Загрузить это изображение заранее. Для этого вам понадобится свободный блок (я использовал add_block'и с этой целью). Всё, что надо сделать - повесить на него это изображение background'ом, повесить его в верхнем левом углу страницы (чтобы он не растягивал страницу лишний раз) через position:absolute, поставить на него минимальные размеры (1px) и сделать невидимым (opacity:0 и filter:alpha(opacity=0)).

В-третьих, position:fixed. Он аналогичен position:absolute, только объект привязывается не к parent'у с position:absolute или position:relative, а к экрану. Таким образом можно делать всякие кнопки, менюшки и вообще блоки, которые всегда будут находится в одной точке экрана, вне зависимости от скролла и ресайза. При этом можно использовать z-index - для контроля высоты блока относительно других блоков с position:absolute или position:fixed. Внимание: чрезмерное использование position:fixed приводит к существенному снижению производительности, особенно под Opera.

И, в-четвёртых, вам нужно что-либо для сканирования кода и отображения стилей. В Google Chrome и Opera это встроенный webkit, в Firefox вам придётся установить примочку Firebug. Если интересно, Firebug можно поставить и на Google Chrome (описание здесь). Поверьте, без них сколько-нибудь серьёзное модифицирование дизайна дневника крайне неудобно.

А теперь можно перейти непосредственно к слайдерам.

Принцип простой. Есть два изображения - активный слайдер и неактивный слайдер. Неактивный мы вешаем на какой-либо блок, который присутствует в каждом посте, но не связан с содержанием поста (я использовал .singlePost .header). Активный применяется несколько раз, об этом ниже. У нас есть следующая серия вложенных блоков: .singlePost > .postContent > .postInner > .paragraph > div > {содержимое поста}. Соответственно, мы можем настроить внешние элементы таким образом, чтобы, в зависимости от их состояния, изменялись или вовсе исчезали внутренние. А ещё мы можем поставить на них соответствующие background'ы (дальше - bg).

Итак, как это работает? Когда мы наводим на пост (.singlePost:hover), мы делаем видимым .postContent (display:block), размер которого соответствует одной трети изображения-слайдера (которое стоит на bg). Когда мы наводим на .postContent, мы делаем видимым его child, .postInner, и расширяем .postContent до 2/3 слайдера. При этом, ширина .postInner составляет 1/3 слайдера, и активный слайдер стоит на bg и у него тоже. На следующем этапе, мы обрабатываем наведение на на .postInner. Оно расширяет его и делает видимым его child, .paragraph. Дальше всё просто - при наведении на .paragraph мы изменяем его свойства, добавляя к ним position:fixed, width:100% и height:100%. Почему оно не исчезает сразу же? Потому что курсор продолжает находится на .paragraph, а значит стиль с .hover всё ещё активен. Однако дальнейшее содержимое поста настраивается с помощью стилей, вписанных непосредственно в пост. Чтобы автоматизировать процесс, я написал генератор кода поста. Об этом ниже.

Post Generator. Найти его последнюю версию можно здесь.

Краткое описание.

В верхнее поле вписывается основной текст поста. Если вам нужно добавить заголовок, используйте тэг <h1>.

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

Дальше вам нужно вписать образец ссылки на изображение. Например: "http://dl.dropbox.com/u/25760322/spark_1_1.jpg". Важно: все дальнейшие ссылки для этого поста должны иметь вид "http://dl.dropbox.com/u/25760322/spark_1_X.jpg", где X - номер изображения. При этом, изображение должно иметь разрешение 300x225, увеличенное должно носить имя "http://dl.dropbox.com/u/25760322/spark_1_X_.jpg" и иметь разрешение 800x600, а полноразмерное изображение должно носить имя "http://dl.dropbox.com/u/25760322/spark_1_X__.jpg" (его разрешение значения не имеет) (все пути валидны только для моего аккаунта dropbox, у вас будут немного другие). Да, все изображения должны быть jpeg'ами. Размещать их надо на dropbox'е либо на своём хостинге - чтобы путь был одинаковым. Для автоматизации процессов ресайза и ренейма советую использовать Batch Image Converter и File Menu Tools.

В последнее поле вам нужно вписать количество изображений.

Вот и всё. Надеюсь, этот пост показался вам интересным \ полезным.
^_^

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

---

[Timea]

Доброго времени суток!
Столкнулась с проблемой - необходимо изменить цвет ссылок в меню и в записях. Прописывание свойства color ничего не дает. Как быть?

@темы: текст, меню

---

[Tesora Vita]

Здравствуйте!

У меня в дневнике стоит дизайн CSS. У меня задействовано 2 полупрозрачных фона: для wrapper и для постов. Как сделать так, чтобы они не наслаивались?

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

---

[Ater]

1) Можно ли через CSS назначить разные свойства для разных браузеров?
Конкретно меня печалит алгоритм Хрома по отображению тени текста((( При заданной тени (не важно какой) он утончает шрифт, в итоге очень страдает читабельность.
Я то пользуюсь FF4, а там все идеально (да и Safari и Opera отображают все так же), а вот Хром хромает(.

2) Подгрузить шрифт пользователю не получится? Через @font-face. Ссылки ведь можно только из БИ тащить?
Эт я так, на всякий случай спрашиваю) Вдруг меня удивят)

@темы: текст

---

[Кийен]

Здравствуйте, вероятно уже 100500 раз задавали этот вопрос. Но напомните пожалуйста код, чтобы убрать строку поиска в эпиграфе? Заранее спасибо.

@темы: эпиграф, diaryCSS

---

Как подключить внешний CSS?

[himself]

Пробовал "@import url("server/my/style.css")", редактор это прожевал и выплюнул "# #". Поэтому вопрос. Как подключить стиль из внешнего файла?

---

Отступ у цитирования

[Панкиня]

Пишу:
span.quote_text {margin-top:5px !important;}
а получается

Цитирование наезжает на обычный текст. Как поправить?

@темы: отступы, diaryCSS

---

"Предзагрузка" изображений?

[Ater]

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

Может поможет вставить эти картинки в эпиграф и как-то их замаскировать?
Напомните плз, с параметром display:none файл будет загружаться? Или надежнее просто задать нулевой, или однопиксельный размер...

@темы: меню, фоновые картинки

---

Очистка блоков

[D Storm]

      

Идея проста. Вам нужна какая-либо ссылка, которая присутствует в дневнике, но вам совсем не нужен текст в ней - вы хотите иконку. Как это сделать?

      

1. Найдите ID данного объекта. Чтобы было, по чему обращаться к нему в CSS.

      

2. Создайте \ выберите \ найдите иконку. Закиньте её в БИ, запомните размеры (дальше - X и Y).

      

3. Примените следующий стиль для данного объекта: "{width:Xpx; height:1px; padding-top:Ypx; clip:rect(0px Xpx Ypx 0px); background:url('ссылка/на/изображение/в/вашей/БИ') no-repeat;}". Если что-то не сработает, добавьте перед ";" данного параметра "!important".

      

Суть в том, что мы просто вытесняем текст (с помощью padding-top) и обрезаем его (через clip). Таким образом можно сделать полностью графическое меню или вообще весь интерфейс, что привлекает, верно?

      

Пример можно посмотреть в одном из моих дневников, здесь. Ссылка, ведущая к якорю у верха страницы.

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