Jump to content
  • Sign Up

Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML и CSS
    • Проблемы верстки
    • Препроцессоры, постпроцессоры и шаблонизаторы
    • Методологии
    • Фреймворки и библиотеки
  • JavaScript
    • Для начинающих
    • Фреймворки и библиотеки
    • Скрипты и плагины
  • Разработка сайтов
    • Для начинающих
    • Инструменты разработки, сборки и автоматизации
    • Аудит и анализ кода
    • Программное обеспечение разработчика
    • Веб-дизайн
    • Мобильные платформы
    • Open Source
  • Серверное программирование
    • Для начинающих
    • PHP
    • Платформы и языки программирования
    • Базы данных
    • Скрипты, готовые движки, CMS, конструкторы
  • Полезное
    • Библиотека полезных приемов и решений
    • Ресурсы
  • Сервер
    • Техническая поддержка
    • Веб-сервер
    • Базы данных
    • Хостинг
    • Домены
  • Интернет-маркетинг, SEO
  • Коммерческие услуги
  • Давайте поговорим о ...
  • Наш форум

Calendars

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

Blogs

There are no results to display.

There are no results to display.

Product Groups

  • Advertising

Marker Groups

  • Members
  • Front-end
  • Back-end
  • Education
  • Looking for job
  • Offering job

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


ICQ


Jabber


Skype


From


Interests

