aaron

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

Не могу понять, как это сделать?

Макет такой:

https://www.dropbox....dio-minimal.psd

И попутный вопрос. Хочу уточнить для себя. Для правильной, грамотной верстки текст на логотипе, центральной картинке - должен оформляться через код. Это касается не только этого макета, но и в общем. Я правильно понимаю?

Отриц. маргин - топор.

Нашел такой online-конвертер - http://www.freefontconverter.com/. Подсунул ему FagoCo.pfb (есть еще pfm, но на этом сервисе он не упоминается в списке поддерживаемых).

Вообще, такие типы шрифтов - pfm, pfa, pfb - впервые вижу. ))

Сконвертировал, предложил Белке - все получилось на выходе. Буду пробовать прикручивать на сайте.

нашел на просторах сети FagoCo в формате ttf. Подсунул Белке - все "съела" без проблем и выдала рабочий набор.

Но вот вопрос остался - есть такой инструмент для конвертации шрифта любого формата в формат ttf?

Здесь также вычитал, что Белка не принимает проприетарные шрифты от MS и Adobe. (

Еще нашел такую штуку - Font2Web. Эта хоть говорит, что ей не нравиться, в отличие от Белки.

И каким образом мне его переконвертировать? В какой формат и каким инструментом? Как ни странно, кроме Белки я никаких других не знаю. ))

Подскажите.

Пытаюсь подсунуть FontSquirrel шрифт FagoCo.pfm.

Но она не хочет его принимать - пишет, что шрифт поврежден.

Это почему и что делать?

Подскажите.

Я новичок в верстке и только осваиваю шаблоны. В сети нашел такой готовый макет - своего рода скелет для будущего шаблона.

http://jsfiddle.net/...tPCz8CJv/66Eh2/

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

Если так, то он мне нравиться больше, чем "классический", с отрицательным margin-top для footer.

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

Это все из-за line-height. Вот только зачем, чтобы прилегало прямо к границе? Текст нормально себя ведет

Ага - уже поковырялся немного, догадался. Сделал вот так:

div#img p span{
vertical-align: top;
line-height: 0.8;
}

Тест в span обернул и написал для него два правила.

Смутило, что в макете текст обтекает картинку и вровень прилегает к верхнему краю ее.

Можно не заморачиваться и оставить как есть? Без этих костылей?

Подскажите пожалуйста - вопрос касается обтекания картинки текстом.

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

Есть такой код (сделал в экспериментальных целях): http://jsfiddle.net/axVA5/

Результат получается такой: http://itmages.ru/image/view/952967/d41d8cd9

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

Сейчас (как видно на скрине), есть промежуток между верхней границей блока и текстом.

Решил проблему, увеличив ширину и высоту блока #logo. Но вопрос для меня все же остался не ясен...

P.S.

С верхним выступом - поборол его. Поставил line-height: 1.2.

А вот с левым выступом... Margin-left или padding-left - проблемы не решает. Подскажите, почему так и что делать?

Поменял высоту строки: http://jsfiddle.net/GVHSoDHREgZotPCz8CJv/brDpr/

(на jsfiddle все работает нормально со стандартным шрифтом)

Теперь получилось вот так - http://itmages.ru/image/view/951442/d41d8cd9

Краешек шрифта все равно выглядывает из блока div#logo. Нужно увеличить высоту строки?

И еще один момент - шрифт выглядывает из блока даже слева! Это почему так? Теперь нужно margin/padding для него устанавливать?

да поскольку оно наследуется

ОК

Можно не устанавливать шрифт в систему, просто согласиться с заменой шрифта, сами параметры останутся такими как их оставил автор, а потом просто нажать esc и шрифт вернется на место

Спасибо! ))

И еще. Свойство line-height нужно указывать каждый раз при изменении размера шрифта? 14px, 18px, 12px, 20px - вне зависимости от величины кегля?

Когда меняешь размер шрифта не забывай и про line-height.

Спасибо за подробный ответ. Про это дело не знал совсем! Просто менял размер шрифта бездумно и с таким столкнулся впервые.

Подскажите еще такой момент. Вопрос новичка, конечно. Хочу прояснить для себя.

Когда открываешь в Photoshop макет и в нем есть нестандартные шрифты. Со стандартными все просто - выбираешь инструмент "Горизонтальный текст" и видишь в рабочей области все параметры шрифта.

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

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

P.S.

Сейчас попробовал - получилось! ))) Вот только у меня все не получается запомнить универсальное правило для шрифта font - там же обязательна строгая последовательность значений. Пишу по старинке - отдельными правилами для каждого свойства. )))

Подскажите.

Имеется такой код - http://jsfiddle.net/...tPCz8CJv/nPk7P/

В результате получается так - http://itmages.ru/im...950657/d41d8cd9

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

http://itmages.ru/im...950653/d41d8cd9

(Впрочем, и на jsFiddle тот же результат получается).

Подскажите, в чем причина? В голову не приходит ничего вообще по этому поводу.

Почему шрифт вылезает? Ведь он должен лежать строго в границах блока div#logo, а тот в свою очередь - в границах блока div#slider. Но в итоге div#logo лежит строго внутри div#slider, а вот текст вылазит даже из блока div#slider?

Кстати, попутно хочу спросить. Я создал блок div#logo, чтобы абсолютно спозиционировать его, как на макете:

https://www.dropbox....9ksny/index.psd

Я правильно поступил - в данном случае лучше всего размещать этот логотип с помощью позиционирования? Или более правильным будет в помощью margin/padding?

Заодно хочу спросить. Правильно ли я свертал навигационную панель? Вроде все работает, но у меня сомнения есть, что все верно мною сделано.

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

а почему так?

Ну потому, что inline-block ведет себя, грубо говоря, как буква в тексте. А у букв есть базовая линия, по которой выстраиваются буквы по-горизонтали, но у некоторых букв есть еще "хвостики" которые рисуются ниже базовой линии, вот именно для этого и отводится отступ.

точно самое, и еще с картинками даже - http://www.xiper.net...-the-block.html

Но там приводится еще способ через vertical-align:top/middle/bottom.

Еще про два других - не понял я их.

Только я сейчас узнал, что если элементу задать float:left/right, то он становиться блочным элементом. )

Получается, если img задать правило float, то картинка из строчно-блочного элемента (inline-block) станет блочным элементом (block) и у нее также пропадет этот отступ снизу?

Сейчас проверил. В консоли Хрома для картинки показано - display: inline-block;

Значит, это вранье, что оно становится блочным?

а почему так?

Ну потому, что inline-block ведет себя, грубо говоря, как буква в тексте. А у букв есть базовая линия, по которой выстраиваются буквы по-горизонтали, но у некоторых букв есть еще "хвостики" которые рисуются ниже базовой линии, вот именно для этого и отводится отступ.

вот теперь понятно. благодарю!

а подскажите еще. при сбросе стилей если писать (у меня так получается):

*{margin:0; padding:0;}

то для списков отступы и поля не сбрасываются?

мне пришлось специально для них писать:

ol,ul{margin:0; padding:0;}

Это всегда так? Опыт у меня совсем маленький верстки, можно сказать - нету его почти. Столкнулся в самостоятельной работе с таким.

Может, чего не заметил в коде своем - не спорю. Но получилось именно так.

Вопрос не в том, что нужно, а что нет. Вопрос из принципа - почему так получается.

задай для img display:block; и не будет отступа http://jsfiddle.net/alexriz/jBKkB/1/

а почему так?

url(../fonts/"A&S Black Swan.ttf");

и

url(../fonts/'A&S Black Swan.ttf');

так пробовал. не помогает.

как это сделать? экранированием? подскажите синтаксис...

название шрифта я же не могу самопроизвольно поменять? он "вшит" в сам шрифт каким-то образом, насколько я понимаю?

Подскажите.

Есть такой код - http://jsfiddle.net/...tPCz8CJv/t3KGP/

Но он почему-то не подключается, не работает в браузере. Почему?

Может, синтаксис неверен?

MyriadPro-Regular работает, все нормально.

Подскажите - не могу понять.

Имеется такой код (упростил для эксперимента, чтобы понять) - http://jsfiddle.net/GVHSoDHREgZotPCz8CJv/jBKkB/

В результате получается такая картина - http://itmages.ru/image/view/946069/d41d8cd9

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

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

Спасибо за видео! Все очень понятно и подробно! Благодарю! ))))

буду разбираться теперь. слайсами очень редко пользуюсь, так как они действительно редко дают то, что нужно. но в этом случае - буду разбираться, как пользоваться ими. еще раз спасибо. ))

да! )) а как сделал, что получилось? фон прозрачный, png?

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