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

воскресенье, 30 мая 2010

09:12

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

Siamo fatti della stessa sostanza dei sogni

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

2. как вот сюда - между экстратопом и блоком записей вставить блок меню?!

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

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

URL

суббота, 29 мая 2010

12:13

Background-color на фоновой картинке как?

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

Подскажите правильное решение.

нужно divами сделать наложение

Сначала идет фоновая картинка. Затем на нее накладывается background(с изменяемым width). А сверху цифра посередине.

Получится индикатор рейтинга или чего угодно

ниже картинка как должно выглядеть

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

URL

пятница, 28 мая 2010

23:41

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

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

Недели 2 а то и больше точно код своего дизайна не трогала точно. Да и в настройки-то не заходила. А тут возьми и прыгни мой логин влево. Внезапно!

С чего бы? Оо

upd И стал увеличиваться при наведении, чего раньше не делал Оо

@темы: меню, Мысли вслух

URL

21:24

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

A faith like a guillotine, as heavy, as light.

Здравствуйте, у меня вокруг экстратопа образовалась белая рамка, хотя ничего в коде я не меняла.
pfffffffff.diary.ru/
Код на всякий случай

Чтобы это могло быть? Подскажите, пожалуйста.

@темы: diaryCSS

URL

19:11

все записи пользователя в сообществе летняя меланхолия

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

 .right #wrapper {background:#F5F4F3;overflow:hidden;}

Настройки диза я не меняла, при этом со вчерашнего дня внезапно обведен еще и экстратоп вот так:

Смотреть как.

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

@темы: меню

URL

03:15

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

We have one destiny for two of us. You'll understand it soon.

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

@темы: меню

URL

понедельник, 24 мая 2010

18:03

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

Извините пожалуйста.. но я плохо разбераюсь в настройках css.
Я читала.. но так и не нашла ответа на мои вопросы.

Например как поставить именно нужную тебе картинку.. с компа..
и как сделать фоксировку и по центру.. ..
я помню тут был один сайт где загружаешь изображение и делаешь настройки..

вообщем п.о.м.о.г.и.т.е

URL

суббота, 22 мая 2010

20:04

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

Не сахар

Есть дневник с дизайном, доставившим мне уже немало неприятностей. Я его вроде добила, но...
С главной страницы все смотрится отлично. В комментариях и избранном текст записи уползает под блок с аватаром и подписью. Недавно был подобный вопрос, там было сказано, что это из-за .block_design .postInner {margin-left:-135px;}, но удаление этой строки (точнее, прописывание в принудительном порядке других марджинов) ничего не дает. Мне же удается на данный момент либо добиться ровного отображения на главной странице, либо в комментариях/избранном (но тогда на главной получается отступ от края). Через #Journal тоже пробовала - та же ситуация. Уже всю голову сломала...
Причем вчера я как-то его делала нормально, причем без #Journal, но в какой-то момент, видимо, решила, что этот кусок лишний, и удалила его.

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

Уже голова кругом, соображается плохо

.

URL

пятница, 21 мая 2010

23:45

#NavLinks

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

Ах тыж, гравитация, бессердечная ты сука!

Привет

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

#wrapper {position:relative}</div><div> body {line-height:1.4;}</div><div> #wrapper a{text-decoration:none !important}
body{ background-attachment:fixed; }
#wrapper{min-width:800px!important;width:800px;margin: 0 auto !important;padding:0px !important;overflow:hidden !important}
#side{width:800px !important;margin:0 !important}
#page-c{width:800px !important;padding:0 !important;padding:0 !important}
#page-t {margin:0 !important}
 #page-c a{color:#737678;text-decoration:none}
#page-c a:hover, a:active{color:#32628a}
{URL}
 #epigraph a{text-decoration:none; color:#505050 !important}
 #page-c{background: #ffffff }
.postLinksBackg {font-style:normal}
#side h1 A span{display:none !important}
#authorName {position:absolute; top:-160px;left:-60px ; font-weight:normal !important; font-size:13px !important}<
#authorName {color:#000000 !important}
.top .menuSection ul, .top #thisDiaryPhoto, .top #sign{background-color:#000000; border:none; text-transform: lowercase}
{POST}
div.postContent{border:1px solid #e1e1e1;border-right: 0px; border-left: 0px;padding:30px }
.postLinksBackg{padding-top:10px !important; padding-bottom:10px !important}
#wrapper .TagL { color: #505050 !important; }
.postDate { font-size:12px!important; color:#70848d !important;font-weight:normal !important; font-style:normal !important}
.postLinksBackg a{color: #505050!important; text-decoration: none !important}
.postLinksBackg a:hover, a:active{color:#32628a !important; text-decoration: none !important}
#more_login, #login_change, #myLinksLink, #albumLink, .urlLink, #sortOrder, .prevnext, .pages_str, #Stats A+A, #iAmQuit, {display:none !important;}
{MENU}
.menuSection{ font-size:12px;}
#side{width:500px !important; height:70px !important; margin:0 !important; position:absolute; top:150px;left:390px}
#thisDiaryLinks {display:none !important}
#side a:hover,a:active{color:#ffffff;text-decoration:none;}
#side a{color:#505050;text-decoration:none;}
#thisDiaryOwner_title {display:block; width:80px; height:31px; line-height:600px; overflow:hidden; background: url('/userdir/1/6/5/3/1653412/55692224.gif') 2px 4px no-repeat; margin-top: 0px !important; margin-left: 10px !important}
#thisDiaryOwner_title:hover {display:block; width:80px; height:31px; line-height:600px; overflow:hidden; background: url('/userdir/1/6/5/3/1653412/55692203.gif') 2px 4px no-repeat; margin-top: 0px !important; margin-left: 10px !important}
#myDiaryLinks_title {display:block; width:80px; height:31px; line-height:600px; overflow:hidden; background: url('/userdir/1/6/5/3/1653412/55692188.gif') 2px 4px no-repeat; margin-left: -3px !important }
#myDiaryLinks_title:hover {display:block; width:80px; height:31px; line-height:600px; overflow:hidden; background: url('/userdir/1/6/5/3/1653412/55692194.gif') 2px 4px no-repeat; margin-left: -3px !important }
#globalLinks_title {display:block; width:80px; height:31px; line-height:600px; overflow:hidden; background: url('/userdir/1/6/5/3/1653412/55692173.gif') 2px 4px no-repeat; margin-left: -3px !important }
#globalLinks_title:hover {display:block; width:80px; height:31px; line-height:600px; overflow:hidden; background: url('/userdir/1/6/5/3/1653412/55692182.gif') 2px 4px no-repeat; margin-left: -3px !important }
#randomDiaryLink {display:none !important}
#diarySpiritLink {display:none !important}
#diarySupportLink {display:none !important}
#paySupportLink {display:none !important}
#faqLink {display:none !important}
#upInChart {display:none !important}
#extratop {background: url('/userdir/1/6/5/3/1653412/55678958.png') no-repeat; width: 800px; height:300px !important; padding: 0 !important; margin: 0 !important;}
#extrabottom {background: url('/userdir/1/6/5/3/1653412/55620950.png') no-repeat; width: 800px; height:70px !important; padding: 0 !important; margin: 0 !important;position:inherit; top:-10px }
#topNav {display:none !important}
#topNavLinks {display:none !important}

URL

15:52

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

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

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

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

URL

четверг, 20 мая 2010

22:59

Разделители

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

Помогите пожалуйста убрать разделитель со страницы ссылок.

Кусок кода, связанный с эпиграфом и разделителями:
читать дальше

Заменить .countFirst, .countSecond на .singlePost не вариант, тогда поедет бэкграунд кнопок сортировки :shuffle:

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

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

URL

вторник, 18 мая 2010

22:32

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

Не сахар

Как-то выяснилось, что у Хрома другие пиксели...

Вот так дизайн выглядит в ФФ, ИЕ и Опере:

А вот так - в Хроме:

Помимо того, что все шрифты, указанные в пикселях, он показывает мельче, чем надо, так еще и из-за его своеобразного понимания пиксельных размеров немного уехали ссылки меню. В принципе, не смертельно, но несколько неприятно.
И еще этот же Хром не воспринимает font-size: 0px. Все равно очень мелко, но показывает. Опять своеобразное понимание пикселей?
Это как-нибудь можно исправить? Собственно, меню волнует куда больше))).

На всякий случай код

URL

понедельник, 17 мая 2010

23:44

Задачка на здравый смысл

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

Ходят слухи, что он, танцуя по небу разит мечом словно ветер, что даже во тьме звёздный свет отражается от его меча солнечным днём

&lt;textarea onstyle="overflow:hidden;" onfocus="sz(this);" onkeyup="sz(this);" tabindex="3" rows="4" cols="75" wrap="virtual" id="description" name="description">&lt;/textarea>

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

@темы: diaryCSS

URL

17:14

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

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

С появлением CSS 3 появилась отличная возможность создавать скругленные края для абсолютно любых элементов.
Это значительно проще и удобнее, чем рисовать скругленные края в фотошопе и тратить время на подгонку фоновых изображений друг к другу. Кроме того, такая возможность позволит реализовать скругленные края в динамическом дизайне. Делается это при помощи кода border-radius с вариациями для браузеров:
-webkit-border-radius - для сафари и гугл хрома, -moz-border-radius: 20px - для файерфокса, -o-border-radius - для оперы, border-radius - для прочих браузеров (работает не всегда).
Код выглядит следующим образом:
#element {-webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;}
Чем выше радиус закругления - тем более круглыми будут края, соответственно.
Также можно задавать разный радиус разным краям.

Для хрома/сафари:
-webkit-border-radius - закругляет все углы элемента.
-webkit-border-top-left-radius - закругляет верхний левый угол.
-webkit-border-top-right-radius - закругляет верхний правый угол.
-webkit-border-bottom-left-radius - закругляет нижний левый угол.
-webkit-border-bottom-right-radius - закругляет нижний правый угол.

Для мозиллы:
-moz-border-radius – закругляет все углы элемента.
-moz-border-radius-topleft - закругляет верхний левый угол.
-moz-border-radius-topright - закругляет верхний правый угол.
-moz-border-radius-bottomleft - закругляет нижний левый угол.
-moz-border-radius-bottomright - закругляет нижний правый угол.

Недостатки: не поддерживается старыми версиями браузеров.
И, разумеется, не поддерживается ИЕ до шестой версии точно.
Седьмую и выше лично я не проверял.
Тем не менее, с учетом того, что ИЭ также лютобешено ненавидел пнг-шки, и не читал прозрачность, а также постоянно выдавал глюки с позиционированием и отступами, вариант с CSS3 все же проще. В ИЭ просто будут отображаться квадратные углы вместо закругленных, но ничего никуда не уплывет.

Как это выглядит, можно посмотреть здесь: pedobeer.diary.ru/
Правда, отображаются закругления в опере или нет, я еще не проверял. Знаю точно, что работает в мозилле и сафари.

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

URL

воскресенье, 16 мая 2010

16:48

все записи пользователя в сообществе .Femme douce

Люблю и любима.

Доброго всем дня.
Мне нужна рамка для
#side
#postsArea
загругляющаяся желательно с тенью
Днев мой открыт
Дизайн свелый и сливаеся, надо как то ограничить вышиуказаные блоки.
Только вот я не знаю как.

URL

13:08

Добрового дня!

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

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

Хочется описать тип границ редактора, а то их вообще и нет.

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

АПД. Вопрос снят.

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

URL

03:30

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

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

"У меня есть для тебя что-то лучше" (с) Вселенная

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

И код моего безобразия

body {background: url('/userdir/4/4/2/7/442737/55467338.jpg'); background-attachment: fixed !important;}
 #wrapper{width:900px;min-width:0;background: url('/userdir/4/4/2/7/442737/55071950.png');border-style: double; border-color:3b3280 !important; }
 #side{width:200px;}
 .left #page-c {margin-left:-200px;}
 .left #page-t {margin-left:200px;}
 .right #page-c {margin-right:-200px;}
 .right #page-t {margin-right:200px;}
 #postTitle {font-family:"Book Antiqua";font-weight:bold;}
 #side h1 a {font-family:"Book Antiqua";font-weight:bold;}
 .offtop {font-family:"Book Antiqua"; font-style:italic; }
 .postDate {font-family:"Book Antiqua"; font-style:italic; font-weight:bold; }
 #authorName {font-family:"Book Antiqua"; font-weight:bold; position:absolute; top:330px; left:50px; font-size:16px; color:#e5e5e5; }
 #side h1 A{ font-family:"Book Antiqua";font-weight:bold; font-size:15px;font-family:"MS PMincho"; position:absolute; top:10px; left:50px; font-size:17px; }
 #postTitle {font-family:"Book Antiqua";font-weight:italic;}
 .umail {font-family:"Book Antiqua";font-weight:bold;}
 .email {font-family:"Book Antiqua";font-weight:bold; position: relative; left:10px;}
 .diary {font-family:"Book Antiqua";font-weight:bold;}
 .profile {font-family:"Book Antiqua";font-weight:bold;}
 .quote_post {font-family:"Book Antiqua";font-weight:bold;}
 .prevPostLink {font-family:"Book Antiqua";font-weight:bold;}
 .nextPostLink {font-family:"Book Antiqua";font-weight:bold;}
 .urlLink {font-family:"Book Antiqua";font-weight:bold;}
 #albumLink {display:none; position:absolute; top:130px; left:50px; font-size:15px;}
 #rssLink {display:none}
 #postsCalendar {display:none}
 #myProfileLink{display:none}
 #upInChart {display:none}
 #myLinksLink {display:none}
 #photolibLink {display:none}
 #allDiaryLink {display:none}
 #diarySpiritLink {display:none}
 #diarySupportLink {display:none}
 #paySupportLink {display:none}
 #faqLink {display:none}
 #pchListLink{display:none}
 #communityCatalogueLink {display:none}
 #myDraftLink{display:none}
 #headlineList {display:none}
 #subscribeEmail {display:none}
 #writeToAuthor {font-family:"Book Antiqua";font-weight:bold;}
 #writeToAuthor a {content: 'Write U-mail'; overflow: hidden;}
 #myDiaryLink {font-family:"Book Antiqua";font-weight:bold; position:absolute; top: 110px; left:50px; font-size:15px;}
 #myDiaryLink b {content: 'Дневникl'; overflow: hidden;}
 #myCommunityLink {font-family:"Book Antiqua";font-weight:bold; }
 #myDiaryLink b {content: 'Дневник'; overflow: hidden;}
 #writeThisDiary a {font-family:"Book Antiqua";font-weight:bold;position:absolute; top:130px; left:50px; font-size:15px;}
 #umailLink {font-family:"Book Antiqua";font-weight:bold; position:absolute; top: 150px; left:50px; font-size:15px;}
 #myFavLink {font-family:"Book Antiqua";font-weight:bold;position:absolute; top: 170px; left:50px; font-size:15px;}
 #myQuotLink {font-family:"Book Antiqua";font-weight:bold; position:absolute; top: 190px; left:50px; font-size:15px;}
 #discussionLink {font-family:"Book Antiqua";font-weight:bold; position:absolute; top: 210px; left:50px; font-size:15px;}
 #myNotepadLink {font-family:"Book Antiqua";font-weight:bold;}
 #optionsLink {font-family:"Book Antiqua";font-weight:bold;position:absolute; top: 230px; left:50px; font-size:15px;}
 #myStatLink {font-family:"Book Antiqua";font-weight:bold;}
 #mainpageLink a {font-family:"Book Antiqua";font-weight:bold;position:absolute; top: 50px; left:700px; font-size:15px; color:#8a9b9b;}
 #favListLink a {font-family:"Book Antiqua";font-weight:bold;position:absolute; top: 70px; left:700px; font-size:15px; color:#8a9b9b;}
 #myCommunitiesLink a {font-family:"Book Antiqua";font-weight:bold;position:absolute; top: 90px; left:700px; font-size:15px; color:#8a9b9b;}
 #randomDiaryLink a {font-family:"Book Antiqua";font-weight:bold;position:absolute; top: 110px; left:700px; font-size:15px; color:#8a9b9b;}
 #iAmQuit a {font-family:"Book Antiqua";font-weight:bold;position:absolute; top: 330px; left:810px; font-size:16px; color:#8a9b9b;}
 #more_login a {font-family:"Book Antiqua";font-weight:bold;position:absolute; top: 330px; left:870px; font-size:15px; color:#8a9b9b;}
 #login_change a {font-family:"Book Antiqua";font-weight:bold;position:absolute; top: 330px; left:870px; font-size:15px; color:#8a9b9b;}
 #tagslistlink {font-family:"Book Antiqua";font-weight:bold;}
 #comments {font-family:"Book Antiqua";font-weight:bold;}
 #subscribe {font-family:"Book Antiqua";font-weight:bold;}
 #addToQuote {font-family:"Book Antiqua";font-weight:bold; }
 #addToFav {font-family:"Book Antiqua";font-weight:bold;}
 #delFromFav {font-family:"Book Antiqua";font-weight:bold;}
 #pchs {font-family:"Book Antiqua";font-weight:bold;}
 #lastComments {font-family:"Book Antiqua";font-weight:bold;}
 .countFirstDate,.countSecondDate {text-align:center;font-family:"Book Antiqua";font-style:italic; font-weight:bold;}
 .offtop {font-family:"Book Antiqua"; font-style:italic; }
 .postDate {font-family:"Book Antiqua"; font-style:italic; font-weight:bold; }
 a:link, a:hover, a:active, a:visited, #authorName, #side h1 A {text-decoration: none !important;}
 #extratop{height:350px;background: url('/userdir/4/4/2/7/442737/55466990.jpg') 50% 0 no-repeat;}
 .left #wrapper { overflow:hidden;}
 .avatar, .avatarNew { float:left; background: no-repeat bottom right !important; background: no-repeat bottom right; margin: 10px 0 0px 10px !important; margin: 6px 0 0px 5px; }
 .avatar img,.avatarNew img { display: block; position: relative; background: url('/userdir/4/4/2/7/442737/55467485.jpg'); background-color: #3b3280; border: 1px solid #82836d; margin: -10px 10px 10px -10px; padding: 4px; FILTER: progid:DXImageTransform.Microsoft.Shadow(color='gray', Direction=150, Strength=4); }
 .avatar img:hover,.avatarNew img:hover { display: block; position: relative; background-color: #3b3280; padding: 4px; filter:alpha(opacity=100);-moz-opacity:1.0 !important;opacity:1.0 !important; }
 .atMusic em { font-size: 0 px; background: url('/userdir/4/4/2/7/442737/40354499.gif') no-repeat 0; padding-left: 60px !important; }
 .atMusic em SPAN { position: absolute; left:-1000px;}
 .atTag em { font-size: 0 px; background: url('/userdir/4/4/2/7/442737/52711367.png') no-repeat 0; padding-left: 20px !important; }
 .atTag em SPAN { position: absolute; left:-1000px;}
 .atMood em { font-size: 0 px; background: url('/userdir/4/4/2/7/442737/52711367.png') no-repeat 0; padding-left: 20px !important; }
 .atMood em SPAN { position: absolute; left:-1000px;}
 .commentAuthor {color: #605f5f;}
 .TagL{color: #0297d9;font-weight:bold; font-size:17px }
 #wrapper {position: relative !important;}
 .menuSection {border-top:none !important;}

@темы: меню, diaryCSS, Дизайн

URL

четверг, 13 мая 2010

16:09

все записи пользователя в сообществе жид-медведь

Ain't no rest for the wicked...

Добрый день! Не могу самостоятельно разобраться с одной проблемой - не получается поменять цвет конкретных ссылок, даже прописывая их с «!important». Мб я что-то упускаю?

ссылки из меню избранного:
#myFavLink, #iAmQuit {background: #e4d0d4 !important; height:16px; width:140px; text-transform: uppercase; font-weight: bold !important; color: #ffffff !important; font-size: 14px !important; margin-top: 0px !important; margin-bottom: 0px !important; margin-left: -20px !important; padding-left: 20px !important; }[/CODE]

ссылки комментариев:
.postLinks {text-transform: uppercase; color: #b799cb !important; font-size: 11px !important; }

(во втором варианте максимальный успех - это поменялся цвет скобок в Комментарии (2).

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

URL

15:21

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

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

Как внутри самого оформления цитаты текст отодвинуть от левого края?)))

 span.quote_text { display: block; margin: 5px; padding: 35px; padding-top: 25px; border-right:1px solid #000000; border-bottom:1px solid #000000; font-style: normal; font-size:10px; font-color: #000000; background: url('/userdir/1/4/0/3/1403238/55363613.png') no-repeat !important; text-align: center; border-left:1px solid #000000; border-top:1px solid #000000;}

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

заранее спасибО)

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

URL


Запомнить