Jump to content

Web-site Development

Making the web cool

Subforums

  1. Web Design

    Making web beautiful and comfortable

    73
    posts

Explore Questions

There are no popular questions to show right now

149 questions in this forum

  1. Проблема с CLS

    Здравствуйте. Гугл недавно выдал "Проблема с CLS: значение показателя выше порогового (0,25). Устройство: мобильные устройства". С десктопной версией все в общем понятно. Проблема как это исправить на мобильной версии. Все элементы такие как картинки и видео с ютюба подстраиваются под размер экрана и изначально их точные размеры не известны, только ширина в процентах. Как можно в процентом представлении блоков определить их высоты и заранее зарезервировать место?

    Asked by alleclf,

    0 votes
    0 answers

  2. Не работает карта ссылок

    Заплутал в двух соснах <!doctype html> <html> <head> <meta charset="utf-8"> <title>Town</title> <body style="margin: 0px; background: #f35e62;"></body> </head> <body> <img src="Images/fortown.jpg" usemap="#menus" alt="Места" style="display: block; margin: auto; height: 100vh"/> <map name="menus"> <area shape="circle" coords="1052,386,70" href="gathering place.html" target="_blank" alt="Место сбора"> <area shape="circle" coords="934,633,70" href="placeofdeparture" target="_blank" alt="Место отправки"> </map> </…

    Asked by 107andz,

    0 votes
    0 answers

  3. Не работает карта ссылок

    Заплутал в двух соснах <!doctype html> <html> <head> <meta charset="utf-8"> <title>Town</title> <body style="margin: 0px; background: #f35e62;"></body> </head> <body> <img src="Images/fortown.jpg" usemap="#menus" alt="Места" style="display: block; margin: auto; height: 100vh"/> <map name="menus"> <area shape="circle" coords="1052,386,70" href="gathering place.html" target="_blank" alt="Место сбора"> <area shape="circle" coords="934,633,70" href="placeofdeparture" target="_blank" alt="Место отправки"> </map> </…

    Asked by 107andz,

    0 votes
    0 answers

  4. Помогите, header больше, чем нужно. Как уменьшить высоту или в чем проблема?

    Погуглила про колоны и сетки, но ничего толком не нашла... Код: <div class="wrap"> <header id="header"> <div class="container"> <div class="row"> <div class="col-md-12"> <button id="primary-nav-button" type="button">Menu</button> <a href="index.html"><div class="logo"> <img src="img/logo5.jpeg" alt="Our Logo" style="width:320px;height:145px;> </div></a> <nav id="primary-nav" class="dropdown cf"> …

    Asked by Robel,

    0 votes
    3 answers

  5. Не получается подключить style.css

    Файл стилей работает на компьютере, а на телефоне просто слетает.

    Asked by anasteisa,

    0 votes
    9 answers

  6. Верстка нестандартных блоков

    Здравствуйте клиент хочет чтобы картинка была сверстанна полностью именно на html css, кто то сталкивался c такой проблемой? возможно есть советы по тому как это сделать правильно. Волна по центру и все остальные вещи должны быть заверстанны в том числе.Интересует как это сделать с минимумом костылей. И остро стоит вопрос чтобы это все дело было адаптивно. На данный момент все что смог сделать https://jsfiddle.net/RomanFF/jL9swq7h/37/ с border нормальный сделать смогу, не понимаю принцип по которому мне все сопоставить так чтобы не полетело все потом, мне хотябы общие принципы объяснить в каком направлении дальше двигаться

    Asked by РоманФ,

    0 votes
    3 answers

  7. Выплывающая панель css

    При попытке поставить скролл (overflow:auto) панели .mudsarulopas исчезает кнопка label . Манипуляции с position не помогают. весь код. <input type="checkbox" id="asruk-tkilasun" aria-hidden="true"> <nav class="mudsarulopas"> <label for="asruk-tkilasun" class="asruk-tkilasun" onclick></label> <section> <a href="/"style="color:#fff;">Заголовок</a> <hr> <a href="/virtualnye-vystavki" style="color:#fff;text-decoration:underline;">выставки</a> <ul> <li>1</li> <li>1</li> <li>2</li> <li>3</li> <li>…

    Asked by 13bnj,

    0 votes
    1 answer

  8. блоки ездят куда-то. Что делать?

    Проблема в следующем верстаю макет с PSD шаблона. Использую HTML и CSS. Прописал по порядку блоки Header. nav. main. в коде html. Добавил картинку и ссылки в блок header. открыл браузер что бы отобразить результат. и вижу. что блок main наехал на блок header. Вопрос: почему так получилось. Ведь одно из свойств блочных тегов - они начинаются с новой строки и занимают всю доступную ширину. (main. игнорирует свойство и не начинается с новой строки). как решить и почему произошло? Заранее благодарю всех за помощь Скрин прикрепляю. HTML <body> <header> <div class="logo"> <img src="..\matereal\images\logo.png" al…

    Asked by gars,

    0 votes
    1 answer

  9. Слайдер на сайте

    Здравствуйте, очень понравилась одна идея слайдера( если честно я не знаю как называется полоса для пролистывания сайта справа ).В общем, её можно увидеть на сайте Tesla.com,при пролистывания сайта колесиком мыши, как повторить подобный эффект?Так же на каком языке это реализуется?

    Asked by Pleed,

    0 votes
    1 answer

  10. Вставка изображения больших размеров

    У меня в макете 3 картинки размером 767 на 426 пикселей. Как их корректно вставить в код, картинкой или блоком, посредством фона, как адаптировать под маленькие экраны, и они у меня идут в виде галереи, все вместе, то есть получается уже после разрешения 1500 пикселей, нужно думать об адаптиве. Подскажите пожалуйста решение. Спасибо.

    Asked by Максим_87,

    0 votes
    2 answers

  11. Картинка в мобильном браузере при смене ориентации экрана.

    Добрый день форумчане. Вопрос такой. Как правильно и логично замутить картинку, чтобы она в браузере мобильника была расположена КАК НАДО, т.е. при горизонтальной ориентации экрана был отступ сверху 15%, а при вертикальной 50%? Спасибо. Картинка ниже. Кусок кода сейчас такой: (Очевидно, что 15% отступ сверху сейчас работает при любом положении экрана.) <!doctype html> <html> <head> <meta charset="utf-8"> <title>Тест</title> <style> div {margin-top: 15%;} </style> </head> <body> <div id="centerLayer" align="center"> <img src="8.svg" width="20%" height="50% alt="З…

    Asked by Иван Иванович,

    0 votes
    2 answers

  12. Забавная проблема взаимодействия с элементами на странице

    Привет, я решил создать сайт, и довольно важным элементом дизайна есть полупрозрачный туман который расположен поверх всех элементов (он располагается поверх всех элементов при помощи z-index), на сайте есть также слайдеры, кнопки и поля для ввода данных и проблема заключается в том что пользователь никак не может с ними взаимодействовать по тому как самый верхний элемент это полупрозрачная картинка тумана занимающая весь экран. Напишите пожалуйста как взаимодействовать с элементами на сайте или игнорировать картинку тумана, потому как даже текст нельзя выделить. P.S.картинка тумана по задумке должна быть поверх всей страницы

    Asked by p_h_o_t_o_s_h_m_e_l_l_345,

    0 votes
    2 answers

  13. Адаптация сайта под мобильные устройства

    при просмотре кода страницы сайта в браузере с использованием "инструментов разработчика" (горячая клавиша F12 для Windows) и просмотре его отображения для мобильных устройств, размер экрана которых меньше размера страницы сайта и ее отдельных элементов, ширина которых задана в пикселях, а не в процентах, страница без предварительной адаптации вписывается в размер экрана любого устройства. Как изменить отображение чтобы увидеть реальную картину, что нужно изменить в коде для создания адаптированного сайта??? для изменения размера страницы под размер устройства при отладке необходимо в код вставить метатег "viewport" <meta name="viewport" content="width…

    Asked by VovkaKrut,

    0 votes
    0 answers

  14. Скрытая страница

    Обратился клиент с проектом - сервис торговых сигналов по биржевой торговле. Задача следующая - нужно сделать так, чтобы пользователь, после выполнения оплаты получал доступ к странице с торговыми сигналами, причём чтобы это происходило автоматически. Если пользователь переходит на страницу "Торговые сигналы" без оплаченной подписки, то попадает на страницу выбора сроков подписки и кнопками "Купить подписку". Как можно реализовать что-то подобное? Хотя бы направление дайте. С уважением, Игорь

    Asked by Welizar,

    0 votes
    1 answer

  15. Проблема с отображением изображения в ХТМЛ документе

    Пытаюсь поместить в документ картинку, теги вбил верно, само изображение имеет формат "png", в браузере при просмотре отображается иконка изображения, но не сама картинка, вот код: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>begemotIya</title> </head> <body> <img src="..C/logo01.png"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse proident, sunt in culpa qui …

    Asked by Семён Шпротов,

    0 votes
    1 answer

  16. Браузер Опера

    В Опере страница с фото (вкладка "Картинки") постоянно подпрыгивает, дергается, будто сама себя настраивает. Все обновления актуальны. Что делать? Есть видео. Браузер: 66.0.3515.44, Используется обновленная версия Opera, Канал обновлений: Stable, Система:Windows 7 32-bit. V_20200129_142114.mp4

    Asked by Grig2020,

    0 votes
    1 answer

  17. Как убрать ошибку 404 при переходе на существующую страницу?

    Добрый день! Сегодня с утра обнаружила, что во вкладку "новости" (на навигационном меню) не переходит. За место нее выскакивает ошибка 404. Сайт не трогала 2 месяца, а сегодня попросили дописать новости. Путь правильный, файл .htaccess проверила. На все остальные страницы переходит. В чем может быть причина? Сайт писала сама (первый опыт).

    Asked by Anna1991,

    0 votes
    0 answers

  18. Шаблон в figma

    Здравствуйте, прислали тестовое задание, шаблон в figma, после photoshop тяжело, да и сетку не видно, я хотел использовать модульную сетку для вёрстки.

    Asked by Jester,

    0 votes
    6 answers

  19. Список

    Всем привет сори за тему ,в процессе изучения html / css не могу понять как сделать список так чтобы по центру была полоса вертикальная и сначала слева один блок потом чуть ниже справа другой блок и так далее. Подскажите как осуществить

    Asked by adam_maks,

    0 votes
    2 answers

  20. проблемы с scss файлом в vscode(visual studio code)

    я использую sass scss в vscode и постоянно сталкиваюсь с такой проблемой что html код сам без моего ведома вставляется в scss файл как исправить эту ошибку?

    Asked by victorius,

    0 votes
    0 answers

  21. Изменить код верификации Google и Яндекс

    После покупки сайта(на Wordpress) возникла проблема. Не могу подтвердить права на сайт ни в Google ни в Яндекс, т.к. где-то стоит код прежнего владельца. На главной странице в head его нет. Перерыв плагин Yoast SEO ничего, но яндекс при попытке пройти верификацию пишет,что код указан через плагин Yoats SEO. Где изменить код прежнего владельца?

    Asked by pipetosha,

    0 votes
    0 answers

  22. Появляющаяся кнопка включения/выключения аудио при скроллинге

    Здравствуйте. Имеется данный код: <audio id="audio"> <source src="audio/1.mp3" type="audio/mpeg"> </audio> <div class="fixedbut" id="sebut">Звук</div> <style> div.fixedbut { position: fixed; bottom: 93%; right: 20px; display: block; background: white; border-radius: 10px; color: black; text-decoration: none; padding: 6px 23px; font-size: 17px ; -webkit-transition: 0.33s all ease-out; -o-transition: 0.33s all ease-out; transition: 0.33s all ease-out; z-index: 999; } div.fixedbut:hover { background: grey; color: white; } </style> <script&g…

    Asked by VolKTieR,

    0 votes
    1 answer

  23. float и overflow

    https://jsfiddle.net/d0ublezer0/h4aLb7z6/9/ Я использовал для позиционирования технику, когда картинке задается float:left, а соседнему блоку overflow:hidden, чтобы блок не съезжал вниз. У второго пункта (криолиполиз) есть псевдоэлемент (новинка), который не видно из-за overflow:hidden родительского слоя. Есть какая-то иная техника, чтобы и картинка была слева и псевдоэлемент был виден?

    Asked by d0ublezer0,

    0 votes
    0 answers

  24. Подкорректировать форму отправки

    Доброго времени суток, подскажите пожалуйста, есть на сайте два поля и кнопка для отправки информации в телеграм. Как можно сделать так, что бы если поля пустые, то кнопка не срабатывала, или если это просто, то всплывало сообщение что поля не заполнены. В идеале, если бы была валидация, что в поле имя, можно было вводить только буквы, и в поле телефон цифры, 7 цифр. В скриптах я не разбираюсь, поэтому если есть какое готовое решение, буду благодарен. Использовал для отправки формы это https://github.com/digitalBush/jquery.maskedinput <form method="post" action="telegram_phone_form.php"> <span class="phone_form_close" onclick="show('none')"></…

    Asked by oleg126,

    0 votes
    5 answers

  25. Для чего html тегу применяют несколько классов?

    Приветствую! Вот такой код встретил в примере <div class="site container clearfix"></div> Дальше в файле css стилей описаны свойства для site, container и clearfix соответственно...Для чего такое сделано, ведь проще написать все в одном классе site например?

    Asked by tigrus2014,

    0 votes
    1 answer

  • Обсуждения

    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
    • Switch74
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Switch74 · Posted

      <input type="number">
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
    • DeZ
      Список покидает див

      By DeZ · Posted

      Решение нашел.  Заменил на  Всем привет. Список выходит из дива. При этом, другие элементы в диве отображаются корректно. Не могу найти причину. Нужно чтобы список был под кнопкой ПЛЕЙ...          
    • AIek
      ищу клиентов,услуги

      By AIek · Posted

      Здравствуйте! Мы команда программистов с многолетним опытом разработки. Работая с нашей командой, Вы получаете порядок условий и развитие с обеих сторон: разработка проекта и продолжение сотрудничества на долгосрочной основе, так же специалисты всегда готовы предложить различные идеи и дополнения.  Разрабатываем проекты любой сложности: скрипты для автоматизации рутины, боты, сайты, админ панели, ico, ldo, разработка криптовалюты, смарт контракты, приложения, игры. Ответственность, качество, соблюдение дедлайнов - это про нас!  Наш контакт:  https://t.me/MadFury (https://t.me/madfury) (TG) TG:  https://t.me/2e7.io Сайт: https://code-r.io/
×
×
  • 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

  I accept