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

вторник, 26 апреля 2011

00:45

все записи пользователя в сообществе это всё она.

если не нужно драться, незачем и побеждать

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

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

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

@темы: меню

URL

суббота, 16 апреля 2011

23:23

Редактор 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

URL

22:03

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

все записи пользователя в сообществе 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 можно изменить дочернюю блоку таблицу, так? Помогите, пожалуйста, это сделать.

@темы: меню

URL

20:50

CSS Windows

все записи пользователя в сообществе D Storm

Veni, vidi, vici.

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

Для начала, сам дизайн моего дневника.

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

Шрифт
заголовка: жирный 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.

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, основные блоки, Дизайн, Мысли вслух, Учеба

URL

четверг, 14 апреля 2011

22:56

все записи пользователя в сообществе Timea

Я всегда говорю, что думаю, и думаю, что говорю. (с) Льюис Кэрролл

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

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

URL

20:01

все записи пользователя в сообществе Tesora Vita

вы можете доверить мне свои тайны, свою жизнь.... но только не шоколадку)))

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

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

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

URL

понедельник, 11 апреля 2011

19:46

все записи пользователя в сообществе Ater

Какое значение имеют слова, когда в небе столько звезд и шелком трава?...

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

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

@темы: текст

URL

16:29

все записи пользователя в сообществе Кийен

Джи | Я видел некоторое дерьмо.

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

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

URL

01:59

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

все записи пользователя в сообществе himself

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

URL

воскресенье, 10 апреля 2011

20:14

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

все записи пользователя в сообществе Панкиня

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

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

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

URL

суббота, 09 апреля 2011

11:52

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

все записи пользователя в сообществе Ater

Какое значение имеют слова, когда в небе столько звезд и шелком трава?...

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

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

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

URL

пятница, 08 апреля 2011

22:32

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

все записи пользователя в сообществе D Storm

Veni, vidi, vici.

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

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). Таким образом можно сделать полностью графическое меню или вообще весь интерфейс, что привлекает, верно?

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

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

URL

19:36

все записи пользователя в сообществе Хаура

Недавно подключила платный сервис, начала играть с дизайнами, но почему-то, когда устанавливаю диз с экстатопом, этот самый экстратоп не видно. И так уже с несколькими дизайнами. Очень хочется поставить некоторые дизайны, но из-за этого не получается. Помогите, пожалуйста.
Вот как дожно быть http://static.diary.ru/userdir/1/4/9/5/1495018/67875431.png
и вот как получается http://static.diary.ru/userdir/1/4/9/5/1495018/67875323.jpg
В коде все проставляю, но все равно не получается.

Все готово

URL

17:17

все записи пользователя в сообществе Шизуо Хейваджима

Как исправить то, что обрамление на экстратопе не полностью? Вроде в коде все нормально прописал.
static.diary.ru/userdir/2/4/0/4/2404408/6787015...

