Zverushka

Да я там статью в песочницу написала, но никто чет не хочет мне за нее инвайт кинуть , вот весь день жду уже

Кто-нибудь есть оттуда?

Дааа, я 2 часа в своем файле пыталась убрать отсупы, пока не обнаружила, что граница картинки сливается с фоном и имитирует отступ...

Вот пример: http://jsfiddle.net/Dvp22/ Ни word-spacing, ни letter-spacing не действуют вообще, хотя во многих ресурсах описано именно подобное решение проблемы. Как убрать эти чертовы отступы? Уже жалею, что связалась с Inline-block(. html решениеv воспользоваться не могу - разметка задается из скрипта слайдера, могу только поправить css.

Такой вопрос, если написать тег time с правильным форматом даты внутри, то все ок. <time>1957-10-04</time> Воспримется ли как дата <time>1957/10/04</time> или надо уже добавлять datetime? Да и для кого это? Прежде всего для поисковиков? Думаю они должны распознавать разные форматы даты и времени - что слеш, что тире внутри тега. Иль как?)

Как вычислить отступ между двумя блоками с разными шрифтами? Рассмотрим ситуацию <div><h1>текст</h1></div> <div><p>текст</p></div> h1 { font-size: 18px; line-height: 20px } p { font-size: 11px; line-height: 20px } Алгоритм. Замеряем высоту блока от нижней границы строчной буквы h1 (без всяких хвостиков по базовой линии) до верхней границы строчной буквы p (не включая хвостики). Допустим это 100px. Итоговая настоящая высота между блоками: 100px - 3px (нижнее значение в моей таблице на 18пиксель шрифте) - 1px (половина от разницы между разницой размера шрифта и высотой линии (20-18) - 3px (верхнее значение в моей таблице соответсвующее 11 пкс шрифту) - 5пикселей ( половина от разницы между размером шрифта и высотой линии (20-11) с округлением в большую сторону) Итого 100 -3 - 1 -3 -5 = 88пикселей. Если разница между размером строки и размером шрифта нечетная - то лишний пиксель мы прибавляем для отступа сверху - по моим наблюдениям.

Для Ариал (очень легко делается - хтмл таблица с разными шрифтами, скриншот, а потом в фотошопе пиксели мерить). Arial Goggle chrome Windows 7. Arial Top Bottom 8px 2 1 10px 3 2 12px 3 2 14px 4 2 16px 5 2 18px 5 3 20px 6 3 22px 6 4 24px 6 5 26px 8 4 28px 9 4 30px 9 5 7px 2 1 9px 2 2 11px 3 2 13px 4 2 15px 5 2 17px 5 3 19px 6 3 21px 6 4 23px 6 4 25px 8 4 27px 8 4 29px 10 4 31px 10 5

Все равно все не то, нужна просто таблица для каждого шрифта. Пока достоверно известно, что Arial 18пикселей - 5 верхний вынос, 3 нижний вынос. Если бы знать эти выносы для каждого шрифта - стало бы очень легко верстать. Пока не могу найти таблицы, на крайняк буду составлять свою...

Та же проблема. Вычисляю высоту от одного блока до самой верхней границы заглавной буквы. Допустим 108 пикселей. Размер шрифта 18 пикселей. Замеряю параметры шрифта, вижу, что на самом деле высота 17 и 1пиксель сверху теряется, он невидим. Поэтому уменьшаю разница до 107 пикселей. Вроде все правильно, но, путем наложения прозрачной страницы на макет фотошопа - вижу, что отступ должен быть еще на 1 пиксель меньше. Откуда он берется? Сами буквы один в один - как в фотошопе - одинаковые по высоте. Маргины и паддинги обнулены, границы нет, высота линии равна размеру шрифта. Пока у меня есть формула - от отступа в фотошопе отнять 1 пиксель. Хотелось бы иметь более четкое понимание, куда делся 2й пиксель. Блин, сижу и улыбаюсь. Я поняла). В хтмл тоже высота видимого шрифта 17 пикселей (хоть и указано 18) и при высоте линии 18 пикселей - у нас появляется еще один лишний пиксель сверху и отодвигает шрифт дальше. Поэтому формула - взять отступ и отнять 2 пикселя . Сейчас верстка пойдет быстрее, а то полчаса сижу и проставляю циферки, чтобы аккуратно все стало), терь точно знаю, что ставить.

Во, на хабре получается списки с заголовком. Если мы хотим сделать список меню с заголовком, типа (разделы и перечисление). то нужно применять dl. А c ul li получается неудобно сделать?

Перерыла много инфы по этим спискам, но она минимальна. На одном сайте наткнулась о проблемах отображения в опере, что ссылка в DD некликабельна и прочее. В общем гемморой. Хотела глянуть на яндексе как реализовано, но внезапно обнаружила новую 12ю версию яндекса, где их уже не было . У меня на сайте есть 4 блока, все они Featured Services. Представляет из себя картинаку слева, заголовок (термин) и внизу краткое описание - по сути определение. Только вот, чтобы сделать такой блок, мне надо запихнуть внутрь DL лишние дивы, сделать ссылки... А можно ли? Ответа на w3.org я не нашла... Получается, если использовать списки я получу следующий код: <dl class="featured_services"> <div class="block left"> <img src="" class="left"> <dt><a href="">Featured Service</a></dt> <dd>Vestibulum sit amet neque eu neque suscipit consequat</dd> </div> <!-- повторение блоков --> </dl> Но думаю - а стоит ли овчинка выделки? Облазила крупные сайты типа гугла, яхуу и прочее - у них сплошные дивы, они даже не пытаются морочиться - дивы и дивы.

