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

Ага - уже поковырялся немного, догадался. Сделал вот так: 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 для него устанавливать? ОК

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

Спасибо за подробный ответ. Про это дело не знал совсем! Просто менял размер шрифта бездумно и с таким столкнулся впервые. Подскажите еще такой момент. Вопрос новичка, конечно. Хочу прояснить для себя. Когда открываешь в 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;} Это всегда так? Опыт у меня совсем маленький верстки, можно сказать - нету его почти. Столкнулся в самостоятельной работе с таким. Может, чего не заметил в коде своем - не спорю. Но получилось именно так.

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

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