Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «CSS: настройка ширины полей».

 

Рассмотрим пример (пусть и довольно объемный, но он нам понадобиться что бы понять смысл свойства margin):

 

<HTML>
<HEAD>
<TITLE>Урок 18. CSS: Настройка ширины полей</TITLE>
</HEAD>
<STYLE TYPE="text/css">
<!--
body {
margin-top:50;
margin-right:100;
margin-bottom:80;
margin-left:300;
}
-->
</STYLE>
<BODY>
<p class="MsoNormal" style=""text-indent:" 27.0pt" align="center"><span lang="ru">
<h1 align="center"><strong>Оборонительное (безопасное) программирование. Часть
2.</h1></strong></span></p>
<p class="MsoNormal" style=""text-indent:" 27.0pt" align="right">
<i>
<font color="#000066"><b>
<font size="4">&nbsp;</font></b></font><b><font color="#000080" size="4"> <span lang="ru">
&quot;</span></font></b></i><span style=""font-family:" Times New Roman; font-style: italic; font-weight: 700"><font size="4" color="#000080">Те,
кто не помнят прошлого, обречены повторять его</font></span><font color="#000080"><i><b><font size="4"><span lang="ru">&quot;</span>.</font></b></i></font></p>
<p class="MsoNormal" style=""text-indent:" 27.0pt" align="right">
<font color="#000080"><i><b>
<font size="4">&nbsp;</font></b></i></font><span style=""font-family:" Times New Roman; font-style: italic; font-weight: 700"><font size="4" color="#000080">Джордж
Сантаяна</font></span></p>
<p class="MsoNormal" style=""text-indent:" 27.0pt">
<span lang="ru"><b><font size="5">Что такое программные ошибки?</font></b></span></p>
<p class="MsoNormal" style=""text-indent:" 27.0pt"><b>
<span style=""font-size:" 16.0pt">&nbsp;</span></b></p>
<p class="MsoNormal" style=""text-align:" justify; text-indent: 27.0pt">
<span style=""font-size:" 12.0pt; font-family: Times New Roman">Программные ошибки
так же называются дефектами, багами, и даже «свойствами программы». Ошибка – это
тот случай, когда программ не делает того, что от нее ожидают или наоборот,
делает то, что от нее не ожидают. Если плохо сформулированы задачи и плохо
написан план, система в конце концов будет плохой<span lang="ru">. </span>
</span>Если хотите, что бы покупатели были довольны, будьте готовы соблюдать
баланс между необходимостью применять средства диагностики и наилучшего
обнаружения ошибок в приложении и более агрессивным графиком.
</p>
<p class="MsoNormal" style=""text-align:" justify; text-indent: 27.0pt">&nbsp;</p>
<p class="MsoNormal" style=""text-indent:" 27.0pt">
<span style=""font-family:" Times New Roman; font-weight: 700"><font size="5">Что</font><font size="5">
есть ошибка, а что - нет? </font></span></p>
<p class="MsoNormal" style=""text-indent:" 27.0pt">
&nbsp;</p>
<p class="MsoNormal" style=""text-indent:" 27.0pt">
<span style=""font-size:" 12.0pt; font-family: Times New Roman">То, что обычно
называют ошибкой тестировщики и пользователи, часто является вовсе не ошибкой, а
симптомом, который маскирует главную причину. </span></p>
<p class="MsoNormal" style=""text-indent:" 27.0pt"><b>
<span style=""font-size:" 16.0pt">&nbsp;</span></b></p>
<p class="MsoNormal" style=""text-indent:27.0pt"><b><font" size="5">Разделы науки
отладки:</font></b></p>
<p class="MsoNormal" style=""text-indent:27.0pt">&nbsp;</p>"
<p class="MsoNormal" style=""text-indent:" -18.0pt; margin-left: 63.0pt">
<span style=""font-family:" Symbol">·<span style=""font:7.0pt" &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span>Диагностика и систематика типов программных ошибок и их симптомов.</p>
<p class="MsoNormal" style=""text-indent:" -18.0pt; margin-left: 63.0pt">
<span style=""font-family:" Symbol">·<span style=""font:7.0pt" &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span>Стратегии обращения с ошибками.</p>
<p class="MsoNormal" style=""text-indent:" -18.0pt; margin-left: 63.0pt">
<span style=""font-family:" Symbol">·<span style=""font:7.0pt" &quot;Times New Roman&quot;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span>Профессия наладчика.</p>
<p class="MsoNormal" style=""text-indent:" 27.0pt">&nbsp;</p>
<p class="MsoNormal" style=""text-indent:" 27.0pt"><b>
<span style=""font-size:" 16.0pt">&nbsp;</span></b></p>

</BODY>
</HTML>

 

Вот как будет выглядеть страница сайта с этим примером:

 

 

Если мы прокрутим до конца скроллер, то увидим следующее:

 

 

А если в объявлении стиля для тэга body мы свойство margin-bottom с 80 исправим на 400 (увеличим нижнее), то сможет прокрутить скорллер еще дальше:

 

<STYLE TYPE="text/css">
<!--
body {
margin-top:50;
margin-right:100;
margin-bottom:400;
margin-left:300;
}
-->
</STYLE>

 

 

Поля можно задать и в процентах:

 

 <STYLE TYPE="text/css">
<!--
body {
margin-top:50;
margin-right:5%;
margin-bottom:5%;
margin-left:300;
}
-->
</STYLE>
 

 

А выглядеть пример будет так:

 

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 


В избранное