Центровка элементов

[Leroks]

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

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

---

вставка видео

[~Misteriya~]

Добрый день!

Извините, если не по адресу. Подскажите, пожалуйста, как вставить в пост видео с сайта 1 канала 1tv.ru?
www.1tv.ru/sprojects_utro_video/si33/p54014

Спасибо!

---

[расцелуй мои колени]

доброй ночи.
проблемы такие:
1. эпиграф никак не хочет становиться на середину.
2. я что-то явно намудрила в коде, в итоге дневник "расползся" по всему экрану

код:
#authorName{font-size:11px !important}
a:hover,a:active{color: 98c2cd !important; text-decoration:none !important}
.block_design .singlePost, .block_design .singleComment, .block_design .pageBar, .block_design .group_link {border-top-color: #98c2cd; border-top-width: 1px; border-top-style:solid;}
.atMusic em, .atMood em, .atTag em { font-size: 11px;}
span.quote_text {font-style: normal; display: block; margin: 5px; padding: 5px; border: 1px solid #000000; font-size: 11px;}
.menuSection{ font-style:trebuchet ms; font-size: 11px !important}
#side h1 a{color: 98c2cd; font-size: 11px; font-style: trebuchet ms !important}
#side a:hover,a:active{color: 98c2cd; font-size: 11px !important}
.postDate { text-align:left; font-size:17px !important}
.header { text-align:left; font-size:17px!important}
#globalLinks {display:none !important}
#albumLink {display:none !important}
#photolibLink {display:none !important}
#upInChart {display:none !important}
#topNav {display:none !important}
#epigraph { width: 700px; height: 450px; background: url('/userdir/1/4/7/5/1475653/76643908.jpg ') center; }

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

---

мобильная версия

[bokonist]

дайри живут в 2003 году, а мы хотим читать уютненькие с телефонов

пока нельзя повлиять на дизайн сервисных страниц, но есть возможность с помощью media queries задать стили своего дневника для конкрентых устройств. большое везение, что они не вырезаются из редактора css, как многие другие интересные вещи.

вот так можно задать стили для устройств с экранами до 480 пикселей в ширину:

@media only screen and (max-device-width:480px) { 
    body {background:red !important;}
    /* сюда пишете любые стили */
}

так, для устройств с большим количеством точек на пиксель (ретина):

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    ...
}

делитесь идеями и результатами

---

[Паломник Оптимизма!]

Как сделать абзационный отступ в тексте? Вариант предложенный Рецке тут: http://diarycss.diary.ru/p26611303.htm Т.е. такой:
br:after {content:'12345';visibility: hidden;}

Не работает.

@темы: текст

---

[Allein.]

что бы не делала, упрямое название дневнике все равно не хочет становиться на свое место. ни на йоту не двигается. ))% не могу понять, что с ним не так.
статистика с аналогичным кодом становится, куда надо ((%

#wrapper{width:875px; min-width:0;}
 body{background:#282828 url('/userdir/4/6/2/1/462188/76611709.jpg') fixed right no-repeat;}
 #extratop{height:54px; width:875px; background:url('/userdir/4/6/2/1/462188/76612099.png') 50% 0 no-repeat; margin-bottom: -35px; position:relative; left: -170px }
 #extrabottom{height:54px; width:875px; background:url('/userdir/4/6/2/1/462188/76612135.png') 50% 0 no-repeat; margin-top: -52px; position:relative; left: -170px}
 #vkl .current a, #vkl .current .z_n, #vkl li a, #vkl .z_top b, #jsbut, #shsmile {background: url('/userdir/4/6/2/1/462188/76346925.png') 50% 0 fixed;}
 span.quote_text {font-style:normal; display: block; margin: 5px;padding: 5px; border:3px solid #000000; font-size: 97%; background: #00000; }
 #page-c { background: url('/userdir/4/6/2/1/462188/76611979.png') repeat transparent !important; position:relative; left: -170px }
 #page-t {width:850px; !important; padding:0; position:relative; right: -12px;}
 #postsArea { background: url('/userdir/4/6/2/1/462188/76611979.png') repeat transparent !important;}
 .header { background: url('/userdir/4/6/2/1/462188/76611979.png') repeat transparent !important;}
 .postDate { background: url('/userdir/4/6/2/1/462188/76611979.png') repeat transparent !important;}
 #iAmQuit b {display: none !important;}
 #YaSearch {display: none !important;}
 #iAmQuit {display: none !important;}
 #bottom_up {display: none !important;}
 #bottom_mainlink{display: none !important;}
 #bottom_randomlink{display: none !important;}
 #bottom_spiritlink{display: none !important;}
 #bottom_faqlink{display: none !important;}
 #authorName {display: none !important;}
 #thisDiaryLinks {display:none !important}
 #thisDiaryOwner {display:none !important}
 #myDiaryLinks_title b {display:none !important}
 #myDiaryLinks ul {display: block !important; visibility: visible !important; width: 140px; background-image:url('/userdir/4/6/2/1/462188/76611979.png'); position:absolute; right:0%; margin-right: -170px; text-align:center !important}
 #globalLinks ul {display: block !important; visibility: visible !important; width: 140px; background-image:url('/userdir/4/6/2/1/462188/76611979.png'); position:absolute; right:0%; top: 200px; margin-right: -170px; text-align:center !important}
 #globalLinks_title b {display:none !important}
 .avatar img{ background: none; border-width:1px; border-color:#000000; border-style:solid; padding:1px;}
 #Stats a+a {display:none;}
 #Stats{position:absolute; left:50%; bottom:10px; margin-left: 110px; padding: 5px 0px !important; font-size: 15px !important; font-weight: bold !important; text-align: left !important; float: left !important; float: right; text-align: right; max-width: 530px; z-index: 1;}
 #side h1 {position:absolute; left:0%; top:10px; margin-left: 110px; padding: 5px 0px !important; font-size: 15px !important; font-weight: bold !important; text-align: left !important; float: left !important; float: right; text-align: right; max-width: 530px; z-index: 1;}
 

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

---

пункты меню

[синяк на пятке]

Подскажите пожалуйста id пунктов меню "в моем дизайне" и "мои фильтры"
Спасибо=)

@темы: меню

---

дублируется разделитель после эпиграфа

[his dear detective]

Выглядит это так:


Надо чтобы был он там только один. После обычных записей разделитель один, все как надо.
Кусок кода с разделителем (или надо код полностью?):

.singlePost {padding-bottom: 90px !important; background: url('/userdir/3/0/7/4/3074482/76555794.gif';) center bottom no-repeat;}

Мне скоро диз сдавать, а я не могу решить эту проблему. Помогите, пожалуйста.

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

---

поменять местами элементы в меню

[echo;]

здравствуйте, подскажите как поменять местами элементы в меню:

и переместить влево имя пользователя, чтобы получилась ровная колонка

@темы: меню

---

Заголовок в рамку

[-=Beautiful Art Community=-]

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

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

---

[storm weather]

Запуталась совсем, помогите.

#side h1 { position:fixed !important; left:-1% !important; right:auto !important; top:0px !important; font-family: Georgia; font-size: 150px !important; z-index: 5; letter-spacing: -1pt !important; width: 100%;text-align: center !important;}
#add_block1 {position:fixed; top: 0px; bottom:0; left:0px; width:100%; background:url('/userdir/3/7/4/2/374288/76441551.png') repeat-x !important; height: 200px !important; z-index: 15; }

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

@темы: меню

---

[Kauru Kaya]

Здравствуйте, вопросы такие:
1. В экстратопе, под ником Kauru Kaya есть строка поиска и кнопочка "Найти" - как это дело убрать оттуда.
2. Как отцентровать под экстратопом название дневника и меню, то есть слова "Запись", "Мой дневник" и т.д. должны располагаться по центру, а не слева.

скрин, красной рамочкой обведены интересующие места

3. Как изменить цвет ников в комментариях, хочу чтобы был не чёрный, а вот такой #800000

@темы: меню, diaryCSS, платный сервис

---

[Naians]

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

 #myDiaryLink {position:relative; left:-15px; display:block; overflow:hidden; width:200px; line-height:500px; height:35px; margin:0px !important; padding:0px !important; background-image: url('/userdir/7/5/1/5/751557/76355209.png');}
 #allDiaryLink {position:relative; left:-15px; display:block; overflow:hidden; width:200px; line-height:500px; height:35px; margin:0px !important; padding:0px !important; background-image: url('/userdir/7/5/1/5/751557/76355413.png');}

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

---

[Allein.]

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

при отступах в 3 пикселя:


Я понимаю, что это, вероятнее всего, надо перекраивать полкода, но, честно говоря, понятия не имею, как.
^^'

#wrapper{width:875px; min-width:0;}
 #extratop{height:480px; background:url('/userdir/4/6/2/1/462188/58632638.png') 50% 0 no-repeat; margin-bottom: -5px}
 #extrabottom{height:155px; background:url('/userdir/4/6/2/1/462188/58632668.png') 50% 0 no-repeat; margin-top: -43px}
 span.quote_text {font-style:normal; display: block; margin: 5px;padding: 5px; border:3px solid #f80632; font-size: 97%; background: #00000; }
<b> #page-t .bordered { background: url('/userdir/4/6/2/1/462188/58632695.png') repeat transparent !important; margin-left: 2px; margin-right: -2px;}</b>
 #page-t {width:875px; margin-left:50px !important; padding:0;}
 #side h1 {position:absolute; left:50%;bottom:85px;margin-left:-420px; padding: 5px 0px !important; font-size: 18px !important; font-weight: bold !important; text-align: left !important; float: left !important; float: right; text-align: right; max-width: 530px; }
 #iAmQuit b {display: none !important;}
 #YaSearch {display: none !important;}
 #iAmQuit {display: none !important;}
 #bottom_up {display: none !important;}
 #bottom_mainlink{display: none !important;}
 #bottom_randomlink{display: none !important;}
 #bottom_spiritlink{display: none !important;}
 #bottom_faqlink{display: none !important;}
 #authorName {display: none !important;}
 #Stats{position:absolute; left:50%;bottom:85px;margin-left:330px; padding: 5px 0px !important; font-size: 15px !important; font-weight: bold !important; text-align: left !important; float: left !important; float: right; text-align: right; max-width: 530px; }
 #thisDiaryLinks {display:none !important}
 #thisDiaryOwner { position:absolute; left:50%;top:420px; margin-left: -440px !important;}
 #thisDiaryOwner_title {background-image:url('/userdir/4/6/2/1/462188/58737764.png'); width:119px; height:30px; }
 #thisDiaryOwner_title b {display:none !important}
 #thisDiaryOwner ul {background-image:url('/userdir/4/6/2/1/462188/59164280.png'); position:absolute; top:40px; left:15px; text-align:center !important}
 #myDiaryLinks{ position:absolute; left:50%;top:420px; margin-left: -55px !important;}
 #myDiaryLinks_title {background-image:url('/userdir/4/6/2/1/462188/58737923.png'); width:135px; height:41px; }
 #myDiaryLinks_title b {display:none !important}
 #myDiaryLinks ul {background-image:url('/userdir/4/6/2/1/462188/59164280.png'); position:absolute; top:50px; margin-left: -10px; text-align:center !important}
 #globalLinks ul {background-image:url('/userdir/4/6/2/1/462188/59164280.png'); position:absolute; top:40px; left:30px; text-align:center !important}
 #globalLinks{ position:absolute; left:50%;top:420px; margin-left: 250px !important;}
 #globalLinks_title {background-image:url('/userdir/4/6/2/1/462188/58738046.png'); width:162px; height:29px; }
 #globalLinks_title b {display:none !important}
 .avatar img{ background: none; border-width:1px; border-color:#000000; border-style:solid; padding:1px;}
 .menuSection {text-align:center; }
 #Stats a+a {display:none;}
 

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

---

О полосе прокрутки.

[Albert Osbourne]

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

Код того самого элемента

{--------------------------------twitter---------------------------}
 #Journal #post181388510.singlePost {display: block !important; visibility:visible !important; position:absolute; top: 220px !important; right: 684px; width: 173px !important; z-index:+1; height:150px !important; font-size: 11px;}
 #post181388510.singlePost .postContent{overflow-y:scroll; display:block; max-height:100px !important; text-align:center !important; }
 #Journal #post181388510.singlePost {background: url('/userdir/3/0/4/3/3043845/75768712.png'); font: 12px; Georgia; italic; display: block; margin: 15px 15px 5px 5px; padding: 15px 15px 15px 15px;border: 1px solid #191207; padding: 15px; -moz-border-radius: 10px; -webkit-border-radius: 10px; width: px; box-shadow: 3px 3px 7px #000000; }
 #Journal #post181388510 .postTitle.header { background: url('/userdir/3/0/4/3/3043845/75819419.png') top left no-repeat !important; padding-top: 58px; width: 229px ; position:relative; left:-13px; text-align: center !important;}
 #JournalComments #post181388510, #JournalDraft #post181388510, #post181388510 .postDate, #post181388510 .postLinksBackg, post181388510.postTitle.header span, #post181388510.singlePost .atTag span, #post181388510.singlePost div.paragraph small, #post181388510.singlePost #div.paragraph b, #Journal #post181388510.singlePost .postTitle span {display: none !important;}
 #Journal #post181388510.singlePost .atTag {margin: 25px 0 0 0 !important; }
 #Journal #post181388510 .postActionLinks {margin: 0 35px 0 0 !important;}
 #Journal #post181388510 .paragraph div:first-letter{font-size:11px; color: #85817a !important}
 ::-webkit-scrollbar { width: 0px; height: 0px; }-------КОД, СДЕЛАВШИЙ ПОЛОСУ НЕВИДИМОЙ В ХРОМЕ

То, как я вижу это с Хрома и хочу видеть со всех браузеров

запись создана: 08.10.2012 в 21:13

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

---

Про "последние комментарии"

[Кошмаринка]

Доброго дня. Давным давно хотела спросить и руки не доходили. Что поправить в коде чтобы в группе "Последние комментарии" колличество комментариев отражалось адекватно (на скрине стрелочкой указано, как оно отражается сейчас)?



Если нужен код, вот он

#YaSearchForm { visibility: visible !important; display: block !important;}
 #YaSearch_title b {display: none;}
 #YaSearch A {font-size:14px; color:#c4875a;}
 #YaSearchForm input.text {border: 1px solid #fff;}
 body {background-color:#8b8c73;color:#5a3215;padding:0px;margin:0px; background:url('/userdir/5/9/2/1/592173/73874092.jpg');}
 a {color:#ac5a23;text-decoration:none !important;}
 a:hover {color:#391c12;text-decoration:none;}
 .menuSection a {color:#f5dbba;text-decoration:none;}
 .menuSection a:hover {color:#391c12; text-decoration:none; font-weight: bold;}
 #extratop{width:1000px; height: 832px; background:url('/userdir/5/9/2/1/592173/76222882.jpg') left top no-repeat; }
 #page-c {margin-top: -500px; width: 955px; margin-left: 150px; margin-right: 60px;}
 #side {margin-top: -750px; width: 180px; margin-left: 20px; font-family: andate mono;}
 #wrapper {width: 1000px; min-width: 1000px !important; background:url('/userdir/5/9/2/1/592173/76222827.jpg') left top repeat-y;}
 #extrabottom {background:url('/userdir/5/9/2/1/592173/76223255.jpg') top no-repeat; width:1000px;height:100px; margin-left: 0px;}
 .singlePost .postTitle {height: 25px; line-height: 4% !important; padding-left: 5px; padding-top: 20px; width:700px;background:url('/userdir/5/9/2/1/592173/73853371.gif') no-repeat; color: #fff; font-size: 16pt;}
 .singlePost {font-family: "Georgia", "Times New Roman", "AGCenturion"; font-size:16px;}
 .singlePost {padding-top: 40px !important;}
 #post0 .postTitle {display:none;}
 #epigraph {margin-top: -70px !important; border-bottom: 1px #81783f dashed !important; }
 #epigraph {margin-top:-26px !important; margin-right: -2px;}
 .postActionLinks {margin-top: -36px;}
 .singlePost .postDate {position: absolute; margin-top: -40px !important; font-weight: bold !important; padding-left: 5px; color: #000; text-shadow:1px 2px 3px #999;}
 .singlePost .postTitle span {position: absolute; font-size: 12pt; color: #000; margin-top: -35px; text-shadow:1px 2px 3px #999;}
 .menuSection_title {display: block; font-weight: bold !important; font-size: 14pt; color: #000 !important; width:160px; padding:0px 0 0 36px; background:url('/userdir/5/9/2/1/592173/73849691.png') no-repeat; margin:0 0 5px 0; !important;}
 #side li {background: url("/userdir/5/9/2/1/592173/73822852.gif") no-repeat scroll 0 7px transparent;}
 #side h1 {position: relative !important; top: -220px; left: 20px; text-align: left; font-size: 28px !important; width: 400px;}
 #side h1 a {display:block; width:312px; height:104px; line-height:800px; overflow:hidden; background: url('/userdir/5/9/2/1/592173/73854844.png') 2px 4px no-repeat; position:relative !important; top:130px !important; left: -25px !important;}
 #authorName {position: relative !important; top: -157px; left: 275px; font-size: 16pt; color:#f5dbba; font-style: italic; font-weight: bold;}
 .menuSection li {font-weight:normal;padding-left: 10px !important; font-size:16px; color:#e9cca8;}
 .postLinksBackg {font-style: italic; font-size: 10pt; border-bottom: 1px #999 dashed; padding: 5px 5px 5px 5px !important; border-left: 1px #999 dashed; border-right: 1px #999 dashed; font-family: verdana;}
 .quote_text {font: italic 14px Verdana; display: block; margin: 0px; padding: 7px; border-top: 1px dashed #81783f; border-right: 1px dashed #81783f; border-bottom: 1px dashed #81783f; border-left: 5px solid #ac5a23;}
 .paragraph div:first-letter { font-size: 50px; float: left !important; float: none; font-weight: bold; font-family: "Mistral", "Times New Roman"; margin-right: 3px; color: #ac5a23; line-height:100% !important; line-height:140%; }
 .paragraph div div:first-letter { font-size: 100%; font-family:Arial, Helvetica, sans-seif; float: none !important; margin: 0px; line-height:130%; color: #000;}
 

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

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

---

[crimson soda]

Вопросы.

Решено! 1. Как сделать размер аватара в сообщениях фиксированным (100х100) и сделать рамку вокруг аватара?
2. Как разместить название дневника по центру, сделать его жирным и убрать подчеркивание при наведении?

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

---

Разъезжаются все блоки

[.muninn]

Вечер добрый. У меня распространенная проблема, - кривой сход-развал основных блоков - но конкретно своего решения я не нашла.
1) где-то в коде ошибка, из-за которой область постов (подозреваю, что это какой-нибудь page-t) больше предоставленной картинки;
2) не могу прилепить экстра-блоки к телу записи.

Как это выглядит

С размерами экстратопа и экстработтома все нормально, их обрезал скриншот.

Как это должно выглядеть в недостижимом идеале

3) надо прилепить меню к левому краю тела, т.е., чтобы оно центровалось не по левому краю экрана, а было больше похоже на выеуказанный идеал.

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

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

---

Заголовок

[синяк на пятке]

Добрый вечер, как подвинуть вторую строчку заголовка вправо? Или это нереально?

картинка

Код для блока заголовка

.postTitle span {position: relative; top:0px !important;left: -60px !important; padding: 5px 30px 8px 30px ;}
#postsArea .header {color: #0a9daa; font-size: 14px; position: relative;width: 518px !important!;}
#JournalComments .header {color: #0a9daa ; font-size: 14px;width: 518px !important!; height:41px;}
.header h2 {position:relative; top:2px !important;left: -55px;}
#postsArea .header {height:41px;}
.postTitle {position: relative; width: 518px !important!; line-height: 25px;}

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

---

"Липкое" меню

[made by...]

День добрый!
Хотелось узнать, возможно ли в личных дневниках реализовать "прилипающее" меню наподобие главной страницы дайри? То есть, не просто зафиксировать раскрывающееся меню, а именно сдвигаемое. И если да, какие блоки и код задействованы?
Насколько я понимаю, изменение position с inherit на fixed происходит с использованием java.

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