HTML Coding

29,542 questions in this forum

1. Иконка для ссылки

   https://jsfiddle.net/q2Lfaew5/2/ Пытаюсь добавить иконку к ссылке. Казалось бы, довольно простая задача, но есть несколько условностей, из-за которых пока ничего не получается. 1) Текст должен быть inline-элементом. Для того, чтобы к каждой строке применялась граница, и пустота в них была не кликабельной (как в первом примере). 2) Иконка всегда должна быть вертикально отцентрированная. Реально ли это сделать?

   Asked by alex_web64, July 21, 2019

   0 votes
   6 answers
2. max-width внутри flexbox элемента в IE11

   Здравствуйте. Почему в этом примере https://jsfiddle.net/pk2rgj3o/4/ в IE11 не срабатывает max-width для изображения? Мне нужно, чтобы фото не выходило за пределы родителя, при этом его ширина и ширина flex-item оставались автоматическими. В данный момент я нашел два решения этой проблемы: 1) width: 100% для фото и 2) flex: 1 для flex-item, но они оба не подходят.

   Asked by alex_web64, July 21, 2019

   0 votes
   0 answers
3. Вопрос по @media

   Всем привет, есть документация под нормы расширения экранов @media screen , где обозначено до скольки PX я могу скажем так воображать себе в голове под что я верстаю телефон/планшет/пк ?

   Asked by Неугомонный, July 20, 2019

   • @media
   • css3
   0 votes
   2 answers
4. Повторяющиеся линии

   Здравствуйте. Мне необходимо вывести вертикальные однопиксельные линии через равные промежутки. Что-то примерное я нагуглил https://jsfiddle.net/6eq501tz/ Но проблема в том, что линия должна всегда находится в центре экрана. Если уменьшите ширину экрана в демо таким образом, чтобы помещались только две линии, то увидите, что при background-position: 50% 0; линии располагаются по краям экрана. Второе - на некотором разрешении в фф линии исчезают. Может есть другие идеи, как реализовать подобное, или пофиксить текущий вариант? Upd: получилось отцентрировать с помощью calc https://jsfiddle.net/8ztwr95e/ Проблема с исчезающими линиями в ФФ актуал…

   Asked by alex_web64, July 20, 2019

   0 votes
   0 answers
5. css фон

   Подскажите пожалуйста. Коньент с картинкой и абзацем скрываются под футером.

   Asked by alexanderPoiu, July 20, 2019

   • css
   0 votes
   2 answers
6. Проблемы с текстом

   Здравствуйте, подскажите пожалуйста как быть когда при резиновой верстке не перестраивается текст, в макете задан определенный шрифт, но когда начинаю верстать под мобильные или планшеты устанавливая шрифт макета текст перестраивается в 2-3 строчки , а в макете в одну ? . Заранее спасибо!

   Asked by vka986, July 17, 2019

   • не перестраиваеться текс
   0 votes
   1 answer
