PHP.SU

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

Страниц (4): [1] 2 3 4 »

> Найдено сообщений: 53
August_II Отправлено: 26 Июля, 2020 - 21:33:35 • Тема: не срабатывает отступ • Форум: HTML, Дизайн & CSS

Ответов: 1
Просмотров: 1523
 Ребята!
Тупанул. Не в том блоке сделал border и background.
Всё нормально работает.
August_II Отправлено: 25 Июля, 2020 - 22:19:30 • Тема: не срабатывает отступ • Форум: HTML, Дизайн & CSS

Ответов: 1
Просмотров: 1523
 Товарищи помогите разобраться!
Почему в не срабатывает конструкция по отступу с отрицательным 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.  
August_II Отправлено: 25 Июля, 2020 - 22:12:28 • Тема: Выровнять блок по центру экрана • Форум: HTML, Дизайн & CSS

Ответов: 2
Просмотров: 1733
 Чтобы центрировать с помощью position нужны конкретные размеры экрана, а экраны у всех разные. Поэтому использование position нужно обдумывать как следует. Потому что это свойство как бы вырывает блок из общего кода, и потом трудно его присабачить в нужное место.
Лучше родителю указать "margin: 0 auto;" его и все браузеры понимают и под любое окно по центру встанет
August_II Отправлено: 23 Июля, 2020 - 09:17:21 • Тема: Как создать разные классы в цикле вывода статей Wordpress? • Форум: Вопросы новичков

Ответов: 1
Просмотров: 427
 Вопрос решён.

PHP:
скопировать код в буфер обмена
  1.  
  2. <?PHP get_header(); ?>
  3.  
  4. <!-- Здесь контент -->
  5.             <div class="block_news">
  6.                 <div class="container">
  7.                     <div class="block_news__row">
  8.                             <?PHP // Display blog posts on any page
  9.                             $temp = $wp_query; $wp_query= null;
  10.                             $wp_query = new WP_Query(); $wp_query->query('showposts=8' . '&paged='.$paged);
  11.                             $nn = 1;
  12.                             while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
  13.                         <div class="block_news__elements block_news__elements_<?= $nn++ ?>">
  14.                             <div class="block_news__content">
  15.                                 <a href="<?PHP the_permalink(); ?>"><?PHP the_post_thumbnail(); ?></a>
  16.                                 <div class="block_news__title">
  17.                                     <?PHP title_chars(35, '...'); ?>
  18.                                 </div>
  19.                             </div>
  20.                         </div>
  21.         <?PHP endwhile; ?>
  22.                     </div>
  23.                     <!-- END block_news__row -->
  24. <!-- Pangination -->
  25.                 <?PHP the_posts_pagination(); ?>
  26. <!-- END Pangination -->
  27.         <?PHP wp_reset_postdata(); ?>
  28. <!-- КОНЕЦ Вывод содержимого страницы в wp -->
  29.                 </div><!-- END Container -->
  30.             </div><!-- END block_news -->
  31. <!-- КОНЕЦ контент -->
  32. <?PHP get_footer(); ?>
  33.  
August_II Отправлено: 20 Июля, 2020 - 16:02:36 • Тема: Как создать разные классы в цикле вывода статей Wordpress? • Форум: Вопросы новичков

Ответов: 1
Просмотров: 427
 Сделал макет сайта, в выводе будет картинка и название.
