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

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

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

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

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


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

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

Календари

  • IT events in Ukraine
  • IT events in Russia
  • События форума

Блоги

  • CMS (Системы управления контентом)

Группы меток

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



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

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

  1. Как реализовать подобное через border-radius или другие варианты решения?
  2. Всем привет! Меня зовут Павел. Я три года работаю Front-end разработчиком в IT-компании. За время работы посещал много семинаров и конференций, читал публикации западных коллег. На сегодняшний день, у меня есть желание поделится знаниями с начинающими верстальщиками, а может быть, обменяться опытом с профи по цеху. Сам я не претендую на звание супер-специалиста фронтенда, поэтому продолжаю дальше развиваться в данном направлении. Как показал мой опыт общения с начинающими и специалистами "фронта", очень быстрое развитие происходит тогда, когда ты что-либо объясняешь другому человеку. Поэтому я, с одной стороны, хочу помочь начинающим, так как в моей памяти ещё свежи воспоминания о муках самостоятельного освоения необходимых знаний, а с другой – продолжить собственное развитие через обучение и помощь другим (то есть, попробовать себя в качестве учителя по фронтенду). Теперь по существу Я достаточно загружен, однако в течении дня вполне могу выделить 1-2 часа на обучение и консультации для начинающих верстальщиков (может быть, даже совсем нулевых – не стесняйтесь). Кроме того, я могу ответить на отдельные вопросы, подсказать, что именно стоит почитать, куда развиваться и как в дальнейшем трудоустроиться верстальщиком. Главное, чтобы вы действительно хотели освоить профессию и понимали, что дело это не очень лёгкое и достаточно кропотливое, требующее усидчивости и работы над собой. Обращайтесь, всегда рад пообщаться Мои контакты: skype: live:frontendpavel email: [email protected]
  3. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FlexBox</title> <style> body { padding: 0; margin: 0; } .container { position: absolute; background: red; width: 40%; word-break: break-all; padding: 5px 5px; margin: 60px auto 0 5%; } .lol { width: 400px; height: 400px; background: black; margin: 7.1% auto 0 50%; } </style> </head> <body> <div class="container"> <span> Husbands ask repeated resolved but laughter debating. She end cordial visitor noisier fat subject general picture. Or if offering confined entrance no. Nay rapturous him see something residence. Highly talked do so vulgar. Her use behaved spirits and natural attempt say feeling. Exquisite mr incommode immediate he something ourselves it of. Law conduct yet chiefly beloved examine village proceed.On am we offices expense thought. Its hence ten smile age means. Seven chief sight far point any. Of so high into easy. Dashwoods eagerness oh extensive as discourse sportsman frankness. Husbands see disposed surprise likewise humoured yet pleasure. Fifteen no inquiry cordial so resolve garrets as. Impression was estimating surrounded solicitude indulgence son shy. </span> </div> <div class="lol"> </div> </body> </html> Почему когда я задаю чёрному блоку отступ, красный съезжает вместе с ним? Как мне их выравнить по одинаковому отступу, для адаптации под все разрешения экрана?
  4. Здравствуйте. Прошу помочь в решении следующей задачи: Имеется родительский элемент со свойством clip-path и дочерний элемент с анимацией: Для примера: HTML <div id="logoimage-waves"> <div id="waves-animated"></div> </div> <svg> <clipPath id="WavesPolygon"> <polygon points="0 0,95 0,95 8,80 5,60 10,40 15,20 20"> </polygon> </clipPath> </svg> CSS #logoimage-waves { width: 100px; height: 100px; clip-path: url("#WavesPolygon"); -webkit-clip-path: polygon(0px 0px,95px 0px,95px 8px,80px 5px,60px 10px,40px 15px,20px 20px); position: absolute; } #waves-animated { width: 100px; height: 100px; position: absolute; background: url(/images/waves.png) no-repeat; animation: waves-animation 40s; } @keyframes waves-animation { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } } Вопрос следующий: В Firefox всё работает как надо, дочерний анимированный элемент обрезается с помощью свойства clip-path родительского элемента. Но в других браузерах (проверял в Chrome 55 и Opera 41) обрезка не работает и элемент показывается полностью. Причём, что важно, это происходит только в том случае, если дочерний элемент анимирован с помощью свойства transform, а если анимируется другое свойство, например margin, то обрезка работает во всех браузерах. Короче говоря: дочерние элементы анимированные с помощью transform не обрезаются с помощью clip-path родительского элемента в Хроме и Опере. В общем задачка та еще. Второй день пытаюсь решить ) Благодарю за внимание!
  5. Всем привет! Такая ошибка - при сохранение стилей в основном файле sass все отлично, а вот если подключать отдельные файлы, например, _header.sass при сохранение выскакивает ошибка - Autoprefixer: Missed semicolon! Точка с запятой все стоит нормально, компилит если несколько раз нажать сохранить, но всегда выскакивает эта ошибка! Вот моя сборка: https://paste.ofcode.org/sLuKmekW88cFusdQPeFaPV ! Помогите пжл)
  6. Здравствуйте. Я начинающий верстальщик, и, в принципе, могу сверстать сайт по макету с нуля. Но я понятия не имею, как происходит наполнение моего сайта контентом, кто этим занимается, и какова моя роль как верстальщика в этом процессе. Должен ли я каким-то специальным образом подготавливать свою верстку, или это уже вне моей компетенции? И если да, то что конкретно я должен знать об этом, как простой верстальщик? С чего начать и где копать?
  7. Всем привет. Вопрос: как сверстать данную секцию? prntscr.com/fr8b96 Заранее спасибо за ответы. Как сделать что бы иконка была слева, а текст справа я уже знаю. А вот как сделать это все дело в ряд до меня не доходит Возможно просто недостаточно знаний для этого.
  8. $("button#lol").on('click', function(){ var s = document.getElementById("val1"); var c = document.getElementById("val2"); s.hidden = !s.hidden; c.hidden = !c.hidden; }); В данном коде у объекта с айди val 1, val2 есть аттрибут отображения hidden. Почему изначально объекты на html-страницы скрыты, когда я им этот пустой аттрибут задаю, хотя по стандарту они должны отображаться? Как сделать скрытым и снова открыть объект?
  9. Здравствуйте. Я веб-разработчик, занимаюсь написанием современных динамических сайтов, сайт, блог и интернет магазин. В реализации использую три движка Joomla, WordPress и Opencart. В зависимости от задачи, выбирается один из этих движков. Языки программирования: HTML, CSS, Javascript, PHP Фреймворки: LESS, SASS, Bootstrap, jQuery Движки (CMS): Joomla, WordPress, Opencart Минимальный вариант, готовый сайт за 20$ • настройка понравившегося шаблона для CMS • установка дополнений и их настройка (плагины, модули, компоненты) • привязка хостинга к домену • установка сайта на хостинг • настройка хостинга Другие работы: • написание шаблона • правка шаблона • натягивание шаблона на движок • установка и настройка дополнительных компонентов для движка • установка ваших скриптов на сервер • и другие работы... Обращайтесь. Site: http://rocketusd.ru/napisanie-sajta Email: [email protected] Skype: live:flagmanfbe_1 Всем удачи в достижении своих целей!!!
  10. Добрый день. Работаю с готовым макетом, не могу поправить страницу так, чтобы текст был разбит на две колонки. Помогите, пожалуйста. Юзал вот что: <style type="text/css"> * { margin: 0; padding: 0; } p { padding: 10px; } #left { position: absolute; left: 0; top: 0; width: 50%; } #right { position: absolute; right: 0; top: 0; width: 50%; } </style> - хотя говорят, что это совсем не оптимальный вариант... Другого не знаю. В общем, так или иначе текст плывёт - то мимо блока, то наезжает на всё. Игрался с absolute, fixed и т.д. - не помогает, никак не могу попасть в нужное место. Страницу с кодом и картинку примерной разметки прилагаю. Задача простая: текст в теле должен быть двухколоночным. Если нужен CSS, приложу. Спасибо. contacts.html
  11. Файл html не видет файл css в той же папке, хотя файл image из той же папки подключается. В третьем коде при выводе в браузер высвечивается тег <р>.
  12. Необходимо, чтобы реагировал на клик сначала внутренний блок (CONTENT), а далее уже родительский (FIXED) Как это можно реализовать? Ссылка https://jsfiddle.net/ux7gknhk/1/
  13. Может мне кто-нибудь объяснить как работает данный код? Желательно поэтапно <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> </head><body> <button data-toggle-id="subscribe-mail"> Показать форму подписки </button> <form id="subscribe-mail" hidden> Ваша почта: <input type="email"> </form> <script> document.onclick = function(event) { var target = event.target; var id = target.getAttribute('data-toggle-id'); if (!id) return; var elem = document.getElementById(id); elem.hidden = !elem.hidden; }; </script> </body> </html>
  14. Некорректно работают кнопки left и right. Иногда right вообще перестаёт работать, если нажимать left. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="script's.js"></script> <style> .slider { border: 2px solid black; width: 300px; height: 60px; overflow: hidden; } #MySlider { position: relative; width: 400px; } #MySlider img { width: 60px; height: 60px; float: left; } #left { position: absolute; top: 205px; } #right { position: absolute; left: 253px; top: 205px; } </style> </head> <body> <div class="slider"> <div id="MySlider"> <img src="1404914279_maxresdefault.jpg" alt=""> <img src="1404914279_maxresdefault.jpg" alt=""> <img src="200596402_fabdd7acef8cf8015b45af8d81a8b396_800.jpg" alt=""> <img src="1404914279_maxresdefault.jpg" alt=""> <img src="200596402_fabdd7acef8cf8015b45af8d81a8b396_800.jpg" alt=""> <img src="1404914279_maxresdefault.jpg" alt=""> </div> <button id="left">LEFT</button> <button id="right">RIGHT</button> </div> </body> </html> var tor = 0; document.getElementById('left').onclick = left; //ВЛЕВО function left() { var any = document.getElementById('MySlider'); tor = tor - 60; if (tor < -360) { tor = 0; } any.style.left = tor + 'px'; } document.getElementById('right').onclick = right; //ВПРАВО function right() { var any = document.getElementById('MySlider'); tor = tor - 60; if (tor < -300) { tor = 0; } any.style.right = tor + 'px'; } Как исправить их неправильную работу? В чём ошибка...
  15. Почему margin не отодвигает h2 от верха родительского элемента, как положено, а добавляет ему отступ, как показано на картинке?
  16. Помогите новичку, советом. Нужно к li привязать ссылку для перехода. Ссылку привязываю, но при нажатии на нее переход не происходит. Что делаю не так? <div id="nav"> <a class="btn_dropdown" data-toggle="collapse" data-target=".nav-collapse_">MENU</a> <ul class="navigation"> <li data-slide="1">Текст 1</li> <li data-slide="4">Текст 2</li> <li> <a href="URL">Текст 3</a></li> <li data-slide="8">Текст 4</li> <li data-slide="10"> Текст 5</li> <div class="clear"></div> </ul> </div>
  17. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="script's.js"></script> <style> .text-jquery { margin: 0 0 0 30px; transition: 4s; } h1 { position: relative; } </style> </head> <body> <input id="val1" type="text"><br><br> <input id="val2" type="text"><br><br> <button id="as">Посчитать!</button> <button id="lol">Сместить!</button> <button id="lik"></button> <h1>LOL</h1> </body> </html> Как мне сделать в jquery, чтобы при каждом нажатии на кнопку с id="lik" у меня h1 смещался влево на 15px?
  18. Дан код: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery-3.2.1.min.js"></script> <script type="text/javascript" src="script's.js"></script> <style> input { position: relative; transition: all ease 1s; } </style> </head> <body> <input id="val1" type="text"><br><br> <input id="val2" type="text"><br><br> <button>Посчитать!</button> <button id="lol">Сместить!</button> </body> </html> И его скрипт: $('document').ready(function() { $('button').on('click', function(){ var value1, value2; value1 = $('#val1').val(); value2 = $('#val2').val(); value1 = parseInt(value1); value2 = parseInt(value2); value3 = value1 + value2; alert(value3); }); $('button#lol').on('click', function() { $('#val1, #val2').css( { border: '2px solid red', left: '50px' } ); }) }); И первая проблема: при нажатии на кнопку "Сместить!" у меня вылетает алёрт со значением "NaN", а потом работает сам скрипт. И вторая: почему в коде не работает плавное смещение вправо? В html задал параметр стиля, но плавного перехода нет. Только плавная смена цвета. Как исправить NaN и плавный переход? Если возможно, объясните поподробнее.
  19. Добрый день! Подгружаю шрифты с google fonts, имя шрифта Fira Sans (и причем он у них отображается корректно), но когда я его подгружаю он выглядит так как будто избитый. Привожу 2 скриншота: 1. Как выглядит шрифт на google fonts 2. Так выглядит у меня Почему так получается? Все эти манипуляции я провожу в браузере Firefox.
  20. Дан код: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #e8ece7; } .menu { position: absolute; background: #b13224; border-radius: 5px; top: 90px; left: 450px; } .menu a { display: block; text-decoration: none; background: #b13224; color: white; padding: 7px; margin: 0; } .menu a:hover { background: #383838; } .menu ul { width: 958px; height: 33px; list-style: none; font-size: 0; } .menu ul li { display: inline-block; font-size: 16px; } h1 { position: absolute; top: -5px; left: 450px; display: inline-block; } h1:before { content: ''; width: 48px; height: 56px; background: url(gold-logo.jpg) no-repeat center center; background-size: 48px 56px; display: inline-block; } #polosa { position: relative; background: red; } .slider { overflow: hidden; height: 38px; padding: 4px; border: 2px solid black; position: absolute; top: 506px; left: 900px; font-size: 36px; } </style> <script> document.getElementById('slider-top').onclick = slider; var top = 0; function slider(){ var polosa = document.getElementById('polosa'); top = top - 256; if (top < -768) { top = 0; } polosa.style.top = top +'px'; } </script> </head> <body> <h1>Xman<font color="red">Bank</font></h1> <div class="menu"> <ul> <li><a href="">Home</a></li> <li><a href="">About us</a></li> <li><a href="">Our services</a></li> <li><a href="">Deposits</a></li> <li><a href="">FAQs</a></li> </ul> </div> <div class="slider"> <div id="polosa"> <li>Привет</li> <li>как</li> <li>у тебя</li> <li>дела?</li> </div> </div> <button id="slider-top">TOP</button> </body> </html> В скрипте в окне разработчика браузера ошибка: "cannot set property onclick of null". Как её решить?
  21. Здравствуйте. Моя проблема состоит в том, что изначально созданы папки css, img с соответствующими файлами и отдельно image.hml. Но когда .html файлов стало несколько, создав для этого папку и переместив в неё эти файлы , они вдруг перестали видеть .css. Помогите нубу, я только изучаю и мне стыдно.
  22. Мир вам! Начинающий верстальщик сделает вёрстку сайта бесплатно, по вашему psd макету, с возможностью добавить в портфолио. Знаю: html5, css3, адаптивную вёрстку, могу применять готовые скрипты на jQuery. Пишите на почту: [email protected]
  23. Как сверстать картинку, выходящую за сетку бутстрап? Как лучше сверстать это!
  24. <div class="wrap" id="post_1"> <div class="post"> <div class="post-header"> <h2 class="post-name">Заголовок</h2> </div> <div class="post-content-desc"> <p class="content-desc-p">краткое описание статьи</p> </div> <div class="post-content" style="display:none;"> <p class="content-p">полный текст статьи</p> </div> <a href="" class="content-desc-button">Подробнее..</a> </div> </div> задача, нужно при нажатии на кнопку "Подробнее" скрыть див с классом post-content-desc, и открыть див с классом post-content, при этом постов много на странице а при нажатии действия должны происходить лишь с тем постом на котором была нажата кнопка "Подробнее", может кто подсказать как решить эту задачу? или хотя бы дать пару советов (подробнее можно разглядеть все на изображении)
  25. как сделать такую обводку как наскрине помогите