Jump to content

HTML Coding

Subforums

  1. Discussion of works

    Source code audit and recommendations

    30.1k
    posts

  2. Practise Templates

    Templates for self education and practise

    1k
    posts

Explore Questions

There are no popular questions to show right now

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

    Asked by Mondeus,

    0 votes
    0 answers

  2. Примеры верстки

    Asked by torsar,

    0 votes
    0 answers

  3. Список покидает див

    Asked by DeZ,

    0 votes
    0 answers

  4. Проблема с шириной ячеек

    Asked by ArrogantSpectator,

    0 votes
    1 answer

  5. Html кнопка

    Asked by НикитаL,

    0 votes
    3 answers

29,542 questions in this forum

  1. Реализация элементов фона

    Добрый день. Очень нужен совет. Есть макет лэндинга, ничего в принципе сложного, но не могу понять, как лучше реализовать некоторые элементы (выделил красной рамкой на пикче). Либо с помощью svg, но тогда сложно будет редактировать толщину линий при адаптиве. Либо создавать div'ы и стилизовать их. Или не заморачиваться и запечь эти элементы с фоновый изображением. Делаю тестовое для собеседования, хочется грамотно к вопросу подступить. Как вы реализуете подобное? Лично я первый раз с таким дизайном в практике встречаюсь, вот и колеблюсь. Заранее спасибо.

    Asked by Константин(Mushr00m),

    0 votes
    2 answers

  2. Как отобразить блок, который пропадает из-за overflow?

    Есть слайдер. Чтобы скрыть слайды, у блока lsbslider стоит overflow: hidden; У слайдера есть стрелки навигации. - .left хочу сместить стрелку левее от блока. т.е. чтобы стрелка была вот так: http://joxi.ru/BA0KBq0HMlxJq2 Вопрос как сделать ,чтобы она не пропадала. Сейчас стрелку не видно, так как у блока выше overflow:hidden <div class="lsbslider"> <a class="left" href="#" role="button"></a> </div> .lsbslider {width: 300px; position: fixed; left: 100px; height: 200px; background:coral; overflow: hidden; } .left { left:-30px; } .left { position: absolute; display: flex; width: 30px; height: …

    Asked by nikki4,

    0 votes
    1 answer

  3. div блок съезжает при уменьшении окна

    div блок постоянно съезжает, хотя опробовал все. Ответы, что я находил не помогали, смена позиционирования тоже. Может, кто знает как это исправить? Код прилагаю HTML Скрытый текст <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"> <title>Вход</title> </head> <body bgcolor="#34495e"> <form class="box" action="index.html" method="post"> <h1>Вход</h1> <input type="text" name="" placeholder="Имя п…

    Asked by Fani,

    0 votes
    9 answers

  4. Почему не работает animation-delay?

    Задача - появление блока внизу экрана спустя определенное время. например для теста через 5 секунд, в течение 3х секунд всплытие .block { display:block; width:100%;max-height:340px; height:220px; position:fixed; background:coral; bottom: 0; max-width:900px; animation:anim 3s; animation-duration:anim 3s; -webkit-animation-delay: 5s; -moz-animation-delay: 5s; -o-animation-delay: 5s; animation-delay: 5s; } @keyframes anim { from {bottom:-100%;} to {bottom:0;} } Живой пример Если не добавлять задержку выезжает через 3 сек. если добавить - сразу появляется и задержки нет. разобрался с вопросом. Надо было изначал…

    Asked by nikki4,

    0 votes
    1 answer

  5. Как убрать горизонтальный скролл

    Не могу понять откуда появляется горизонтальный скролл, помогите понять в чем проблема пожалуйста) Ширина 100% не помогает, есть ли другие спопобы? index.html main.css bootstrap.min.css

    Asked by Alfa_main,

    0 votes
    4 answers

  6. Как адаптировать такой элемент ?

    Помогите адаптировать такой странный на мой взгляд элемент. Я понятия не имею как такое адаптировать, макет только для десктопа.

    Asked by Аришан,

    0 votes
    7 answers

  7. Проблема с меню на CSS

    Всем привет :) Пытаюсь сверстать свой первый макет, и возникла проблема с меню. Должно быть, как на первой картинке - это макет из фш. Выходит, как на второй, меню спадает вниз. Прошу, пожалуйста, тыкните на ошибку в коде, и, если есть возможность, объясните. буду очень рада ответам! Код кидаю: *{margin: 0; padding: 0; outline: 0} .clearfix::after { content:""; height: 0; display: block; clear: both; } div .container { width: 1300px; margin: auto; background: #fff; } header { width: 100%; height: 130px; border-top: 8px solid #a292b3; position: fixed; z-index: 2; } .logo { margin: 30px 0 20px 170px; }…

    Asked by Sve,

    0 votes
    3 answers

  8. Less или Sass . И нужно ли вообще учить

    Скажите реально ли препроцессоры упрощают жизнь и какой из них учить первым?Ну и какие полезные советы по изучению или использованию можете дать?

    Asked by go_Ed_Edy,

    0 votes
    6 answers

  9. Аттрибут checked у звездного рейтинга не перемещается

    Есть реализация звездного рейтинга. Она работает. Но аттрибут checked не перемещается на выбранный инпут, а остается там же где был. Вот например, стоит оценка 3 из 10 (т.е. аттрибут checked на 3 инпуте), мы хотим поставить оценку 6 из 10 и визуально это срабатывает, но аттрибут checked так и остается на 3-ем инпуте вместо 6-го. Это важно, т.к. эта информация нужна бэкэндеру. Получается ему придет неверная информация Как сделать чтобы аттрибут checked тоже пермещался на выбранный инпут? Только на js это получится реализовать? https://codepen.io/anon/pen/NJGMgv

    Asked by yaparoff,

    0 votes
    1 answer

  10. Помогите с расположением элементов!

    Здравствуйте! Подскажите как можно сместить иконку Facebook вправо а текст оставить слева чтобы потом иконки можно было добавить border. Вот код HTML <div class="item__price"> Цена по запросу <a href="" target="_blank"><i class="fa fa-facebook"></i></a> </div> Вот Css .item__price { padding: 5px; font-size: 16px; margin-bottom: 5px; color: #778899 }

    Asked by kaska25k,

    0 votes
    2 answers

  11. Несколько HTML страниц на одной HTML странице

    Здравствуйте! Как сделать так, что бы на странице "index" находилось несколько других страниц, расположенных в определённых местах. В html 4 это выглядело как то так: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Тег FRAMESET</title> </head> <frameset rows="7%,70%, 15%", frameborder="yes", frameborder = "1"> <frame src="top.html"> <frameset cols="20%,80%"> frameborder="no" <frame src="Menu.html" name="leftFrame" scrolling="yes" noresize> <frame src="Main.html" name="main"> </frameset> <frame src="footer.htm…

    Asked by Nightingale81,

    0 votes
    1 answer

  12. Как на реальных проектах используется Git ?

    Здравствуйте. На данный момент я верстаю для себя и пользуюсь гитом так как я привык (ниже опишу как). Вот сейчас хотел бы узнать, как мне придется работать с гитом когда над проектом работать буду не я один ? На данный момент я работаю так: 1. Создаю в github новый репозиторий; 2. Клонирую этот репозиторий к себе на локальную машину; 3. И начинаю верстать; 4. Комиты я пишу частые для себя (все делаю в ветке master, знаю что это не правильно но пока для меня нет необходимости их разделять); Комитах пишу что то типа этого: - Подключает {какой то} шрифт; - Создает какой то блок; - Добавляет файл с переменными less/sass; - Создает секцию header -…

    Asked by Аришан,

    0 votes
    7 answers

  13. верстка SVG

    Здравствуйте. Занялся разбором SVG верстки и не могу понять есть ли возможность вставлять в элементы другие элементы, например <polygon> <polygon></polygon> </polygon> или в данном случае выкручиваться через <g></g> или <symbol></symbol> с наложением элементов друг на друга

    Asked by Switch74,

    0 votes
    2 answers

  14. Как применить стили для элемента только в том случае, если он в теге del

    Теперь человеческим языком. Цена на сайте выводится так: <p class="price"> <del> <span class="woocommerce-Price-amount amount">4800&nbsp;<span class="woocommerce-Price-currencySymbol"><i class="fa fa-rub" aria-hidden="true"></i></span></span> </del> <ins><span class="woocommerce-Price-amount amount">4700&nbsp;<span class="woocommerce-Price-currencySymbol"><i class="fa fa-rub" aria-hidden="true"></i></span></span></ins> </p> Конструкция выше выводит две цены: старую, новую по акции. Я хочу поменять цвет старой цены, но там классы одни …

    Asked by Артишок,

    0 votes
    1 answer

  15. Как используется на реальных проектах bootstrap ?

    Здравствуйте. Я начинающий верстальщик. Посмотрел вакансии какие требуются знания для того чтобы стать HTML-верстальщиком, и одним из требований который присутствует в практический каждой вакансии это bootstrap. Начал читать документацию bootstrap'а понял как он работает но все же остались вопросы которые я хотел бы тут задать и получить на них ответ от специалистов в данной сфере. И эти вопросы актуальны не только для bootstrap но и для остальных CSS framework'ов (faunadation, semantic UI, skeleton и т.д.) 1. Первый момент который я не понимаю это как в bootstrap использовать готовые стили, ведь они никак не подходят к моему макету ? (перезаписывать, а это прави…

    Asked by Аришан,

    0 votes
    5 answers

  16. Проблемы с фоном

    При увеличении масштаба возникают проблемы с фоном помогите

    Asked by tifozzzi,

    0 votes
    1 answer

  17. Вопросы по стилям

    1. Я видимо чтото плохо усвоил или чтото случайно пропустил, читая про стили. Делал я на примере 1 видео макет и заметил что класс в хтмл отличается от класса в цсс файле, но при этом отображается так как нужно мне. В html прописано class="grid-img sqr" но в css прописано только .sqr 2. Тот же проэкт, и тут автор видео прописал у селекторов html и body значения. Что будет если я пропишу всё в в один селектор? 3. Селектор .logo, тут font-size: 0; Я правельно понимаю, это для альтернативного текста, в случае если картинка не отобразится? Буду признателен если в ответы покидаете отыеты в виде ссылок.

    Asked by egrom92,

    0 votes
    2 answers

  18. Как сверстать

    Как правильно сверстать данный элемент? Если делать через :before/:after, то с адаптивом возникают проблемы, так как чтобы заадаптивить, приходится ловить пиксели, на котором нужно менять позицию данного элемента. Я не думаю, что это правильное решение .

    Asked by Okieazy,

    0 votes
    8 answers

  19. Как сделать заполнения букв в input вместо черточек

    Как сделать, чтобы строка при заполнении такой строки "_____", где 5 чёрточек вместо чёрточек заполнялись буквы и если я захочу стереть какие-нибудь буквы, то чёрточки восстанавливались, а буквы при этом не должны смещаться с позиции влево, например, на пятой позиции вместо чёрточки буква "а", то при удалении буквы находящейся на 2 позиции буква, "а" не смещалось влево на другие позиции. Я слышала, что такое можно сделать как-то с помощью масок, но даже не представляю как?

    Asked by Katerina23,

    0 votes
    3 answers

  20. С чего начать обучение?

    Здравствуйте, Меня зовут Иван.Всем доброго дня(Вечера,утра,ночи) смотря, когда вы это читаете. Я решил стать front-end разработчиком.Начал читать,учить,смотреть про это. Информации очень много, или это конечно мне кажется, может потому что я начинающий.Начал смотреть курсы по CSS и HTML .Как, почему, что это все, для чего.Дошло до того что переключился на Photoshop, делал пару макетом, не знаю зачем конечно. Суть вот в чем, из-за того что много информации не могу сосредоточиться на чем-то одном,не знаю за что хвататься. JavaScript пытался смотреть понять, но ещё больше запутался, когда там ещё надо будет кучу Фреймворков. Потом опять начал CSS и html повторять, нашёл како…

    Asked by IvanGulov,

    0 votes
    2 answers

  21. Адаптивная верстка группы кнопок

    Здравствуйте! Нужно сделать вёрстку группы кнопок - меню сайта. Идея такая - до 480 px показывать это меню в виде вертикального столбца по 1 кнопке в ряд, ширина каждой кнопки на всю страницу. От 480 до 768 показывать кнопки по 2 штуки в ряд. А от 780 показывать все кнопки в 1 ряд, без переноса. При этом менять размер шрифта и размер кнопок так чтобы они всегда вписывались в одну строку. Т.е. если кнопок много или ширина экрана маленькая, то пусть показываются хоть шрифтом 6 px. Если экран широкий или кнопок мало, то пусть кнопки будут крупные, а надписи внутри них будут хоть 20 px. Вроде бы всё реализуемо на CSS кроме показа в 1 строку. Не понятн…

    Asked by sdanilas,

    0 votes
    0 answers

  22. Тестирование верстки в сафари

    Здравствуйте. Есть абсолютно спозиционированный элемент, во всех браузерах при адаптации все ок(хром, фф, ие), но у заказчика на сафари этот элемент немного поехал. Вопрос: Можно ли сидя на винде как то протестировать вёрстку в сафари?(в актуальной версии браузера) И ещё: что за баг с позиционированием если хром и сафари на одном движке?

    Asked by Fich71,

    0 votes
    6 answers

  23. Как правильно сверстать секцию

    Как правильней всего сверстать такую секцию? div > a > img?

    Asked by Okieazy,

    0 votes
    4 answers

  24. Фиксированное меню

    Доброго времени суток. Столкнулся с такой проблемой. Создал меню, которое появляется при нажатии на кнопку. Меню является фиксированными и занимает всю ширину и высоту экрана. Проблема в том, что на какой части сайта бы я не находился, при нажатии на кнопку одновременно с открытием меню экран также возвращается на самую первую секцию, а не обходимо, чтобы меню отображалось на том же самом месте сайта, где пользователь его запустил. Не знаю, как лучше всего поделиться таким количеством кода, поэтому просто скину проект на GitHub. https://github.com/Okitonori/ActiveBox

    Asked by Okieazy,

    0 votes
    2 answers

  25. Вопрос по фрейму

    Привет всем. Ребят, помогите справиться с бедой. Нужно в html файле открыть в области другой html файл и выгрузить данные из csv файла в области этого html. Пробовал через iframe и object. Никак не выходит произвести выгрузку данных

    Asked by PShim,

    0 votes
    6 answers

  • Обсуждения

    • 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