Но проблема в том, что первые две новости в больших блоках, а остальные в маленьких.
В div-е есть основной класс и дополнительный block_news__elements_1, ...2, ...3
Как сделать чтобы при выводе статей каждой присваивался класс block_news__elements_$n?
На flexbox это так у меня получилось.

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <div class="block_news">
  3.                                 <div class="container">
  4.                                         <div class="block_news__row">
  5.                                                 <div class="block_news__elements block_news__elements_1">
  6.                                                         <div class="block_news__content">
  7.                                                                 <picture>
  8.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  9.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  10.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  11.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  12.                                                                 </picture>
  13.                                                                 <div class="block_news__title">
  14.                                                                         Далеко-далеко за словесными горами в стране.
  15.                                                                 </div>
  16.                                                         </div>
  17.                                                 </div>
  18.                                                 <div class="block_news__elements block_news__elements_2">
  19.                                                         <div class="block_news__content">
  20.                                                                 <picture>
  21.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  22.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  23.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  24.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  25.                                                                 </picture>
  26.                                                                 <div class="block_news__title">
  27.                                                                         Lorem ipsum dolor sit amet.
  28.                                                                 </div>
  29.                                                         </div>
  30.                                                 </div>
  31.                                                 <div class="block_news__elements block_news__elements_3">
  32.                                                         <div class="block_news__content">
  33.                                                                 <picture>
  34.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  35.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  36.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  37.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  38.                                                                 </picture>
  39.                                                                 <div class="block_news__title">
  40.                                                                         Lorem ipsum dolor sit amet, consectetur adipisicing.
  41.                                                                 </div>
  42.                                                         </div>
  43.                                                 </div>
  44.                                                 <div class="block_news__elements block_news__elements_4">
  45.                                                         <div class="block_news__content">
  46.                                                                 <picture>
  47.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  48.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  49.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  50.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  51.                                                                 </picture>
  52.                                                                 <div class="block_news__title">
  53.                                                                         Lorem ipsum dolor sit amet, consectetur.
  54.                                                                 </div>
  55.                                                         </div>
  56.                                                 </div>
  57.                                                 <div class="block_news__elements block_news__elements_5">
  58.                                                         <div class="block_news__content">
  59.                                                                 <picture>
  60.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  61.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  62.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  63.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  64.                                                                 </picture>
  65.                                                                 <div class="block_news__title">
  66.                                                                         Lorem ipsum dolor sit amet, consectetur.
  67.                                                                 </div>
  68.                                                         </div>
  69.                                                 </div>
  70.                                                 <div class="block_news__elements block_news__elements_6">
  71.                                                         <div class="block_news__content">
  72.                                                                 <picture>
  73.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  74.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  75.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  76.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  77.                                                                 </picture>
  78.                                                                 <div class="block_news__title">
  79.                                                                         Lorem ipsum dolor sit amet, consectetur.
  80.                                                                 </div>
  81.                                                         </div>
  82.                                                 </div>
  83.                                                 <div class="block_news__elements block_news__elements_7">
  84.                                                         <div class="block_news__content">
  85.                                                                 <picture>
  86.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  87.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  88.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  89.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  90.                                                                 </picture>
  91.                                                                 <div class="block_news__title">
  92.                                                                         Lorem ipsum dolor sit amet, consectetur.
  93.                                                                 </div>
  94.                                                         </div>
  95.                                                 </div>
  96.                                                 <div class="block_news__elements block_news__elements_8">
  97.                                                         <div class="block_news__content">
  98.                                                                 <picture>
  99.                                                                         <source srcset="images/5190IMG_02_12_2017_615-410.jpg" type="image/jpeg" media="(min-width:993px)">
  100.                                                                         <source srcset="images/5190IMG_02_12_2017_460-307.jpg" type="image/jpeg" media="(min-width:768px)">
  101.                                                                         <source srcset="images/5190IMG_02_12_2017_360-240.jpg" type="image/jpeg" media="(max-width:767px)">
  102.                                                                         <img src="images/5190IMG_02_12_2017_615-410.jpg">
  103.                                                                 </picture>
  104.                                                                 <div class="block_news__title">
  105.                                                                         Lorem ipsum dolor sit amet, consectetur.
  106.                                                                 </div>
  107.                                                         </div>
  108.                                                 </div>
  109.                                         </div>
  110.                                 </div>
  111.                         </div>
  112.  


CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. /* BLOCK_NEWS */
  3. .block_news {
  4.         margin-top: 100px;
  5.         /*max-width: 780px;
  6.         margin:0 auto;
  7.         padding-bottom: 20px;*/ /* стоит container */
  8. }
  9. .block_news__row {
  10.         display: flex;
  11.         flex-wrap: wrap;
  12. }
  13. .block_news__elements {
  14.         border:5px solid #fff;
  15. }
  16. .block_news__elements_1 {
  17.         flex: 0 1 50%;
  18. }
  19. .block_news__elements_2 {
  20.         flex: 0 1 50%;
  21. }
  22. .block_news__elements_3,
  23. .block_news__elements_4,
  24. .block_news__elements_5,
  25. .block_news__elements_6,
  26. .block_news__elements_7,
  27. .block_news__elements_8 {
  28.         flex: 0 1 33.333%;
  29. }
  30. .block_news__content {
  31.         width: 100%;
  32.         position: relative; /* для картинки */
  33. }
  34. .block_news__title {
  35.         position: absolute;
  36.         bottom: 5px;
  37.         left: 0;
  38.         width: 100%;
  39.         color: #fff;
  40.         font-size: calc(18px + 12 * ((100vw - 320px) / (1280 - 320)));
  41.         background: rgb(0, 0, 0, 0.6);
  42.         padding: 10px;
  43. }
  44. .block_news__content img { /* адаптация картинки под родительский блок */
  45.         max-width: 100%;
  46. }
  47.  
August_II Отправлено: 18 Сентября, 2019 - 09:24:41 • Тема: один шаблон на несколько категорий в WordPress • Форум: Вопросы новичков

Ответов: 1
Просмотров: 246
 Никто не знает? Или всем лень?
Может хоть ссылку на решение подобного вопроса скинете, где именно про это написано, а не просто ссылка на мануал.
August_II Отправлено: 17 Сентября, 2019 - 20:56:31 • Тема: один шаблон на несколько категорий в WordPress • Форум: Вопросы новичков

Ответов: 1
Просмотров: 246
 Всем привет!
Подскажите можно ли сделать один category-slag (шаблон) для разных категорий, чтобы не было для каждой категории отдельного slag?
Потому что если так делать, то однотипных страниц будет около 20 или больше, единственное будет только номер категории внутри разный.
August_II Отправлено: 09 Апреля, 2015 - 07:21:19 • Тема: блочная верстка 3 колонки • Форум: HTML, Дизайн & CSS

Ответов: 4
Просмотров: 1225
DelphinPRO пишет:
разметка должна быть такой

CODE (html):
скопировать код в буфер обмена
  1. <div id="left_col"></div>
  2. <div id="right_col"></div>
  3. <div id="content"></div>


а не такой

CODE (html):
скопировать код в буфер обмена
  1. <div id="left_col"></div>
  2. <div id="content"></div>
  3. <div id="right_col"></div>


Помогло!
А почему так это вроде как не логично.
August_II Отправлено: 08 Апреля, 2015 - 21:32:59 • Тема: блочная верстка 3 колонки • Форум: HTML, Дизайн & CSS

Ответов: 4
Просмотров: 1225
 Приветствую народ!