7. Использование rem для задания размеров элемента

   Всем привет. Слышал советы, что вместо пикселей желательно использовать rem для задания размеров. Решил, в качестве эксперимента, попробовать задать для html определённый размер в пикселях, а дальше везде использовать уже rem. И вроде всё нормально, даже очень удобно. Но под конец решил я уменьшить масштаб страницы и вот тут появились проблемы. Если использовать такой код: html { font-size: 10px; } .box { background: red; width: 100px; height: 400px; } То по итогу всё нормально, сколько масштаб не уменьшай, результат всё те же 400px. Но стоило изменить единицы измерения в высоте: html { font-size: 10px; } .box { background: red; wid…

   Asked by Tascan, July 15, 2019

   • вёрстка
   • css
   • px
   • rem
   0 votes
   0 answers
8. Основные контейнеры Bootstrap

   Всем привет. В данный момент изучаю Bootstrap и задался таким вопросом. По правилам сетки Bootstrap, если я не ошибаюсь row и col должны быть внутри элемента с классом container. Но вот если при вёрстке макет разделён на отдельные блоки, например: header отдельно, далее ещё пару блоков с информацией и за ним footer. Как при таком варианте правильнее будет сделать порядок: общий тег container, вместо стандартного wrapper и далее внутри него все вышеперечисленные теги или же нужно создать container для каждого раздела? А если, например, у каждого из этих разделов свой фон? Тогда уже нужно идти по второму варианту: делать разделы на 100% ширину браузера, пропи…

   Asked by Tascan, July 11, 2019

   • bootstrap
   • обёртка
   0 votes
   4 answers
9. Что нужно сделать ,чтоб выровнять картинку с остальными картинками по центру

   Проблема следующая Как должно быть: И как сейчасЧерез флексы сделал эту картинку , но незнаю как выровнять стрелочки по центру картинки.А также в самом низу как через флексы попробовал , что-то не совсем хорошо получилось.Код https://jsfiddle.net/RedSniper/4rzm0pjf/2/ ,картинки не получилось загрузить.

   Asked by kartopelka, July 9, 2019

   0 votes
   2 answers
10. Как выровнять один елемент с лева, второй по центру , а третий и четвертый справа

    Как выровнять один елемент с лева, второй по центру , а третий и четвертый справа.Сейчас ситуация такая А нужно чтобы было так Код https://jsfiddle.net/RedSniper/j9s0bg2k/ Думаю , если стрелочки были не одной фоткой они бы стали как на картинке.Нужно , как-то с помощью флексов так сделать.

    Asked by kartopelka, July 9, 2019

    0 votes
    2 answers
11. Качественное отображение svg-иконок

    Здравствуйте. Сейчас все большую популярность набирает вывод иконок на сайте с помощью тегов svg>use. Для создания наборов я использую сервис IcoMoon. Проблема в том, что при выводе одной и той же иконки с помощью шрифта и тегом качество последней оставляет желать лучшего. Если на больших размерах разница не так заметна, то на маленьких все совсем плохо (см. скрин. Иконка menu c набора FontAwesome). В интернете находил советы применить к тегу svg transform: translateZ(0); или shape-rendering: crispedges; В случае с иконкой-бургером это решает проблему, но с чем-то более сложным результат выходит еще хуже, чем был до этого. Еще и ФФ при некоторых раз…

    Asked by alex_web64, July 8, 2019

    0 votes
    2 answers
12. Схлопывание отступов и оверлей

    Столкнулся с проблемой схлопывания отступов при уменьшении высоты браузерного окна. Пофиксил, добавив overflow: auto; родительскому элементу. Однако, на оверлей это не действует. Как исправить? <header class="header overlay"> <div class="header-content"> <h1 class="header-content__title">We are awesome creative agency</h1> <p class="header-content__descr">This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accums…

    Asked by Okieazy, July 7, 2019

    0 votes
    0 answers
13. Плавающий div не сдвигает таблицу

    Добрый день. Потратил целый день и не могу решить вопрос. Есть див с картинкой который float также на странице есть формула оформленная как таблица с шириной 100% так вот эта таблица не уменьшается по ширине и просто на странице появляется пустое пространство. Пример можно посмотреть здесь. Пробовал крутить разные свойства таблицы, но не смог добиться чтобы она меняла свою ширину под плавающий див. Может кто подскажет как правильно оформить формулу чтобы она отображалась как в таблице, но при вставки плавающего блока меняла ширину. Спасибо.

    Asked by Dsplib, July 6, 2019

    0 votes
    2 answers
14. Срочно помогите

    нужно сделать вырез как на картинке, ничего не могу придумать, помогите плз https://codepen.io/ingvarrrrr/pen/qzyPpP

    Asked by ingvarrrr, July 4, 2019

    0 votes
    2 answers
15. Как расположить один div под другим?

    Всем привет! У меня есть 2 div'а на странице, мне нужно, чтобы они располагались один под другим и верхний занимал по высоте 10% страницы, а нижний - 90. Сделал вот так <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Main page</title> </head> <body> <div style="position: absolute; height:10%; width:100%; background-color: #086FA1"> </div> <div style="position: absolute; height:90%; width:100%; background-color: #FF0000"> </div> </body> </html> В итоге второй див, который 90%, наезжает на первый и перекрывает его, а мне нужно, чтобы второй распо…

    Asked by Someone, July 4, 2019

    0 votes
    2 answers
16. Текс на картинке

    Здравствуйте! Помогите пожалуйста в решении следующей проблемы. Есть не большая разметка: <div id="gallery"> <div class="container"> <h2>photos</h2> <figure class="photo"> <a href="img/pic1.jpg"></a> </figure> Подскажите пожалуйста можно ли поместить текст на картинке? Я читал про элемент figure, но нашёл что только снизу можно текст оформить.

    Asked by Barik, July 1, 2019

    0 votes
    1 answer
17. Отцентрировать один блок из трех относительно родителя

    Здравствуйте. Есть вот такой пример https://jsfiddle.net/5dnz61qu/ Мне нужно, чтобы центр зеленого блока всегда находился в центре родительского. У меня два варианта, но они оба мне не нравятся: 1) Абсолютное позиционирование. 2) Задать синему блоку такую же ширину, как и в красного. В блоках динамический контент, поэтому хотелось бы, чтобы они могли занимать все свободное пространство, а с этим вариантом такого не получится. Есть еще идеи?

    Asked by alex_web64, July 1, 2019

    0 votes
    2 answers
18. Некоторые элементы на всех страницах

    Здравствуйте! Простите, если не сюда пишу. Только начинаю изучать HTML и CSS. Сверстал страницу, на которой присутствуют шапка, футер, меню. Страница трехколоночная. Сайт планирую делать многостраничным. Теперь задался вопросом: Как разместить основные блоки сайта на всех страницах? Имею в виду: футер, шапку, боковые колонки. Не размещать же их на каждой странице. Имею в виду, если кликнуть на ссылку в меню, то открывается новая страница без меню, футера и т.д. Как сделать, чтобы эти основные блоки отображались во всех страницах. Буду рад советам! По форуму искал и читал, но не смог применить некоторые наброски к своему с…

    Asked by iiwanc, June 30, 2019

    • блоки
    • html
    0 votes
    2 answers
19. Как выровнять таблицу по центру страницы вертикально?

    Всем привет, сделал вот такую таблицу с выравниванием по горизонтали <body> <table align="center"> <tr> <td align="right">Login</td> <td align="left"><input type="text"></td> </tr> <tr> <td align="right">Password</td> <td align="left"><input type="text"></td> </tr> <tr> <td align="right"></td> <td align="right"><button style="display: inline-block">Login</button></td> </tr> </table> </body> Теперь нужно сделать еще выравнивание по вертикали. Чтобы таблица отображалась по центру страницы по горизон…

    Asked by Someone, June 26, 2019

    0 votes
    3 answers
20. Элементы по центру в html5

    Всем привет! Как правильно расположить элементы по центру страницы в html 5? Читаю тут http://htmlbook.ru/html/center что <center> в html5 запрещен, тут http://htmlbook.ru/html/div/align что <div align="center"></div> тоже не айс (написано - осуждается... что?). Так как же нужно центрировать элементы в html5? У меня есть, например, input, как тогда мне поместить его по центру страницы?

    Asked by Someone, June 25, 2019

    0 votes
    5 answers
21. Вертикальные строки внтури горизонтальных блоков списка

    https://jsfiddle.net/49jzxfc1/1/ Подскажите, как сделать, чтобы строки в каждом блоке были вертикально

    Asked by Ser8191, June 23, 2019

    0 votes
    2 answers
22. Звездный рейтинг на svg

    делаю звездный рейтинг на svg на чистом css проблема в том что checked, svg почему то не закрашивается в нужный цвет Как решить эту проблему? https://codepen.io/anon/pen/zVNVRV?editors=1010

    Asked by yaparoff, June 21, 2019

    • svg
    • звездный рейтинг
    0 votes
    6 answers
23. SVG карта изображений, масштабирование

    Приветствую! Нужно реализовать кликабельную карту изображения, наткнулся на урок в интернете, но при уменьшении окна браузера области сбиваются. Помогите пожалуйста. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Интерактивная карта</title> <meta name="description" content=""> <meta name="keywords" content=" "> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/fonts.css"> <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </head> <body> <div cl…

    Asked by dimpase, June 20, 2019

    0 votes
    0 answers
24. Подключение не защищено полностью

    Здравствуйте. После подключения SSL сертификата на ПК версии сайта не появился зелёный замок. На мобильной же версии он есть (подгружается другой шаблон). Я везде проверил наличие https вместо http. Нигде упоминания http в шаблонах сайта нет. Помогите, пожалуйста. Уже давно пытаюсь исправить эту проблему. Вот код моего сайта: view-source:https://iblitzmods.ru/

    Asked by Serviak, June 19, 2019

    0 votes
    4 answers
25. Элементы наезжают друг на друга

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="header"> <div class="product"> <h1>Product Name</h1> <ul class="sps"> <li>Put on this page information about your product</li> <li>A detailed description of your product&l…

    Asked by nevalek, June 18, 2019

    0 votes
    1 answer