Сегодня мы более подробно остановимся на свойствах контейнеров DIV, и рассмотрим некоторые особенности вставки видео и аудио в статьи.
DIV: Верх, низ, право и лево.
Мы уже знаем, что контейнер DIV -- это такой специальный прямоугольник, в который мы можем поместить некоторое содержимое.
Как у любого прямоугольника, у DIV'a есть верхняя, нижняя, правая и левая границы (top, bottom, right & left).
Мы также знаем, что у DIV'a есть т.н. внутренние и внешние отступы.
Задача: я хочу сделать красивую ссылку на портал Lenta.RU, с которого часто беру новости. Но я хочу, чтобы это была не картинка, а простой текст, который бы вписывался в общую цветовую схему портала.
Итак, я хочу большую надпись "Lenta.RU", отделённую рамочкой, со шрифтом Book Antiqua Italic.
Анализируем.
Мы заключили наш большой прямоугольник прямо в поле LEECH (пользуясь случаем, хочу напомнить уважаемым читателям, что у нас на сайте внешние ссылки оформляются через "золотой ключик"). Т.е. весь DIV является кнопкой-ссылкой.
Мы задали ему свойство float: right, чтобы он висел справа; задали шрифт Book Antiqua или любой с засечками (serif), с большой вертикальной высотой (26px), чтобы сверху и снизу были внутренние отступы. Кроме того, мы отдельно задали верхнюю (border-top) и нижнюю (border-bottom) границы в виде тонких линий толщиной в 1px, цвета #C9C9C9.
Также мы задали внутренние отступы справа и слева (padding-right; padding-left), чтобы верхняя и нижняя линии выходили за ширину надписи.
Свойство "text-decoration: none" убирает нижнее подчёркивание, присущее всем гиперссылкам в шаблоне.
Итак, свойства border, padding и margin могут быть заданы отдельно для верха, низа, правой и левой части контейнера DIV.
Свойство border задаётся через толщину, цвет и тип границы, которую мы хотим получить.
Типы границ бывают следующие:
solid
dotted
dashed
double
groove
ridge
inset
outset
Нехай живе Украйна!
Обращаю Ваше внимание на параметр display: inline-block. Он заставляет блок DIV вести себя подобно изображению IMG: блок растягивается в соответствии со своим содержимым и может быть вписан в текст. Попробуйте использовать DIV без этого параметра, и посмотрите, что получится.
Также обращаю Ваше внимание на толщину границы. Нам нужно минимум 3px, чтобы увидеть границу в ДВЕ линии, иначе они просто сольются.
Фоновые изображения.
Продолжаем патриотическую тему. Итак, я хочу оформить кусочек текста при помощи орнамента:
Анализируем.
Центровой момент нашего кода -- задание фонового изображения. Для этого мы прописали следующие характеристики свойства background:
#FFF8DB -- цвет, сходный с фоновым цветом изображения;
url('http://newzz.in.ua/uploads/posts/2012-07/1341994636_3517-01_big.jpg') -- адрес, откуда брать изображение;
repeat-y -- директива, которая заставляет фоновое изображение повторяться по вертикали.
По умолчанию (без дополнительных директив) изображение повторяется и по вертикали, и по горизонтали. Обращаю Ваше внимание на кавычки при указании адреса изображения.
Внимательный читатель также отметит довольно большой внутренний отступ padding: 5px 5px 5px 115px (т.е. слева). Подобная мера не позволяет тексту внутри DIV'a влезать на фоновое изображение.
Усложним задачку. Я хочу орнамент с двух сторон.
Всё гораздо проще, чем кажется на первый взгляд.
На самом деле, у нас есть внешний DIV, у которого фон повторяется по левой стороне, и второй DIV внутри него. Он содержит текст, и у него фон повторяется по правой стороне: background: white url('http://newzz.in.ua/uploads/posts/2012-07/1341996815_1.png') top right repeat-y.
Настоятельно рекомендую использовать директиву в виде "top right", а не просто "right".
В завершение темы я хотел бы рассказать о таких свойствах контейнера, как overflow и position.
Итак, у нас есть изображение:
Оно довольно большое, и я хочу, чтобы его можно было удобно просматривать.
Делаем DIV размером 720x400, и помещаем в него оригинал нашей картинки:

Да, быть может, пример не самый лучший, но он наглядно демонстрирует работу директивы overflow.
В данном случае мы выставили свойство overflow: auto. Это означает, что, если содержимое DIV'a больше заданных нами ширины и высоты (width: 720px; height: 450px), то у контейнера автоматически появится полоса прокрутки.
Кроме того, существуют опции:
overflow: visible;
-- эта опция позволяет разрешить содержимому выходить за границы контейнера;
overflow: hidden;
-- эта опция позволяет обрезать содержимое границами контейнера;
overflow: scroll;
-- эта опция заставляет контейнер всегда отображать полосы прокрутки.
Замечу, что использование свойства overflow без указания ширины и высоты контейнера -- бесполезно. DIV всё равно растянется так, как ему заблагорассудится.
Директива position позволяет задавать способ позиционирования контейнера или элемента относительно вэб-странички или окна браузера.
Это свойство, как правило, работает в тандеме с директивами top, left, right и bottom, задающими соответствующие координаты.
Существуют следующие опции:
position: absolute;
-- позволяет "поставить" контейнер в любом месте над вэб-страницей. Таким образом в верхней части статьи появился чокнутый смайл.

