Размещение текста и изображений при помощи тэга div

Вам надоело вставлять в каждый тэг собственный align только лишь для того, чтобы страница правильно сверсталась? А что думаете по поводу табличной верстки при размещении изображений? Я так и думал. Ну что ж, отбросьте ваши страхи – пришел тэг <div>.

И хотя он уже присутствовал, где то, начиная с HTML 3.0, <div> не приживался до тех пор, пока верстка, основанная на CSS, не стала повсеместной. Это не решит всех ваших проблем - вам все же придется использовать таблицы время от времени - но это работает при форматировании больших блоков текста, изображений и вообще всего, что имеет вокруг себя тэг HTML.

Итак, давайте начнем. Скажем, у вас есть некоторый текст, изображение и затем еще текста, и вы хотите центрировать их на странице следующим образом:

'Hi, I'm Mattmarg.'

I reffed the big game between Bridgeville and Casterlin.

Теперь вы возможно захотите сделать что-либо подобное:

<b><h3 align="center">Hi, I'm Mattmarg.</h3>

<p align="center"><img src="monkey.gif"></p>

<h4 align="center">I reffed the big game between Bridgeville and 
<a href="http:www.hits.org/casterlin/">Casterlin</a>.</h4></b>

Однако, при использовании тэга <div>, ваш код будет выглядеть вот так:

<div align="center">

<h3>Hi, I'm Mattmarg.</h3>

<p><img src="monkey.gif"></p>

<h4>I reffed the big game between Bridgeville and 
<a href="http:www.hits.org/casterlin/">Casterlin</a>.</h4>

</div>

Классно, правда? Тэг <div> также будет работать и другими тэгами, такими как таблицы, формы и списки.

Подсказки

А что если вам понадобилось выровнять два параграфа по левому краю вашей страницы, а изображение выровнять по центру? Что ж, вы можете переписать тэг <div> просто путем добавления атрибута align к тэгу, который вы хотите изменить. Как только тэг закрывается, свойства верстки заданные тэгом <div> снова вступают в силу.

---

Источник статьи: www.webmonkey.com. Перевод: Портал для дизайнеров «Балбесов НЕТ»

---

Оцените, пожалуйста, эту статью:

Опубликовано: 04 июня 2009 | Просмотров: 35595 | Страница для печати

Читать комментарии [15] на форуме.

Оставить комментарий

Ваше имя:
Проверка на человечность: Если Вы человек, то Вам не составит труда набрать буковки и циферки в поле под картинкой, которая ниже.

Идёт отправка комментария ...