Вот код:

 body {background position- bottom;padding: 0 !important;}
 #extratop {background: url('/userdir/2/4/0/4/2404408/67868627.jpg') no-repeat; height:700px; width:1000px;-moz-border-radius: 15px; border-radius: 15px; border-style:solid; border-color:#ebd99e; border-width:6px;}
 #wrapper{ min-width:1000px!important;width:1000px;margin: 0 auto !important;overflow:hidden !important}
 #side{width:150px !important;margin: 0 !important; margin-left: 15px !important;}
 .header,.countFirstDate,.countSecondDate {text-align:center;}
 #page-t {margin:0!important; background-color: #ffffff;}
 #addCommentArea { margin-left: -10px !important;}
 #postsArea { width:800px !important; position: relative !important; margin-left: 165px !important; padding: 10px !important }
 #page-t {border-style:solid; border-color:#ebd99e; border-width:6px;-moz-border-radius: 20px; border-radius: 20px; }
 #input, textarea { background: #e8d29d;}
 .menuSection li {border-bottom: 1px dotted #c2b9da;list-style: none;}
 .menuSection li a {display: block; padding: 3px 2px 5px 10px; text-decoration: none; }
 .menuSection li a:hover {background: #e8d29d; color: #97190c !important;}

@темы: рамки и полоски

URL

четверг, 07 апреля 2011

16:49

ай нид хэлп

все записи пользователя в сообществе [DEAD_ILLUSION]

happy addict

в Хроме и Опере диз отображается корректно.
в Лисе подводит.
как сделать что бы название дневника либо убрать совсем, либо спрятать под то название что в экстратопе.
#side h1 {display:none;} в Мозиле видимо не работет.

s42.radikal.ru/i096/1104/25/cc104982ab92.jpg

@темы: дневники, меню, эпиграф, diaryCSS

URL

00:35

все записи пользователя в сообществе Marked

Борюсь с хаосом. Хаос обречен.

Ситуация такая.

Меню вверху, вот такое. Нужна еще одна колонка меню - ПЧ. Т.к. их много, меню надо сделать выпадающим.
Я задавал всем вариациям #pchs {display:inline;}. Меню складываться отказывалось. Где я ошибся?

@темы: меню

URL

среда, 06 апреля 2011

15:31

фиксация меню

все записи пользователя в сообществе [ Ice Bird ]

Доброго дня)
А я снова за помощью.

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

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

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

Код

#wrapper{min-width:690px!important;width:700px;float:right!important; padding:0 !important; overflow:visible !important; background:#48aaa9; }
 #page-t {margin:0 !important; width:750px !important;padding:0 !important;padding:0 !important;}
 #page-c {min-width:690px !important; width:700px !important; float:right!important; background:#48aaa9;}
 #side {min-width:690px !important; width:700px !important; float:right!important; background:#48aaa9;}
 body {background: #47a9a8 url('/userdir/8/9/7/6/897665/67759007.jpg') left bottom no-repeat; background-attachment: fixed;}
 #authorName {top: 150px; position:fixed; right: 880px !important; font-family: "Trebuchet MS"; font-size: 15px!important;}
 #side h1 a{position:absolute; top: 1px; left: 400px; font-family: 'Old Comedy'; font-size: 36px; font-weight: bold; font-style: normal!important; color:#ffffff!important;}
 #side h1 a span {display: none important;}
 .singlePost first, .countSecond {background:url('/userdir/8/9/7/6/897665/67760141.png') no-repeat; background-position:bottom;!important;}
 #extratop { background: transparent) 5epeat-x; width: 100%; height: 20px; position:relative; left: 0px; right:0px; margin-top:-10px;}
 #myDiaryLinks_title {display:block; width:180px; height:45px; line-height:500px; overflow:hidden; background: url('/userdir/8/9/7/6/897665/67764842.png') no-repeat;}
 #myDiaryLinks ul {background: #d28b51; border: 1px solid #b15f1c; position: relative;}
 #myDiaryLinks {position:fixed; right: 745px; top: 180px; }
 #thisDiaryOwner_title {display:block; width:180px; height:45px; line-height:500px; overflow:hidden; background: url('/userdir/8/9/7/6/897665/67765832.png') no-repeat; }
 #thisDiaryOwner ul {background: #d28b51; border: 1px solid #b15f1c; position: relative;}
 #thisDiaryOwner {position:fixed; right: 745px; top: 430px; }
 #thisDiaryLinks_title {display:block; width:180px; height:45px; line-height:500px; overflow:hidden; background: url('/userdir/8/9/7/6/897665/67766363.png') no-repeat; }
 #thisDiaryLinks ul { background: #d28b51; border: 1px solid #b15f1c; position: relative;}
 #thisDiaryLinks {position:fixed; right: 745px; top: 580px; }
 #globalLinks_title {display:block; width:180px; height:50px; line-height:500px; overflow:hidden; background: url('/userdir/8/9/7/6/897665/67767455.png') no-repeat; }
 #globalLinks ul {background: #d28b51; border: 1px solid #b15f1c; position: relative;}
 #globalLinks {position:fixed; right: 745px; top: 698px; }
 #myCommunitiesLink, #myLinks, #headlineList, #rssLink, #myLinksLink, #upInChart , #lastComments, #diarySpiritLink, #paySupportLink, #faqLink, #fallDiaryLink, #sortOrder, #topNavLinks, #communityCatalogueLink, #myCommunity, #favListLink, #myCommunityLink, #myCommunity, #pchListLink, #randomDiaryLink, #allDiaryLink, #diarySupportLink, #unsubscribeEmail, #pchs, #subscribeEmail, #thisDiaryPhoto, #myNotepadLink {display:none!important;}
 #iAmQuit b {display:block; width:143px; height:65px; overflow:hidden;}
 #iAmQuit b {position:fixed; right: 870px; top:670px; font-weight: normal!important;}
 #login_change {position:fixed; top: 5px; right: 620px;}
 #login_change {background-color: #48aaa9 ; border: 1px solid #7ccab9!important;}
 #more_login a{ position:fixed; top: 70px; right: 850px;}
 .avatar img,.avatarNew img {background-color:#ffffff; border: 2px solid #b1cef0; padding: 2px; }
 a {text-decoration: none!important; }
 a:hover {color: #ffffff; }
 #side a, side {color: #a14816; }
 #side a:hover {color: #ffe8a1!important; }
 #YaSearchForm{ position:relative; top: 1px; right: 480px;}

Такой дизайн делаю впервые, так что вполне могла что-то не туда влепить... :shuffle:

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

URL


Запомнить