Jump to content

HTML Coding

HTML, CSS and other interesting technologies

Followers 7

Subforums

  1. Practise Templates

    Templates for self education and practise

    1k
    posts

  2. Discussion of works

    Source code audit and recommendations

    30k
    posts

Explore Questions

There are no popular questions to show right now

29,301 questions in this forum

  1. есть 4 псевдо-счетчика на странице. Нужно: их рассинхронизировать

    Есть html код псевдо счетчика, который должен реагировать на нажатие кнопки (+1/-1).Сам код работает, но нужно разместить несколько таких счетчиков на странице. При банальном дублировании работает только первый счетчик, а остальные не реагируют на клик.1)Что нужно поменять в коде, чтобы работали все счетчики одновременно на одной странице?2)И как можно сделать, чтобы кликнутая кнопка окрашивалась в другой цвет (на данный момент она только выделяется при наведении и щелчке, потом цвет возвращается в исходный) <div class="likes" style="float: right; padding-left: 10px;"> 105 </div> <div><button class="btn" style="color: #fff; border: none; float…

    Asked by fluki,

    0 votes
    0 answers

  2. transform и transition

    Есть div: <div class="ex1">Пример трансформации</div> Есть css: .ex1 { transform: rotate(30deg); transform-origin: 0% 0%; } Можно ли с помощью transition или как то иначе забацать анимацию (поворот например)? Перепутал ветку форума. Модераторы переместите пожалуйста в css для начинающих 🙂

    Asked by torsar,

    0 votes
    1 answer

  3. Оцените верстку по методологии БЭМ.

    Доброго времени суток!Осваиваю верстку по методологии БЭМ. Прошу оценить мою верстку по БЭМу, интересуют ошибки в коде.Заранее благодарю. https://igor-zzz.github.io/bem/

    Asked by web-verstka,

    0 votes
    2 answers

  4. Подскажите как реализовать выпадающий список

    ЗдравствуйтеУперся тут в одну проблему:Никак не могу придумать как так сделать, чтобы при нажатии на блок, нижние блоки отодвигались вниз и появлялся список.. Помогите плз, голову уже сломал себе

    Asked by muxacb,

    0 votes
    4 answers

  5. надо скрыть текст

    я написал кучу текста после которого идет код страницы, ссылающийся на этот текст, надо скрыть этот текст, я не программист прям совсем

    Asked by IVAN99999999,

    0 votes
    1 answer

  6. не получается создать ссылку которые переводит на электронную почту

    здравствуйте у меня не получается превратить ссылку обучению в E-mail адрес. как бы главная идея в том чтобы при нажатие на ссылку открывался аккаунт пользователя и послать ему что то на электроны адрес. Помогите <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="Styles.css"> <title></title> </head> <body> <table class="rondom"> <tr> <th> Name </th> <th> Last Name </th> <th> Gender </th> <th> Age </th> <th> Date Of Birth </th> <th> Phone Number </th>…

    Asked by Alex Sendler,

    0 votes
    1 answer

  7. Как найти наставника(гуру, учителья, сэнсэя) по вёрстке?

    Доброго тебе дня, друг. Данную тему написать меня сподвигло больше кол-во однотипных тем на тему "Ищу наставника", "Нужен учитель" и тому подобное. Одной из причин тому статья "Путь верстальщика" от автора Максима Усачева, в которой он делится своим безценным жизненным опытом. Я постараюсь пролить свет на некоторые важные (в рамках данной темы) моменты из статьи. Макс пришел на форум имея минимум знаний в сфере разработки и имея большое желание учится. Он упоминает про наставника, но большинство читателей, к сожалению, трактуют данную информацию извращенно. Это не путь к руководству, это всего лишь опыт который получил автор статьи. Нужто ты думаешь, что есл…

    Asked by klierik,

    5 votes
    117 answers

  8. Переход на анкор с другой страницы

    Ребята, всем доброго времени суток, выручайте, делаю свой первый сайт и понимаю ничего:) Сабж, у меня есть главная страница, index.php, на ней есть разделы-анкоры, всякие там "О компании", "Услуги" и.т.д. Менюшка сверху, соответственно, их повторяет. По клику на менюшку, страница скроллится до нужного анкора. Просто-таки шоколад. Но в чем проблема. Менюшка одинакова на всех страницах и мне надо сделать так, чтобы с других страниц по клику на пункт меню открывало мой index.php на нужном анкоре. Собсна, мои познания во всем этом очень неочень. Первое что пришло в голову, прописать в менюшке href="/index.php/#box1" вместо просто #box1, но работает криво, перекидывает на анко…

    Asked by html__noob,

    0 votes
    5 answers

  9. Как при наведении изменить сразу два класса CSS?

    При наведении на div нужно поменять и свойства дива и свойство картинки в нем (другой класс) как это можно сделать через CSS?

    Asked by Birdama,

    0 votes
    2 answers

  10. Закругление фона у :hover при наведении на строку таблицы

    Не могу закруглить углы у background-color. В чем проблема?

    Asked by Tanya2021,

    0 votes
    2 answers

  11. Расположение текста

    Здравствуйте, как сделать данный текст не по центру, а с левого края (равнять по левому концу border). Случайно отправил без скринов: .slider { display: flex; justify-content: space-between; margin-top: 150px; } .slider_item { border-top: 2px solid; width: 24%; font-size: 18px; color: #fff; text-transform: uppercase; padding: 20px 0;

    Asked by Garretidze,

    0 votes
    2 answers

  12. Как сделать так, чтобы при нажатии на кнопку - не перекидывало на другую ссылку?

    Сделал валидацию для кнопки через jquery-vaildate. По макету - нужно сделать так, чтобы после нажатии на кнопку, которая отправляет эту форму - закрывался этот popup и открывался следующий с уведомлением о том, что форма отправлена. Подскажите, как это сделать? Все скрины прикрепил ниже. HTML формы: ``` <div id="modal__wrapper"> <div class="modal__overlay" id="modal__overlay"></div> <div class="modal__window"> <a href="#" class="modal__close" id="modal__close"></a> <div class="mo…

    Asked by Dikkey,

    0 votes
    1 answer

  13. Уменьшить размер шрифта при уменьшении блока

    div.Row { height: 15vh; width: 100%; ... } div.Col{ height: 100%; ..... .Col1{width: 10%;} .Col2{width: 60%;} ) <Div class = "Row"> <Div class = "Col Col1">текст<Div> <Div class = "Col Col2">Длинный текст<Div> </Div> Такой вот код. Как средствами CSS3 сделать так, чтоб текст был, допустим, 70% от высоты ROW (или COL, в моем случае высота одна и таже), но в случае, если не вмещается в заданную ширину блока, автоматически уменьшался в размере? Спасибо

    Asked by minvareg,

    0 votes
    1 answer

  14. Css наследование

    Добрый день! Как сделать наследование при описании класса? Именно при описании, а не родитель -дочерний элемент. Т.е. есть div.Class1 {тут куча всего} Этот класс не используется напрямую, но от него наследуются два класса, т.е. должно получится div.Class2 {border: 1px solid red;} + то, что я определил в Class1 div.Class3 {border: 1px solid black;} + то, что я определил в Class1 Т.е. Class 1 сделан чтоб просто чтоб не дублировать одно и тоже при описании Class2 и Class3 Надеюсь, суть вопроса ясна 🙂 Спасибо

    Asked by minvareg,

    0 votes
    3 answers

  15. Тег <hr>. Возможно ли вместо линии сделать текст?

    Тег <hr>. Возможно ли вместо линии сделать текст? Например что бы вместо линии отображались * * * (три звёздочки). Возможно ли такое? Или может есть какие-то альтернативные варианты как это организовать?

    Asked by ds1990,

    0 votes
    2 answers

  16. Выравнивание пунктов списка с добавленным элементом

    День добрый! Набиваю руку в простенькой верстке придуманного мной сайта. Возникла проблема из за которой рву на себе волосы уже 2е сутки - это выравнивание пункта текста с добавленной картинкой вместо привычных точек. Перепробовал уже все,с list-style-image вообще сделать что либо бесполезно. Перешел на изменения в самом <li>, текст просто накладывается на картинку и сделать ничего не получается. Размер картинки 64x64. Поиски в интернете успехом не увенчались. Ниже мой сырой код по этому вопросу: li { list-style-type: none; } li:before{ content: url("http://s1.iconbird.com/ico/2013/9/447/w128h12813804433922.png"); width: 30px; height: 30px;…

    Asked by AndrewLite,

    0 votes
    4 answers

  17. Шапка и 100% DIV

    Наверно, все просто: подскажите, пожалуйста, как реализовать такое: нужна фиксированная шапка и две области под ней: слева аля меню, в ней может быть прокрутка. И справа - вторая область, 100% высоты и ширины всего остального пространства. Таким образом на странице браузера не должно быть прокрутки. Как это можно простыми средствами сделать? Вот что я имею ввиду (см. картинку): идеально, если у шапки будет тень.

    Asked by Online,

    0 votes
    6 answers

  18. Выравнивание пунктов списка с добавленным элементом

    День добрый! Набиваю руку в простенькой верстке придуманного мной сайта. Возникла проблема из за которой рву на себе волосы уже 2е сутки - это выравнивание пункта текста с добавленной картинкой вместо привычных точек. Перепробовал уже все,с list-style-image вообще сделать что либо бесполезно. Перешел на изменения в самом <li>, текст просто накладывается на картинку и сделать ничего не получается. Поиске в интернете успехом не увенчались. Ниже мой сырой код по этому вопросу: li { list-style-type: none; } li:before{ content: url("http://s1.iconbird.com/ico/2013/9/447/w128h12813804433922.png"); width: 30px; height: 30px; display: grid; marg…

    Asked by AndrewLite,

    0 votes
    0 answers

  19. Как сделать так,чтобы два всплывающих окна перекрывали друг друга при активности?

    Есть адаптивное меню .mobmenu и кнопка обратной связи .feedback.openform. Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи,чтобы ее нельзя было нажать? И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню. С меню вроде как я справился,но вот как полностью вывести фидбэк на передний план и чтобы при этом чтобы header с гамбургером отошли назад? https://codepen.io/tempest2708/pen/dyMVoOp pornohub-google-chrome-2020-09-04-00-56-15_AYQgL2jv.compressed.mp4

    Asked by Tempest99,

    0 votes
    1 answer

  20. Как гридами разместить дивы по углам родителя?

    у меня 4 квадрата и я хочу разместить каждый из этих квадратов в каждый угол флекс-контейнера,решил сделать это командой justify-self и когда задаю для дива one параметр justify-self: start, то реакции не идет. Можно ли разместить каждый див по углу через грид? https://codepen.io/tempest2708/pen/ZEWaepy

    Asked by Tempest99,

    0 votes
    1 answer

  21. Как это сделано? Битрикс, hover, фиксация.

    Привет! Не соображу, как сделано так, что при наведении на карточку в каталоге появляется блок добавления в корзину, но высота родительского блока не меняется. Вернее, сетка не расползается. Как это сделано? https://mirbelia.ru/catalog/nizhnee_bele/

    Asked by d0ublezer0,

    0 votes
    1 answer

  22. Скопировать css из фигмы

    Стиль из фигмы только sass. Если преобразовать, то хоть и добавиться точка с запятой но название в стиле не добавляется, что очень трудно если строчек за четыреста. Можно еще как нибудь скопировать безбоязненно стиль из фигмы с обычным css?

    Asked by ChikChicly,

    0 votes
    1 answer

  23. Не работает background-size:cover

    привет. геометрия.онлайн на главной странице слайдер с наложенным фоном на псевдоэлемент почему-то не тянется фон при масштабировании страницы. почему?

    Asked by d0ublezer0,

    0 votes
    3 answers

  24. Как сверстать шестиугольный тянущийся блок?

    Клиенту надизайнили вот такой макет. Не понимаю, как верстать. Белую область еще примерно понимаю, как можно сделать из трёх частей. Верх и низ бордюрами по методам треугольника, центр - обычный прямоугольник. А вот золотую рамочку - как? И тянуться оно должно вертикально, завися от наполненности Ещё занятно то, что левый край фигуры выходит за сетку. Это видно по левой границе текста. https://codepen.io/d0ublezer0/pen/bGpqgKY вот что удалось сверстать что не нравится: придется ловить значения бордюра для разных разрешений, чтобы попасть в ширину блока ну и рамочку так и не смог запилить. UPD: добрался до clip-path Боле…

    Asked by d0ublezer0,

    0 votes
    4 answers

  25. Проблема с отображением сайта на айфоне

    Приветствую! Столкнулся с проблемой неправильного отображения фоновой картинки на iphone. Причем проблема возникает на реальных девайсах, на симуляции всё выглядит нормально. На моем телефоне на андроид всё хорошо. Есть ещё одна проблема - на айфоне не отображаются описания и кнопки "Подробнее".

    Asked by eXile,

    0 votes
    0 answers

  • Комментарии

    • Int
      Без вызова Alert("текст") не применяется значение.

      By Int · Posted

      alert('2' + submit.value) нужно было делать внутри request.onreadystatechange, потому что именно там приходит значение с сервера и задаётся value у submit. И через сколько времени это произойдёт, не всегда известно, может и через минуту, если интернет медленный, поэтому таймаутами универсально не побороть.
    • Int
      Не работает вывод суммы двух чисел

      By Int · Posted

      Я не уверен, что у формы есть событие input, но если даже было бы, то переменные result, num1 и num2 не определены. Они были бы созданы автоматически, если бы это были id, но у тебя-то name. И я не в курсе, сейчас можно писать js-код в атрибутах без javascript: спереди? И есть ли у тега <output> свойство value? Может быть, у него textContent? Подключи Vue, там будет работать так, как ты хочешь, только придётся несколько дополнительных действий сделать, привязывая переменные к инпутам и создавая computed-свойство.
    • Int
      Картинка превью в мессенджерах

      By Int · Posted

      В телеграме картинка есть, вконтакт тоже показывает, даже в аське есть. Видимо, ты как-то не так проверяешь.
    • Romario1985
      Проблема с псевдокласами

      By Romario1985 · Posted

      Понял, спасибо большое. Я просто думал, что если выбран класс, то и применяяется только к конкретному классу, а оказывается не правильно думал. Еще раз спасибо
    • smirn0ff
      Картинка превью в мессенджерах

      By smirn0ff · Posted

      Добрый день! Есть такая страница http://tehne.com/grant/right-bank-of-kazanka-river-competition-2021-ru Хочу сделать чтобы в мессенджерах когда отправляют ссылку вместе с заголовком показывалась определенная картинка. Я добавил эту картинку в мета тэги og и link rel="image_src"  и она все равно не появляется когда делюсь в мессенджерах Почему так?  
    • klierik
      Проблема с псевдокласами

      By klierik · Posted

      Не будет и не должно, потому как первым в списке дочерних элементов у родителя "team-descr" — это H3. <div class="team-descr"> <h3>Bradley Hunter</h3> <!-- это :first-child --> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <!-- это :last-child --> </div> Под :first-child/:last-child подразумевается не вхождение выбранного Вами селектора, а первая нода, тег, которые одет по списку. В ваше случае псевдо-элементы будут работать только в том случае, если в контейнере первым и последним будут ".name" <div class="team-descr"> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <!-- :first-cild --> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <p class="name">Based in Chicago. I love playing tennis and loud music</p> <!-- :last-child --> </div>  
    • Romario1985
      Проблема с псевдокласами

      By Romario1985 · Posted

      https://codepen.io/cheeroque/pen/JjEZyEL  Если вместо last:child поставить first:child то свойства работать не будут 
×
×
  • 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.

  I accept