Search the Community
Showing results for tags 'css'.
-
Имеется слайдер, "//" если удалить эти строки , то все работает. Там 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> <!-- Конец скрипты --> После уменьшении или увеличении страницы всё работает как надо. Что за логика ?
-
Помогите сделать адаптив для игры. Главное меню, вроде нормально выглядит на мобильных версиях, но когда начинаешь игру Канвас не помешается на экран. Как это исправить? http://develop.2di.site
-
Добрый вечер, не могу разобраться как сделать отступы с права и слева внутри 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; } Слева отступ делается, а справа нет. Кто то сталкивался с такой задачей? Вот сайт на котором я это делаю: Перейти на сайт Там снизу страницы увидите проблему
-
Добрый день, сверстал страницу с блоком новостей которые идут под меню колонкой, по одному блоку в ширину контейнера. В хроме все нормально и в файрфокс на моем ноутбуке с разрешением 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; }
-
Установила программу для 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>
-
<!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; }
-
Добрый день. Появилась следующая проблема: При отображении сайта в любых браузерах - все работает корректно, кроме Google Chrome. Съезжает шапка сайта, а точнее то, что в css указывал позиционировать справа - располагается в левой части и закрывает логотип. Ну уж очень меня это напрягает. Не пойму, что нужно делать. Кто сталкивался с такой же проблемой? Сайт - ganzola.ru Заранее спасибо.
-
При уменьшении размера браузера и разрешении <=1024 пункты меню едут вниз
allseo posted a question in HTML Coding
Адрес сайта: shoporus.ru , буду благодарен за помощь в решении данной задачи! -
Как запустить файл типа index.php на пк?
-
Доброго всем времени суток, нужна ваша помощь . Нужно сделать небольшое всплывающее окно на лэндинг которое показывает сообщения типа "Сейчас марина купила товара на сумму ххх " или "Осталось товара по акции;5шт" , по ссылке пример. Желательно сделать 1в1 . всех благодарю за помощь !
-
Проблема с использованием псевдоклассов (в частности :last-child)
666FoX666 posted a question in HTML Coding
Здравствуйте! Возникла проблема с "версткой" шапки. Имею следующий код: HTML: CSS: Вся проблема в том, что я не могу догнать как мне убрать у последних элементов в nav и nav-profile боковую границу. Я уже как только не пробовал, не могу догнать как это осуществить, максимум что получилось, при том варианте что выше - убирается боковая граница у всех элементов меню вообще. Да, я могу сделать отдельный класс, и присвоить его необходимым элементам, но такое решение совсем как-то не комильфо, мне кажется. Надеюсь на помощь! Заранее спасибо! -
Доброго времени суток, как можно осуществить данную проблему? Как показано на картинке, в бордере имеется пространство которое заполнено иконкой, как именно сделать такое пространство?
-
Здравствуйте. Прошу оценить верстку и указать на ошибки. Макет без адаптивности. Верстал по размерам из фотошопа. index.html main.css сайт на хосте - http://www.testwebtest.h1n.ru/
-
Добрый день, не знаю по теме ли вопрос с PHP include, но может кто нибудь знает и поможет. Сайты разрабатываю на локальном сервере. Суть в том что когда я применяю функции php include, почему то стили не работают, но не всегда, потому что до этого я делал тоже самое с другим файлом и все работало нормально. Я просто понять не могу в чем вообще может быть проблема, браузер обновлял crtl+f5, чистил кэш. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="/css/vsestyle.css"> </head> <body> <header> <div class="box"> </div> </header> <section> <div class="box"> <?php include"blocks/left-side-bar.php" ?> <?php include"blocks/right-side-bar.php" ?> </div> </section> <div class="box"> </div> </section> <section> <div class="box"> </div> </section> <section> <div class="box"> </div> </section> </body> </html> body { padding: 0; margin:0; } header { background: url(/img/vseback.png); height: 300px; } // СТИЛИ ЛЕВОГО БОКОВОГО МЕНЮ И БЛОКА .menu { float: left; } .menu li { list-style-type: none; padding: 10px; } .menu li a { text-decoration: none; } .left-side-bar { float: left; } // СТИЛИ ПРАВОГО БОКОВОГО БЛОКА .right-side-bar { float: right; font-size: 30px; } Так вот все стили применяются корректно, кроме последнего .right-side-bar. В том числе к include"blocks/left-side-bar.php" стили применились нормально, помогите) Кроме того, класс "menu", вложен в left-side-bar.php и на нем все стили отображаются нормально.
-
Здравствуйте, не могли бы мне помочь сделать дизайн элемента <audio>?
-
https://ibb.co/fTNKL9 Здравствуйте, подскажите варианты реализации, на данный момент сделано псевдо элементами и при изменении разрешении разъезжается стык, как можно сделать что бы при любом разрешении стык был ровный.Прикрепляю весь сайт. Desktop.zip
-
Новый крупный проект. Приглашаем в наш не большой, но дружный коллектив. Рассмотрим кандидатов с опытом и навыками - верстка и интеграция (в одном лице). Готовность быстро вникнуть в HostCMS. Требования: - знание HTML и CSS; - кроссбраузерная верстка (все: экраны, ОС, девайсы); - адаптивная, отзывчивая и резиновая верстка; - умение тестировать верстку; - web / mobile; - аккуратность и внимательность к деталям; - способность быстро учиться; - работа в команде Веб-студии; - желания познавать новое, развиваться в области программирования. Условия. Работа: - в офисе (возможно удаленно) в пешей доступности от метро Шелепиха (3 минуты); - по согласованию: почасовая, полный рабочий день; на 1/2 ставки; работа день через день (1х1); - оплата по договоренности (почасовая / таймтрекинг). - офис оснащен кондиционерами‚ бесплатные напитки (кофе‚ чай‚ молоко‚ вода); - отсутствие дресс-кода. Интересные проекты: интернет-магазины, корпоративные порталы, iOS / Android приложения. Стабильная зарплата, возможность карьерного роста. Москва, Международная, Шелепиха, Шмитовский проезд, 34с10. контакты: ash@wmgrus.ru
-
Есть страничка по адресу http://sale.srfhm.ru/css_bug/ В ней есть табличка сделанная на UL LI тегах, и вот в ячейке Описание, где выводится описание для типа питания не влезает весь текст и остальную часть не видно, скрывается стилем - overflow: hidden Пробовал убрать этот overflow, тогда вообще таблица вся разъезжается... В верстке не особо силен, подскажите пожалуйста где поправить что, чтобы текст нормально влез и весь отображался... Пробовал уже по всякому, всю голову сломал! Заранее огромное Спасибо!
-
Доброе время суток! Примеры моих работ (гитхаб): макет 3 макет 2 макет 1 Ищу разовые проекты по верстке.
-
Добрый день, при вертске столкнулся с такой проблемой, на первом скриншоте я старался с позиционировать элементы, что бы текст шел как бы лесенкой а между ними фото. http://joxi.ru/D2Pz9gOTp65Z7r Но после того как я добавляю вторую картинку элемент с текстом почему то присасывается к верхней части, хотя до этого я задал ему clear: left; что бы он расположился под первой картинкой. После добавления картинки, получается вот так http://joxi.ru/nAyvGpPtYbzRdr Помогите решить проблему, правильно ли вообще я позиционирую элементы на странице? или же можно решить туже задачу проще? Html этой секции <div class="box"> <div class="company"> <p>Наша компания на протяжении многих лет занимается производством крема из экологически чистых материалов. Мы предосталвяем широкий ассортимент кремов для разных целей. Именно нас на протяжении многих лет выбирают покупатели, потому что хотят получать результат, а не просто выкидывать деньги на ветер.</p> </div> <div class="company"> <p>В наших кремах испольщуются только природные и экогологически чистые материалы, включая фрукты вроде кокоса или сладких личи. Использование подобных материалов помогает поддерживать кожу в здоровом виде и не допускать ее высыхания, в том числе это благоприятно сказывается на лечении разных кожаных болезней и дерматологии.</p> </div> <img src="/images/crem.png" alt="Крем фото" class="photo"> <div class="company"> Эмульсионные кремы бывают двух типов – масло-вода и вода-масло. В первом случае эмульсия имеет жидкую консистенцию и используется для изготовления дневных увлажняющих кремов. Благодаря высокому содержанию воды (до 70 процентов) они восполняют потерю влаги, легко наносятся, быстро впитываются, не оставляя жирного блеска на коже. </div> <img src="/images/crem1.png" alt="эмульсия" class="photo"> </div> </section> css этой секции .company { width: 450px; text-align: justify; float: left; font-size: 20px; } .company:nth-child(2) { width: 450px; text-align: justify; float: right; margin-top: 250px; } .company:last-child { float:left; width: 450px; clear: left; } .photo { float: left; width: 400px; height: 400px; } .photo:last-child { float: right; }
-
Здравствуйте! Меня зовут Андрей и я front-end разработчик. Знаю HTML, CSS, JavaScript и Jquery. Я уже сверстал 13 psd макетов и уже имею опыт в этой сфере. Но, для того чтобы сделать еще больший опыт я предоставляю вёрстку бесплатно. Чтобы заказать пишите снизу. Надеюсь на дальнейшее сотрудничество!
-
Приписал body{ background-image: url(img/fon.png) } Сразу фон есть , а после обновления изчезает. И так с любой картинкой Подробней в скриншотах
-
Здравствуйте. Я занимаюсь версткой сайтов: лендингов, интернет-магазинов, флаеров и тп. Ищу работу, для набора опыта и заработка первых денег на данной позиции. Мое портфолио: https://alex2033.github.io/sites/BlackDone/index.html https://alex2033.github.io/sites/Sandeo/index.html https://alex2033.github.io/sites/Barbershop/index.html https://alex2033.github.io/sites/Skylith/index.html https://alex2033.github.io/sites/Unicorn/index.html https://alex2033.github.io/sites/Bouncy/index.html Остальные работы вы можете посмотреть здесь: https://alex2033.github.io/ Навыки: - Знание HTML5, CSS3 - Опыт адаптивной, семантической, кроссбраузерной верстки - CSS3 анимация - знания Javascript на уровне jQuery - Использование препроцессоров LESS/SASS/Stylus + Pug - Опыт работы в Adobe Photoshop, Illustrator, Zeplin, Avocode - Именование классов по методологии БЭМ-нейминг - Gulp, npm, bower - Умение работать с сетками (bootstrap 3+, foundation, flexboxgrid) - Умение работать с фреймворками bootstrap 3, 4, foundation - Знание английского на уровне чтения документации - Навык работы с векторной графикой SVG - Умение использовать flexbox, css-grid там где это необходимо Форма связи: Email - XoxlofAlexandr@yandex.ru - преимущественно Skype - Xronaliz Также можете написать на этом сайте Благодарю за внимание и хорошего дня:)
-
В молодую креативную студию Team Z требуются: Frontend и Backend разработчики, на проектной или постоянной основе. Языки HTML CSS java jquery bootstrap react, хорошо если стэк angular При обращении, скидывается тестовое задание, при удачном выполнении, начинаем работать. т.к наша студия состоит в 2х клубах (это позволяет нам работать с крупными заказчиками из москвы и аутсорсить зарубежные заказы) все разработчики должны проходить небольшую аттестацию в виде тестовых заданий по направлениям с которыми они работают Все интересующие вас вопросы задавать на почту указанную в профиле, или в контакте: https://vk.com/id428650440
-
Добрый день. Подскажите, пожалуйста, есть ли где на просторах ютуба или другого видеохостинга канал с хорошими стримами вёрстки html? Всё что нахожу на ютубе это видео «Как сверстать макет с нуля за час», но хотелось бы посмотреть что-то в формате стрима, как человек решает типовые задачи. То есть, смотрим, как верстальщик работает с вёрсткой. Думаю, многим новичкам было бы полезно посмотреть, как люди работают с кодом.
