Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: не срабатывает отступ

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: margin: 0 -10, padding: 0 10;
August_II
Отправлено: 25 Июля, 2020 - 22:19:30
Post Id


Новичок


Покинул форум
Сообщений всего: 49
Дата рег-ции: Нояб. 2014  


Помог: 0 раз(а)




Товарищи помогите разобраться!
Почему в не срабатывает конструкция по отступу с отрицательным margin (на половину отступа) у родителя и положительным padding (на половину отступа) у дочернего?
По коду, например в footer__row всё работает нормально. А вот в page__row ни в какую.

код страницы
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!DOCTYPE html>
  3. <html lang="ru">
  4. <head>
  5.         <meta charset="UTF-8">
  6.         <title>Photographer Vladimir Pritchin</title>
  7.         <link rel="stylesheet" href="css/style-test.css">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9. </head>
  10. <body>
  11.         <div class="wrapper">
  12. <!-- Start content -->
  13.                 <div class="content">
  14. <!-- Start header + nav -->
  15.                         <header class="header">
  16.                                 <div class="container">
  17.                                         <div class="header__body">
  18.                                                 <a href="#" class="header__logo">
  19.                                                         <img src="images/logo.png" alt="">
  20.                                                 </a>
  21.                                                 <div class="header__burger">
  22.                                                         <span></span>
  23.                                                 </div>
  24.                                                 <nav class="header__menu">
  25.                                                         <ul class="header__list">
  26.                                                                 <li>
  27.                                                                         <a href="" class="header__link">Портфолио</a>
  28.                                                                 </li>
  29.                                                                 <li>
  30.                                                                         <a href="" class="header__link">Новости</a>
  31.                                                                 </li>
  32.                                                                 <li>
  33.                                                                         <a href="" class="header__link">Цены</a>
  34.                                                                 </li>
  35.                                                                 <li>
  36.                                                                         <a href="" class="header__link">Обо мне</a>
  37.                                                                 </li>
  38.                                                                 <li>
  39.                                                                         <a href="" class="header__link">Контакты</a>
  40.                                                                 </li>
  41.                                                         </ul>
  42.                                                 </nav>
  43.                                         </div>
  44.                                 </div>
  45.                         </header>
  46. <!-- END header + nav -->
  47. <!-- Start page content -->
  48.                         <div class="page">
  49.                                 <div class="container">
  50.                                         <div class="page__row">
  51.                                                 <div class="page__column page__column_1">
  52.                                                         <div class="page__content">column 1</div>
  53.                                                 </div>
  54.                                                 <div class="page__column page__column_2">
  55.                                                         <div class="page__content">column 2</div>
  56.                                                 </div>
  57.                                         </div>
  58.                                 </div>
  59.                         </div>
  60. <!-- END page content -->
  61.                 </div>
  62. <!-- END content -->
  63. <!-- Start Footer -->
  64.                 <footer class="footer">
  65.                         <div class="container">
  66.                                 <div class="footer__row">
  67.                                         <div class="footer__column">
  68.                                                 <div class="footer__item">
  69.                                                         <div class="footer__content">
  70.                                                                 All rights reserved &copy; | photographer Vladimir Pritchin<br>
  71.                                                                 Версия сайта: v2.12-wp-flex от 00.00.2020
  72.                                                         </div>
  73.                                                 </div>
  74.                                         </div>
  75.                                         <div class="footer__column">
  76.                                                 <div class="footer__item">
  77.                                                         <div class="footer__content">
  78.                                                         Тру-ля-ля, тру-ля-ля, мы везём с собой кота, чижика, собаку, кошку-забияку, вот компания какая
  79.                                                 </div>
  80.                                                 </div>
  81.                                         </div>
  82.                                         <div class="footer__column">
  83.                                                 <div class="footer__item">
  84.                                                         <div class="footer__content">
  85.                                                                 <a href="http://www.photounion.ru/" title="Союз ФотоХудожников России">
  86.                                                                         <img src="images/SFR_LOGO_R.jpg" alt="Союз ФотоХудожников России" width="250" height="60">
  87.                                                                 </a>
  88.                                                                 <a href="http://rgo.ru" title="Русское Географическое Общество" target="_blank">
  89.                                                         <img src="images/rgo-2.jpg" width="250" height="60" alt="Русское Географическое Общество" longdesc="http://rgo.ru">
  90.                                                 </a>
  91.                                                         </div>
  92.                                                 </div>
  93.                                         </div>
  94.                                 </div>
  95.                         </div>
  96.                 </footer>
  97. <!-- END footer -->
  98.         </div>
  99. <!-- END wrapper -->
  100.         <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
  101.         <script src="js/script.js"></script>
  102. </body>
  103. </html>
  104.  


