понедельник, 09 апреля 2007
Пару фишек, которые могут внезапно кому-то понравиться.
Вопросы типа: "А как поменять цвет", "Как подгонать под мой дизайн", "Что такое графический редактор" и подобные задавать не мне а гуглу: http://www.google.com
1. Делаем абзацный отступ.
читать дальше
Увы, нормальным способом через text-indent не получиться, поскольку абзацы в записях формируются с помощью br а не с помощью p. Т.е. получится, но отступ будет только у первого абзаца.
Альтернативный способ такой:
br:after {content:'тут ЛЮБОЙ текст такой длины, какой вы хотите сделать отступ';visibility: hidden; }
не работает в IE6 и FF2
2. Делаем буквицу.
читать дальше
Этот стиль делает саму буквицу. Этот код - только пример.
.paragraph div:first-letter {
font-size: 30px;
float: left !important;
float: none;
font-family:Times New Roman;
margin-right: 3px;
color: #цвет;
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;}
А теперь внимание. В принципе буквице можно проставить border и background, НО ЭТО УБЬЕТ IE6. При некоторых сочетаниях стиля этот недобраузер вылетает с ошибкой. Обнаружил чисто случайно, когда кто-то в избранном начал запись с жирного шрифта.
3. Скругленные/сквадраченные/слюбые края записей.
Только для опытных пользователей!
читать дальше
Способ актуален для дизайнов фиксированной ширины.
Сначала меряем ширину записи. У меня она 900px.
Потом ищете в интернете/рисуете сами в редакторе то, что будет фоном.
Требования:
Рисунок должен разбиваться на три горизонтальные части. Рассмотрю на примере скругленного прямоугольника.
Пусть есть прямоугольник с радиусом скругления углов 10px, шириной 900px и высотой 100px;
1. Хеадер. Верхняя часть рамки. В случае прямоугольника это обрезанная верхняя часть с круглыми углами. Лучше отрезать больше, но без нижней части (например 900px на 80px) Хеадер будет перекрываться фоном, поэтому не сильно актуально, сколько он будет по вертикали.
2. Фон. Фон по возможности должен быть узким. На него самые сложные требования. Во первых он должен нормально выглядеть, если его взять и много раз повторить по вертикали. Во вторых он должен стыковаться с верхней и нижней частью. В случае прямоугольника достаточно из середины вырезать полоску шириной 1px
3. Футер. Футер отрезаем ровно - с ним больше всего мучений. По высоте достаточно около 50px;
Теперь пишем стиль.
.singlePost,.singlePost, .singlePost.lastPost, .singlePost.countFirst, .singlePost.countSecond
{ border: none;
padding: 0px 0px 0px 0px;
background: url('хеадер') 0px 0px no-repeat; }
.postContent { background:url('фон') 0px 5px repeat-y; clear:both; width:auto; }
.postLinks {
position:relative;
top:-5px; left:-5px !important;
left:0px;
width: 900px;
background: url('футер') 0px bottom no-repeat;
height: 30px;
padding-bottom: 13px;
padding-right: 0px;
padding-left:0px;
margin-left:0px;
margin-right:-10px !important;
margin-right:-5px;}
Почему не .postLinksBackg? Потому что на странице добавления комментариев таких блока ДВА. Как отключить фон для второго блока я не придумал, поэтому применил стиль к .postLinks Это сложнее, но работает.
С первыми двумя блоками обычно проблем нет, а с postLinks придется повозиться. Советую проверять отступы во всех имеющихся браузерах.
После всех манипуляций скорее всего придеться править отступы в самих записях из-за наличия padding: 0px 0px 0px 0px; в первом стиле.
@темы:
фоновые картинки,
основные блоки
-
-
09.04.2007 в 15:19это жестоко.
котята хорошие.. >.< и это не смешно.
-
-
09.04.2007 в 15:27-
-
10.04.2007 в 23:39Вопрос: как сделать, чтоб буквица не была всегда с левого краю, если текст сделан по центру или выровнен справа? А то некрасиво получается - буква большая слева, а весь остальной текст отдельно. Заранее спасибо.
-
-
11.04.2007 в 00:05-
-
11.04.2007 в 00:15а, значит, надо было и вторую часть кода вставлять?)) Тогда прошу прощения за вопрос, я просто не знаю, что такое вложенные дивы)
Пример привести не смогу, так как это все у меня наблюдается в ленте избранного, у меня самой в дневнике нет слева или по центру выровненного текста.
Значит, вторая часть это должна исправить?
-
-
11.04.2007 в 00:49она для этого и была написана )
-
-
11.04.2007 в 01:02спасибо)). Разобралась.
Как-то я сразу об этом не подумала...))
Прошу прощения за беспокойство)
-
-
25.04.2007 в 10:01-
-
25.04.2007 в 10:13-
-
29.04.2007 в 15:51Нет, код упорно не желает работать.
Т.е. он меняет букву в одном посте и более нигде.
Выглядит вот так:
-
-
09.06.2007 в 01:52-
-
09.06.2007 в 18:13Но такой код будет работать для всех строк кроме первой.
Я дописала к коду: .paragraph {text-indent: 1em }
В постах это работает, а к комментариям отступ 1ой строки мне что-то никак не поставить.
-
-
09.06.2007 в 19:43.singlePost,.singlePost, .singlePost.lastPost, .singlePost.countFirst, .singlePost.countSecond { border: none; padding: 0px 0px 0px 0px; background: url('/userdir/3/0/2/3/30238/20305342.gif') 0px 0px no-repeat; }
.postContent { background:url('/userdir/3/0/2/3/30238/20304478.gif') 0px 0px repeat-y; clear:both; width:auto; }
.postLinks { position:relative; top:-5px; left:-5px !important; left:0px; width: 900px; background: url('/userdir/3/0/2/3/30238/20305322.gif') 0px bottom no-repeat; height: 30px; padding-bottom: 13px; padding-right: 0px; padding-left:0px; margin-left:0px;margin-right:-10px !important;margin-right:-5px;}
-
-
10.06.2007 в 22:43помоги пожалуйста с буквицей, я не очень понимаю в коде где что, у меня шрифт Комик Санс, размер 13, какие мне параметры выставить надо для буквицы, чтоб не лезло вверх-вниз? потому что я попробовала, все сьехало черти куда
-
-
10.06.2007 в 23:01может упрощенный код?
выделено - размер шрифта буквицы. Times New Roman заменить на полное название шрифта в двойных кавычках или на название семейства шрифтов( смотрите в интернете)
.paragraph div:first-letter {
font-size: 30px;
font-family:Times New Roman;
color: #цвет буквицы;
}
.paragraph div div:first-letter {
font-size: 100%;
font-family:Arial, Helvetica, sans-seif;
color: #цвет основных записей;}
~ Ikeko ~
черт его знает на самом деле ) переспросите в umail - когда будет время покопаюсь.
~nasty~ в комментариях перед первой строкой идет строка
<div class="title"></div>
скорее всего оно и мешает.
можно попробовать добавить
div.title:after {content:'тут ЛЮБОЙ текст такой длины, какой вы хотите сделать отступ';visibility: hidden;}
-
-
10.06.2007 в 23:06спасибо, попробую
-
-
12.06.2007 в 19:25-
-
12.06.2007 в 20:08пасиба!!! помогло))
-
-
20.06.2007 в 18:21Можно убрать как-то?
-
-
20.06.2007 в 18:24-
-
20.06.2007 в 18:34-
-
23.06.2007 в 19:09У меня код, предложенный тобою в посте вообще не сработал, сработало это:
.paragraph {text-indent: 1em }
.. но сработало только для первого абзаца. а как сделать, чтобы для всех работало?
-
-
23.06.2007 в 20:15- У меня код, предложенный тобою в посте вообще не сработал
- Увы, нормальным способом через text-indent не получиться, поскольку абзацы в записях формируются с помощью br а не с помощью p. Т.е. получится, но отступ будет только у первого абзаца.
Альтернативный способ такой:
br:after {content:'тут ЛЮБОЙ текст такой длины, какой вы хотите сделать отступ';visibility: hidden; }
Увы, не работает в IE6, но в IE6 вообще очень много чего не работает.
Разве не ясно написано?
-
-
23.06.2007 в 20:402. у меня FF.
-
-
23.06.2007 в 21:43ну значит никак )
в Опере работает.
-
-
23.06.2007 в 21:49П.С. у тебя очень красивый дизайн ,)
*ушла над своим измываться*
-
-
26.06.2007 в 23:50а скажи, пожалуйста, как сделать так, чтобы буковки были в квадратике, как у тебя?)
-
-
19.09.2007 в 02:21В Мазилле все норм....
-
-
13.12.2007 в 23:55Я лузер-лузер-лузер, а вовсе не медведь^^-
-
14.12.2007 в 15:51