Jump to content

AlexZaw

Expert
  • Posts

    650
  • Joined

  • Last visited

  • Days Won

    57

Community Answers

  1. AlexZaw's post in Не отображается скаченный шрифт was marked as the answer   
    Судя по указанному пути папка с вашим шрифтом лежит в одной папке с файлом css
    т.е. структура выглядит примерно так:
    . |   index.html |   style.css | \—fonts         Lato-Italic.ttf так ли это на самом деле?
  2. AlexZaw's post in Отступы was marked as the answer   
    Тут у вас происходит схлопывание margin-ов. Почитайте тут особенно про отмену схлопывания.
  3. AlexZaw's post in Сделать кружок списка с фоном при наведении на ссылку was marked as the answer   
    Либо использовать js, либо ждать когда будет поддерживаться CSS selectors level 4.
    А вообще, повесьте hover на элементы <li> , а не <a>
  4. AlexZaw's post in php was marked as the answer   
    Установить локальный веб сервер, например XAMPP
  5. AlexZaw's post in Проблема с использованием псевдоклассов (в частности :last-child) was marked as the answer   
    header ul li:last-child a { border-right: none; }  
  6. AlexZaw's post in Врестка квадрата и заголовка was marked as the answer   
    Как вариант:
    <div class="wrap"> Наука <div class="square"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt obcaecati rem quasi saepe tenetur illo exercitationem dicta explicabo laudantium cumque, expedita voluptate repudiandae perspiciatis culpa suscipit? Necessitatibus nisi qui quaerat! </div> </div> </div> .square{ position: relative; border-left: 1px solid #000; } .square:before, .square:after{ content: ''; position: absolute; width: 100px; height: 1px; background: #000; left: 0; } .square:before{ top: 0; } .square:after{ bottom: 0; } .text{ position: relative; padding: 30px 0 30px 20px; } .text:before, .text:after{ content: ''; position: absolute; height: 20px; width: 1px; background: #000; left: 100px; } .text:before{ top: 0; } .text:after{ bottom: 0px; }  
  7. AlexZaw's post in Вписать изображение в контейнер с подгонкой размеров was marked as the answer   
    Так фиксированно или может меняться?
    IMHO, при заданных условиях это невозможно. 
  8. AlexZaw's post in Не задаются стили hover из за js was marked as the answer   
  9. AlexZaw's post in Как сверстать такую стрелку? was marked as the answer   
    <div class="var1"></div> <div class="var2"></div> <div class="var3"></div> .var1{ position: relative; height: 40px; width: 15px; display: inline-block; } .var1:after, .var1:before{ content: ''; display: block; background: #000; position: absolute; height: 2px; width: 23px; transform-origin: 0 50%; top: 50%; } .var1:before{ transform: rotate(-60deg); } .var1:after{ transform: rotate(60deg); } .var2{ display: inline-block; position: relative; height: 40px; width: 15px; overflow: hidden; } .var2:after{ position: absolute; top: 50%; content: ''; display: block; width: 40px; height: 40px; border: 2px solid #000; border-top: none; border-right: none; transform-origin: 0 100% ; transform: translateY(-100%) rotate(60deg) skew(30deg); } .var3{ display: inline-block; height: 22px; width: 20px; border: 2px solid #000; border-top: none; border-right: none; transform:rotate(30deg) skewY(30deg) }  
  10. AlexZaw's post in << и >> до и после текста was marked as the answer   
    Пока отвлекался уже ответов надавали ?
  11. AlexZaw's post in Обрезать текст по вертикали was marked as the answer   
    .tabs-slider__title:after{ content: ''; display: inline-block; height: 100%; vertical-align: middle; } .tabs-slider__title { border: 1px solid #000; display: inline-block; width: 100%; height: 36px; margin-bottom: 16px; overflow: hidden; span { display: inline-block; vertical-align: middle; line-height: 18px; } }  
  12. AlexZaw's post in тег before was marked as the answer   
    display забыли задать.
    ну и background-color вместо color
  13. AlexZaw's post in Блок со скошенными краями was marked as the answer   
    Для центрального блока нужно использовать оба псевдоэлемента каждый из которых будет наклонен в свою сторону.
    Но так как у вас :before использован то вам нужно либо поменять вашу разметку и вместо ваших :before использовать что то другое, либо для центрального блока сделать еще один дочерний и работать уже с его псевдоэлементами
  14. AlexZaw's post in CSS_ выравнивание inline-блоков was marked as the answer   
    Начнем с того что заголовок это блочный элемент и по умолчанию занимает 100% ширины. Далее, у строчных элементов выравнивание по вертикали по умолчанию стоит baseline, что и происходит у вас во втором случае.
    Заголовок занял 100% ширины, синие блоки без текста выровнялись нижним краем по базовой линии текста, тем самым отодвинув строку вниз (т.е. по сути они просто большие буквы). Желтый блок с текстом так же выровнялся относительно baseline.
    Задайте для .block2  и .inner-block vertical-align:top;
  15. AlexZaw's post in Альтернатива legend в fieldset was marked as the answer   
    Имеется ввиду следующее:
    <div class="box"></div> .box{ width: 400px; height: 200px; border: 1px solid #000; border-top: none; position: relative; } .box:before{ display: block; content: ''; height: 1px; width: calc(50% - 40px); background: #000; position: absolute; top: 0; left: 0; } .box:after{ display: block; content: ''; height: 1px; width: calc(50% - 40px); background: #000; position: absolute; top: 0; right: 0; } И все-таки, чем не устраивает тег legend?
  16. AlexZaw's post in underline у Hover was marked as the answer   
    В теге ul должны быть только li, перенесите ссылки внутрь пунктов списка
  17. AlexZaw's post in Прогал в Border bottom was marked as the answer   
    Про градиент то на заднем фоне забыли.
    Как один из вариантов решения:
    <div class="wrap"> <fieldset class="rotate"> <legend> <div class="button rotate">button</div> </legend> <div class="box rotate"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni nihil magnam eum aspernatur at aperiam officiis nam aliquid inventore ab repudiandae laboriosam odio ad possimus cupiditate ut, voluptas numquam deserunt. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde earum voluptates magni quisquam natus neque ipsam ad similique autem illum facere architecto ut explicabo, numquam minus provident exercitationem. Numquam, in. </div> </fieldset> </div> body{ background: linear-gradient(to right top, #f00 0%, #0f0 25%, #00f 50%, #ff0 75%, #f0f 100%) no-repeat; } .wrap{ width: 500px; margin: 0 auto; } .rotate{ transform: rotate(180deg); } .button{ background: #ff0; width: 75%; margin: 0 auto; border-radius: 10px; } fieldset{ border-radius: 20px; border: 5px solid #fff } legend{ text-align: center; width: 150px; border: 1px solid transparent; box-sizing: border-box; }  
  18. AlexZaw's post in Якори was marked as the answer   
    У вас картинка перекрывает ссылку поэтому вы не можете на нее нажать.
  19. AlexZaw's post in помогите с :hover was marked as the answer   
    .bg:hover p { color: white; margin-top: 11px; }  
  20. AlexZaw's post in HTML CSS media запросы was marked as the answer   
    http://prntscr.com/hgeip0 вот ваш .wrapper (обведен желтым бордером) в хтмл у него заданы только размеры и бекграунд, содержимого у него нет, соответственно  изменение его размеров, с учетом того как у вас расположены остальные элементы, на  весь остальной сайт не влияет.  
    http://prntscr.com/hgem2y а вот враппер при срабатывании медиа запроса
    как видите запрос отрабатывает нормально, но сама верстка сделана неправильно, положите все остальные элементы внутрь wrapper-а, поправьте расположение элементов и все заработает
  21. AlexZaw's post in Как сверстать такой блок was marked as the answer   
    <div class="box"> <div class="inner"></div> <div class="circle"></div> </div> *{ box-sizing: border-box;} .box{ width: 300px; height: 300px; border: 1px solid grey; position: relative; margin-top: 100px; background-color: #fff; } .inner{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .inner:before{ content: ''; display: block; width: 100px; height: 100px; border-radius:50%; box-shadow: 0 0 0 11px grey; position: absolute; top: -50px; left: 50%; margin-left: -50px; } .circle{ width: 100px; height: 100px; border: 1px solid grey; border-radius:50%; position: absolute; top: -50px; left: 50%; margin-left: -50px; background-color: #fff; box-shadow: 0 0 0 10px #fff } тени добавить труда не составит я думаю
  22. AlexZaw's post in Совет про центрирование блока в блоке/изображения в блоке was marked as the answer   
    как то так я думаю:
    <div class="container"> <div class="container_left"> <img src="https://placeholdit.co//i/100x50?" class="logo"> </div> <div class="container_right"> <span class="text">Menu</span> </div> .container{height: 100px;width: 100%;background-color: #f00; position: relative; } .container_left{width: 100px; position: absolute; top: 50%; left:50%; margin-top:-25px; margin-left:-50px} https://jsfiddle.net/AlexZaw/5cyza3fm/
    остается только меню поставить куда надо
  23. AlexZaw's post in Нужно ли уметь верстать без сеток ? was marked as the answer   
    С сеткой или без зависит от дизайнера, вот дадут тебе макет без сетки и скажут сделать пиксель перфект, и тогда как не крути сетка не поможет.
    Хотя вопрос конечно странный, чем принципиально верстка без сетки отличается от верстки с сеткой? Сетка всего лишь инструмент для более удобной верстки. Если она есть в макете - используй, если нет - провозишься подольше, но все-равно сверстаешь. Это не две разные профессии, а части одной, как у строителя например - либо он будет ломать стену кувалдой, либо возьмет перфоратор или отбойный молоток
  24. AlexZaw's post in Выравнивание блоков was marked as the answer   
    черный блок при изменении марджинов изменяет размер body, а у красного задано абсолютное позиционирование, но не заданы координаты привязки, соответственно он выпадает из потока, но остается на своем месте, а так как размеры у body меняются - меняется и положение блока.
    Если задать, например, top:10px; left:10px красному блоку, то он никуда не убежит
  25. AlexZaw's post in Как работает код данного массива? was marked as the answer   
    var table = new Array(10); //создаем массив с 10 элементами = undefined for(var i = 0; i < table.length; i++) //цикл для перебора массива table[i] = new Array(10); //в каждом элементе массива создаем массив с 10 элементами = undefined for(var row = 0, str = ''; row < table.length; row++) { //перебор массива table for(var col = 0; col < table[row].length; col++) { //перебор внутренних массивов table[row][col] = (row+1)*(col+1); //в каждый элемент внутреннего массива заносим вычесленные значения str += table[row][col] + ' '; // в str добавляем вычеленное значение и пробелы } console.log(str + '\n'); // выводим в консоль str и переносим строку str = ''; //очищаем str } вот как то так
    больше времени ушло на попытку описать что тут делается чем на понимание кода
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy