<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Результат - Классы</title>
  <style type="text/css">
   .navigation {
    float:left;
    width: 200px;
    border: 2px #ccc solid;
   }
   .menu_name {
    background: #0c0;
    text-align: center;
    font-weight: bold;
    color: #fff;
    padding: 5px;
   }
   .menu {
    width: 130px;
    list-style-type: none;
    text-align: center;
    background: #c00;
    margin: 5px auto 20px;
    padding: 10px;
   }
   a {
    color: #fff;
   }
   .content {
    margin-left: 220px;
   }
  </style>
 </head>
 <body>
  <div class="navigation">
   <div class="menu_name">МЕНЮ</div>
   <ul class="menu">
    <li><a href="/css/klassy.php">Ссылка 1</a></li>
    <li><a href="/css/klassy.php">Ссылка 2</a></li>
    <li><a href="/css/klassy.php">Ссылка 3</a></li>
    <li><a href="/css/klassy.php">Ссылка 4</a></li>
    <li><a href="/css/klassy.php">Ссылка 5</a></li>
    <li><a href="/css/klassy.php">Ссылка 6</a></li>
    <li><a href="/css/klassy.php">Ссылка 7</a></li>
    <li><a href="/css/klassy.php">Ссылка 8</a></li>
    <li><a href="/css/klassy.php">Ссылка 9</a></li>
   </ul>
  </div>
  <div class="content">
   <p>Lorem ipsum dolor sit amet consectetuer Sed nunc In congue interdum. Elit tortor elit tempus et mauris Sed cursus id ac sagittis. At Vivamus Pellentesque interdum semper sem In dolor volutpat Nulla montes. Vitae urna lorem sapien condimentum auctor nibh id porttitor hac eu. Quisque ligula ipsum id eros vel pede arcu wisi tincidunt ridiculus. Id eu Morbi Phasellus laoreet et nisl Nam tempus Donec laoreet. Amet Vivamus et eget habitant et adipiscing pellentesque facilisis nunc Vestibulum. Habitasse id odio ac faucibus hendrerit leo vitae Vestibulum Donec congue. Nunc quis interdum lacus id Curabitur ante molestie vitae nec laoreet. Sed pretium pretium et vel et Quisque sit pellentesque id sapien. Vestibulum elit urna massa In consectetuer nec gravida nibh Nullam Sed. Nascetur nibh neque facilisis Curabitur nec velit ipsum et vitae eget. Neque Sed non aliquet Quisque sit Aliquam et sodales parturient volutpat. Dolor sed augue lacinia purus nisl sem congue ridiculus justo.</p>
   <p>Neque Phasellus Mauris id ipsum interdum lacus Vestibulum risus neque dui. Aenean id id tincidunt Aenean vel pretium interdum est at id. Pellentesque Quisque risus mauris Praesent a metus et tincidunt ante id. Metus lacinia morbi Curabitur Sed fames venenatis Donec massa sollicitudin Donec. Platea tempus Aliquam morbi dui eu consequat justo Aenean non feugiat. Nam gravida mus mauris platea pellentesque interdum sapien facilisis quis Phasellus. Faucibus cursus vitae pede tincidunt et urna consectetuer tempus Nulla facilisi. Ac massa dui tincidunt ut condimentum urna ut et lacinia turpis. Et in Proin nunc et massa Cum fames Nulla semper neque. Nam fermentum orci vel Maecenas Phasellus sem Duis Pellentesque Vestibulum sapien. Nibh at orci tempus at elit est rutrum amet Nunc pretium. Velit enim Curabitur at elit sit cursus turpis adipiscing nec odio. Id netus pellentesque pellentesque purus mauris nec Curabitur Vivamus Integer.</p>
   <p>A elit metus adipiscing convallis lacus tempor massa a id iaculis. Phasellus Maecenas Nunc sociis rutrum eu ligula id Nulla hendrerit Nam. At eros rutrum pretium amet lacinia nunc vitae non eu metus. Morbi et Morbi Cras nec at vel fermentum sagittis Donec fringilla. Nulla adipiscing consectetuer Curabitur et nibh Sed laoreet elit tellus sed. Metus vel interdum vitae convallis eros sed justo Vestibulum convallis laoreet. Non tellus orci In pellentesque vel augue dui euismod condimentum id. Velit egestas neque orci consequat Aliquam elit id eros pellentesque pede. Enim sollicitudin adipiscing sit enim tincidunt id Phasellus fringilla et pellentesque. Sed Aliquam tristique Proin elit Vivamus neque feugiat justo nunc id. Et Phasellus sagittis risus eu Nullam in pede habitasse Nulla id. Orci sagittis nunc congue eros vitae ligula nisl vel id sociis. Ipsum sodales et at tristique lobortis vitae nec In et et. Massa metus ornare nibh Morbi sodales.</p>
  </div>
 </body>
</html>

Ну что, давайте разбираться. Чтобы сделать меню, вам необходимо было поколдовать со значениями свойств margin и padding. Теперь об отступе текста параграфов. Вы знаете, что ширина меню у вас 200px, поэтому, чтобы блок с параграфами отсупал от него на 20px, необходимо создать левое поле размером 220px.

Да, еще один момент. Я задал списку (красной зоне) меню ширину в 130px, а потом отцентровал его, установив размер боковых полей в auto. Но вы могли поступить и по-другому, например не указывать ширину явно, а просто со всех сторон задать числовые значения полей. И эти два варианта далеко не единственные, есть и еще способы. CSS — очень гибкая штука.

Вернуться в урок → Перейти к следующему уроку