ХТМЛ5 позволяет совершать много ошибок и неточностей и отображает страницу корректно, можно не указазывать тип скипта (джава скрипт), не ставить кавычки итд, но поймут ли старые бразуеры это, которые не знают еще стандартов хтмл5? Стоит ли для них ставить четко кавычки, указывать что - джава скрипт, указывать дополнительные параметры в кодировке итп?

По-моему можно просто сделать вот так без всяких фикседов: #fixed { background-color: #f60; width: 100%; min-height: 100%; // при обычном хейте текст просто обрежется в примере выше overflow: auto; } отступ в 50 пикселей по-моему так, если нужен фиксированный всегда поверх экрана - то фикседом привязать, а если только при прокрутке вниз. можно внутрь основного дива вложить еще один ну и сделать одному из слоев или маргин или паддинг.

А разве в хтмл5 не позволяется засунуть в ссылку что угодно?

Я это понимаю. Но с таким же успехом можно писать <div style="float:left"> Отличие в одном слове - действие тоже. Но тогда получается стиль встраивается непосредственно в разметку... Если ты захочешь, чтобы колонка была справа, то придеться лезть не в стиль, а в хтмл код и рыться в нем. Не будешь же править на.left {float: right}.

Смотрю примеры верстки на одном обучающем сайте. Автор там применяет часто следующий ход. Добавляет классы через пробел. Например, у него есть классы .left { float: left; } .overflow { overflow: hidden } И он через пробел добавляет в классы нужных тегов. Но по-моему это аналогично тому, как в самом хтмл коде написать style="float:left". Ведь если мы захотим, чтобы этот блок был справа - нам придеться лезть в хтмл, а не таблицы стилей, и править код там, что нарушает основной принцип верстки - разделения логической разметки от стилей.

Спасибо, ваш совет очень помог. Поставила везде 10% прозрачность. Но вообще загадка, почему изначально все не так как надо работает.

Простите великодушно, что опять спрашиваю. Но я не могу вырезать нормально форму. Вот дублирую я текстовую форму с этого шаблона на новый слой. Там тень и все к слою применены. Копирую вместе с этой тенью (на пиксель больше по бокам), сохраняю в png, вставляю в страницу с таким же задним фоном, как в макете и вместо прозрачной полосы тени - там ярко-белая обводка права и снизу. И я не пойму, как скопировать так, чтобы в итоге получилось как в макете?

А что делать со слоем, к которому применен некий фильтр, вроде тени (выступает за границы на пару пикселей? Если выделяешь слой и копируешь - то тень остается за слоем и получается можно выделить нужную картинку только вручную.

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

Здраствуйте. Уже не первый раз бьюсь с подобной проблемой. Как у этого макета http://divhack.com/downloads/study/6/6.psd вырезать верхний широкий хедер (выполненный разноцветными разводами), который состоит из двух слоев. Если первый прозрачный слой с разводами я еще могу скопировать в новый документ, то от второго (темного) копируется лишь маленькая рамка (50 пикселей) вместо 1200. А выделенные вместе они вообще не копируются. Их можно скопировать через шифт+с, предварительно убрав все остальные лишние слои сверху (а это долго и муторно). Может есть способ проще? Как скопировать более быстрым способом?

Что значит через спрайты?

Ауу, что посоветуете? Там же внизу в футере есть ряд иконок социальных сетей, тоже в список засунуты. Это логично засунуть их в список (по идее список ссылок на сети). Или это лишнее, просто через ряд ссылок перечислить?

Скорее вот это: http://rutracker.org...c.php?t=3608425 Надеюсь на этом сайте можно давать такие ссылки, если нет, то заранее извиняюсь). В отличии от многих книг, в ней в конце верстается настоящий сайт и рассказывается пошагово, как это делается из шаблона, что нужно сделать в фотошопе для этого - а это очень важно! И нельзя изучить хтмл5, не изучив паралельно хтмл4. В этой книге он изучается, а в конце хтмл5 рассматривается и в том числе и на нем делается сайт. Лоусона и Шарпа - не рекомендую для новичка. Там уже для продвинутых верстальщиков, которые хтмл5 осваивают и не просто, а углубленно. Хотя первая половина неплоха - очень подробно объясняется отличите артиклов от секшинов. Я сначала прочитала Мержевича, потом лоусона, потом попыталась Дронова (поняла, что муть), потом через пару месяцев перечитала Мержевича (до этой книги почему-то думала, что что-то знаю о хтмл и цсс).

Самая лучшая книга Мержевич - верстка веб-страниц 2011 год. До сих пор восхищаюсь. Дронова - в топку.