Задать вопрос
lambesis

Lam Besis

Слабоумие и отвага!
Ответы пользователя по тегу HTML

  • Почему текст вылазит за пределы сетки Bootstrap в WordPress?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Возможно параграфам задана фиксированная ширина.
    Ответ написан
    Комментировать
    Комментировать

  • Не срабатывает модальное окно, как можно исправить?

    lambesis
    @lambesis
    Слабоумие и отвага!
    У вас id="form-modal-1" задан и ссылке и форме
    Ответ написан
    4 комментария
    4 комментария

  • Целесообразно ли использовать в качестве bacground-image сразу весь задник макета лэндинга?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Зависит от макета, покажите его если есть возможность.
    Вообще так лучше не делать, если фон не бесшовный вы намучаетесь с ним потом на стадии адаптива.
    Ответ написан
    Комментировать
    Комментировать

  • Увеличивает ли padding ширину блока?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Если ширина фиксирована, она меняться не будет. Блок внутри будет подстраиваться под родителя.
    Если внутреннему блоку жестко задать ширину превышающую ширину родительского - он будет вываливаться, но ширина родительского блока все равно останется 300px,
    Ответ написан
    2 комментария
    2 комментария

  • Допустим ли пустой h1?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Не допустимо, ругаться будут.
    Сайт с несемантичной и невалидной вёрсткой не может считаться оптимизированным под поисковики.
    Ответ написан
    5 комментариев
    5 комментариев

  • Как сделать вертикальное выравнивание с помощью bootstrap 4 в internet explorer 11?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Bootstrap 4 официально не поддерживает IE11.
    Неофициально, Bootstrap должен выглядеть и вести себя достаточно хорошо в Chromium и Chrome для Linux, Firefox для Linux и Internet Explorer 9, хотя они официально не поддерживаются.

    Используйте Bootstrap 3.
    А вообще вы, вы не уточнили какое именно вертикальное выравнивание вам нужно? Какие стили у вас? Покажите код.
    Ответ написан
    Комментировать
    Комментировать

  • Как убрать белое пространство под фоном у контейнера?

    lambesis
    @lambesis
    Слабоумие и отвага!
    На счет белой полоски: она появляется из-за того что .slide растягивается и на всю ширину, и на всю высоту экрана, а фон при этом позиционируется по широте (background-size: 100%;). Картинке просто высоты не хватает чтобы заполнить оставшееся место. Вы правильно использовали background-size: cover. Одна из сторон в любом случае будет обрезаться если вам принципиально нужен параллакс на все окно, но вы можете управлять этим.

    В этом примере картинки занимает все доступное пространство, но их пропорции зависимы от высоты экрана.
    Ответ написан
    Комментировать
    Комментировать

  • Не отображаются картинки и не подключается файл .css, что Делать?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Вы меня простите, но вас не смущает наличие двух тегов <head>? При этом в них не попал ни один из ваших файлов стилей, так же как и картинки не попали в <body>.
    Скорее всего из-за этого в PHP возникают ошибки.

    <html>
<head>
    <title>Мистер робот</title>
    <meta charset="utf-8">
</head>
<!-- 
<link rel="stylesheet" href="opp.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet"> 
-->
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<!-- 
<div class="backwrap gradient">
	<div class="back-shapes">
		<img src="circle.png" class="floating" style="top:66.5040650406504%;left:12.96875%;animation-delay:-NaNs;" />
		<img src="square.png" class="floating" style="top:60.97560975609756%;left:42.1875%;animation-delay:-NaNs;" />
    <img src="square.png" class="floating" style="top:28.943089430894307%;left:93.90625%;animation-delay:-NaNs;" />
	</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet"> 