файл стилей
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. @charset "UTF-8";
  3. /* Обнуление */
  4. * {
  5.         margin: 0;
  6.         padding: 0;
  7.         border: 0;
  8. }
  9. *, *:before, *:after {
  10.         -moz-box-sizing: border-box;
  11.         -webkit-box-sizing: border-box;
  12.         box-sizing: border-box;
  13. }
  14. :focus, :active {
  15.         outline: none;
  16. }
  17. a:focus, a:active {
  18.         outline: none;
  19. }
  20. header, nav, aside, footer {
  21.         display: block;
  22. }
  23. html, body {
  24.         height: 100%;
  25.         width: 100%;
  26.         font-size: 100%;
  27.         line-height: 1;
  28.         font-size: 14px;
  29.         -ms-text-size-adjust:100%;
  30.         -moz-text-size-adjust:100%;
  31.         -webkit-text-size-adjust:100%;
  32. }
  33. input, button, textarea {
  34.         font-family: inherit;
  35. }
  36. input::-ms-clear {
  37.         display: none;
  38. }
  39. button {
  40.         cursor: pointer;
  41. }
  42. button::-moz-focus-inner {
  43.         padding: 0;
  44.         border:0;
  45. }
  46. a, a:visited {
  47.         text-decoration: none;
  48. }
  49. a:hover {
  50.         text-decoration: none;
  51. }
  52. ul li {
  53.         list-style: none;
  54. }
  55. img {
  56.         vertical-align: top;
  57. }
  58. h1, h2, h3, h4, h5, h6 {
  59.         font-size: inherit;
  60.         font-weight: 400;
  61. }
  62.  
  63. /*--------------------*/
  64.  
  65. /***********************************
  66.                         Google Fonts
  67. ***********************************/
  68. @import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700&subset=latin,cyrillic);
  69. @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400&display=swap);
  70. @import url(https://fonts.googleapis.com/css?family=Roboto:700&display=swap);
  71.  
  72. /* Основные стили */
  73. body {
  74.         font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  75. }
  76. .wrapper {
  77.         display: flex;
  78.         min-height: 100%;
  79.         overflow: hidden;
  80.         flex-direction: column;
  81.         background-color: #18171c;
  82. }
  83. .container {
  84.         max-width: 1280px;
  85.         margin: 0 auto;
  86.         padding: 0px 15px;
  87. }
  88. @media (max-width: 1280px) {
  89.         .container {
  90.                 max-width: 970px;
  91.         }
  92. }
  93. @media (max-width: 992px) {
  94.         .container {
  95.                 max-width: 750px;
  96.         }
  97. }
  98. @media (max-width: 767px) {
  99.         .container {
  100.                 max-width: none;
  101.         }
  102. }
  103.  
  104. .content { /* для прижатия футера */
  105.         flex: 1 1 auto;
  106. }
  107.  
  108. .header {
  109.         background-color: #000;
  110.         position: fixed;
  111.         width: 100%;
  112.         top: 0;
  113.         left: 0;
  114.         z-index: 50;
  115. }
  116. .header:before {
  117.         content: '';
  118.         position: absolute;
  119.         top: 0;
  120.         left: 0;
  121.         width: 100%;
  122.         height: 100%;
  123.         background-color: #000;
  124.         z-index: 2;
  125. }
  126. .header__body {
  127.         position: relative;
  128.         display: flex;
  129.         justify-content: space-between;
  130.         height: 80px;
  131.         align-items: center;
  132. }
  133. .header__logo {
  134.         flex: 0 0 40%;
  135.         position: relative;
  136.         z-index: 3;
  137. }
  138. .header__logo img {
  139.         max-width: 100%;
  140.         display: block;
  141. }
  142. .header__burger {
  143.         display: none;
  144. }
  145. .header__menu {}
  146.  
  147. .header__list {
  148.         display: flex;
  149.         position: relative;
  150.         z-index: 2;
  151. }
  152. .header__list li {
  153.         list-style: none;
  154.         margin: 0 0 0 20px;
  155. }
  156. .header__link {
  157.         color: #fff;
  158.         text-transform: uppercase;
  159.         font-family: 'PT Sans Narrow', sans-serif;
  160.         font-size: 18px;
  161.         font-weight: 700;
  162.         text-decoration: none;
  163. }
  164. .header__link:hover {
  165.         color: #cca700;
  166. }
  167.  
  168. @media (max-width: 767px) {
  169.         body.lock {
  170.                 overflow: hidden;
  171.         }
  172.         .header__body {
  173.                 height: 60px;
  174.         }
  175.         .header__logo {
  176.                 flex: 0 0 250px;
  177.         }
  178.         .header__burger {
  179.                 display: block;
  180.                 position: relative;
  181.                 width: 30px;
  182.                 height: 20px;
  183.                 z-index: 3;
  184.         }
  185.         .header__burger:before,
  186.         .header__burger:after {
  187.                 content: '';
  188.                 background-color: #fff;
  189.                 position: absolute;
  190.                 width: 100%;
  191.                 height: 2px;
  192.                 left: 0;
  193.                 transition: all 0.3s ease 0s;
  194.         }
  195.         .header__burger span {
  196.                 position: absolute;
  197.                 background-color: #fff;
  198.                 left: 0;
  199.                 width: 100%;
  200.                 height: 2px;
  201.                 top: 9px;
  202.                 transition: all 0.3s ease 0s;
  203.         }
  204.         .header__burger:before {
  205.                 top: 0;
  206.         }
  207.         .header__burger:after {
  208.                 bottom: 0;
  209.         }
  210.         .header__burger.active span {
  211.                 transform: scale(0);
  212.         }
  213.         .header__burger.active:before {
  214.                 transform: rotate(45deg);
  215.                 top: 9px;
  216.         }
  217.         .header__burger.active:after {
  218.                 transform: rotate(-45deg);
  219.                 bottom: 9px;
  220.         }      
  221.         .header__menu {
  222.                 position: fixed;
  223.                 top: -100%;
  224.                 left: 0;
  225.                 width: 100%;
  226.                 height: 100%;
  227.                 overflow: auto; /* чтобы меню можно было скролить */
  228.                 background-color: #4d4d4d; /* цвет меню */
  229.                 padding: 70px 10px 20px 10px;
  230.                 transition: all 0.3s ease 0s;
  231.         }
  232.         .header__menu.active {
  233.                 top: 0;
  234.         }
  235.         .header__list {
  236.                 display: block;
  237.                 text-align: center;
  238.         }
  239.         .header__list li {
  240.                 margin: 0 0 20px 0;
  241.         }
  242.         .header__link {
  243.                 font-size: 22px;
  244.         }
  245. }
  246.  
  247. /********************************
  248. *                                                               *
  249. *                        CONTENT                        *
  250. *                                                               *
  251. ********************************/
  252. .title {
  253.         color: #445161;
  254.         font-size: 30px;
  255.         line-height: 36px;
  256. }
  257. /********************************
  258. *                                                               *
  259. *                  TEST CONTENT                 *
  260. *                                                               *
  261. ********************************/
  262. .page {
  263.         margin: 100px 0 20px 0;
  264. }
  265. .page__row {
  266.         display: flex;
  267.         margin: 0 -10px; /* ЗДЕСЬ НЕ РАБОТАЕТ */
  268.         border: 5px solid #f99;
  269. }
  270. .page__column {
  271.         padding: 0 10px; /* ЗДЕСЬ НЕ РАБОТАЕТ */
  272.         border: 5px solid #ff0;
  273. }
  274. .page__column_1 {
  275.         flex: 1 1 auto;
  276.         order: 2;
  277.         background-color: #009;
  278. }
  279. .page__column_2 {
  280.         flex: 0 0 20%;
  281.         order: 1;
  282.         background-color: #00f;
  283. }
  284. .page__content {}
  285.  
  286. /********************************
  287. *                                                               *
  288. *               END TEST CONTENT                *
  289. *                                                               *
  290. ********************************/
  291.  
  292. /********************************
  293. *                                                               *
  294. *                        FOOTER                         *
  295. *                                                               *
  296. ********************************/
  297. .footer {
  298.         background-color: #000;
  299. }
  300. .footer__row { /* flex-контейнер */
  301.         display: flex;
  302.         margin: 0 -10px; /* Отступы между колонками. Для этого флекс-контейнер раздвигаем отрицательным margin наполовину отступа */
  303. }
  304. .footer__column { /* flex-элемент */
  305.         flex: 0 1 33.333%;
  306.         padding: 0 10px; /* Отступы между колонками. А сами колонки сдвигаем */
  307.         display: flex; /* чтобы расширить вниз колонки */
  308. }
  309. .footer__item { /* содержимое */
  310.         flex-grow: 1; /* чтобы заполнить пространство вправо */
  311.         background-color: #fff;
  312.         color: #000;
  313.         margin: 10px 0 10px 0; /* верхний, правый, нижний, левый */
  314.         border-radius: 5px;
  315. }
  316. .footer__content {
  317.         padding: 10px;
  318.         color: #000;
  319.         font-size: 14px;
  320.         line-height: 20px;
  321.         display: flex;
  322.         position: relative; /* для img */
  323. }
  324. .footer__content img {
  325.         max-width: 100%;
  326.         height: 100%;
  327.         object-fit: cover;
  328.         opacity: .6;
  329. }
  330. .footer__content img:hover {
  331.         opacity: 1;
  332. }
  333.  
  334. @media screen and (min-width: 320px) and (max-width: 519px) {
  335.         .footer__row {
  336.                 margin: 0;
  337.                 flex-direction: column;
  338.         }
  339.         .footer__column { /* flex-элемент */
  340.                 flex: 0 1 100%;
  341.                 padding: 0;
  342.         }
  343.         .footer__item {
  344.                 margin: 5px 0 5px 0;
  345.         }
  346. }
  347.  
 
 Top
August_II
Отправлено: 26 Июля, 2020 - 21:33:35
Post Id


Новичок


Покинул форум
Сообщений всего: 49
Дата рег-ции: Нояб. 2014  


Помог: 0 раз(а)




Ребята!
Тупанул. Не в том блоке сделал border и background.
Всё нормально работает.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB