seodon.ru | Учебник CSS - Ответ по уроку Соседние селекторы

<!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">
   body { margin: 0; } /* убираем стандартные поля по краям страницы */
   #menu {
    width: 200px; /* ширина колонки с меню */
    float: left; /* колонка всплывает влево */
   }
   .menuname {
    font-size: 150%; /* размер шрифта названия меню */
    text-align: center; /* текст по центру */
    color: #03f; /* цвет текста */
    border-bottom: 3px #f03 solid; /* стили нижней части рамки */
   }
   #menu ul {
    list-style-image: url(image/marker5.png); /* изображение для маркеров списка */
    margin-left: 25px; /* задаем левое поле */
    padding: 0; /* убираем внутренние отступы */
   }
   #menu ul li { margin: 10px 0; } /* изменяем расстояние между элементами LI */
   #menu ul li a { color: #03f; } /* цвет ссылок в меню */
   #content { margin-left: 220px; } /* размер левого внешнего поля для основной колонки */
   h1 { color: #03f; } /* цвет текста заголовка H1 */
   h2 {
    color: #3f0; /* цвет текста заголовков H2 */
    clear: left; /* прерываем обтекание, чтобы заголовки не обтекали картинки */
   }
   h2 + img {
    float: left; /* если изображение находится сразу после H2, то оно всплывает влево */
    margin: 20px 20px 20px 0; /* создаем внешние поля вокруг изображений, чтобы окружающий текст не прилегал к ним вплотную */
   }
   
   /* позиционирование */
   .parent_block {
    width: 200px; /* ширина внешнего блока */
    height: 200px; /* высота блока */
    border: 2px #03f dashed; /* стили рамки */
    margin: 0 auto; /* ставим блок по центру колонки */
    position: relative; /* указываем, что будем позиционировать относительно этого блока */
   }
   .child_block {
    width: 50px; /* ширина внутреннего блока */
    height: 50px; /* высота блока */
    background: #f03; /* фон */
    position: absolute; /* задаем абсолютное позиционирование */
    bottom: 20px; /* расстояние между нижним краем позиционируемого блока и блока относительно которого позиционируем */
    left: 20%; /* расстояние между левым краем позиционируемого блока и блока относительно которого позиционируем */
   }
  </style>
 </head>
 <body>
  <div id="menu">
   <div class="menuname">Меню</div>
   <ul>
    <li><a href="https://seodon.ru/kak-sdelat-sait/">Как сделать сайт</a></li>
    <li><a href="https://seodon.ru/html/">HTML для начинающих</a></li>
    <li><a href="https://seodon.ru/css/">CSS для новичков</a></li>
    <li><a href="https://seodon.ru/programs/">Программы для сайта</a></li>
   </ul>
  </div>
  <div id="content">
   <h1>Lorem ipsum</h1>
   <p>Lorem ipsum dolor sit amet consectetuer nisl sollicitudin Quisque laoreet Vestibulum. Mus dui vitae pretium Maecenas Nullam et Sed In auctor Nam. Eu fringilla tempus orci netus Aenean fringilla Sed Aliquam justo at. Est ligula Phasellus velit et Maecenas augue ipsum eget Phasellus Vivamus. Malesuada nibh risus at nibh elit dapibus id hac non pede. Pellentesque mauris id semper dolor fringilla hendrerit eros adipiscing venenatis tincidunt. Laoreet vel pellentesque et ac Curabitur nibh urna et dui scelerisque. Consequat consequat et at pellentesque id felis justo malesuada habitasse Curabitur. Odio vitae ut auctor quis Sed egestas congue orci rutrum pellentesque. Suspendisse non eget wisi sagittis Phasellus pharetra vitae sed In odio. Nec mauris libero semper lacus at sapien Quisque ut Fusce auctor. Dui felis Nulla hendrerit auctor nec pellentesque laoreet enim mauris adipiscing. Sed Quisque Proin Vivamus at quis Phasellus vitae eu.</p>
   <h2>Phasellus</h2>
   <img src="image/man.jpg" width="56" height="135" alt="Мужчина">
   <p>Tristique orci interdum Phasellus auctor nunc ac condimentum dictumst at porttitor. Facilisis nibh Aliquam interdum ligula tincidunt turpis pellentesque Phasellus mauris enim. Amet enim Nulla Aliquam id Nam orci accumsan risus tellus Donec. Ut Nulla massa sapien adipiscing Ut hendrerit id Nullam mollis tincidunt. Nulla ac laoreet Vivamus Pellentesque consectetuer pulvinar Nulla lacus pede a. Nulla Vestibulum mauris urna nibh elit odio Vestibulum et aliquam parturient. Et leo tristique et laoreet id auctor ac ornare nibh non. Velit vestibulum Phasellus tempus Duis urna Vestibulum ut et morbi Curabitur. Nullam netus non pretium dui platea ut Aliquam felis semper id. Pretium tristique augue nibh Vestibulum aliquam massa ligula tempus Curabitur risus. Fringilla eu risus pede sapien ut consequat Vivamus a interdum Vestibulum. Mauris eget Vestibulum id dui Aenean Vivamus risus cursus nec senectus. Tincidunt lorem platea semper est nulla et neque amet at venenatis. Tellus consequat cursus semper accumsan Aliquam Aliquam lorem vel id ut. Aliquam vitae pretium aliquet a leo nisl quis non Curabitur id. Fringilla pellentesque vel vel ut semper auctor senectus fermentum Vivamus venenatis. Phasellus consequat enim mattis justo Sed Curabitur.</p>
   <p>Felis Praesent Ut rutrum lorem consectetuer tortor suscipit Nulla vitae nec. Id Sed id lacus dui et laoreet Vestibulum Morbi lacus metus. Congue sed urna mollis nunc mus mi convallis Nunc porttitor vel. Accumsan In id et augue tellus Proin Nunc eget ipsum at. Ac In vitae eget wisi est mauris sagittis tempus ornare vitae. Et consectetuer fames wisi congue consequat elit orci pretium Vestibulum adipiscing. Tristique condimentum morbi Nulla vitae et Vestibulum eros elit ante euismod. Wisi eget dui In libero id elit nibh ipsum urna metus. Libero sed vitae tellus eros suscipit Maecenas congue Pellentesque semper elit. Eget auctor justo lacinia Vestibulum Nulla faucibus tincidunt at urna tempus. Enim fames tristique urna dictumst natoque wisi accumsan ut elit nec. Ut pede neque Quisque condimentum Nulla turpis et ullamcorper Vivamus est. Lobortis dapibus Ut orci Aenean a congue Maecenas lorem metus ut. Ac feugiat convallis id vel habitasse laoreet Pellentesque Aenean nonummy id. Ut tellus Aenean rhoncus dictumst Morbi ac condimentum Donec pede pharetra. Sed sit pede ut tellus congue nascetur neque Curabitur Curabitur adipiscing. Vivamus nec semper cursus nec In dignissim.</p>
   <h2>Fusce hac tortor</h2>
   <img src="image/woman.jpg" width="79" height="138" alt="Женщина">
   <p>Odio consectetuer convallis Fusce hac tortor sagittis lobortis Nulla gravida tincidunt. Rhoncus neque elit nec odio adipiscing ante interdum at ipsum nibh. Velit condimentum cursus tristique Pellentesque Curabitur faucibus interdum pretium Quisque rutrum. Eros quis adipiscing felis eros feugiat et Morbi et elit Aenean. Proin ipsum arcu Phasellus eros at Phasellus Nulla justo urna ante. Vestibulum commodo nulla massa lobortis a adipiscing nibh Nullam Aenean faucibus.</p>
   <h2>Porttitor dapibus</h2>
   <p>Ut magna nibh semper velit pretium elit elit Integer dolor Nulla. Porttitor dapibus Phasellus nunc parturient et lorem eget at condimentum neque. Nibh justo pellentesque risus mauris Vestibulum Vivamus nunc Phasellus tortor dolor. Pellentesque id Aenean pede magna id ac ante pede mattis orci. Mauris pede justo lobortis non Quisque felis mauris Nullam convallis tellus. Adipiscing interdum tempor enim ipsum Curabitur ullamcorper Vivamus urna Aenean vel. Sed laoreet orci condimentum nibh Sed in Mauris id interdum sit. Lorem sed tellus pellentesque eu nulla sodales sagittis ut lacus Sed.</p>
   
   <div class="parent_block">
    <div class="child_block">
    </div>
   </div>

   <p>Felis Praesent Ut rutrum lorem consectetuer tortor suscipit Nulla vitae nec. Id Sed id lacus dui et laoreet Vestibulum Morbi lacus metus. Congue sed urna mollis nunc mus mi convallis Nunc porttitor vel. Accumsan In id et augue tellus Proin Nunc eget ipsum at. Ac In vitae eget wisi est mauris sagittis tempus ornare vitae. Et consectetuer fames wisi congue consequat elit orci pretium Vestibulum adipiscing. Tristique condimentum morbi Nulla vitae et Vestibulum eros elit ante euismod. Wisi eget dui In libero id elit nibh ipsum urna metus. Libero sed vitae tellus eros suscipit Maecenas congue Pellentesque semper elit. Eget auctor justo lacinia Vestibulum Nulla faucibus tincidunt at urna tempus. Enim fames tristique urna dictumst natoque wisi accumsan ut elit nec. Ut pede neque Quisque condimentum Nulla turpis et ullamcorper Vivamus est. Lobortis dapibus Ut orci Aenean a congue Maecenas lorem metus ut. Ac feugiat convallis id vel habitasse laoreet Pellentesque Aenean nonummy id. Ut tellus Aenean rhoncus dictumst Morbi ac condimentum Donec pede pharetra. Sed sit pede ut tellus congue nascetur neque Curabitur Curabitur adipiscing. Vivamus nec semper cursus nec In dignissim.</p>
  </div>
 </body>
</html>

Надеюсь с соседними селекторами у вас проблем не возникло и вы смогли правильно их использовать, чтобы организовать всплытие изображений, когда они идут сразу за заголовками второго уровня.

Что касается маркеров в списке меню, то вам надо было создать у списка левое поле (margin) определенного размера, чтобы маркеры не уходили за границу окна браузера. В принципе, этого же можно было добиться, указав поле не у списка, а непосредственно у самих тегов <LI>.

Чтобы заголовки, которые идут ниже изображений, не обтекали их как параграфы, к ним было применено свойство clear.

Для того чтобы установить блок по центру колонки, вам необходимо было указать у него боковые поля со значением auto, мы это с вами уже проходили. Также для него надо было прописать свойство position с каким-нибудь значением, чтобы внутренний блок позиционировался относительно него. Я выбрал значение relative, чтобы все, что находится ниже блока в HTML-коде, не поднырнуло под него.

Ну а у внутреннего блока вам надо также задать позиционирование и указать координаты смещения относительно внешнего блока. Вот и все на этом.

Вернуться в урок

→ Перейти к следующему уроку