Гарнитура

[ketaro]

Подключила CSS, надела дизайн. Появилась проблема.
Гарнитура не такая, какой должна быть. Не знаю за все виды, но Trebuchet MS - вообще какой-то кривой.
Вместо такого шрифта:
Вот такой:
Можно ли это как-нибудь исправить?

@темы: текст

---

Отступ в "Последних комментариях"

[Тайя.]

Уважаемые сообщники, помогите, плиз.
В "Последних комментариях" справа фон обрезается. Если паддинг ноль, то все в порядке, но стоит поставить хоть 1px - обрезается. Как это исправить?

Код меню: #side ul li {background: url('/userdir/1/8/2/8/1828072/58467260.jpg'); padding: 3px !important; border: solid 1px #cadaba;-webkit-border-radius: 4px; -moz-border-radius: 4px; order-radius: 4px;}

Весь код

body {margin: 0;padding:0;background: url('/userdir/1/8/2/8/1828072/58466969.jpg') fixed;}
#wrapper {min-width:900px!important;width:900px;margin: 0 auto !important;padding:0px !important;overflow:visible !important;}
#extratop {height: 466px;background: url('/userdir/1/8/2/8/1828072/58465469.jpg');}
#page-c {background: url('/userdir/1/8/2/8/1828072/58467026.jpg') fixed;}
.atTag a{text-decoration: none;}
a:hover {text-decoration: none !important;color: #064711;border-bottom: dotted 1px;}
.singlePost, .singleComment {background: url('/userdir/1/8/2/8/1828072/58467260.jpg'); padding: 10px !important; margin-bottom: 20px !important; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;}
#epigraph {background: transparent !important; margin: 0 !important; padding 0 !important;}
#post0 {background: transparent !important;margin: 0 !important; padding 0 !important;}
.postDate, .header span {text-align: left; text-transform: uppercase; }
#side ul li {background: url('/userdir/1/8/2/8/1828072/58467260.jpg'); padding: 3px !important; border: solid 1px #cadaba;-webkit-border-radius: 4px; -moz-border-radius: 4px; order-radius: 4px;}
#myFavLink, #myDiaryLink, #allDiaryLink {font-weight: bold; text-transform: uppercase; }
#upInChart, #myProfileLink, #albumLink, #postsCalendar, #myLinksLink, #communityCatalogueLink, #randomDiaryLink, #diarySpiritLink, #myCommunitiesLink, #authorLiks, #authorAlbum {display: none;}
.postLinks, .postLinks a {color: #4f7942; font-weight: bold; }

Решено.

@темы: меню, отступы

---

[жид-медведь]

Доброй ночи!
У меня два вопроса:
1. можно ли для страницы новой записи как-нибудь обозначить отдельно фон? есть ли для нее отдельный селектор, типа #JournalComments или #JournalDraft ?
2. при выделении текста всплывающее окно *вставить цитату* немного, но заметно подвинулось в бок. с чем это может быть связано и как выправить обратно?
стандартный вариант:

уехавший:

и пока делала скрин, всплыл третий - как поменять цвет выделителя текста?

upd. Можно ли каким-либо образом отлепить в пейджбаре две верхних ссылки от нижнего ряда цифр?

запись создана: 01.08.2010 в 04:44

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

---

Скроллбар

[Naturka]

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

картинка

Предполагаю, что это из-за строки в коде:

.paragraph div {overflow:auto}

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

Проблема решена.

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

---

- все съезжает

[Finsternis]

Здравствуйте, сделала дизайн, и повылазили проблемы.

Решеный вопрос

Вот так должно выглядеть, и в общем-то выглядит:


Но когда меняешь размер окна все съезжает, та же песня с разрешением экрана.


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

body {background-attachment:fixed}
 #wrapper{ background: #ffffff; min-width:970px !important; width: 970px; position: center !important; margin-top: -10px !important; margin-bottom: 0px !important; padding: 0 !important; -webkit-box-shadow: 0px 0px 15px #707172; -moz-box-shadow: 0px 0px 15px #707172; box-shadow: 0px 0px 15px #707172; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; }
 #extratop { background: url('/userdir/1/4/1/5/14155/58323755.png') !important; no-repeat; height:300px; width:970px; margin-top: 0px !important; margin-left: 0px !important; padding-top:0px !important; }
 {------------------------------------------------------- меню горизонтальное-------------------------------------}
 #side {margin-left: 90px !important; position: absolute; top: 00px; width:970px; background: # 0 0 no-repeat; margin-left: 0px !important; text-transform: no; font: 12px Book Antiqua !important; }
 #postsCalendar {position: absolute; top: 80px; right: 200px; width: 131px; height: 80px; background: # 0 -50px no-repeat; padding: 130px 0 0 0px !important; text-align: center;}
 #tagslistlink {position: absolute; top: 80px; right:-30px; width: 150px; height: 80px; background: # 0 -50px no-repeat; padding: 130px 60px 0 35px !important; text-align: center;}
 #TagsList{ width: 150px; font-size:80% !important; font-weight: normal !important; font-size: 8px !important; margin: 0px 0px 0 -5px !important; padding-bottom: 1px !important; text-transform:none; text-align:left; background: #ffffff; -webkit-box-shadow: 0px 0px 5px #707172; -moz-box-shadow: 0px 0px 5px #707172; box-shadow: 0px 0px 5px #969696; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; opacity:.90 !important; filter: alpha(opacity=90); -moz-opacity: 0.90;}
 #tagslistlink a, #postsCalendar a, #addToFav a, #delFromFav a, #writeToAuthor a, #subscribeEmail a, #unsubscribeEmail a {color: #91735E !important; font-weight: bold !important;}
 #tagslistlink a:hover, #postsCalendar a:hover, #addToFav a:hover, #delFromFav a:hover, #writeToAuthor a:hover, #subscribeEmail a:hover, #unsubscribeEmail a:hover {color: #03578E !important;}
 #addToFav, #delFromFav {position: absolute; top: 80px; left: 440px; width: 181px; height: 80px; background: # 0 -50px no-repeat; padding: 130px 0 0 0px !important; text-align: center; }
 #writeToAuthor {position: absolute; top: 80px; left: 240px; width: 190px; height: 80px; background: # 0 -50px no-repeat; padding: 130px 60px 0px 15px !important; text-align: center;}
 #writeToAuthor {word-wrap: break-word; }
 #subscribeEmail, #unsubscribeEmail {display: none; }
 #side h1 A { position: absolute; top: 165px; left: 500px; font: bold 32px Book Antiqua !important; width: 470px; color: #0E5F95 !important; opacity:.50 !important; filter: alpha(opacity=50); -moz-opacity: 0.50;}
 #side h1 a:active, #side h1 a:hover { position: absolute; top: 165px; left: 500px; font: bold 32px Book Antiqua !important; width: 470px; color: #0E5F95 !important;opacity:.70 !important; filter: alpha(opacity=70); -moz-opacity: 0.70; }
 #authorName { position: absolute; top: 100px; left: 810px; font: bold 10px Book Antiqua !important; width: 170px; color: #0E5F95 !important;opacity:.60 !important; filter: alpha(opacity=60); -moz-opacity: 0.60;}
 #authorName a { position: absolute; top: 100px; left: 810px; font: bold 10px Book Antiqua !important; width: 170px; color: #0E5F95 !important;opacity:.60 !important; filter: alpha(opacity=60); -moz-opacity: 0.60;}
 #authorName a:active, #authorName a:hover { position: absolute; top: 100px; left: 810px; font: bold 10px Book Antiqua !important; width: 170px; color: #0E5F95 !important; opacity:.60 !important; filter: alpha(opacity=60); -moz-opacity: 0.60;}
 {------------------------------------------------------- меню вертикальное -------------------------------------}
 .menuSection { margin-left: 5px !important; width:231px; }
 #myDiaryLinks { margin-left: 90px !important; margin-top: -10px !important;}
 #myDiaryLink, #writeThisDiary, #myDraftLink, #umailLink, #myFavLink, #myQuotLink, #discussionLink, #myLinksLink, #myProfileLink, #optionsLink { border-bottom: 0px solid #000; width:170px !important; text-align: left; padding: 0px !important; }
 #globalLinks { margin-left: 90px !important; margin-top: -10px !important;}
 #mainpageLink, #myCommunitiesLink, #myCommunityLink, #iAmQuit { border-bottom: 0px solid #000; width:170px !important; text-align: left; padding: 0px !important;}
 #Stats { border-bottom: 0px solid #000; width: 160px !important; text-align: right; padding: 0px !important; margin-left: 0px !important; margin-top: 0px !important;}
 #thisDiaryPhoto, #favListLink, #pchListLink, #photolibLink, #albumLink, #myNotepadLink, #upInChart, #YaSearch, #authorFav, #authorQuot, #authorLiks, #authorAlbum, #authorRSS, #rssLink, #login_form, #lastComments, #pchs, #headlineList, #allDiaryLink, #faqLink, #communityCatalogueLink, #randomDiaryLink, #diarySpiritLink, #diarySupportLink, #paySupportLink {display: none; }
 #thisDiaryInfo { position: absolute; top: 50px; left: -6px; margin-left: 0px !important; width:361px; height: 60px; text-align: left; background: # no-repeat;}
 {------------------------------------------------------- персональные ссылки-------------------------------------}
 #myLinks { position:absolute; top: 0px; right: 60px; width: 570px; font: bold }
 #all_links {display:none!important}
 #myLinks li:nth-child(2) a { position:absolute; top: 0px; right: 0px;font: bold !important;}
 #myLinks li:nth-child(3) a { position:absolute; top: 0px; right: 130px; font: bold !important;}
 #myLinks li:nth-child(4) a { position:absolute; top: 0px; right: 230px; font: bold !important;}
 #myLinks li:nth-child(5) a { position:absolute; top: 0px; right: 380px; font: bold !important;}
 #myLinks li:nth-child(6) a { position:absolute; top: 0px; right: 530px; font: bold !important;}
 {------------------------------------------------------- записи и каменты -------------------------------------}
 #page-c{ background: #; width: 970px; margin: -50px 23px 20px 0px !important; border: 0px solid #dad9de; }
 #sortOrder {display:none!important}
 #page-t { margin: 0px 0 0 0px !important; background: # 970px 0 no-repeat; padding-left: 10px !important;}
 #postsArea { padding-top: 5px !important; }
 .singlePost {margin: 0px 15px 20px 0 !important; background: #; -webkit-box-shadow: 0px 0px 10px #C3A88D; -moz-box-shadow: 0px 0px 10px #C3A88D; box-shadow: 0px 0px 10px #C3A88D; padding: 30px 30px 30px 30px !important; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; }
 .countFirst { background: url('/userdir/1/4/1/5/14155/58325681.png') no-repeat bottom right; !important; border-bottom: dotted; border-width: 0px; border-bottom-color: #D2FF8E;}
 .countSecond { background: url('/userdir/1/4/1/5/14155/58326029.png') no-repeat bottom right; !important; border-bottom: dotted; border-width: 0px; border-bottom-color: #D2FF8E;}
 #commentsArea, #addCommentArea {margin: 0 25px 20px 10px !important; background: #;; -webkit-box-shadow: 0px 0px 10px #C3A88D; -moz-box-shadow: 0px 0px 10px #C3A88D; box-shadow: 0px 0px 10px #C3A88D; padding: 20px 30px 20px 30px !important; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
 {------------------------------------------------------- заголовки -------------------------------------}
 .postDate { text-align: center; margin: 0 0 0px 0 !important; border-bottom: 0px solid #000; font-variant: small-caps !important; }
 .postTitle {background: url('/userdir/1/4/1/5/14155/58325810.png') no-repeat !important; margin-top: 0px !important; background: # 0 0 no-repeat; padding: 10px 0 20px 60px !important;}
 .postLinksBackg {padding: 00px 130px 0px 0px !important;}
 .header span {}
 .header h2 { }
 .postActionLinks {}
 #commentsArea .postTitle {background: none !important; padding: 0 !important;}
 #addCommentArea_title {margin-top: 0px !important; background: # 0 0 no-repeat; padding: 10px 0 20px 50px !important;}
 #commentsArea_title, #new_post_title, .calHeader {text-align: center; margin: 10px 0 20px 0 !important; border-bottom: 0px solid #000; font-variant: small-caps !important; }
 .calHeader {width: 550px;}
 .avatar img { width:100px !important; min-width: 100px !important; max-width: 100px !important; -webkit-box-shadow: 0px 0px 10px #a1a1a1; -moz-box-shadow: 0px 0px 10px #a1a1a1; box-shadow: 0px 0px 10px #a1a1a1; border: 1px solid #dad9de;}
 textarea#message, .htmlbox textarea, input.text, #trspisok textarea, #close_text {background: #f2f4f8;}
 span.quote_text { font: italic 16px Book Antiqua !important; display: block; padding: 5px 5px 5px 10px; border-left: 3px double #000; margin-left: 10px !important;}
 a:link, a:visited {text-decoration:none !important; color: #91735E !important;}
 a:hover, a:active {color: #03578E !important;}

еще один решеный вопрос

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

#epigraph.singlePost  {color: #ffffff !important; opacity:1 !important; filter: alpha(opacity=100); -moz-opacity: 1.0; -webkit-box-shadow: 0px 0px 0px #C3A88D; -moz-box-shadow: 0px 0px 0px #C3A88D; box-shadow: 0px 0px 0px #C3A88D; padding: 0px 0px 0px 0px !important; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;  }

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

Решение проблемы, если кому нужно:

 #epigraph.singlePost { position: absolute; top: 60px; left:740px; width: 350px; height: 40px; color: #ffffff !important; opacity:.6 !important; filter: alpha(opacity=60); -moz-opacity: .6; -webkit-box-shadow: 0px 0px 0px #C3A88D; -moz-box-shadow: 0px 0px 0px #C3A88D; box-shadow: 0px 0px 0px #C3A88D; padding: 0px 0px 0px 0px !important; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px; margin: 0px 0px 0 0px !important; }
 #epigraph .postTitle {display: none;}
 #epigraph .paragraph div:first-letter{ font-size: 15px; float: none !important; font-family:Verdana; font-weight: bold; color: #0A5587; line-height:100% !important; line-height:120%; }

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

запись создана: 30.07.2010 в 00:22

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

---

[Joux]

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

А вопроса два:
1)
В коде строчка:

#wrapper { filter: alpha(opacity=90); -moz-opacity: 0.70; -khtml-opacity: 0.70; opacity: 0.70; !important} 

Меня не устраивает, что задний фон (то есть рука) наезжает на выложенную картинку. А еще, поскольку на фоне записей стоит цвет, то почему-то этот цвет дает тень на все выложенные мной картинки. То есть была фотография такой: , а стала светлее и прозрачнее, как на примере выше. Что с этим делать, что в коде изменить?

2) Не могу никак найти, как должна выглядеть строчка, которая отвечает за фиксированность фона?

Заранее большое спасибо.

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

---

[Eilianta]

Доброго времени суток. Вот тут создаю дизайн, возникла проблема.
В посте и комментах выезжает текст за границы, в самом посте, если не заходить в комментарии, все в норме.
Игра с отступами не помогла.

Все, что касается постов

#page-c {background: url('/userdir/1/8/7/1/1871356/58312268.png'); padding-bottom:3px !important; position:relative; z-index:1; margin-top:456px; width:800px !important;}
 #postsArea { position:relative; left:20px; width:710px !important; margin-top:35px; overflow:hidden !important; }
 .singlePost {margin: 0 10px 30px 0 !important; background: url('/userdir/1/8/7/1/1871356/58312286.png'); ; width:730px !important; border:3px solid #260707 !important;}
 #commentsArea {margin: 0 10px 30px 0 !important; background: url('/userdir/1/8/7/1/1871356/58312286.png'); width:710px !important; border:3px solid #260707 !important; position:relative; left:29px !important; padding:40;}
 .singleComment {position: relative; width:650px !important; padding:110; !important; }
 #addCommentArea {margin: 0 10px 30px 0 !important; background: url('/userdir/1/8/7/1/1871356/58312286.png'); width:710px !important; border:3px solid #260707 !important; position:relative; left:29px !important; }
 .paragraph {position: relative; width:650px !important; }
 .postInner { margin: 30px !important;}
 #post0 {position: relative; left: 0px; !important; width:730px !important; background: url('/userdir/1/8/7/1/1871356/58312286.png') !important; }
 #epigraph { background: url('/userdir/1/8/7/1/1871356/58312298.png') !important; border: none !important;}
 .postContent {position: relative; left: 10px; width:690px !important; }
 .prevnext {position: relative; top: -2px !important; }
 #page-t {margin-left: 0px; margin-right: 34px !important;}

Что я делаю не так? Глаз уже замылен капитально, долго уже бьюсь с этим дизом... помогите =_=

Проблема решена)

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

---

[персеида]

Помогите, пожалуйста.
Я не могу пододвинуть меню к блоку записи.


вот чать кода:

#extratop {background: url('/userdir/1/3/3/5/1335615/58287131.png') no-repeat; height:400px; width:563px; background-position: center !important;margin-top:20px; }
 #wrapper{ min-width:100px !important; width: 1000px; position: center !important; margin-top: 0px !important; margin-bottom: 0px !important; padding: 0 !important; overflow: hidden !important;}
 #side{width:170px !important;margin:0 !important;}
 #page-c{width:563px !important;padding:0 !important;padding:0 !important;}
 #page-t {margin:0 !important;}

@темы: меню, diaryCSS

---

[тони такс]

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

желаемое место размещение обозначено прямоугольником

@темы: меню, отступы

---

[allein loses weight.]

проблемы таковы:

1. Собираюсь выносить ссылки меню на экстратоп, не убирается меню. Ну никак.
2.
кагбэ убрать эти стыки? чтобы все целеньким блоком было.

#wrapper{width:875px;min-width:0;}
#bottomNav{display: none !important;}
 #topNav{display: none !important;}
 body{background:#0C0505 url('/userdir/1/4/2/8/1428588/58258562.png') no-repeat 50% 0 fixed;}
 #extratop{height:612px;background:url('/userdir/1/4/2/8/1428588/58258856.png') 50% 0 no-repeat;}
 #extrabottom{height:155px;background:url('/userdir/1/4/2/8/1428588/58259123.png') 50% 0 no-repeat;}
 span.quote_text {font-style:normal; display: block; margin: 5px;padding: 5px; border:3px solid #777; font-size: 97%; background: #00000; }
 .postLinksBackg a:hover{text-decoration: none; border-bottom: dotted; border-width: 1px; border-bottom-color: #000000;}
 .postLinks {padding: 1px;}
 .menuSection {text-align:left; }
 A { TEXT-DECORATION: none;}
 A:hover { TEXT-DECORATION: none; text-transform: none; border-bottom: dotted; border-width: 1px; border-bottom-color: #000000;}
 .paragraph A { TEXT-DECORATION: none;}
 .paragraph A:hover { TEXT-DECORATION: none}
 #side .bordered { background: none; background: url('/userdir/1/4/2/8/1428588/58259060.png') repeat bottom right !important; background-image: none; filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/4/2/8/1428588/58259060.png', sizingMethod='scale'); zoom: 1; }
 #side .bordered a, #side .bordered input, textarea { position:relative; z-index: 2; }
 #page-t .bordered { background: none; background: url('/userdir/1/4/2/8/1428588/58259060.png') repeat bottom right !important; background-image: none; filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//static.diary.ru/userdir/1/4/2/8/1428588/58259060.png', sizingMethod='scale'); zoom: 1; }
 #page-t .bordered a, #page-t .bordered input, textarea { position:relative; z-index: 2; }
 .avatar img{ background: none; border-width:1px; border-color:#000000; border-style:solid; padding:1px;}
 

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

запись создана: 28.07.2010 в 02:39

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

---

[Natella]

Есть вот такая проблемма: надо разобраться с параметром left:ИКСpx а я не могу никак понять что к чему. Не подскажите?

здесь код

 #wrapper {position:relative;}
 #wrapper {background-color: #ffffff;border:1px solid}
 #wrapper a{text-decoration:none !important}
 body{padding-top:20px}
 body{ background-attachment:fixed; }
 body {line-height:1.4;}
 #YaSearch, #bottomNav, #side h1 img {display:none !important}
 {ОСНОВНЫЕ БЛОКИ}
 #wrapper{min-width:700px!important;width:700px;margin: 0 auto !important;padding:0px !important;overflow:hidden !important}
 #side{width:700px !important;margin:0 !important}
 #page-c{width:700px !important;padding:0 !important;padding:0 !important}
 #page-t {margin:0 !important}
 #side, .menuSection {background: #ffffff}
 #page-c {background: #ffffff}
 #page-c{position:relative; top:0px}
 #side { position: absolute;top:0px; width:100%;}
 {ССЫЛКИ}
 #page-c a:hover,a:active{color: #000000!important}
 #epigraph a{color:#000000}
 #side a:hover,a:active{color:#016b5b !important}
 .menuSection_title, #side a{color:#000000 !important}
 .postLinksBackg a{ color:#016b5b !important}
 {ДРУГОЕ}
 .top .menuSection ul, .top #thisDiaryPhoto, .top #sign{background-color:#ffffff; border:1px solid; }
 .menuSection{ font-size:12px;}
 .postDate {font-size:12px !important}
 .postLinksBackg {font-style:italic; display:block !important; border-bottom: 1px solid #d2d2d2; margin-top: 10px !important; padding:10px 0 !important;}
 .paragraph {overflow: auto}
 {ВАШИ НАСТРОЙКИ}
 #extratop {background: url('/userdir/6/7/6/7/676785/51410249.jpg') no-repeat; width: 700px; height:461px !important; padding: 0 !important; margin: 0 !important;}
 #side h1 A {position:absolute; top:10px; left:555px; font-size:15px !important; font-style:italic; color:#000000 !important}
 #authorName{position:absolute;top:30px; left:64px; color:#000000; font-size:12px !important}

непойму что делать с двумя последними строчками.

@темы: отступы, Дизайн

---

[Хайнэ]

Добрый вечер, господа (: Я уже попросту взбесился, терзая бедные коды. Банально желаю поставить картинки вместо ссылок, все удачно отображается, но самого пути в дневнике-нет. То есть просто болтается картинка без ссылки.

 #myDiaryLink { position:absolute; top: 0px; left: 40px;padding: 3px !important;display:block; width:160px; height:30px; line-height:500px; overflow:hidden; background: url('/userdir/1/1/6/9/1169328/58250438.png') 2px 4px no-repeat;}

помогите, а?

UPD: проблема решена, спасибо  Шельн!

@темы: меню

---

[теория] - Справочник по CSS.

[Bernadett-e]

Небольшой, но очень толковый, буквально "на пальцах".

Например:
Свойства блока
vvz.nw.ru/Lessons/CSS/block.htm
vvz.nw.ru/Lessons/CSS/examples/block/block.htm

Позицонирование блоков:
vvz.nw.ru/Lessons/CSS/position.htm
vvz.nw.ru/Lessons/CSS/examples/block/position.h...

Предлагаю доавить в "полезные ссылки" эпиграфа

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

---

[Poetess Lily]

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

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

---

[Eldanie Uelle]

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

Код

body{background:url('/userdir/9/7/7/4/977436/57883151.jpg') no-repeat fixed;}
body{ background-attachment:fixed; }
#albumLink {display:none}
#photolibLink {display:none}
#communityCatalogueLink{display:none}
#diarySpiritLink {display:none}
#diarySupportLink {display:none}
#paySupportLink {display:none}
#tagslistlink{display:none}
#myNotepadLink{display:none}
#myCommunitiesLink{display:none}
#randomDiaryLink{display:none}
#faqLink{display:none; overflow:hidden}
.menuSection {text-align:center; }
#side{width:145px;}
#wrapper{width:890px;min-width:0;}
#authorName{font-family:Hobo Std; Arial; font-size:14px }
#authorName{padding-bottom:70px !important;}
.menuSection {margin-left:95:px !important; margin-top: 100px !important;}
.menuSection{overflow: visible;position: relative; z-index:3; background: none; border: none; !important}
.menuSection:hover {overflow: visible;position: relative; z-index:3; background:none; border: none; !important}
#wrapper{background: none;background: url('/userdir/9/7/7/4/977436/57884027.png') fixed !important; background-image: none; filter: progidXImageTransform.Microsoft.AlphaImageLoader(src='//userdir/9/7/7/4/977436/57884027.png', sizingMethod='scale');zoom: 1;}
#wrapper {bordered; border-width:2px; border-style:dashed;border-color:#f3ebfe;}
.avatar img,.avatarNew img { background-color: #e2cdfd; border: 1px solid #e2cdfd; padding: 4px; }
.singlePost{padding-left:10px !important;}
.singlePost{padding-right:10px !important;}
#bottomNavLinks{display:none!important;}
#page-c{margin-top: 88px !important;}
#YaSearch{display:none!important;}
#side h1{position:relative; top:50px; left: 20px;}
#side h1 a{display:block !important; width:800px !important; height:400px !important; overflow:hidden !important; background: url('/userdir/9/7/7/4/977436/58071254.png') no-repeat !important;}
Еще раз приношу извинения за беспокойство.

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

---

Заголовок "Записи с темой"

[Bernadett-e]

Мне нужно, чтобы заголовок отображался с отступом, как остальные в дневнике.
Страница для примера a1b2c3.diary.ru/?tag=2865830

Код вот такой, но не работает. Что не так?

#header_left {text-align:left; padding: 0 0 0 50px; margin: 10px 0: line-height: 40px; background: url('/userdir/5/8/5/2/585232/57909296.jpg') no-repeat; }

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

---

[урок] Аватары в рамке.

[Bernadett-e]

Чтобы все аватары в комментариях отображались в прилегающей к ним рамке.

.avatar img { border-width:3px; border-color:#1894b5; border-style:double; padding:2px; display: block; }

border-width:3px; - ширина рамки
border-color:#1894b5; - цвет
border-style:double; - стиль рамки. Может быть [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]
www.htmlbook.ru/css/border-style.html

padding:2px; - отступ вокруг акатара
display: block; блочный элемент.
Остальные свойства: www.htmlbook.ru/css/display.html

Проверено в IE 7. 8; Safari 4.0

@темы: Учеба

---

[урок] Как выделить отдельную тему в "темах записей" (новая запись).

[Bernadett-e]

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

скриншот

Делается это просто. Заходите в "Дизайн дневника", выбираете тему, в которой вам нужно такое новшество, нажимаете "редактировать" и в оконо для CSS вставляете для выделяемой темы строчку:
#my_tags input[value="назание темы"]+label { свойство; свойство; свойство; }
точка с запятой обязательна после каждого свойства, как и пробелы вокрух фигурных скобок { }

Для примера возьмём тему "графика" (см, скриншот), там самый большой набор свойств.

#my_tags input[value="графика"]+label { font-weight:bold; font-size: 125%; font-family:"Century Gothic"; color: #1894b5; }

font-weight:bold; - выделение жирным
font-size: 125%; - шрифт больше остального на 25% (можно и меньше, тогда будет 75%)
font-family:"Century Gothic"; - если вам нужно выделить шрифтом, отличным от того, что установлен у вас в дневнике для записей.
color: #1894b5; - цвет

Цвет можно записать по-разному, поому что для 16 основных есть словесное название (red, green, havy, maroon, yellow, white, black) остальные не помню, прредпочитаю их шестизначные коды - добываются в фотошопе или даже в настройке дизайна, если знать их координаты по RGB (можно и в Ворде, в настройках цвета шрифта, например)

Так записан код для темы "Avatar"
#my_tags input[value="Avatar"]+label { color: red; }

B5; Robotech; LoGH - здесь только выделение цветом
#my_tags input[value="B5; Robotech; LoGH"]+label { color: #1894b5; }

diary; РС; Internet - выделение "жирным"
#my_tags input[value="diary; РС; Internet"]+label { font-weight:bold }

записки маркетёра - выделение "жирным", увеличение шрифта на 25% и определение шрифта, отличного от того, что выбран основным для дневника.
#my_tags input[value="записки маркетёра"]+label { font-weight:bold; font-size: 125%; font-family:"Century Gothic"; }

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

---

[урок] Как выделить отдельную запись или её часть

[Bernadett-e]

Как средствами CSS выделить отдельный пост? Или его часть.
Мой способ.
Основываемся на DIV. Придумываем название класса (я выбрала "vazhno"). Пишем такую конструкцию:

<div class="vazhno">текст записи</div>

Идём в дизайн, и пишет в CSS
.vazhno { свойство1; свойство1; свойство2; свойство3; }

Теперь рассмотрим примеры. У меня получилось четыре селектора, для каждого примера свой.
А чтобы не писать каждый раз вручную, программируем кнопку. Вот так:

 <div class="vazhno1">[maRk]</div> [cuRs] 
<div class="vazhno1">[maRk]</div> [cuRs] 
<div class="vazhno2">[maRk]</div> [cuRs] 
<div class="vazhno3">[maRk]</div> [cuRs] 
<div class="vazhno4">[maRk]</div> [cuRs]

Код

<div class="vazhno1">проверка</div>

CSS .vazhno1 { background: #ffcccc; border: 2px dotted #ff0000; }
background: #ffcccc; - цвет фона выделенной записи
border: 2px dotted #ff0000; - рамка на 2 пикселя, тип линии "точки", цвет рамки



Код

<div class="vazhno2">проверка</div>

CSS .vazhno2 { background: #ffcccc; }
то же самое, что в первом примере, но без рамки.


Код

<div class="vazhno3">проверка
проверка
проверка
проверка
проверка
проверка
проверка</div>

CSS .vazhno3 { text-align:left; padding: 10px 10px 10px 50px; background: url('/userdir/5/8/5/2/585232/57909296.jpg') repeat-y; border: 2px solid #1894b5; }
background: #ffffff; - цвет фона выделенной записи. В данном случае он совпадает с общим фоном записей (иначе не получится градиента).
text-align:left; - выравнивание текста по левой стороне
padding: 10 10 10 50px; - отступ текста в px (сверху, снизу, справа 10, слева 50)
background: url('/userdir/5/8/5/2/585232/57909296.jpg') repeat-y; - фоновая картинка, размножена вертикально
border: 2px solid #1894b5; - рамка на 2 пикселя, тип линии "жирная", цвет рамки


Код

<div class="vazhno4">проверка
проверка
проверка
проверка
проверка
проверка
проверка</div>

CSS .vazhno4 { text-align:left; padding: 50px 10px 10px 50px; background: url('/userdir/5/8/5/2/585232/57909296.jpg') repeat-x; }
background: #ffffff; - цвет фона выделенной записи. В данном случае он совпадает с общим фоном записей (иначе не получится градиента).
text-align:left; - выравнивание текста по левой стороне
padding: 10 10 10 50px; - отступ текста в px (сверху 50, снизу, справа 10, слева 50)
background: url('/userdir/5/8/5/2/585232/57909296.jpg') repeat-y; - фоновая картинка, размножена вертикально
border: 2px solid #1894b5; - рамка на 2 пикселя, тип линии "жирная", цвет рамки.

Чужой способ. Автор  Roldo

Как можно изменить отдельный пост вашего дневника, не трогая все остальные. Например, выделить его фоном, сделать в нем особое оформление текста, картинок и т.п.
У каждой новой записи в коде страницы появляется отдельный айди, например #post4454436564. Узнать его просто - наведите на ссылку URL под постом, и увидите адрес типа blablabla.diary.ru/p55412885.htm#
Так вот, p55412885 - и есть id вашей записи, только в CSS он пишется немного иначе, а именно #post55412885, то есть #post + его номер.
Записываете номер поста, заходите в CSS и прописываете для него свойства:
#post55412885 {background: #eeeeee;}
И вуаля - ваша запись приобрела отличный от других вид.
Вот, например: roldotheundying.diary.ru/p55412885.htm# моя запись имеет серый фон, в то время как все остальные фона не имеют, проверьте, взглянув на мой дневник.
Урок окончен)

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

---

Можно ли писать коментарии в CSS?

[Bernadett-e]

Вопрос практический: можно ли в CSS писать пояснения, комментарии (особенно полезно, когда код большой).
Если да, то как оформлять?