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

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

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

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

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


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

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

Календари

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

Блоги

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

Группы меток

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



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

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

  1. Здравствуйте! Помогите с решением. Подскажите, можно ли сверстать стрелку на псевдоэлементе? https://prnt.sc/gb74sc https://prnt.sc/gb7kos
  2. То о чем я говорю представлено на скриншоте. Через padding-top по пикселям делал, как-то неудобно получается. Есть ли еще варианты?
  3. Надеюсь, смогу объяснить, чтобы меня поняли: Наткнулся на один сайт (http://sheltertheanimation.com/), на нём есть тег <section>, что используется на сайте. И вот при прокрутке страницы фон этой секции не подвижен, а сами элементы, типо: <h1>, <p> подвижны. У меня просьба и вопрос: Дайте мне ссылку на статью по подобной ситуации, ибо очень заинтересовала, и объясните мне предназначение тега <section>, ведь я мог вместо него использовать тот же самый <div>.
  4. Добрый вечер. Вот только закончил верстать свой второй адаптивный дизайн. Первый делал на бустрапе. Здесь же я решил использовать flexbox причем сразу же с сеткой. Вот что получилось: https://alex2033.github.io/ Оцените пожалуйста и покритикуйте, если есть что) P.s. Вот действительно практика - лучший инструмент обучения. Когда только начинал этот макет верстать, о флексах ничего не знал и не понимал как они работают. А щас чувствую себя этаким специалистом:DD
  5. Данный вариант —> var i = parseInt($("#sli").css('margin-left')); Индентичен варианту —> var i = parseInt(document.getElementById('sli').style.marginLeft). Но, по какой-то причине, второй вариант не работает. То есть, я не могу стиль вложить в переменную в JavaScript, а в JQuery такое возможно. И при изменении стиля типо left в javascript, мне нужно указывать что-то вроде 100 + 'px', а такой момент отсутствует в JQuery, сойдут обычные числа. Был бы благодарен, если бы на мои вопросы были ответы, потому что мне не понятна такая работа кода.
  6. В этом коде: https://jsfiddle.net/Lgjy2c8w/ у меня блок запоминает положение другого, и на 100 пикселей уходит дальше, хотя глобальная функция задана tor = 0, и изменяться они уже в своих функциях. Как исправить неправильное смещение?
  7. Всем привет! Я, некоторым образом, нуб в верстке. Сделал пару сайтов, чисто на html и css, пользуясь руководствами, как направляющими. Сайты работают вполне приемлемо, однако, я столкнулся с одним неудобством: каждый раз, для загрузки изображения, мне требуется залезать в панель управления Джумла и, либо создавать там новую категорию и макеты, либо менять изображения и текст в тех, что уже существуют. Это не очень удобно, тем более, что я, каждый раз, успеваю забыть, какой порядок действий мне нужно совершить. В связи с этим, возник вопрос: можно ли как-то сделать так, чтобы загрузка изображений происходила, как, к примеру, вКонтакте, когда можно создать альбом - и закинуть в него фотографии, быстро и без лишних телодвижений? Заранее спасибо за ваши комментарии.
  8. Приветствую всех. Пожалуйста, дайте критику на эту верстку. Я новичок, и это моя первая попытка что-то сверстать. Большое спасибо. maquette1.rar
  9. у меня есть список: <nav> <ul class="navigation"> <li><a id="link" href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li class="cb"><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> </ul> </nav> и есть стили которые меняют список: nav .navigation li a{ background: url(../img/home.png); color:#4CB0D4; text-decoration: none; text-align:center; display: block; background: #ffffff; height: 30px; width: 170px; padding-top: 70px; font-size: 20px; font-family: "BebasRegular"; border-radius: 4px; } Проблема в том, что у меня не вставляется изображение в блок, правило background есть а изображение нету. Когда делаю id элементу <a>, и делаю ему правило #id {background:url...} тогда у меня изображение ложится на левый верхний угол, и белый фон блока превращается в синий как фон. Я подазреваю что проблема в том, что я неправильно задал правила для навигации, вот код: !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>@import url(css/style.css)</style> </head> <body> <div id="wrap"> <header> <div class="header_top"> </div> </header> <nav> <ul class="navigation"> <li><a id="link" href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li class="cb"><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> </ul> </nav> </div> </body> </html> и css head,body{ margin:auto 0; } body{ background: url(../img/white-severance.png); } #wrap{ height: 600px; margin: auto 0; } header{ min-height: 300px; max-height: 300px; background: #FFFFFF; } nav{ min-height: 350px; max-height: 350px; background: #4CB0D4; overflow: hidden; } nav .navigation{ margin-left: 15px; } ul{ list-style: none; } nav .navigation li{ display: block; float: left; padding: 30px; } nav .navigation li a{ background: url(../img/home.png); color:#4CB0D4; text-decoration: none; text-align:center; display: block; background: #ffffff; height: 30px; width: 170px; padding-top: 70px; font-size: 20px; font-family: "BebasRegular"; border-radius: 4px; } .navigation .cb{ clear: both; } ul .sell a{ background: url(../img/home.png) no-repeat; } #link{ } @font-face { font-family: 'BebasRegular'; src: url('../fonts/BebasRegular/BebasNeueRegular.eot'); src: url('../fonts/BebasRegular/BebasNeueRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/ BebasRegular/BebasNeueRegular.woff') format('woff'), url('../fonts/BebasRegular/BebasNeueRegular.ttf') format('truetype'); font-style: normal; font-weight: normal; }
  10. Написал код точно как в учебнике, но он не работает. В чем причина? Скриншоты прилагаются.
  11. Html <header> <div class="container services"> <div class="row"> <div class="col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 108.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 127.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service "> <a href="#"> <img src="img/Shape 106.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 97.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> </div> </div> </header> CSS .service { text-align: center; margin-right: 32px; position: relative; padding:0; } .service:last-child{ margin-right: 0; } .service-item { } .service img { max-width: 100%; display: block; margin: 0 auto; } .service a { display: block; } .service a p { display: block; text-decoration: none; font-size: 16px; font-weight: bold; color: #2a2a2a; }
  12. Добрый день, нужно сделать слайдер в шапке сайта. Причем меняется только выделенная красной зоной область, то есть не вся шапка. Как сделать так, чтобы у слайдера не было фона? Должен быть прозрачным как на скриншоте.
  13. В бустрапе контейнер создает свою стандартную ширину 1140 вроде, я ставлю свою 1024 и у меня слетает nav меню для мобильного разрешения HTML <header> <div class="container"> <div class="row hidden-xs"> <div class=" col-lg-3 header-logo"> <p>Burgers<span>.co</span></p> </div> <div class="col-lg-7 col-lg-offset-2 header-menu"> <ul class="nav nav-pills "> <li class="active"><a href="#">Home</a></li> <li><a href="#">Our Burgers</a></li> <li><a href="#">What Else?</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <nav class="navbar navbar-default hidden-md hidden-sm hidden-lg"> <div class="container-fluid"> <div class="navbar-header"> <div class="col-xs-2 header-logo"> <p>Burgers<span>.co</span></p> </div> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Our Burgers</a></li> <li><a href="#">What Else?</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> </header> CSS html, body { font-family: 'Rubik', sans-serif; font-family: 'Martel', serif; } .header-logo p { display: block; font-family: 'Martel', serif; font-size: 26px; color: #0e1d2b; text-transform: uppercase; padding: 30px 50px; font-weight: bold; } .header-logo p span{ color: #ffa326; } .header-menu ul { list-style-type: none; } .header-menu a{ display: block; text-decoration: none; color: #3e4a55; } .nav-pills > li > a:hover{ color: #3e4a55; opacity: .8; background: #fff; } .nav-pills > li > a:focus{ color: #3e4a55; background: #fff; } .nav-pills > li.active > a { background: #fff; color: #3e4a55; border-bottom: 4px solid #ffa326; border-radius:0; } .nav-pills > li.active > a:hover { background: #fff; color: #3e4a55; opacity: .8; } .nav-pills > li.active > a:active { background: #fff; color: #3e4a55; } .nav-pills > li.active > a:focus { background: #fff; color: #3e4a55; } .header-menu { margin-top:25px; } .navbar-header .header-logo p{ padding: 0; margin-top: 7px; } .nav > li > a { text-transform: uppercase; }
  14. Периодически нужна верстка шаблонов сайтов файло обменников (demo), примерно в количестве 10 страниц. Нужен человек с опытом. Писать в ЛС.
  15. Добрый вечер. Создал свой первый адаптивный сайт. Оцените пожалуйста! https://alex2033.github.io/ Есть несколько вопросов, которые возникли, пока верстал: 1) На телефоне при нажатии на любую ссылку возникает синее выделение на полсекунды,можно ли это как-то убрать или это стандартная тема для телефонов? 2) Не считается дурным тоном прописывать колонки бутстрапа следующим образом:col-md-3 col-sm-2? Вопрос к тому, что при небольших разрешениях я хочу, чтобы в портфолио в строку отображалось не четыре работы, а две например. 3) Стоит ли в секции, где представлены работы, делать наложение темного блока на изображение с текстом и иконкой плюса с помощью background-image, притом, что возникает необходимость прописывать для ховера !important? 4)Нужно ли прописывать медиа-запросы для нестандартных разрешений? Например, у меня в коде есть: min-width: 600px and (max-width: 768px) Стоит ли это прописывать?
  16. Здравствуйте,все никак не могу понять как правильнее реализовать данную форму? Как видите рамки ссылки(по совместительству кнопка) несколько больше рамок поля, притом, что размеры их рамок, высота поля и ссылки одинаковы. Вообще такое ощущение,будто это одно поле, но каким-то образом разделенное, но не понимаю как. Я же "лепил"их с помощью отрицательного марджина ссылки.
  17. Друзья, возникла задача построения ряда блоков. Блоки располагаются один под другим. В каждом есть изображение, которое должно обрезаться снизу. Однако сам div нестандартный. Смотрим картинку Какие у меня были варианты решения: Использовать overflow: hidden; Но идея потерпела крах, потому что он обрезает не по линии, а по горизонтали. Использовать clip; Тоже крах, потому что теряется адаптивность и каждый раз рассчитывать clip даже с помощью js тяжело Разные варианты совмещения. Например, взять из макета дугу и картинку, сохранить как PNG и установить в основном слое как background-position: bottom; Пока это самая лучшая идея, но она не универсальна. Необходимо сделать так, чтобы работало с любой картинкой, не только с выбранной из макета. То есть было бы странно сначала закидывать любую картинку в макет, там вырезать ее вместе с дугой и вставлять как background Как строить такие блоки с обрезкой картинок на нижней границе?
  18. Всем привет! Столкнулся со следующей проблемой: Верстаю макет на Bootstrap и столкнулся с тем, что не получается нормально отпозиционировать элементы, имеющие, во-первых, свойство transform: rotate(-90deg); во-вторых, абсолютное позиционирование для того, чтобы прилепить их к правому краю экрана. Итак, вот исходный код файлов: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <title>Туризм</title> </head> <body> <div class="container-fluid turism_main"> <div class="row"> <div class="company-name"> <p>LuckyFox</p> <p>Travel</p> </div> <div class="aside_main col-xs-12"> <a href="#"><img src="img/afterparty.png" alt=""></a> </div> </div> <div class="aside-content"> <div class="aside-contact"> <i class="fa fa-volume-control-phone" aria-hidden="true"></i> Связаться с нами </div> <div class="aside-mail"> <i class="fa fa-envelope-o" aria-hidden="true"></i> Подписаться </div> <div class="aside-calendar"> <a href="#">Календарь</a> </div> <div class="aside-lang"> <span class="active">EN</span> / RU </div> </div> </div> </body> </html> А вот здесь style.css: .turism_main { background: gray; background-size: cover; height: 100vh; width: 100vw; color: #fff; position: relative; } .company-name { font-size: 2em !important; letter-spacing: 2px; opacity: .7; position: absolute; right: 45%; left: 45%; text-align: center !important; display: block; line-height: 1; margin-top: 15px; width: 200px; } .aside_main { text-align: right; padding: 0; } .aside-content { z-index: 999; position: absolute; right: -195px; top: 400px; transform: rotate(-90deg); font-size: .8em; background: black; } .aside-content div, .aside-content a{ display: inline-block; color: white; } .aside-content i { padding-right: 10px; color: #e9ba02; font-weight: bold; } .aside-contact, .aside-mail { padding: 5px 10px 5px 10px; border: 1px solid white; margin-right: 20px; } .aside-calendar, .aside-lang { margin-left: 20px; } Не спрашивайте меня, почему я сделал кривую строку .row и засунул в нее эту ссылку справа. Изначально можно было сделать ее position: absolute, я так и сделал, но потом стал мучаться с сабжем и переделал, в надежде, что поможет. Если вам потребуется вообще переделать напрочь весь .aside-*, то пожалуйста, лишь бы было понятно, почему вы это делаете. Потому что мне нужно понять. И еще есть один вопрос: Почему, когда я вписываю что-то в .aside-content , то он начинает ехать влево? Ведь у него не увеличивается ни длина, ни ширина. А если я увеличиваю width, например, то он тоже уезжает далеко... Еще раз повторю задачу: Нужно сделать так, чтобы весь блок .aside-content был прилеплен к правому краю и каким-то образом был адаптирован, если я уменьшаю экран по вертикали. В данный момент этот блок просто под .container-fluid ... Как быть? Сначала решил не прикреплять картинку, потом, все же, решил. Чтобы было нагляднее...
  19. Ищу работу. Верстаю страницы любой сложности из psd макетов. Владею адаптивной вёрсткой, а также css3/javascript/jquery анимацией. Сделаю Ваш заказ быстро, дёшево, адаптивно, кроссбраузерно. Email: churilov2312@gmail.com Facebook: https://www.facebook.com/profile.php?id=100019043504185&ref=bookmarks Так же можете просто писать мне в личку
  20. Всем привет! Я начинающий верстальщик ищу работу, постоянную или на один проект. Удаленно. Умения: HTML5/CSS3; SASS, Bootstrap 3; JavaScript & jQuery (базовый уровень); Фиксированная\Адаптивная\Резиновая - верстка; Кроссбраузерная верстка; Понимание модульной верстки; При написании HTML кода соблюдаю семантику; Именование классов по методологии БЭМ; Навыки работы c веркторной графикой в формате SVG Поскольку у меня нет портфолио я не могу взять заказ на фрилансе, а в моем городе очень мало студий где новичку можна устроится на работу. Скажите с такими навыками можна взять заказ или устроится на работу? Сделаю для вас верстку Могу сверстать бесплатно, для того чтоб пополнить свое портфолио Готов на постоянное сотрудничество, если понравится мое исполнение. Мои контакты: e-mail: andrii.boda@gmail.com skype: +380999470645 vk: https://vk.com/id180852321
  21. Помогите корректно составить верстку. Есть готовый код ниже: <div class="wrapper"> <div class="header"> HEADER </div> <div class="content"> <button> START </button> </div> <div class="footer"> AUTHOR </div> </div> Нужно что бы у header класса была высота 30% окна браузера, у контента 60%, а у футера 10%. Кроме этого у них у всех должны быть вертикальные выравнивания. Почему-то ничего не получаеться. Не растягиваются блоки по высоте, растягиваются по контенту и в итоге не занимают все окно браузера! Если кто может написать корректный HTML/CSS код, напишите плиз! На крайняк можно использовать Bootstrap.
  22. Здравствуйте. Верстал макет, нужно было подключить табы(первый раз с ними работаю). Подключил, вроде все как надо сделал, ничего не произошло. Решил в отдельном файле проверить,в итоге все равно ничего, уже голова не варит, мб я что-то очевидное не вижу? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> .wrapper .active { color: red; } .tab_item { display: none; } .tab_item:first-child { display: block; } </style> </head> <body> <div class="wrapper"> <div class="tabs"> <span class="tab">Вкладка 1</span> <span class="tab">Вкладка 2</span> <span class="tab">Вкладка 3</span> </div> <div class="tab_content"> <div class="tab_item">Содержимое 1</div> <div class="tab_item">Содержимое 2</div> <div class="tab_item">Содержимое 3</div> </div> </div> <script> $(".tab_item").not(":first").hide(); $(".wrapper .tab").click(function() { $(".wrapper .tab").removeClass("active").eq($(this).index()).addClass("active"); $(".tab_item").hide().eq($(this).index()).fadeIn() }).eq(0).addClass("active"); </script> </body> </html>
  23. Как реализовать подобное через border-radius или другие варианты решения?
  24. Всем привет! Меня зовут Павел. Я три года работаю Front-end разработчиком в IT-компании. За время работы посещал много семинаров и конференций, читал публикации западных коллег. На сегодняшний день, у меня есть желание поделится знаниями с начинающими верстальщиками, а может быть, обменяться опытом с профи по цеху. Сам я не претендую на звание супер-специалиста фронтенда, поэтому продолжаю дальше развиваться в данном направлении. Как показал мой опыт общения с начинающими и специалистами "фронта", очень быстрое развитие происходит тогда, когда ты что-либо объясняешь другому человеку. Поэтому я, с одной стороны, хочу помочь начинающим, так как в моей памяти ещё свежи воспоминания о муках самостоятельного освоения необходимых знаний, а с другой – продолжить собственное развитие через обучение и помощь другим (то есть, попробовать себя в качестве учителя по фронтенду). Теперь по существу Я достаточно загружен, однако в течении дня вполне могу выделить 1-2 часа на обучение и консультации для начинающих верстальщиков (может быть, даже совсем нулевых – не стесняйтесь). Кроме того, я могу ответить на отдельные вопросы, подсказать, что именно стоит почитать, куда развиваться и как в дальнейшем трудоустроиться верстальщиком. Главное, чтобы вы действительно хотели освоить профессию и понимали, что дело это не очень лёгкое и достаточно кропотливое, требующее усидчивости и работы над собой. Обращайтесь, всегда рад пообщаться Мои контакты: skype: live:frontendpavel email: frontendpavel@gmail.com
  25. Народ, не подскажите какую-нибудь программу (желательно для mac os, типа Siri?), с помощью которой можно писать код голосом (ну или хотя бы минимизировать написание кода ручками). К примеру, я говорю фразу “Фонтсайз двоеточие четырнадцать пи икс“, а она пишет “font-size: 14px”. Понимаю, что я обнаглел и вряд ли такое есть, но вдруг повезёт!