За последние 24 часа нас посетили 21684 программиста и 1689 роботов. Сейчас ищут 1997 программистов ...

помощь с заданием

Тема в разделе "HTML и CSS", создана пользователем vikrorpert, 26 окт 2015.

  1. vikrorpert

    vikrorpert Активный пользователь

    С нами с:
    13 окт 2010
    Сообщения:
    984
    Симпатии:
    10
    выполняю задание по css
    Код (PHP):
    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.        <meta charset="utf-8">
    5.        <title>Испытание: макет-прототип</title>
    6.     </head>
    7.     <body>
    8.         <div class="header">
    9.             <div class="logo">Лого</div>
    10.             <div class="contacts">+7 (812) 33-4-55</div>
    11.         </div>
    12.         <div class="about-us">
    13.             <h1>Наша компания</h1>
    14.             <p>Предлагает самые лучшие услуги по вёрстке HTML-страниц.</p>
    15.             <p>Мы используем HTML5 и CSS3, создаём адаптивную вёрстку, применяем Progressive Enhancement.</p>
    16.         </div>
    17.         <div class="main-menu">
    18.             [url="#about"]О нас[/url]<br>
    19.             [url="#contacts"]Вакансии[/url]<br>
    20.             [url="#contacts"]Контакты[/url]<br>
    21.         </div>
    22.         <div class="footer">
    23.             © 2015 — Keksby Web Production
    24.         </div>
    25.     </body>
    26. </html>
    27.  
    28. /* Общие стили для документа и блоков, менять не надо */
    29.  
    30. body {
    31.     width: 450px;
    32.     margin: 0;
    33.     padding: 10px;
    34.     font-family: Arial, sans-serif;
    35.     font-size: 14px;
    36. }
    37.  
    38. .logo,
    39. .contacts,
    40. .about-us,
    41. .main-menu,
    42. .footer {
    43.     padding: 10px 20px 10px 20px;
    44.     background-color: #f5f5f5;
    45.     border: 2px solid #cccccc;
    46. }
    47.  
    48. /* Собственные стили блоков */
    49.  
    50. .header {
    51.     min-height: 40px;
    52.     margin-bottom: 20px;
    53. }
    54.  
    55. .logo {
    56.     float: left;
    57.     width: 230px;
    58.     text-align: center;
    59.     font-weight:bold;
    60. }
    61.  
    62. .contacts {
    63.     float: right;
    64.     width: 110px;
    65.     text-align: center;
    66.     font-style:italic;
    67. }
    68.  
    69. .about-us {
    70.     width: 230px;
    71.     margin-bottom: 20px;
    72.     float:left;
    73. }
    74.  
    75. .about-us h1 {
    76.      font-size: 20px;
    77. }
    78.  
    79. .about-us p {
    80.     font-size: 12px;
    81. }
    82.  
    83. .main-menu {
    84.     width: 110px;
    85.     float: right;
    86.     
    87. }
    88.  
    89. .footer {
    90.     clear:both;
    91.     
    92. }
    93.  
    94. .logo,
    95. .contacts,
    96. .footer {
    97.     
    98.     background-color: #333333;
    99.     color:#ffffff;
    100. }
    101.  
    почему about-us margin-bottom: 20px; влияет на отступ footer? ведь логичнее что main-menu должен влиять на отступ ведь main-menu ниже about-us

    PHP, JavaScript, SQL и другой код пишите внутри тегов
    Код ( (Unknown Language)):
    1. [b]php][/b]Тут код[b][/[/b][b]code][/b][/color]
     
  2. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.114
    Симпатии:
    1.244
    Адрес:
    там-сям
    Ты точно знаешь, что там выше, а что ниже? Эти элементы плавают.
     
  3. vikrorpert

    vikrorpert Активный пользователь

    С нами с:
    13 окт 2010
    Сообщения:
    984
    Симпатии:
    10
    я не знаю поэтому и спрашиваю
    вот этот урок https://htmlacademy.ru/courses/41/run/15
    как заранее понять относительно какого элемента будет работать margin-bottom: 20px