Подскажите что не так, у меня три колонки, слева и справа фиксированной ширины, посередине переменной. Но вот почему-то правый блок находится снизу между футером и сонтентом, справой стороны.
CODE (html):
скопировать код в буфер обмена
  1.  
  2. @charset "windows-1251";
  3. /* CSS Document */
  4. @font-face {
  5.         font-family: "PT Sans Narrow";
  6.         font-style: normal;
  7.         font-weight: 700;
  8.         src: local("PT Sans Narrow Bold"), local("PTSans-NarrowBold"), url("http://fonts.gstatic.com/s/ptsansnarrow/v7/Q_pTky3Sc3ubRibGToTAYuMQYWxAweROEvafRwt5VUg.woff2") format("woff2"), url("http://fonts.gstatic.com/s/ptsansnarrow/v7/Q_pTky3Sc3ubRibGToTAYigwe3ZcNEyK1ut-Sjba9Qg.woff") format("woff");
  9. }
  10. @font-face {
  11.         font-family: "SC Convoy";
  12.         font-style:normal;
  13.         font-weight: 700;
  14.         src: local("SC Convoy"), url(CNVRETTF.ttf);
  15. }
  16. * {
  17.         margin:0;
  18.         padding:0;
  19. }
  20. body {
  21.         width:100%;
  22.         background-color:#333;
  23.         background-image:url(../img/***.jpg);
  24.         background-repeat:no-repeat;
  25.         background-attachment:fixed;
  26.         background-position:center;
  27.         background-size:cover;
  28. }
  29. img {
  30.         border:none;
  31. }
  32. .logo {
  33.         border-radius:10px 0 0 0;
  34. }
  35. /* main style */
  36. #wrapper {
  37.         min-width:760px;
  38.         max-width:1300px;
  39.         margin:0 auto;
  40.         margin-top:10px;
  41.         margin-bottom:10px;
  42.         background-color:rgba(34,1,3,0.8); /* Прозрачный фон #220103 */
  43.         filter:progid:DXImageTransform.Microsoft.gradient (startColorstr=#50220103,endColorstr=#50220103); /* for IE */
  44.         display:block;
  45.         color:#FFF;
  46.         border-radius:10px;
  47. }
  48. #header {
  49.         height:100px;
  50.         padding:0;
  51. }
  52. #nav {
  53.         height:60px;
  54.         line-height:60px;
  55.         text-align:center;
  56.         font-family:SC Convoy;
  57.         font-size:18px;
  58. }
  59. #left_col {
  60.         width:160px;
  61.         float:left;
  62. }
  63. #content {
  64.         margin-left:162px;
  65.         margin-right:202px;
  66.         padding:10px;
  67. }
  68. #right_col {
  69.         width:200px;
  70.         float:right;
  71. }
  72. #footer {
  73.         clear:both;
  74.         height:100px;
  75.         line-height:100px;
  76.         padding:10px;
  77. }
  78.  
  79.  
August_II Отправлено: 13 Марта, 2015 - 12:02:49 • Тема: css меню • Форум: HTML, Дизайн & CSS

Ответов: 3
Просмотров: 876
3d_killer пишет:
не слушается это не делает что?


Это меню должно быть в строчку, а там в столбик
August_II Отправлено: 13 Марта, 2015 - 10:48:56 • Тема: css меню • Форум: HTML, Дизайн & CSS

Ответов: 3
Просмотров: 876
 Категорически приветствую.
Подскажите что не так.
в ie и mozille работает код, а в opera не слушается
CODE (html):
скопировать код в буфер обмена
  1. #nav {
  2.         min-width:452px;
  3.         max-width:986px;
  4.         height:60px;
  5.         float:right;
  6.         font-family:PT Sans Narrow,sans-serif;
  7. }
  8. #navbar_main {
  9.         margin:0 auto;
  10.         padding:5px;
  11.         list-style-type:none;
  12.         min-width:442px;
  13.         max-width:976px;
  14.         height:48px;
  15.         text-align:center;
  16. }
  17. #navbar_main li {
  18.         display:inline;
  19. }
  20. #navbar_main a {
  21.         padding:12px 10px 0; /*верх, лево-право, низ*/
  22.         color:#FFF;
  23.         text-decoration:none;
  24.         font-weight:bold;
  25.         display:inline-block;
  26.         height:48px;
  27.         display:table-cell;
  28. }
  29. #navbar_main a:hover {
  30.         color:#CCC;
  31. }

CODE (html):
скопировать код в буфер обмена
  1.  
  2.         <div id="nav">
  3.                 <ul id="navbar_main">
  4.                 <li><a href="/">ПОРТФОЛИО</a></li>
  5.                 <li><a href="/about">ОБО МНЕ</a></li>
  6.                 <li><a href="/blog">БЛОГ</a></li>
  7.                 <li><a href="/video">ВИДЕО</a></li>
  8.                 <li><a href="/contacts">КОНТАКТЫ</a></li>
  9.             </ul>
  10.         </div>
  11.  

Страниц (4): [1] 2 3 4 »
Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB