понедельник, 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; в первом стиле.
@темы:
фоновые картинки,
основные блоки
1.У меня постоянно пробел между верхом и серединой,что бы я ни копала в коде.
2.Нижняя часть уезжает вправо и начинается от слова Комментировать,а не от слова URL.
В общем,я х_З,куда копать.
Ширина безобразия 600 пикселей,высота хедера 50 пикселей,высота футера 50 пикселей,высота фона 10 пикселей,но он рипитится,так что это не имеет значения.
ЗЫ: Я пока код с днева вообще убрала,но всё же =/
Аддишн: мой код без применения фичи с фоном записи,мб здесь что-то кроется,но я уже сломала моск.
body {background-attachment: fixed; padding: 0 !important; margin: 0 !important;}
.menuSection {text-align: center;}
#wrapper{background: url('/userdir/1/3/8/5/138525/30029821.gif') repeat-y; min-width: 840px !important; width: 840px; margin: 0 auto !important; padding: 0 !important; overflow: hidden !important;}
#extratop { background: url('/userdir/1/3/8/5/138525/30031649.gif') no-repeat; width: 840px; height: 315px; }
#side {width: 185px !important; margin-right: 15px !important;}
#page-c {width: 615px !important; padding: 0 !important; margin-left: 25px !important;}
#page-t {margin: 0 !important;}
#extrabottom { background: url('/userdir/1/3/8/5/138525/30029825.gif') no-repeat; width: 840px; height: 29px; float: left;}
Т.е. мягко говоря,считаю всё по пикселям.
Все маргины за исключением маргина меню справа и маргина пейдж-ц от враппера = 0,все паддинги = 0.
Как минимум меньше 600 пикселей на запись нету точно.
невидимость для бэкграундов попрежнему не видна, но закругленные края получились отличненько.
Рёцке как всегда всех спас
а можно сделать Скругленные/сквадраченные/любые края для блока меню? как его в коде на части разделить?