-
Домашка №1: результаты
Из 27 присланных работ результаты разделились следующим образом:
- Холодно — 18
- Тепло — 7
- Горячо — 2
В «Холодно» автоматически отправились все работы, где логотип находился между первым и вторым пунктом меню в HTML. Во-первых, это слишком просто и не интересно. Во-вторых — как правильно и своевременно заметил DeMx — такую конструкцию достаточно сложно сгенерировать на стороне сервера. Дело в том, что далеко не каждая CMS позволяет настолько легко вмешаться в генерацию стандартных компонентов. То есть упрощая себе работу на клиенте, сильно усложняем ее на сервере. Более того, в этом случае происходит смешивание данных и представления, а это вряд ли закончится чем-то хорошим. И если в контексте меню с логотипом особых проблем не видно, то в других ситуациях, когда дело будет касаться, например, контента и бокового меню — проблемы точно возникнут, в основном со стороны администрирования простым пользователем.
Соответственно, правильным решением было отделить меню от логотипа, что и сделали другие 7 участников. Практически все они поступили одинаково: сместили первый пункт влево с помощью
right: 100%; margin-right: 5%, тем самым выполнив условие с одинаковым расстоянием между пунктами меню. Однако засыпались на условии соблюдения выравнивания логотипа по базовой линии. Большинство «на глаз» подобрало значение смещения в em’ах, однако это не дает точного результата на разных ОС и при произвольном размере шрифта.Но два горячих парня — Ante и scorpix — решили поступить немного иначе. Правильно решив, что высокая картинка будет ровно стоять только на сплошной текстовой строке, они сделали все элементы инлайновыми. Scorpix просто написал все span’ами, а вот Ante сделал красивую и логичную HTML-конструкцию (которая совсем не понравилась IE и Fx2), превратив элементы в инлайн-блоки. Он и получает приз чикуёнковской симпатии.
Я в своем решении поступил точно так же, как и ребята из категории «Тепло» — сместил первый пункт меню с помощью
right: 100%; margin-right: 5%, разместив логотип абсолютом поверх меню. До первого пункта меню можно добраться двумя способами: через селектор:first-childи одноразовый expression для IE, либо указав этому элементу особый класс (что я и сделал). Естественно, я столкнулся с проблемой выравнивания логотипа по базовой линии. Можно было просто указать приблизительное смещение элемента в em’ах, чтобы выровнять логотип по тексту, а все нестыковки при изменении размера шрифта назвать придирками. Но если вы хотите заставить вашего дизайнера биться в экстазе, я покажу вам простой трюк, который позволит точно выровнять логотип по тексту.Так как логотип у нас находится в блоке и абсолютно спозиционирован, он никак не связан с текстом меню. Вы должны были заметить одну особенность: если достаточно высокую картинку разместить где-нибудь в середине текста, то она раздвинет строку по своей высоте.
Это не совсем то, что нам нужно: размер строки должен зависеть только от размера шрифта. Поэтому мы просто избавляемся от влиния высоты элемента с помощью отрицательного марджина (в качестве значения указываем высоту картинки):
Осталось, чтобы в нашем блоке с логотипом (он абсолютно спозиционирован, помните?) появилась полноценная строка. Для этого достаточно просто поставить пробел после картинки 🙂 Смотрим, что получилось в итоге.
Скоро будет второе задание, на этот раз создадим что-нибудь полезное для общества.
28 комментариев
Победителя угадал 😉
Делал бы так-же.
Всё-таки Анте сделал более качественный вариант в плане вёрстки, как по мне 😉
Ждём следующий квиз!
Так уж принято стало в одной малоизвестной Студии, что навигация делается из инлайн-элементов для более комфортного просмотра сайта без стилей. Инлайн-элементы будут занимать меньше пространства, не придется прокручивать страницу до «наступления» контента.
Условия: «навигация делается из инлайн-элементов» не было 😉
А на счёт комфорта, я бы не сказал, здесь на вкус и цвет… Да и кто смотрит сайты без стилей? КССнейкедДей?
Странное требование — более комфортный просмотр при отключенных стилях. Ну а по поводу прокручивания страницы до наступления контента — кто мешает в HTML разместить меню после контента и с помощью CSS поставить в нужное место?
> Да и кто смотрит сайты без стилей?
Люди без айфонов.
Один человек, у которого я интенсивно учился около полугода, говорил: неважно, табличная или дивная верстка на сайте. Главное — удобство пользователей.
Спаны вместо элементов списка никак не влияют на читаемость кода, или вставку флэша, или анимацию. Они ни чем не хуже.
Блок навигации должен выполнять функцию перемещения по страницам сайта. Он присутствует почти на каждой странице. Нет правил, что это должен быть список. А вот пользователю, которому приспичило посмотреть контактную информацию с телефона с разрешением экрана 320×240, будет очень неудобно каждый раз при загрузке страницы прокручивать логотип, навигацию и что-нибудь еще для того, чтобы добраться до контента.
Не так много сайтов имеют версию для мобильных устройств.
> кто мешает в HTML разместить меню после контента
> и с помощью CSS поставить в нужное место?
И как часто это делает Сергей Чикуёнок? 😉
Он делает это тогда, когда требуется 🙂 Создание полноценной версии для мобильника — это не просто один раз сверстать, это еще и контент нужно поддерживать в нужном состоянии.
Скорпикс прав. Я использую оперу-мини на своем к530 эриксоне и навигацию списком приходится листать всегда. А инлайновая занимает обычно две строчки.
А опера мини CSS-конструкцию вроде
li { display: inline }не понимает?Понимает.
http://vadim.kag.su/sch/opera/
http://vadim.kag.su/sch/opera/opera-mini-screenshot.jpg
Кстати, это совсем не так. На читаемость как раз очень сильно влияет. Так как
<span>— инлайновый элемент, то поисковики не будут обращать внимания на границы элементов. Соответственно, конструкция<span>Компания</span><span>Новости</span><span>Продукция</span>проиндексируется как «КомпанияНовостиПродукция», а не «Компания Новости Продукция» (что вполне логично). Соответственно, нужно либо не забыть ставить пробелы между пунктами, либо сверстать сами пункты блочными элементами.Ясное дело, пробельные символы должны быть. И они у меня там есть.
Только навигацию, вроде, в noindex суют.
зачем? что бы робот по меню не бегал и сидел на главной странице? или как? :)))
ноиндекс зло, рел=»ноуфоллов»
А в чем принципиальная разница для сервера между тем, чтобы поставить класс first-child первому элементу и тем, чтобы воткнуть логотип во второй элемент?
А если перед логотипом еще пару пунктов надо будет воткнуть? Еще и цсс править придется?
зачем? что бы робот по меню не бегал и сидел на главной странице? или как? :)))
ноиндекс зло, рел=”ноуфоллов”
ноиндекс ставится внутри ссылок, поэтому роботы будут ходить по ссылкам.
а ставят чтобы в анонсе в результатах поиска страницы не было такого: «Новости Партнеры Контакты», а нормальный текст.
2deerua: делается вот так:
<a href="/company/"><noindex>Компания</noindex></a>. Таким образом, поисковик пройдет по ссылки, но не проиндексирует текст. Это особенно важно, если на сайте используется локальный поисковик типа Яндекс.Сервер или MnoGoSearch: тогда при поиске слова «Компания Газпром» пользователь не увидит 1000 страниц только потому, что везде в меню это слово встречается.2kvakazyambra: разница в том, что гораздо проще поменять шаблон вывода стандартных блоков, чем вкрячивать туда дополнительную логику по вставке между пунктами логотипа. Да и класс указывать необязательно, так как можно достучаться до элемента через селектор :first-child + использовать одноразовый expression для IE.
2Сергей: вот это изврат, фу-фу… конечно в бою всё приемлемо, нооо … как-же чувство прекрасного?
и какже «ссылки после текста… лалала… разместить с помощью цсс»?
Изврат с точки зрения кого: 10 000 человек, которые что-то ищут на сайте, или одного разработчика, который этот сайт когда-то сделал? И, все-таки, чувство прекрасного — это одно, а хорошо работающий проект — это другое. Я не предлагаю разводить помойку в коде, но нужно знать меру, чтобы «чувство прекрасного» не начало наносить ущерб удобству конечного пользователя.
>как правильно и своевременно заметил — такую конструкцию достаточно сложно сгенерировать на стороне сервера
вставить логотип после первого пункта меню? это не сложнее вставки класса .first для первого элемента списка.
>То есть упрощая себе работу на клиенте, сильно усложняем ее на сервере
я бы не сказал, что прям таки >сильноесли в контексте меню с логотипом особых проблем не видно, то в других ситуациях, когда дело будет касаться, например, контента и бокового меню — проблемы точно возникнут
не возникнут — добавляем для второго элемента списка класс #logo, после чего мы можем исключить его в любом месте, к примеру, в боковом меню — .sidebar #logo { display: none; }.
для меня осталось загадкой возможность практического применения вставки пробела после картинки — с этого «трюка» мы ничего не получим. Изменится размер шрифта в меню или размер логотипа — придется подгонять отступы. Кроме этого, ваше решение имеет еще несколько существенных недостатков:
— текст первого пункта растягивается в левую сторону, это хорошо, когда логотип всегда должен быть на одном месте, и неприемлимо, когда отступ слева создает сетку — мы ее попросту нарушим. Решение совсем не годится, в случае, если отступа слева нет — его придется подбирать на глаз, команда поддержки сайта будет вынуждена постоянно вносить правки в css.
— в случае текста в две строки логотип и все остальные пункты меню останутся висеть на уровне первой строки, фактически, никакого вертикального выравнивания в вашем коде нет.
— размер картинки в вашем примере — 1 234б, ее можно сжать 🙂
расчитывал на более элегантное решение, а получил обыденные флоаты да абсолюты, скучно 🙂
и да, размещение логотипа после первого пункта меню — сомнительный дизайнерский ход.
дубль 2, парсер сломал предыдущее сообщение.
>как правильно и своевременно заметил — такую конструкцию достаточно сложно сгенерировать на стороне сервера
вставить логотип после первого пункта меню? это не сложнее вставки класса .first для первого элемента списка.
>То есть упрощая себе работу на клиенте, сильно усложняем ее на сервере
я бы не сказал, что прям таки сильно, во многих шаблонизаторах это стандартные функции. Также, этот вопрос легко решается через javascript.
>если в контексте меню с логотипом особых проблем не видно, то в других ситуациях, когда дело будет касаться, например, контента и бокового меню — проблемы точно возникнут
не возникнут — добавляем для второго элемента списка класс #logo, после чего мы можем исключить его в любом месте, к примеру, в боковом меню — .sidebar #logo { display: none; }.
для меня осталось загадкой возможность практического применения вставки пробела после картинки — с этого «трюка» мы ничего не получим. Изменится размер шрифта в меню или размер логотипа — придется подгонять отступы. Кроме этого, ваше решение имеет еще несколько существенных недостатков:
— текст первого пункта растягивается в левую сторону, это хорошо, когда логотип всегда должен быть на одном месте, и неприемлимо, когда отступ слева создает сетку — мы ее попросту нарушим. Решение совсем не годится, в случае, если отступа слева нет — его придется подбирать на глаз, команда поддержки сайта будет вынуждена постоянно вносить правки в css.
— в случае текста в две строки логотип и все остальные пункты меню останутся висеть на уровне первой строки, фактически, никакого вертикального выравнивания в вашем коде нет.
— размер картинки в вашем примере — 1 234б, ее можно сжать 🙂
расчитывал на более элегантное решение, а получил обыденные флоаты да абсолюты, скучно 🙂
и да, размещение логотипа после первого пункта меню — сомнительный дизайнерский ход.
Вы отвечаете за все существующие CMS? Да и кто сказал, что этот класс вставлять обязательно?
вообще-то речь шла про боковое меню и контент, при чем тут #logo?
Мы получаем выравнивание картинки по базовой линии с точностью до пикселя.
Можете пример привести? Только сначала обратите внимание, у какого именно блока указана гарнитура и размер шрифта.
Скажем так: в шаблоне, который я верстаю и из которого родилась эта задача, выравнивание идет именно по логотипу. Поэтому я в условии написал, что слева очень много места. Да и для решения задачи это не критично.
Правда? А если немного подумать? Кстати: среди присланных вариантов есть и решение, которое работает даже при нулевом отступе слева.
Не понял, о чем вы? Откуда в условии решаемой задачи появилось две строки? И о каком отсутствующем вертикальном выравнивании идет речь? Можете дать пример?
Странно, и почему из 27 присланных работ со всеми условиями справились только 2 человека? И те не флоатами сделали.
Это решать дизайнеру и клиенту, а не кодеру.
И если внимательно прочитаете условие задачи, то увидите, что требование было не «сверстайте вот этот макет», а «решите такую-то проблему, абстрагировавшись от макета».
Поддерживаю, на счёт флуда.
Едгар Гаровски, Вы сами предложили 4 одних и тех же решения, с теми же флоатами, да ещё и с кодировкой натупили. Ваши претензии, не более чем пук в кастрюлю.
>Вы отвечаете за все существующие CMS? Да и кто сказал, что этот класс вставлять обязательно?
в очень многих CMS сделать это относительно просто. Речь шла именно про класс, в большинстве случаев нет разницы, вставлять ли его в первый или второй элемент списка. Обязательность вставки — это уже другой вопрос.
>Мы получаем выравнивание картинки по базовой линии с точностью до пикселя.
решение в самом деле интересное, и было бы прекрасно, если бы оно работало с точностью до пикселя.
>Да и для решения задачи это не критично
для решения задачи именно этот пункт крайне критичен — «выравнивание идет по логотипу».
>Правда? А если немного подумать?
имелось ввиду ваше решение. И не стоит так нервничать, берегите нервы =)
>Откуда в условии решаемой задачи появилось две строки?
это я уже сам додумал.
>Странно, и почему из 27 присланных работ со всеми условиями справились только 2 человека?
наверное, не все правильно поняли суть задачи.
>И те не флоатами сделали.
у ante флоаты есть.
>решать дизайнеру и клиенту, а не кодеру.
это правильно, согласен.
>решите такую-то проблему, абстрагировавшись от макета
честно говоря, в тот день прочитал ваше сообщение поверхностно, сверстал первое, что пришло в голову, и отправил вам. И все-таки, я считаю, что вариант с инлайн-блоками имеет право не существование.
>Вы сами предложили 4 одних и тех же решения, с теми же флоатами, да ещё и с кодировкой натупили.
там инлайн-блоки, а с кодировкой проблемы не у меня — отправил в win1251, а сервер выдает utf-8.
>Ваши претензии, не более чем пук в кастрюлю.
это были не претензии, а здоровая критика. По поводу «пуканья в кастрюлю» — вы наверное фанаете от таких действий, но я к сожалению такими вещами не занимаюсь, прошу меня оградить 🙂
Я понимаю, что тут собрались увлеченные своим делом, но давайте будем немного сдержаннее. Не будем опускаться до оскорблений в адрес других. Все-таки мы разработчики, а не базарные бабы.
Действительно, уже начинается переливания воды из одного сосуда в другой.
Сергей, большое спасибо за «домашку», хотя я участия не принимал, но было интересно наблюдать и анализировать различные решения поставленной задачи. Надеюсь таких задач будет больше.
Спасибо еще раз, ждем следующей.
Это круто!
deerua полный неадекват )