Поиск по сайту

Результаты поиска по тегам 'css'.

  • Поиск по тегам

    Введите теги через запятую.
  • Поиск по автору

Тип публикаций


Категории и разделы

  • Основной форум
    • Для начинающих
    • Проблемы верстки
    • Обсуждение работ
    • Работа форума
    • Флейм
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Веб-программирование
    • Javascript
    • Серверные технологии
    • СУБД
    • CMS
  • Работа: спрос, предложение, вакансии
    • Фриланс
    • Коммерческие услуги
    • Ищу работу
    • Предлагаю работу

Календари

  • События в Украине
  • События в России
  • События форума
  • События партнёров
  • Все события

Блоги

  • CMS (Системы управления контентом)
  • Руководство верстальщика
  • Блог htmlforum.io

Группы меток

  • Разработчики
  • Front-end
  • Back-end
  • Обучение
  • Ищу работу
  • Предлагаю работу

Искать результаты в...

Искать результаты, содержащие...


Дата создания

  • Начать

    Конец


Последнее обновление

  • Начать

    Конец


Фильтр по количеству...

Зарегистрирован

  • Начать

    Конец


Группа


Web site


ICQ


Jabber


Skype


Откуда


Интересы

Найдено 126 результатов

  1. Всем привет, помогите пожалуйста с такой проблемой, не получается повторить стиль активного пункта меню, как можно сделать чтобы он был по высоте чуть выше остальных пунктов?
  2. Здравствуйте, столкнулся с проблемой начального масштабирования на мобильных устройствах. Сайт без адаптации (по задумке заказчика), имеет ограниченную ширину width: 1024px !important; На экранах любого размера сайт при загрузке должен открываться полностью весь, но на устройствах с шириной дисплея меньше 1200px при открывании сайта масштабируется. И приходиться отдалять. Помогите исправить данную проблему. <html> <head> <title>Epic Birds</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="css/main.css"/> </head> .limit{ width: 1024px !important; margin-left: auto; margin-right: auto; }
  3. Здравствуйте. padding подгоняется не четко, при изменении масштаба видно изъяны (подсветка кнопки не на всю высоту или на оборот больше чем нужно) Код: https://jsfiddle.net/aemjkhp9/
  4. В сети есть интенсивы от HTML Academy. В них есть лекции где рассказываются всяческие хитрости, правила, принципы верстки. Например, скрипт надо подключать в конце страницы что б он не блокировал загрузку кода, что теги label и input можно группировать с помощью р и тд. Но эти лекции длятся просто невыносимо долгое количество времени, много разговоров, отвлечения на чат, между полезной информацией, как например вышеописанная, и нет просто времени все это просматривать несколько часов видео в поиске этих вещей. Есть ли такая информация в текстовом виде или в более коротком видеоформате. Пытался гуглить, но ничего не нашел, так как, скорее всего, я не правильно описывал и формулировал запросы. Помогите, пожалуйста. Если можно то ссылкой или как это все правильно называть.
  5. Особо не вдавался в подробности анимации, поэту прошу у вас. Нужно сделать так, чтобы буква при загрузки страницы, после 3с (ПРИМЕРНО) с центра экрана переместилась на 300px (ПРИМЕРНО) в любое из четырех направлений. P.S. Лишнего не пишите, и ссылки на темы не надо кидать.
  6. Написал страничку: На рисунке представлен результат Как таблицу (снизу слева), поднять вверх. Пробовал различные варианты position (+ top), ничего не вышло.
  7. Написал страничку: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>testPrj</title> <style> .wrapper { height: 100%; display: table; width: 100%; } .header { display: table-row; height: 1px; } .main { height: 100%; display: table; width: 100%; } .horizontalbar { display: table-row; height: 0px; } .box { display: table-cell; } .sidebar { width: 0px; } .sidebar table { /*height: 100%;*/ width: 100%; position: relative; top: 0; border-collapse: collapse; /*display: block;*/ } .sidebar table, th, td { border: 1px solid black; } .content { height: 100%; } .content iframe { width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block; } .footer { display: table-row; height:1px; } /* Basic Style*/ * { margin:0; padding:0; } html, body { height: 100%; } </style> </head> <body bgcolor="#FFFFFF"> <div class="wrapper"> <div class="header"> <a href="testTable.html">Untitled</a> </div> <div class="main"> <div class="horizontalbar"></div> <div class="box sidebar"></div> <div class="box content"> <iframe frameborder="0" marginwidth="0" marginheight="0" src="test.svg" id="test_0Id"></iframe> </div> <!--<div class="box sidebar"></div>--> <div class="box sidebar"> <table cellpadding="5"> <caption>Список переменных и их значения</caption> <tr> <th>Переменная</th> <th>Значение</th> </tr> <tr> <td>mon1</td> <td><div contenteditable="true">false</div></td> </tr> <tr> <td>mon2</td> <td><div contenteditable="true">false</div></td> </tr> </table> </div> <div class="horizontalbar"></div> </div> <div class="footer">Footer text</div> </div> <script type="text/javascript" src="test_0.js"></script> </body> </html> На рисунке представлен результат - https://ibb.co/gZAb2A Как таблицу (снизу слева), поднять вверх. Пробовал различные варианты position (+ top), ничего не вышло.
  8. Добрый день! Помогите кратким ликбезом: какие сейчас единицы измерения и в каких случаях используются при адаптиве? При выполнении тестового проекта я использовал проценты и пиксели... собственно, все по Макфарланду за 2014й год... Результат, вроде, соответствовал требованиям, но забраковали по нескольким причинам. Одно из нареканий было: использование некорректных единиц измерения при адаптиве. Я пытался найти сам... но запутался. Одни топят за vh,vw, другие за em,rem. Хотя, на сколько я помню, последние чисто для текста...
  9. Здравствуйте. Я начинающий верстальщик сайтов, столкнулся с проблемой при вёрстке карточек товара. Код карточки: HTML <div class="product-wrap"> <div class="product-item"> <img src="source/img/test.png"> <div class="product-buttons"> <a href="#" class="button">Купить</a> </div> </div> <div class="product-title"> <a href="">Test</a> <span class="product-price">₽ 100</span> </div> </div> ——————————————————————————- CSS * {box-sizing: border-box;} .product-wrap { position: absolute; width: 300px; margin: 0 auto; background: white; padding: 0 0 20px; text-align: center; font-size: 14px; font-family: Lora; text-transform: uppercase; } .product-item { position: relative; overflow: hidden; } .product-wrap img { display: block; width: 100%; } .product-buttons { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .8); opacity: 0; transition: .3s ease-in-out; } .button { text-decoration: none; color: #c0a97a; font-size: 12px; width: 140px; height: 40px; line-height: 40px; position: absolute; top: 50%; left: 50%; border: 2px solid #c0a97a; transform: translate(-50%, -50%) scale(0); transition: .3s ease-in-out; } .button:before { font-family: FontAwesome; margin-right: 10px; } .product-item:hover .product-buttons {opacity: 1;} .product-item:hover .button {transform: translate(-50%, -50%) scale(1);} .button:hover {background: black;} .product-title {color: #5e5e5e;} .product-title a { text-decoration: none; color: #2e2e2e; font-weight: 600; margin: 15px 0 5px; padding-bottom: 7px; display: block; position: relative; transition: .3s ease-in-out; } .product-title a:after{ content: ""; position: absolute; width: 40px; height: 2px; background: #2e2e2e; left: 50%; margin-left: -20px; bottom: 0; transition: .3s ease-in-out; } .product-title a:hover {color: #c0a97a;} .product-title:hover a:after {background: #c0a97a;} .product-price { font-size: 20px; color: #c0a97a; font-weight: 700; } ————————————————— У меня получается карточка. (скриншот прикреплён) Хотелось бы узнать как мне сделать так, чтобы следующая шла с право от неё. Если просто скопировать HTML код, то она остаётся на месте. И как мне сделать так, чтобы когда место справа не осталось, карточка переместилась на следующий ряд. ЗАРАНЕЕ ОГРОМНОЕ СПАСИБО!
  10. AlexanderLebedev

    Работа слайдера с bootstrap

    Имеется слайдер, "//" если удалить эти строки , то все работает. Там collapse от bootstrap, скрыть и показать блок. А когда всё на месте, с скрытием, то он показывает так Помогите исправить, сложно найти рабочий подобный слайдер. Есть мнение что конфликтуют JS, но как их поставить чтоб всё норм было. <!-- Наружная реклама --> <div id="collapse_1" class="collapse" aria-labelledby="heading_1" data-parent="#accordionExample"> // ЭТА УДАЛИТЬ НАДО ЧТОБ РАБОТАЛО <div class="container header"> <div class="row align-items-center"> <div class="card-body card align-items-center bg-lightgrey"> <h5> <img src="http://www.cyberforum.ru/images/header/nar.png" width="105" height="80"> Наружное и внутреннее оформление </h5> </div> </div> <!-- Слайдер --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> <div class="swiper-slide"> <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200"> </div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> <!-- Конец слайдера --> </div> </div> // ЭТА УДАЛИТЬ ЧТОБ РАБОТАЛО НАДО <!-- Конец наружной рекламы --> СКРИПТЫ В КОНЦЕ BODY <!-- Скрипты --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="js/slider.js"></script> <script type="text/javascript"> var swiper = new Swiper('.swiper-container', { slidesPerView: 3, spaceBetween: 30, loop: false, loopFillGroupWithBlank: false, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', } }); </script> <script src="js/bootstrap.js"></script> <!-- Конец скрипты --> После уменьшении или увеличении страницы всё работает как надо. Что за логика ?
  11. Помогите сделать адаптив для игры. Главное меню, вроде нормально выглядит на мобильных версиях, но когда начинаешь игру Канвас не помешается на экран. Как это исправить? http://develop.2di.site
  12. Добрый вечер, не могу разобраться как сделать отступы с права и слева внутри div. Есть такой код html: <div class="footerPanel"> <div class="footerPanelPadding"> Footer </div> </div> И есть такой CSS: .footerPanel { position: fixed; bottom: 0; padding: 0 20px 20px 20px; width: 100%; } .footerPanelPadding { width: 100%; background: #2a2c30; } Слева отступ делается, а справа нет. Кто то сталкивался с такой задачей? Вот сайт на котором я это делаю: Перейти на сайт Там снизу страницы увидите проблему
  13. Здравствуйте, Я начинающий специалист в верстке. Знаю HTML и CSS. Изучаю фреймворки и JS. Очень хочу реализоваться в сфере Frontend - разработки. Готов пройти стажировку ( рассматриваю и не оплачиваемый вариант ), с дальнейшим трудоустройством. Буду рад интересным предложениям! мой почтовый ящик: mrcojuhari@yandex.ru
  14. мурамаса

    Сьезжает верстка в firefox

    Добрый день, сверстал страницу с блоком новостей которые идут под меню колонкой, по одному блоку в ширину контейнера. В хроме все нормально и в файрфокс на моем ноутбуке с разрешением 1366х768 тоже, но с другого компа верстка сьезжает именно в firefox. Немного полазил в браузере и блок становится на место если убрать overflow: hidden, но тогда текст соотвественно вылезает за пределы блока. Скинул весь css на всякий случай. body { margin: 0; padding: 0; background: url(/img/casfon.jpg); } .frame { width: 1200px; background-color: white; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } .box { width: 1100px; margin: 0 auto; box-sizing: border-box; -moz-box-sizing: border-box; } header { background: url(/img/casino.jpg) no-repeat center; height: 300px; } /* БЛОК НОВОСТЕЙ ГЛАВНОЙ СТРАНИЦЫ*/ .news { margin-left: 100px; margin-bottom: 100px; } .news-block { width: 800px; padding: 10px; margin: 0 0 40px 0; height: 310px; overflow: hidden; text-overflow: clip; font-size: 15px; text-align: justify; line-height: 1.3; } .news-block h2 { font-size: 22px; } .news-block h2 a { text-decoration: none; } .news-image { float: left; width: 300px; height: 280px; padding: 10px; } /* СТИЛИ ЦЕНТРАЛЬНОГО МЕНЮ */ .menu { float: left; border-bottom: solid red 2px; width: 100%; margin-bottom: 50px; } .menu li { list-style-type: none; font-size: 25px; float: left; margin: 0px 0 auto 50px; padding: 20px; } .menu li a { text-decoration: none; } .menu li:hover { background-color: red; } /* СТАТЬЯ КОНТЕНТ ОСНОВНОЙ */ .title { text-align: center; font-size: 25px; } .content { font-size: 18px; text-align: justify; float: left; margin: 30px auto 50px auto; } .content p { overflow: hidden; } .image { width: 330px; height: 300px; margin: 0 auto 20px 20px; clear: both; } .icon { width: 25px; height: 25px; float: left; margin-right: 25px; } /* СТИЛИ ДЛЯ ФОРАМТИРОВАНИЯ ТЕКСТА */ .red { color: red; } /* ПОДВАЛ */ footer { font-size: 13px; text-align: center; padding-top: 40px; display: block; height: 30px; margin-top: -60px; clear: both; border-top: 2px solid red; }
  15. Установила программу для chrome, позволяет просматривать в браузере как бы выглядел сайт на телефоне и у меня не получается прописать стили, чтобы спрятать боковое меню? <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .... в стилях style.css @media screen and (max-width: 600px) { .menu-niz-1{ display: none; } } меню которое надо убрать <div class='menu-niz-1'> <!--здесь меню--> </div>
  16. <!DOCTYPE html> <html lang = "eng"> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "css/mains.css"/> <title>Шапка</title> </head> <body> <header> <div class = "container"> </div> </header> <section> <div class = "container"> </div> </section> <section> <div class = "container"> </div> </section> <section> <div class = "container"> </div> </section> <footer> <div class = "container"> </div> </footer> </body> </html> css.... (Файл называется mains.css и находится по пути css/mains.css) header { background-image: url(../img/first-bg.jpg): no-repeat center top / cover; height: 8 px; width: 811 px; }
  17. Добрый день. Появилась следующая проблема: При отображении сайта в любых браузерах - все работает корректно, кроме Google Chrome. Съезжает шапка сайта, а точнее то, что в css указывал позиционировать справа - располагается в левой части и закрывает логотип. Ну уж очень меня это напрягает. Не пойму, что нужно делать. Кто сталкивался с такой же проблемой? Сайт - ganzola.ru Заранее спасибо.
  18. Адрес сайта: shoporus.ru , буду благодарен за помощь в решении данной задачи!
  19. leShik

    Помогите чайнику!!!

    Попросили добавить текста немного на сайт. Добавил блок со списком, отображение вот такое Какие стили отвечают за такое отображение? Его стили на данном этапе)) div style="position: relative; clear: both;" "position: absolute; clear: both; z-index: 1000;" - отображает вот так почему "type" для ul не отрисовывает маркеры? Вроде на дримвивере написан, хотя хз))
  20. deekep

    php

    Как запустить файл типа index.php на пк?
  21. Необходимо сверстать такую вот форму. Понятия не имею что делать с нижней частью бордера чтобы он прирывался. Зараннее благодарен добрым людям!
  22. Доброго всем времени суток, нужна ваша помощь . Нужно сделать небольшое всплывающее окно на лэндинг которое показывает сообщения типа "Сейчас марина купила товара на сумму ххх " или "Осталось товара по акции;5шт" , по ссылке пример. Желательно сделать 1в1 . всех благодарю за помощь !
  23. Здравствуйте! Возникла проблема с "версткой" шапки. Имею следующий код: HTML: CSS: Вся проблема в том, что я не могу догнать как мне убрать у последних элементов в nav и nav-profile боковую границу. Я уже как только не пробовал, не могу догнать как это осуществить, максимум что получилось, при том варианте что выше - убирается боковая граница у всех элементов меню вообще. Да, я могу сделать отдельный класс, и присвоить его необходимым элементам, но такое решение совсем как-то не комильфо, мне кажется. Надеюсь на помощь! Заранее спасибо!
  24. dsljkeee

    border с пробелом

    Доброго времени суток, как можно осуществить данную проблему? Как показано на картинке, в бордере имеется пространство которое заполнено иконкой, как именно сделать такое пространство?
  25. Здравствуйте. Прошу оценить верстку и указать на ошибки. Макет без адаптивности. Верстал по размерам из фотошопа. index.html main.css сайт на хосте - http://www.testwebtest.h1n.ru/