-->
<body>
    Ответ написан
    Комментировать
    Комментировать

  • Можно ли так прописывать медиа запросы (media queries )?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Если вы используете sass и не допускаете в остальных местах кода каких-то переопределений, то такие медиа запросы отличное решение.
    Обязательно писать медиа запросы в конце файла стоит если никакие препроцессоры не используются.
    UPD: Sass рекомендует делать медиа запросы именно так
    Ответ написан
    Комментировать
    Комментировать

  • Как вставить текст во внутрь изображения?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Не очень понятно что именно вы имеете ввиду, но если вдруг я вас поняла, то вот.
    Либо делайте эту картинку фоновым изображением:
    .content1-down2 {
  background-image: url(../img/vector-smart-object.png);
}

    Либо, если вам критически необходим в html-разметке, позиционируйте картинку абсолютно и растягивайте на размеры родителя:
    .content1-down2 {
  position: relative;
}
img{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
    Ответ написан
    3 комментария
    3 комментария

  • Может кто-то подскажет готовое решение для обратного отсчета?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Готового решения нет, но есть годная теория:
    Плагин (весьма легкий, куча демок, легко настраивается): https://harshen.github.io/jQuery-countdownTimer/
    У него есть несколько функций обратного вызова, на одну из них можно повесить прогресс-бар.
    Ответ написан
    1 комментарий
    1 комментарий

  • Проблема с отображением иконок Font Awesome. Что делать?

    lambesis
    @lambesis
    Слабоумие и отвага!
    libs/svg/css/fontawesome-all.min.css

    --libs
    ---svg
    ----fontavesome-all.min.css

    Может, проблема все-таки с путями? В пути подключаемого стиля есть директория css, а в файловой структуре что вы написали этой директории нет.
    Ответ написан
    3 комментария
    3 комментария

  • Какие сеточные фреймворки flexbox используете?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Очевидно, Bootstrap v4 - это первое что приходит в голову.
    Еще недавно нашла Flex Layout Attribute, уж больно интересен этот концепт избавления html от кучи перечислений классов. Однако потестить пока не успела, но может вам пригодится.
    Ответ написан
    1 комментарий
    1 комментарий

  • Svg и его друзья. Что с ним не так?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Я столкнулась с такой же проблемой как и у вас, и методом проб и ошибок поняла в чем дело. Вы правы, svg из фотошопа нужно "специально" сохранять. Самую простую форму/вектор фш экспортирует криво. Но если просто скопировать SVG-код слоя, создать файл.svg, и потом закинуть в него скопированный код, то все работает идеально.
    5ac3b107897d4571952566.png
    К слову этот метод прекрасно работает даже когда формам заданы какие-нибудь параметры наложения.
    Ответ написан
    Комментировать
    Комментировать

  • CSS Desktop First фреймворк?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Bootstrap в четвёртой версии предусматривает вёрстку Desktop First, можно выбрать подходящие брекпойнты: getbootstrap.com/docs/4.0/layout/overview
    Ответ написан
    Комментировать
    Комментировать

  • Как правильно сверстать блоки в таком порядке?

    lambesis
    @lambesis
    Слабоумие и отвага!
    У меня получилось решить эту задачу через гриды: линк на codepen. По высоте выстраивается, порядок соблюдается, на мобилке превращаются в обычную колонку.
    На счет поддержки браузерами - гриды давно вошли в спецификацию, простейшие функции поддерживаются уже в 87% браузеров.
    Ответ написан
    2 комментария
    2 комментария

  • Не получается нарисовать треугольник. Как это сделать?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Как уже ответили выше, у вас не указано свойство content: ''. И это одна из самых противных ошибок)
    Рекомендую почитать крайне информативное руководство по псевдоклассам и псевдоэлементам, оно переведено на русский язык.
    Ответ написан
    3 комментария
    3 комментария

  • Как учесть большинство экранов смартфонов используя @media css3?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Рекомендую очень внимательно ознакомиться с этой статьей: 100% правильный способ делать контрольные точки в CSS
    В ней ответы на все вопросы и описан самый логичный и правильный подход к медиа-запросам.
    Ответ написан
    Комментировать
    Комментировать

  • Количество пролистываемых слайдов Owl carousel?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Вы используете старую версию owl-carousel. Рекомендую скачать новую отсюда, вот как должен будет выглядеть ваш код:

    $(document).ready(function() {
  $(".carousel").owlCarousel({
    loop: true, //включаем бесконечную прокрутку
    nav: true, // пишем это вместо "navigation" и включаем кнопки 'prev' и 'next'
    navText: [
        "<i class='fa fa-chevron-left'></i>", 
        "<i class='fa fa-chevron-right'></i>"
            ], // пишем это вместо "navigationText" и подключаем свои кнопки
    dots: false, // вместо "pagination", отключаем точки
    autoplay: true, // включаем автопрокрутку
    autoplaySpeed: 500, // пишем это вместо "slideSpeed" и задаем скорость прокрутки
    responsiveClass: true,
    center: true,
    responsive: {
        0: {
            items: 0 // от 0px до 599px слайдов нет
        }, 
        600: {
            items: 1 // от 600px до 899px один слайд
        }, 
        900: {
            items: 2 // от 900px до 1199px два слайда
        }, 
        1200: {
            items: 3  // от 1200px и больше три слайда
        }
    }
  });
});
    Ответ написан
    Комментировать
    Комментировать

  • Как выглядит современная верстка?

    lambesis
    @lambesis
    Слабоумие и отвага!
    Как человек, который был в той же ситуации, рекомендую вот что: в первую очередь, самым идеальным вариантом будет найти работу верстальщиком, как уже сказали выше. Пусть не за очень большие деньги, но найти ее надо обязательно. Вы не поверите, насколько быстро вы будете учиться, т.к. задачи перед вами будут стоять совершенно реальные, и каждый день будет что-то новое чего вы еще не делали, в отличии от тренировочных макетов. Таким образом у вас накопится хороший опыт реальной разработки.
    Далее, настоятельно рекомендую постоянно гуглить. Абсолютно по всем вопросам и сложностям которые у вас возникают. Повторюсь, именно гуглить, не задавать вопрос на тостер (не воспринимайте в упрек :)), а самостоятельно искать ответы, решения и туторы. В будущем это очень поможет вам быстро находить всю необходимую информацию, а так же грамотно и четко формулировать соответствующий вашей задаче запрос.
    Так же, советую постоянно читать книги и статьи из мира фронтенда. Постоянно!
    Навскидку из того что пришло в голову скажу четыре сайта.
    Всем известный хабр: открываем тег "html" и внимательно изучаем все статьи подряд, делая для себя пометки в блокноте и добавляя в закладки полезные статьи, которые могут пригодиться в будущем, отмечая для себя темы которые нужно изучить в будущем и т.д. Даже касательно вашего вопроса о технологиях - полхабра забито статьями на эту тему.
    Второй - css-live.ru, шикарный ресурс с русскоязычным контентом, огромным количеством переводов каяественных иностранных статей, и очень понятной подачей материала.
    Третий - webref.ru (бывший htmlbook). Лучший справочник по html и css, а так же на нем множество уроков, статей и полезных материалов и бесплатных обучающих курсов.
    И четвертый - frontender.info. Изначально может показаться что там все связано с Js, но на самом деле это не так.
    Помимо всего этого, порекомендую вам курсы от LoftSchool. Они лучшие, честно. За два месяца с ними вы изучите больше чем самостоятельно за полгода, и я не утрирую.

    И на последок, вам нужен наставник. Человек, который подскажет решение если в гугле не удается найти ответ, придумает ТЗ для тренировки, подскажет где ошибка в коде и, если что, направит в нужное русло. Если хотите, могу вам в этом помочь, я люблю делиться знаниями :)
    Ответ написан
    2 комментария
    2 комментария