Posts Tagged ‘margin’

Изображения в тексте

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , , , ,

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

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p>, для которого устанавливается атрибут align=»center». Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig, и применять его для нужных абзацев, как показано в примере 1. (далее…)

Фиксированный дизайн. Свойство float

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , ,

Рассмотрим, как располагать рядом по горизонтали два и более слоя. По умолчанию, использование тега <div> для создания слоя, автоматически делает и перенос строки после него, поэтому несколько идущих подряд слоев выстраиваются по вертикали. Нас же интересует, а как сделать то же самое, но по горизонтали, чтобы можно было создать две колонки. Для решения данной задачи есть два подхода: первый основан на использовании свойства float, второй — на позиционировании элементов.

Использование свойства float

Чтобы расположить два слоя рядом друг с другом по горизонтали, воспользуемся стилевым свойством float со значением left. Эта конструкция говорит, что слой необходимо выровнять по левому краю и обтекать его по правой стороне. Таким образом, рядом лежащий второй слой будет пристыкован к первому справа. (далее…)