Bassline

Просматриваю портфолио на weblancere так верстальщики с кучей положительных отзывов верстают все на id, position: -450px, табличная верстка, короче жесть полная. Может я себя недооцениваю ? Может пора стучатся ко всем )

Качество и красота верстки мало кого интересует. И не только на фрилансе.

Погуглите, есть много плагинов очень простых, которые преобразуют Title в подсказки....

Человек же попросил:

Огромная просьба не нужно «пулять» в меня ссылками с примерами решения моей проблемы.

В идеале мне надо видеть перед глазами два кода полностью прописанных

http://jsfiddle.net/wtsg3ean/1/

#firstparagraph::first-line - нужно убрать пробел

С кавычками тоже самое.

 

В идеале мне надо видеть перед глазами два кода полностью прописанных

Один мой неверный

Второй наоборот правильный

Нет никакого желания ковыряться в этой не читаемой каше

<DIV.HELP (width:155px;height:86px;background-color:indigo;color:white; border:1px solid #fff;position:absolute;{display:none;Ъсохранить</div>

И тем более что-то там полностью прописывать с различным вариантами.

Оформите вопрос и код по-человечески.

А еще лучше выучите основы, прежде чем начать делать всплывающие подсказки.

Читаю подобные высказывания и тяжко вздыхаю. Опера 10, IE7 с тенями и закруглениями в порядке вещей.

Я руками пишу, автоматом не спортивно.

Ну ты и динозавр.

area { outline: none; }

map area { outline: none; }

map[name] area { outline: none; }

map[name=locks] area { outline: none; }

Может этот вариант подойдет http://learn.javascript.ru/task/zapretite-prokrutku-stranicy ?

Стоит ли работать с сетками для создания сайтов начинающему?

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

Все-таки хочу разобраться с этим до конца.

я бы копал в сторону:

:link, :visited, :hover, :focus, :active

ибо они не индивидуальны, а наследуются. У touch-устройств нет :hover события, скорее всего срабатывает :focus.

Взял чистую, без единого стиля, страницу. Вставил div с текстом и прописал div:hover { text-decoration:underline;}. При тапе по тексту происходит его подчеркивание. Дополнительно прописал для дива div:focus, div:active и т.д. { text-decoration: none}. Все равно при тапе текст подчеркивается.

Как так? У тач устройств же нет такого события...

Или я чего-то не догоняю?

$(' .синий').closest('.главный родитель').find('.красный');

Попробуй javascript bookmarklet.

Зайди на сайт http://dsheiko.github.io/pixel-perfect-bookmarklet/

Перетащи надпись PixelPerfect на панель закладок и будет тебе пиксель перфект. Работает в любом браузере.

Выяснил все-таки в чем дело.

Сервис fontsquirrel.com при конвертации сгенерировал такой код:

Может в шрифтах вообще нет наклонной версии букв? Или в других браузерах всё нормально? 

В IE и Firefox Italic и Light Italic отображаются как положено, причем наклон не самопальный, а тот что и задумали авторы шрифта (сравнивал с макетом и на сайтах где его продают - один в один). А хром и все производные вообще на него не реагируют.

Уже всю голову сломал.

Забудь про теги <br>, используй их только в крайних случаях для разрыва строки в нужном месте. Например:

1. Форма авторизации. Тег input и label можно поместить в блочный элемент div, тогда br не понадобится. Да и вообще тег label там лишний.

2. Блоки с id shape. Тоже самое, используй блочные элементы для первой строки и для остального текста. Плюс первая строчка 100% заголовок, его нужно обернуть в тег h, а не span.

3. Блоки с классом service. Таже беда.

Ну и обязательно прочитай http://htmlforum.ru/index.php?showtopic=47375

Есть набор шрифтов PF Beau Sans Pro. Шрифты лицензионные со всеми делами и подключены по всем канонам.

Разновидности типа Regular, Bold, Light во все браузерах отображаются замечательно. А вот Italic и Light Italic в браузерах на движке webkit никак не хотят заводиться, что латиница, что кириллица.

Инспектор хрома показывает, что шрифт как бы подключен, но на деле текст выглядит как Times New Roman. В IE и Firefox все отлично.

Шрифты изначально были в формате ttf, даже при подключении этих оригинальных файлов хром игнорирует две эти разновидности. Так что конвертация в другие форматы здесь не причем.

Может это косяк самих исходных файлов, возмножно ли такое?

На сайте заголовков гораздо больше, чем ты мог подумать. Заголовок должен быть заголовком, а не пунктом списка или тэгом span.

Контейнеры (например "content-bottom"), внутри которых находятся флоатнутые блоки, имеют свойство схлопываться.

У вас не опускались руки?

Да каждую неделю такое происходит. Настроение ниже плинтуса, в голове мысли типа я ни на что не способен, хочется все бросить и пойти жить в коробке. Такое состояние может длиться от нескольких часов до целого дня. Потом отчаяние сменяется злостью, снова берусь за проблемную задачу, перечитываю статьи, документации, примеры по 5-10-20 раз, пока наконец на разберусь. После настроение снова поднимается и жизнь продолжается.

Хотел, чтобы вёрстка стала моим доходом, но пока не знаю  соответствует ли мой уровень.

Для начала поищи макеты, состоящие минимум из четырех страничек, и желательно, чтобы различий между их содержимым было как можно больше. 

От верстки одиночных страничек толку не сильно много.

Раньше работал только над маленькими сайтами, ну страницы 2-3 максимум.. Сейчас взял проект побольше, 12 страниц. После написания трех, в css уже 2000 строк кода и саблайм начал заметно тормозить.. Особенно это видно при переключении вкладок. Я уже боюсь представить что будет если код возрастет до 6-7 тыс строк.. ноутбук вроде не слабый, core i7, из плагинов только необходимое - emmet, brackets highlighter (который уже перестал работать), css color, autofilename..

У тебя что-то с системой. Вот сейчас у меня открыт css файл на 3400 строк, плюс еще около 15 вкладок с немаленькими html страницами, вообще никаких тормозов. Железо 2008 года. ST2.

@Bassline, обожеж ты мой - на виндовс версии с кнопочками это нереализуемо наверное? 

Почему же, ставишь msysgit http://msysgit.github.io/ и все реализуешь. Мне через консоль проще, нужно выучить около десятка команд и все дела. http://git-scm.com/book/ru/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5

Хотелось бы тоже послушать про гитхаб. Как-то попыталась им пользоваться для контроля версий, отменила изменения, сделала пару правок, а потом захотела вернуть отменные изменения - и никак не получилось этого сделать. Часть данных была утеряна, в том числе вырезанные картинки. Пока живу на архивах и заливке на веб-сервер на случай отказа диска или случайно утери файлов).

http://habrahabr.ru/post/157175/

Jade - препроцессор HTML

Видео с инструкциями (лучше один раз увидеть), смотреть по порядку:

http://www.youtube.com/watch?v=dnL5EpZWdgw

http://www.youtube.com/watch?v=BODV65nTfj8

Приложение, которое отслеживает изменения в файлах jade, less, sass и т.д., и автоматически их компилирует (для тех, кто не дружит с консолью):

http://habrahabr.ru/post/188942/