Так что да, мы сейчас достигли точки, когда мы беспокоимся об эффективной реализации таких вещей, как 3d-преобразования в CSS, насколько это круто? Без сомнения, захватывающие времена, но можно было бы предположить, что это означает, что все основы визуального макета уже будут рассмотрены. Ну … нет, ни в малейшей степени. Итак, давайте взглянем на одну из самых основных проблем, которая все еще существует в современной веб-разработке, и попробуем найти способы обойти ее.
кто твой король?
Содержание король, какое прекрасное клише. Несмотря на то, что это то, что мы проповедуем всем, кто входит в удивительный мир веб-дизайна / веб-разработки, то, как развивается наша профессия, едва ли соответствует этому краеугольному камню наших убеждений. Когда дело доходит до основного контента сайта, мы по-прежнему позволяем клиентам возиться с многофункциональными текстовыми редакторами, пока каждое понятие семантической достоверности и разделения контента и стиля не будет разбито на куски. Забавно, что CMS имеют довольно жесткий контроль над всем, что не связано с основным содержимым страницы, но терпят неудачу, когда дело доходит до того, что важнее всего.
Мало того, что css все еще недостаточно подготовлен для того, чтобы иметь дело с очень распространенными случаями размещения нашего основного контента, по крайней мере, если вы заботитесь о структурной достоверности в html. Большинство проектов выполнимо, если вы начнете играть с логическим порядком элементов, пока не сможете подобрать дизайн, но, глядя на получившийся исходный код, зачастую очень мало чем гордиться. И одно из самых раздражающих дизайнерских препятствий играет между заголовком и изображением блока контента. Позволь мне объяснить.
заголовок первый htmling
Чтобы сделать основной контент немного более привлекательным, мы часто вводим несколько полу-декоративных изображений в наши текстовые блоки. Конечно, эти изображения в некоторой степени связаны с содержанием, но они также выполняют четкую декоративную функцию. Некоторые изображения перемещаются влево, другие перемещаются вправо, чтобы создать более захватывающую динамику макета. Это все хорошо, пока мы не добавим несколько заголовков, ожидая, что наши заголовки будут соответствовать тексту.
Конечно, это может быть только я, но, как HTML-парень, я верю, что независимо от того, какой контент вы начинаете, вы всегда начинаете с заголовка. Функция заголовка состоит в том, чтобы вводить контент, следующий за заголовком, поэтому, естественно, он должен быть помещен первым в контент. Это главная проблема для CSS, потому что для того, чтобы использовать плавающие элементы так, как они были задуманы, плавающий элемент должен появляться первым в источнике. Скажем, мы хотим, чтобы плавающее изображение с заголовком и текстом появлялось рядом с ним, мы должны поместить изображение первым в источнике. Тьфу.
Еще один популярный пример (в основном связанный с типами контента — ознакомьтесь с блоками продуктов на amazon.com ) — это визуально поместить изображение над заголовком. К счастью, это представляет меньшую проблему, так как эти экземпляры изображений (почти) всегда равны по высоте, поэтому некоторая абсолютная магия положения делает свое дело здесь. Очевидно, что amazon.com на самом деле не заботится о логическом порядке, хотя, похоже, они даже не заботятся о семантике, поскольку в поле зрения нет даже заголовка.
Так что же можно сделать?
.wrapper {position:relative; padding-left:Xpx;}
.wrapper.noImg {padding-left:0;}
.wrapper img {position:absolute; left:0; top:0; }
Если текст не должен обтекать изображение, и вы можете безопасно оценить максимальную высоту каждого отдельного блока, абсолютный трюк позиции — ваш лучший выбор. Это не очень гибко, и вы не жили как csser, если такая реализация не возвращалась хотя бы один раз с замечанием «но что, если нет изображения» . Бэкэнд-разработчики, вероятно, ненавидят меня за это, но когда нет изображения, это решение требует дополнительного класса для оболочки. Ясно, что это не идеальное решение, но в некоторых случаях оно помогает.
.wrapper h1 {margin-left:Xpx;}
.wrapper img {float:left; margin-top:-Xpx}
Теперь, предполагая, что вы поместили свое изображение между заголовком и текстом, есть другое полу-работоспособное решение. Просто укажите поле для заголовка, поместите изображение и потяните изображение вверх с отрицательным полем. Это взорвется на вашем лице, если ширина изображения изменится или заголовок переместится на вторую строку, но в некоторых случаях это определенно стоит азартной игры.
И это примерно так же далеко, как я, по крайней мере, если вы решите поставить свой заголовок первым. Конечно, большинство людей не заботятся об этом, и они просто помещают изображение на первое место, плавают в нем и видят, как дизайн адаптируется, как это было предписано, но есть такая небольшая интересная проблема с этим способом работы, особенно при работе с форматированным текстом. редактора.
структура я вам говорю!
Когда я пишу HTML-код, я всегда предоставляю обертку вокруг заголовка + p + img + ul +, независимо от других элементов, составляющих логическую единицу текста. Когда есть вложенные текстовые блоки, я удостоверяюсь, что они структурно вложены как один блок в родительский текстовый контейнер. Насколько я знаю, нет хорошего способа сделать это с помощью текстовых редакторов (если вы не используете редактор wysiwym), и технически это можно считать излишним. В конце концов, логическая единица текста может быть описана как hX ~ hX (все элементы между двумя заголовками одного уровня.
Если вы хотите, чтобы ваш заголовок отображался рядом с плавающим изображением, вам нужно поместить свое изображение перед заголовком. Учитывая приведенное выше правило, это означает, что изображение будет отображаться как часть предыдущей текстовой единицы, а не фактической текстовой единицы, которой оно также принадлежит. Очевидно, что структурная ошибка не может быть обнаружена, поскольку она полностью зависит от контекста и стиля изображения. Визуально это может выглядеть хорошо, но структурно вы создаете один большой беспорядок.
вывод
Короче? Нет хорошего способа заставить изображение появиться рядом с заголовком + текст. И это довольно печальное наблюдение, это быть 2012 и все. Есть несколько менее предпочтительных способов обойти эту проблему, но ни один из них не выглядит очень привлекательным для меня. Если я что-то здесь упустил, пожалуйста, дайте мне знать.
Итак, можем ли мы действительно сказать, что контент является королем, когда мы так мало контролируем основной контент наших сайтов? Возможно, это нужно исправить, прежде чем мы собираемся поместить весь наш контент в трехмерные пространства.
Источник: http://www.onderhond.com/blog/work/content-layout-issues-headings-images