position: fixed;
-- позволяет "поставить" контейнер в любом месте окна браузера. Таким образом делаются панельки, которые "ездят" вместе с Вами, когда Вы скроллите страницу вверх-вниз.
position: relative;
-- позволяет менять положение контейнера относительно его расположения по умолчанию. Так делаются пьяные шрифты.
Пример кода, сдвигающего надпись на три пикселя вниз относительно исходной позиции:
<span style="position: relative; top: +3px; ">НАДПИСЬ</span>
На этом, пожалуй, рассказ о дивной вёрстке можно завершить.

ВСТАВКА МУЛЬТИМЕДИА.
Как и обещал, отпишу пару слов о приручении таких зверей, как видео и аудио.
Для начала, разберёмся с таким понятием, как прямая ссылка.
Итак, прямой ссылкой на файл является постоянная ссылка интернета, по которой этот самый файл можно скачать.
Это означает, что, если Вы вставите подобную ссылку в адресную строку браузера и запустите -- то сразу начнётся скачивание этого файла.
Не вылезет никаких страничек с кнопкой "Скачать". Не запустится торрент-клиент, чтобы выкачать этот файл.
Нет, браузер СРАЗУ предложит Вам скачать Ваш файл.
Прямые ссылки бывают динамическими. Так, mp3-файлы, хранящиеся в пресловутой социальной сети VK, передаются на компьютер через динамические ссылки, которые со временем меняются.
Нас же интересуют постоянные прямые ссылки, не меняющиеся с течением времени.
При помощи таких ссылок плеер, встроенный в наш сайт (иконки Windows Media Player-a и "mp3" на панели), может "постучаться" на удалённый сервер, забрать оттуда файл, и запустить музыку в нашей статье, другие ссылки он не воспринимает.
Видео и аудио занимает очень большое количество места, поэтому заливать подобные файлы к нам на сервер -- запрещено.
Это означает, что Вам необходимо использовать собственные хостинги, предоставляющие услуги хранения подобного рода информации, с условием ПРЯМОГО ДОСТУПА к файлам.
Если у Вас есть статья с какого-нибудь новостного портала со встроенным в неё видео -- то нельзя просто так взять, и написать
[video=адрес_статьи_на_новостном_портале]
-- этот код не отработается, и никакого видео Вы не увидите.Что же делать?
Существует несколько частных случаев, которые я предлагаю Вам рассмотреть.
Первый частный случай: видео с YouTube.
Ввиду широкого использования данного видеохостинга, на нашем сайте даже представлена кнопка "Tube", посредством которой можно легко вставить видео с "Трубы" в статью. Достаточно просто указать адрес странички, и получить код, вида:
[center][media=http://www.youtube.com/watch?v=r8u8hxemI24][/center]
Обращаю Ваше внимание на то, что видео ОЧЕНЬ ЖЕЛАТЕЛЬНО центрировать!При использовании данного способа в статью будет встроен небольшой видеоплеер, проигрывающий Ваше видео с Трубы.
Но нам этого мало, правда?
Способ второй.
Допустим, я не хочу маленький плеер. Я хочу видео на всю страницу.
В этом случае мы лезем под кнопку "Поделиться" => "Сгенерировать HTML-код":
Там мы выбираем интересующий нас размер плеера и, внимание, ставим галочку на пункте "Использовать старый код встраивания".
Копируем сгенерированный код, и вставляем его в свою статью:
[center]<object width="480" height="360"><param name="movie" value="http://www.youtube.com/v/r8u8hxemI24?version=3&hl=ru_RU"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/r8u8hxemI24?version=3&hl=ru_RU" type="application/x-shockwave-flash" width="480" height="360" allowscriptaccess="always" allowfullscreen="true"></embed></object>[/center]
И всё бы хорошо, если бы этим можно было ограничиться.
Второй частный случай: видео IFRAME.
Сейчас довольно распространённой стала специфическая вставка видео посредством кода IFRAME.
При этом само видео встраивается вместе с куском вэб-страницы, на котором оно находится.
Так встраиваются новые видео с YouTube, так встраиваются видео с Vimeo и со многих других хостингов.
Код вставки выглядит довольно лаконично:
<iframe width="480" height="360" src="http://www.youtube.com/embed/r8u8hxemI24" frameborder="0"></iframe>
Однако, есть одно "но". На нашем сайте такой код не работает 
Но это не беда, мы всегда может привести его к "рабочему" варианту. Нам достаточно скопировать соответствующие размеры видео и его адрес в такой вот шаблон:
<object data="http://www.youtube.com/embed/r8u8hxemI24" type="text/html" width="480" height="360"></object>
-- и дело в шляпе!Главное -- не забываем центрировать видео:
[center]<object data="http://www.youtube.com/embed/r8u8hxemI24" type="text/html" width="480" height="360"></object>[/center]
Таким образом можно расправляться с любым IFRAME-кодом.
Кроме описанных выше частных случаев существует ещё множество способов "скоммуниздить" видео из чужих новостей (даже в том случае, если код вставки нигде специально не вывешен).
Все эти способы предполагают, что Вы будете копаться в исходном коде этих страничек, а это подразумевает наличие некоторого опыта в подобных операциях.
Быть может, я когда-нибудь напишу третью часть этого руководства, где доступным языком изложу все эти методики.
Но на этом, пожалуй, мы сегодня закончим.
Спешу откланяться,
Jeorge Morpheus для Newzz.in.ua
P.s. И да, по всем возникающим вопросам обращаться ко мне (-: