aaron

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

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

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

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

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

top и bottom не ужимают, а скорее растягивают, так как мы не указали высоту.

Понятно. )

Можно прибегнуть к помощи псевдоэлементов.

Например так http://jsfiddle.net/sensei/C9Leb/

Классно! Работает ))

Только, насколько я понимаю, с таким методом будут проблемы по части кроссбраузерности?

И вопрос.

Правильно ли я понял этот код:

div:after { ... }

После блока создается псевдоблок с абсолютным позиционированием, для которого устанавливаются координаты left,top,bottom (благодаря двум последним он "ужимается") и для этого блока создается только левая граница border-left со свойствами?

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

Для простого блока ставил специально outline и смотрел, куда перемещается псевдоблок...

Можно попробовать сделать через box-shadow, но это плохой вариант (

Мне тоже так кажется (

А ничего другого и не надо, это бордерами и делается.

У меня затруднение в другом. На макете видно, что линия короче, чем будущий бокс. Поэтому и задал вопрос.

border-bottom:width,style,color;

И все...

Или сделать линию, как на макете, не получиться? Только на всю ширину/высоту будущего бокса с постом?

Для этой части макета сделал такую разметку:

http://jsfiddle.net/GVHSoDHREgZotPCz8CJv/CHCjE/

Приемлем, если не требуется попиксельной точности во всех браузерах.

Спасибо!

Подскажите, как можно создать в шаблоне такие линии. Кроме border-right и border-bottom мне ничего в голову не приходит.

http://savepic.su/2342060.htm

Если нужно до пикселя выверять положение маркеров, то list-style: none, а маркеры ставить фоновыми картинками внутри левого паддинга.

Да, как-то выскочило у меня из головы про такой способ. (

Но первый способ приемлем?

Здравствуйте.

Подскажите, пожалуйста.

Правильно ли я рассчитал значения margin-left и padding-left на psd-макете?

Крайние линии установил по границам объектов. Среднюю линию установил "на глаз", посередине между маркерами и текстом списка.

http://savepic.su/2329770.htm

Дело в том, что для меня было "неожиданностью", как рассчитываются margin-left и padding-left для списков.

Первоначально хотел вычислить эти два значения на макете следующим образом:

http://savepic.su/2330794.htm

Но потом Firebug помог определить, что установка margin-left и padding-left для списков производится совсем не так, как я себе это представлял. На деле это выглядит так:

http://savepic.su/2318506.htm

Мне кажется, что-то не так вычислил или представляю себе. Или все верно? Что-то я совсем запутался...

И еще вопрос.

Если для списка установлено:

ul {list-style-position:inside}

Тогда невозможно изменить расстояние между маркерами и текстом списка, к примеру, с помощью того же padding-left? Или это можно сделать с помощью каких-либо псевдоэлементов?

Лучше наверное сделать через background к <a> или к <li>, а то старые ослики могут не отобразить псевдоэлементы.

Я тоже думал о поддержке старых осликов, поэтому и спросил.

Спасибо!

http://uroki-photoshop.com/view.php?rub=18&id=878

Спасибо!

Хорошая статья. Просто и доступно.

Такой логотип, как мне кажется, невозможно сделать средствами CSS.

http://savepic.su/2325834.htm

Его проще вырезать с прозрачным фоном и сохраненной тенью.

Я правильно думаю?

А если фон отключить как сейчас, потом сделать тримминг, останется этот маркер, потом сделать фон видимым.

Получилось! ))) Сделал тримминг, потом снова Alt+ЛКМ.

Только объясните хотя бы в двух словах, почему так получилось. Чтобы я имел представление, как поступать в будущем, если такое тоже "подвернется". )

Подскажите, пожалуйста.

Есть такая навигация:

http://savepic.su/2353483.htm

Вопрос касается только этих кнопочек. Как мне их правильно расположить?

Через ul lu a:after {content: ...} ?

Там вверху над слоями написано "Перекрытие", наверное из-за этого.

Да, верно. Стоит - "Перекрытие". И что мне делать, чтобы получить нужный bullet?

Подскажите новичку.

Имеется bullet на макете:

http://savepic.su/2315570.htm

И картинка слоев:

http://savepic.su/2309426.htm

Отключаю все слои, кроме указанного (Alt+ЛКМ):

http://savepic.su/2358581.htm

И вижу такую картину:

http://savepic.su/2350389.htm

Почему bullet становится синим? Мне совсем непонятно...

Да. Ты просто поставил плагин RDS. Настрой его и будет тебе счастье.

не понял ответа совсем ))

Все правильно говорит. Скорее всего из-за какого расширения или плагина, что ты поставил. Вот это ставил?

https://chrome.google.com/webstore/detail/jlipcaflaocihnmlhnhcfombgmmfglho?utm_source=chrome-ntp-icon

понял теперь )) да, ставил на firefox. сейчас проверил одну и ту же ссылку на хроме и лисе. на хроме не зачеркнутые, на лисе зачеркнутые.

а почему так - RDS делает их зачеркнутыми? для чего?

вот здесь говорилось о классах и id - ссылка

Да. Ты просто поставил плагин RDS. Настрой его и будет тебе счастье.

не понял ответа совсем ))

Вопрос несколько не в тему.

Подскажите, а с чего это с совсем недавнего времени буквально на всех сайтах в Интернете ссылки стали выполняться в виде зачеркивания? Это как-то связано с SEO?

Подскажите, пожалуйста, еще.

Имеется такая навигация:

http://savepic.su/2269051.htm

Можно ли создать указанный на макете эффект при hover средствами css? Если можно, то где почитать, как это сделать?

Если невозможно с помощью css, то как тогда можно?

У вас в slider зафлоченные элементы есть, поэтому блок надо вернуть в общий поток

В готовых кодах, которые пробовал разбирать, встречал это правило:

overflow: hidden;

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

В частности, применительно к данному случаю?

Точнее - значение этого правила я знаю. Но вот оно имеет какой-то побочный эффект дополнительно, о котором почти представления не имею.

Оно похоже на clear:both(left,right) в данном случае, как мне кажется.

Я правильно выразился?

Подскажите - не пойму, почему так.

Не пойму, почему блок с контейнером наползает на блок со слайдером. Или мне так кажется? Но тем не менее, в Firebug показывается, что один находится под другим.

Вот код:

http://jsfiddle.net/GVHSoDHREgZotPCz8CJv/EkMPv/

Я делаю так: нажимаю на латинскую клавишу "T" и щелкаю по блоку с текстм, если нужно выбрать другой текст нажимаю клавишу "ESC" и щёлкаю по нему (другому тексту).

Сейчас попробовал - да, это уже гораздо лучше! Удобнее и быстрее.

Спасибо!

Здравствуйте.

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

Уверен, что делаю не правильно. Подскажите, как правильно работать?

Кажется, не совсем ясно выразил свою мысль, поэтому сделал маленькое видео, показывающее мои "мучения":

http://zalil.ru/33654733