Советы начинающему web-мастеру (продолжение)

<<< На предыдущую На двух страницах. Страница 2.

Вопрос - ответ

Как сделать, чтобы на странице с рисунком текст имел отступ от изображения?

Думаю, что текст необходимо элементарно скопировать и вставить между тегами и .

В коде HTML это выглядит следующим образом: - выравнивание слева, - справа, - по ширине страницы. Но выравнивание текста на странице может и ДОЛЖНО быть прописано в вашем файле CSS. Например, выравнивание одновременно с левого и правого края страницы (justify) указывается с помощью свойства text-align:

    
p /* Стиль абзаца */

{
text-align: justify;
}

В этом случае на странице HTML значения атрибутов не задаем, а весь текст между тегами и будет выровнен как указано в стилях.

Переходим к обтеканию картинки. Согласитесь, некрасиво выглядит, когда текст буквально прилипает к картинке. Это иногда присутствует на некоторый блогах начинающих. А вот чтобы было правильное облегание рисунка текстом (чтобы были отступы), нужно в коде вставки рисунка указать параметры vspace и hspace, например:


<img src="//www.leonidmuzyka.com/images/414832.gif" align="left"
 border="0" vspace="20"  hspace="30" width="60"
 height="80" alt="барышня">

Если у Вас будет значение атрибута align="left" - картинка будет слева, align="right" соответственно - справа и текст будет облегать её. Этот атрибут нужно указывать браузеру обязательно, иначе картинка будет располагаться строго по центру, а текст будет ниже.

барышня Картинка находится слева от текста. Далее произвольный текст, его можно не читать. My family is large (small, not very large). We are the family of seven (two, three, four, five, six): my mother, my father, my grandmother, my grandfather, my sister, my brother and I. My mothers name is She is years old. She is a teacher (a doctor, a worker, an engineer). She is a very nice, kind and clever woman.

Здесь код вышеизложенного. Текст выделите и скопируйте в свой текстовой редактор, указав в имени файла расширение .html и у Вас получится такая же картина.


<table width="500" border="1" bgcolor="#F5F5DC" cellpadding="10"
 cellspacing="0">
<tr><td> 
<p><img src="//dynamic-site.ru/images/414832.gif" align="left"
 border="0" vspace="5" hspace="15" width="60" height="80" 
 alt="барышня">
 My family is large (small, not very large). We are the family of
 seven (two, three, four, five, six): my mother, my father, my
 grandmother, my grandfather, my sister, my brother and I. My mothers
 name is She is years old. She is a teacher (a doctor, a worker,
 an engineer). She is a very nice, kind and clever woman.</p>
</td></tr></table>

Если позиционирование картинки производится с помощью CSS, проделайте следующее:

В файле стилей (style.css) создайте селектор (например, myimg) для изображений, которые будут располагаться слева или справа и обтекаться текстом:

   

.myimg     /* img class="myimg"
   .... картинка слева, отступы 20px 30px */
{
float: left;
border:: none;
margin: 20px 30px;
}

Свойство float - указывает браузеру на обтекание картинки текстом слева или справа (left, right). Это замена атрибута align в HTML.

Свойство border - указывает на наличие/отсутствие рамки изображения. В данном случае рамки нет.

И вот вместо vspace="20" hspace="30" в HTML-коде картинки, в CSS пропишем свойство margin, которое определяет отступы. В примере прописаны отступы сверху и снизу по 20px, соответственно, слева-справа - 30px.

Теперь в общем HTML-коде страницы код картинки будет выглядеть так:

 

<img class="myimg" src="/images/414832.gif" width="60"
 height="80" alt="барышня">

Как видите, изображению присвоен идентификатор myimg, а часть кода (align="left" border="0" vspace="20" hspace="30") отсутствует, потому, что она прописана уже посредством CSS. В данном случае, картинка будет расположена слева и текст будет обтекать картинку с отступами, которые Вы указали в CSS.

Спасибо за внимание. До новых встреч! Ваш Л.М.

<<< На предыдущую На двух страницах. Конец страницы 2.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки