Помогите вырезать значок из макета

[aaron]

Есть такой макет - https://www.dropbox....9ksny/index.psd

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

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

И точно также дело обстоит с центральной картинкой.

До этого в Photoshop с таким не сталкивался, не знаю, что делать.

Edited March 18, 2013 by aaron

[aaron]

P.S.

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

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

[aaron]

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

[aaron]

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

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

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

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

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

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

[lexxcode]

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

[aaron]

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

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

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

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

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

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

Edited March 24, 2013 by aaron