Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Назад к разметке

Назад к разметке

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

Назад к разметке

Вполне подходящее изображение робота, использованное с любезного согласия Джереми Ноубла

Помните тот маленький блок для цитаты blockquote, так удобно вписавшийся в нашу статью? У нас и так уже слишком много текста, давайте заменим его на изображение:

<div class=»figure»>

 <p>

<img src=»robot.jpg» alt=»» />

<b class=»figcaption»>Lo, the robot walks</b>

</p>

</div>

Ничего особенного: элемент img, за которым следует короткая, но информативная надпись, заключенная в элемент Ь. Фактически в этом отрезке я использовал теги figure/ figcaption из HTML5 в качестве названий классов, что способствует созданию крепкой семантической основы.

(Внимательные читатели могут заметить, что я использовал элемент Ь, а это несемантический прием. Некоторые дизайнеры в этом случае используют текстовый элемент span.

Что касается меня, то в несемантической разметке мне импонирует лаконичность таких коротких тегов, как b и i.) С HTML закончили, давайте перейдем к CSS:

.figure {

float: right; margin-bottom: 0.5em;

margin-left: 2.53164557%;/* 12px / 474px */

width: 48.7341772%; /* 231px / 474px */

}

У нас получилось прекрасное удобное местечко для картинки. Она будет располагаться справа и занимать половину ширины статьи, или четыре колонки гибкой сетки. Разметку и стиль проверили. Понятное дело, что все эти HTML и CSS не нужны, если нет никакой реальной картинки под рукой.

Поскольку я очень хорошо к вам отношусь (почти так же, как к роботам), я потратил некоторое время в Сети, выбирая подходящую картинку, и нашел фантастического робота. Преимущество этого изображения, помимо самого робота, конечно, еще и в том, что оно просто огромное. Я его немного обрезал, но не уменьшал, а оставил первоначальное разрешение 655 х 655. Он явно намного больше, чем гибкий контейнер, который будет его содержать. А значит, у нас есть прекрасная возможность посмотреть, как будет вести себя наш гибкий макет.

Загружаем эту огромную картинку на сервер, обновляем страницу — и что мы видим? Отвратительно. Хуже не придумаешь.

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

Назад к разметке

Огромное изображение — огромные проблемы

Читайте так же:
Not found

Нам доверяют

Интернет магазин