Found 1,124 results

  1. Задача: Создать линию определённых размеров и расположить её по центру экрана. Код HTML: <div class="line"></div> Код CSS: .line { position:absolute margin-top:650px; height:2px; width:1200px; background: black; }
  2. Здравствуйте клиент хочет чтобы картинка была сверстанна полностью именно на html css, кто то сталкивался c такой проблемой? возможно есть советы по тому как это сделать правильно. Волна по центру и все остальные вещи должны быть заверстанны в том числе.Интересует как это сделать с минимумом костылей. И остро стоит вопрос чтобы это все дело было адаптивно. На данный момент все что смог сделать https://jsfiddle.net/RomanFF/jL9swq7h/37/ с border нормальный сделать смогу, не понимаю принцип по которому мне все сопоставить так чтобы не полетело все потом, мне хотябы общие принципы объяснить в каком направлении дальше двигаться
  3. Я начинающий верстальщик, обучаюсь всему HTML, CSS и JQuery около 3-х месяцев. Хотелось бы узнать оценку других разработчиков на мою верстку. Сайт: https://danilpolyanskiy.github.io/index.html
  4. Как можно поднять фиолетовый блок (находится в MAIN) вверх , чтобы он заполнил верхнюю прозрачную часть заднего плана HEADER-а? Свое образный переход будет...
  5. Вопрос новичка :) В зависимости от положения запятой в css коде получается разный результат на выходе. Кто может разъяснить принцип, по которому они ставятся. Например, почему (p, .main span a) и (p .main, span a) отображаются по разному. Я понимаю что так и должно быть, но почему? По какому принципу? Внизу я прикрепил скриншоты - коды и результаты
  6. недавно начал изучать html css, вроде все понятно, но не могу сообразить как правильно сверстать такой header. помогите примером
  7. Прошу оценить дизайн, юзабилити и общее впечатление https://ivanoffivan13.github.io/portfolio/
  8. Должно быть как на первом скриншоте. Что не так я делаю или как правильно переделать??? Помогите пожалуйста уже всю голову сломал!
  9. Добрый день! Совсем зелёный в вопросах вёрстки и прошу помощи по следующей проблеме. На мобильных устройствах или в Internet Explorer пропадают "картинки" (Изображение 1), при этом на компьютере (браузер Opera) всё отображается корректно (Изображение 2). В качестве хостинга выбран GitHub и его бесплатный сервис GitHub Pages. Пример того, как именно изображения интегрировались на сайт: <img src = "images/vk.png" width = "5%" alt = "vk">
  10. Не могу расположить второй ряд картинок все div идут в одну строчку. Пробовал и команду clear (both, left) всем блокам прописан float:left.(Всё в конце кода). Заранее спасибо за помощь.На всякий случай прикреплю ещё картинки. index.html style.css
  11. Ребята, выручайте. Есть задача сделать плитку с датой, как во вложении. Сделал рамку скруглённую в виде фонового изображения блока div. Внутри div сделал 3 тега "р" , так как у каждого текста свои стили должны быть и отступы разные. Но текст разъезжается и вылезает за выделенные для него границы. Подскажите, как быть.HTML<div class="latest"><p class="number">15</p><p class="june">June</p><p class="year">2016</p></div>CSS.latest {background-image: url(image/square.png);width: 98px;height: 139px;margin-left: 445px}.number {padding-top: 32px;color: #000000;font-family: Poppins;font-size: 32px;font-weight: 500;height: 24px;}.june {color: #9e9e9e;font-family: Poppins;font-size: 14px;font-weight: 500;line-height: 48px;padding-top: 12px;}.year {color: #9e9e9e;font-family: "Poppins - Medium Italic";font-size: 13px;font-weight: 400;line-height: 48px;height: 11px;padding-top: 10px;}
  12. Здравствуйте! Возникла проблема с реализацией одной идеи. Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить? Схематический рисунок прикреплен ниже. Заранее спасибо)
  13. Зравствуйте, у меня два флекс контейнера. class logo class menu мне нужно чтобы контейнер class menu ужался с правой стороны Прикладываю код: https://jsfiddle.net/RomanFF/513wcj60/2/
  14. Здравствуйте, у меня два вопроса, буду благодарен за ответ 1.Когда в теге DIV делаешь text-align:center; текст внутри выравнивается по центру блока в самом верху блока, но если внутри него вставить тег p(он получается тоже блочный), текст делает сверху отступ. Я раньше думал что когда внутри одного блочного элемента div создается другой блок <p> и отступ сверху будет равен верхней части контейнера, но там идет отступ намного больше. Не понимаю откуда вообще взялся этот отступ сверху. цифры 8 и 9 2.Я свойством inline-block цифру 11 сделал строчным элементом, и расстояние между 10 и 11 цифрой увеличилось еще больше. Почему так получилось, и от чего это зависит? Выкладываю код https://jsfiddle.net/RomanFF/96bruwsc/8/
  15. Нужен наставник, интересует верстка, устал искать разрозненные знания в интернете. Естественно не бесплатно. Со своей стороны знаю где и как брать реальные заказы, (не про биржи фриланса). Уже работаю с заказчиками приходится использовать Addobe Muse, WordPress, параллельно работаю директологом. Ты научишь меня верстке. Если ты просто знаешь как верстать, и делаешь это хорошо и усидчиво, я помогу монетизировать тебе твои знания, а ты научишь меня верстке.
  16. Сверстаю сайт по PSD шаблону (HTML+CSS, одностраничный, многостраничный, адаптивна верстка). Недорого. Email: saka150577@gmail.com
  17. Здравствуйте! Помогите, пожалуйста! Есть два блока (div): один с картинкой, а другой с текстом. Нужно реализовать: сначала блок с картинкой должен перекрывать блок с текстом, а потом блок с текстом должен перекрывать блок с картинкой. Для этого я делал в попытке реализации данного эффекта: .image { display: inline-block; Position: absolute; z-index: 1; } @Keyframes block_overlap { from { z-index: 0; } to { z-index: 2 } } .text { display: inline-block; position: absolute; animation-name: block_overlap; animation-duration: 1s; } Данный код не привёл к решению проблемы.
  18. Здравствуйте, только начал изучать основы, поэтому прошу не судить строго, буду благодарен за ответ.Не понимаю как сместить картинку местоположения как на примере(пример выгрузил на поддомен)http://training.maggle.ru/Прикладываю код, если там что то не правильно указал подскажите, по семантике. https://jsfiddle.net/RomanFF/rbe4kz0j/6/
  19. Первый проект: http://okitonori.ru/portfolio/mogo/index.html Второй проект: http://okitonori.ru/portfolio/activebox/index.html Прошу строгой критики. Больше всего интересует качество кода. Допустил ли я какие-нибудь критические ошибки. Возможно, я из-за раза в раз пишу что-то неправильно. Буду очень благодарен!
  20. Всем привет. Никак не получается сверстать нормальную Pricing Table на Uikit 3. Я только вникаю в тему, поэтому, может еще не догоняю. Пробую сделать на uk-flex + uk-table. Постоянно какие-то косяки то с адаптивностью, то с шириной, то с высотой колонок... <div class="uk-flex uk-flex-center"> <div class="uk-card uk-card-default"> <table class="uk-table uk-table-divider bg1"> <thead> <tr> <th>Тестовая таблица 1</th> </tr> </thead> <tbody> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 2 пошире</td> </tr> <tr> <td>Поле 3 еще шире чем поле 1 и 2</td> </tr> <tr> <td>Тестируем поле 4, которое воообще широкое</td> </tr> <tr> <th>100008 руб</th> </tr> </tbody> </table> </div> <div class="uk-card uk-card-default uk-margin-left"> <table class="uk-table uk-table-divider bg1"> <thead> <tr> <th>Тестовая таблица 2, таблица 2, таблица 3</th> </tr> </thead> <tbody> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 2</td> </tr> <tr> <td>Поле 3</td> </tr> <tr> <td>Поле 4</td> </tr> <tr> <td>А тут есть еще поле 4</td> </tr> <tr> <td>А еще поле 6, которое шире других</td> </tr> <tr> <th>12 000 ₽</th> </tr> </tbody> </table> </div> <div class="uk-card uk-card-default uk-margin-left"> <table class="uk-table uk-table-divider bg1"> <thead> <tr> <th>А тут таблица номер 3</th> </tr> </thead> <tbody> <tr> <td>Поле 1</td> </tr> <tr> <td>Широкое поле 2 из таблицы 3</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <td>Поле 1</td> </tr> <tr> <th>9 000 ₽</th> </tr> </tbody> </table> </div> </div> И как на зло не могу ничего найти подходящего уже готового. Ни в шаблонах на Uikit, ни в документации... Кто-то верстал Pricing Table на Uikit 3? Можете помочь, показать свой код? Заранее спасибо!
  21. при ширине экрана @media(max-width:768px) в самый низ страницы верстки есть слайдер внутри него есть контент с картинкой хочу поместить картинку за границы слайда сверху но картинка обрезается. как сделать чтобы было видно ссылка на верстку http://frontend-er.h1n.ru/asia-spa/
  22. Здравствуйте. Имеется данный код: <audio id="audio"> <source src="audio/1.mp3" type="audio/mpeg"> </audio> <div class="fixedbut" id="sebut">Звук</div> <style> div.fixedbut { position: fixed; bottom: 93%; right: 20px; display: block; background: white; border-radius: 10px; color: black; text-decoration: none; padding: 6px 23px; font-size: 17px ; -webkit-transition: 0.33s all ease-out; -o-transition: 0.33s all ease-out; transition: 0.33s all ease-out; z-index: 999; } div.fixedbut:hover { background: grey; color: white; } </style> <script> document.getElementById("sebut").onclick = function() { var myaudio = document.getElementById("audio"); if(myaudio.paused == true) { document.getElementById("audio").play(); } else if (myaudio.paused == false) { document.getElementById("audio").pause(); } } </script> <script> $(document).ready(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 200) { $('div.fixedbut').fadeIn(); } else { $('div.fixedbut').fadeOut(); } }) }); </script> Кнопка плавающая, останавливает звук включенный другой . Со звуком проблем нет, но появление и исчезание кнопки при прокрутке не работает. Подскажите пожалуйста как сделать))
  23. Добрый вечер! Помогите пожалуйста понять почему при использовании сетки у меня вторая колонка не отображается пока ей не поставишь ширину 100%? Разве она не должна подстраиваться под размер автоматом? вот мой код https://jsfiddle.net/gzf1hkc0/ в нем navbar с двумя колонками. проблема со второй колонкой. пс. в коде уже стоит ширина второй колонки 100%, но как я понимаю самому прописывать ее не надо и раз так может я что то не так сделал? заранее спасибо за то что уделили внимание моему вопросу)
  24. Добрый день! Жаль что у вас тут темы не удаляются, потому что когда писала, нашла у себя ошибку, а сейчас тему удалить не могу. Но сейчас не об этом. Есть не анимированный слайдер <div class="slider"> <div class="slider_site"> <img src="/images/slider_1.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/> </div> <div class="slider_line"> </div> <div class="txt_left"> <h1 class="slider_h">АВТОМАТИЗАЦИЯ<br> КНС</h1> <div class="button"> <a href="#" class="button_a">Подробнее</a> </div><!--/.button--> </div> <div class="slider_site"> <img src="/images/slider_2.jpg" alt="DSC0604-min.jpg" border="0" class="img_slider"/> </div> <div class="slider_line_two"> </div> <div class="txt_left"> <h1 class="slider_h_two">НАСОСНЫЕ СТАНЦИИ</h1> <div class="button"> <a href="#" class="button_a_one">Подробнее</a> </div><!--/.button--> </div> </div> Весь текст идет поверх картинки. На компьютере смотрится хорошо, но при уменьшении экрана браузера все начинает плыть. Как грамотно настроить, чтобы текст и кнопка при уменьшении экрана не выглядели коряво? CSS: /*slider*/ .slider{ display: flex; font-family: 'Roboto', sans-serif; } .slider_h{ position: absolute; color: #fff; top: 32%; left: 7%; font-size: 86px; line-height: 85px; text-align: right; } .slider_h_two{ position: absolute; color: #fff; top: 32%; left: 52%; font-size: 86px; line-height: 85px; } .slider_site{ width: 100%; } .img_slider{ width: 100%; position: relative; } .slider_line{ width: 170px; height: 3px; background: #0192dc; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); position: absolute; top: 32%; left: 42%; } .slider_line_two{ width: 170px; height: 3px; background: #0192dc; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); position: absolute; top: 32%; left: 57%; } /*button*/ .button_a{ vertical-align: top; padding: 8px 30px; border: 2px solid #0092db; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; margin: 20px auto; transition: 0.1s linear; position: absolute; top: 59%; left: 39%; } .button_a:hover{ color: #0092db; text-decoration: none; } .button_a_one{ vertical-align: top; padding: 8px 30px; border: 2px solid #0092db; font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; margin: 20px auto; transition: 0.1s linear; position: absolute; top: 59%; left: 52%; } .button_a_one:hover{ color: #0092db; text-decoration: none; }
  25. Первый раз создаю сайт на хостинге. Не видит блок о компании. Он в конструкции есть, на сайте пустота.
×
×
  • Create New...