Таблица лидеров


Популярные публикации

Отображаются публикации с наибольшей репутацией начиная с 08/20/18 во всех областях

  1. 2 балла
    Убедили 🙂 тогда вот так: <table cellpadding="0" cellspacing="0" border="1"> <tr> <td></td> <td></td> </tr> <tr> <td class="im"></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> td{ width: 100px; height: 50px; } .im{ position: relative; } .im:before{ position: absolute; width: 20px; height: 20px; background: url(http://placekitten.com/g/20); content: ''; right: 0; top: 50%; transform: translate(50%, -50%); z-index: -1; }
  2. 2 балла
    Решил поиграться с тегом details и вот что получилось: See the Pen KxaPyX by Alexandr (@AlexZaw) on CodePen. Для поддержки EDGE и IE9-11 пришлось дублировать код, так как они не поддерживают тег details, так что, при использовании чекбоксов код получится короче, но тем не менее вдруг кому пригодится способ стилизации details. (если нужно зафиксировать меню - меняем позиционирование у details и .mmenu ) <details> <summary tabindex='1'> <span class="top"></span> <span class="center"></span> <span class="bottom"></span> </summary> <ul class="mmenu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> </ul> </details> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt itaque eum minima exercitationem enim incidunt, eveniet ipsa officia quasi aut eaque quas vel vero atque a perspiciatis tempora! In, eligendi. details { /*position: fixed;*/ position: relative; } ::-webkit-details-marker { display: none; } ::-moz-list-bullet { list-style-type: none; } summary { position: relative; width: 30px; height: 20px; outline: none; } summary span { position: absolute; left: 0; width: 100%; height: 3px; background: #000; border-radius: 3px; transition: all .5s; } .top { top: 0; } .center { top: 50%; transform: translateY(-50%); } .bottom { bottom: 0; } .mmenu { /*position: relative;*/ position: absolute; padding: 0; list-style: none; overflow: hidden; background: #ccc; border-radius: 10px; box-shadow: 0 0 5px #000, inset 0 0 5px #fff } .mmenu a { text-decoration: none; font-size: 18px; color: midnightblue; position: relative; overflow: hidden; } .mmenu a:before { content: ''; display: block; position: absolute; height: 10px; width: 3px; transform: rotate(45deg); background: #fff; right: 100%; top: 6px; opacity: 0; } .mmenu a:hover:before { animation: move .2s linear; animation-fill-mode: forwards } details[open] .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } details[open] .bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } details[open] .center { opacity: 0; } details[open] .mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; } @keyframes showMenu { 0% { padding: 0; opacity: 0; } 100% { opacity: 1; padding: 20px 40px; } } @keyframes move { 0% { right: 100%; opacity: 0; } 50% { right: 50%; opacity: 1; } 100% { right: 0; opacity: 0; } } /*EDGE support*/ @supports (-ms-ime-align:auto) { details, summary { display: block; } summary~.mmenu { opacity: 0; } summary:focus~.mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; } summary:focus .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .bottom.bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .center { opacity: 0; } .mmenu a:hover:before { animation: move .2s linear; animation-fill-mode: forwards } } /*IE9-11 support*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { details, summary { display: block; } summary~.mmenu { visibility: hidden; } summary:focus~.mmenu { animation: showMenu .5s linear; animation-fill-mode: forwards; visibility: visible; } summary:focus .top { top: 50%; transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .bottom.bottom { top: 50%; transform: translateY(-50%) rotate(-45deg); box-shadow: 0 0 5px #000, inset 0 0 5px #fff } summary:focus .center { opacity: 0; } }
  3. 1 балл
    Про dl маленько не так выразился, он может содержать в себе один или больше элементов dt за которыми следуют один или больше элементов dd А вот элементы dt и dd могут содержать в себе элементы ul. Ваш код должен выглядет как то так: <dl> <dt>Web дизайн</dt> <dd>Java Script и библиотека jQuery <ul> <li> Начальный уровень </li> <li> Продвинутый уровень </li> </ul> </dd> <dd>3D MAX <ol> <li> Начальный уровень </li> <li> Продвинутый уровень </li> </ol> </dd> </dl> Вот здесь https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html расписано какой у кого может быть контент
  4. 1 балл
  5. 1 балл
    на сколько я помню в css комментарии лучше писать /* СТИЛИ ПРАВОГО БОКОВОГО БЛОКА */ а не так // СТИЛИ ПРАВОГО БОКОВОГО БЛОКА в вашем случае скорее всего .menu { float: left; } тоже не работает
  6. 1 балл
    Можно так: <table cellpadding="0" cellspacing="0" border="1"> <tr> <td></td> <td></td> </tr> <tr> <td class="im"><img src="http://placekitten.com/g/20" alt=""></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> td{ width: 100px; height: 50px; } .im{ position: relative; } .im img{ position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); }
  7. 1 балл
    получить размер картинки можно при ее загрузке, сделайте прелоадер для нее и показывайте после полной загрузки
  8. 1 балл
    с gmail всегда все сложно, могут быть проблемы в настройке хостинга
  9. 1 балл
    Вот с картинками https://codepen.io/hesrun/pen/EeYzBz Тогда не вижу причин не делать это на бутстрапе... На mansory, вам тоже придется писать доп классы, для высоких и низких блоков. если вам нужно чтоб и высота менялась вместе с шириной, высоту прописывайте в vw и будет счастье...
Таблица лидеров находится в часовом поясе Киев/GMT+03:00

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы