Practise Templates
Templates for self education and practise
99 topics in this forum
-
- 3 replies
- 2.6k views
Привет всем. Делаю менюшку. Есть такая идея. чтобы при наведении на видимы блок срабатывал :hover и появлялся скрытый блок. (Типа выпадающего меню) Все вроде логично, но не работает... Подскажите пожалуйста, что я делаю не так. Код такой: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Имя</title> <style> .div1{ border: 4px solid black; width: 200px; } .div2{ display: none; } .div1:hover .div2{ display: block; border: 4px solid black; width: 200px; } </style> </head> <body> <div class="div1"> Меню </div> <div class="div2">Фрукты </div> </body> …
Last reply by klierik, -
- 0 replies
- 2.3k views
Всем привет! Пытаюсь сделать анимацию так, чтобы второй блок появлялся только после того, как первый полностью уйдёт влево. Ну просто никак, пыталась нагуглить, но получается только одновременное движение двух блоков. Может, кто-то опытный хотя бы намекнёт, что не так в моём коде? https://codepen.io/20ZeteM02/pen/WNwwEEp
Last reply by ZeteM, -
- 1 reply
- 2.5k views
Здравствуйте. Верстаю сайт, в валидаторе firefox выскакивает "parse error" в css для мобильных браузеров. По задумке <span class="phonecpu">текст</span> виден на десктопах, а на мобильных display:none его закрывает. При валидации стилей для медиа-запроса - parse error стиля .phonecpu. В чем может быть причина? <nav class="one"> <ul class="topnav"> <li><a class="activeone"href="#"><span class="icon-home"></span></a></li> <li><a href="#"class="active"><span class="icon-phone"> <span class="phonecpu">Вызвать мастера</span></span></a> <u…
Last reply by Xandr555, -
- 0 replies
- 2.6k views
Не могу настроить масштаб кнопки
Last reply by Den1s, -
- 7 replies
- 3.4k views
Не могу избавить от перекрытия textare-и картинки. Совсем новичок в верстке.
Last reply by DisplayName, -
- 1 reply
- 3.5k views
body { background: url(C:/Users/Desktop/33.jpg) repeat-x 0 100% fixed,linear-gradient(to top, #5080b1, #004e8c) fixed; } картинка не появляется на заднем плане.правилен ли код?
Last reply by npofopr, -
В макете, созданном блочной версткой, две колонки (левая с меню, правая с текстом), хедер и футер. Условия задания: Левая колонка фиксированной ширины, правая резиновая. Футер нельзя прижимать к низу экрана. При широком окне браузера колонка с меню должна быть больше по высоте чем правая колонка. Подвал должен располагаться сразу после текста любой из колонок, смотря что длиннее. Проблема: Футер наезжает на колонку с меню при широком экране. Пробовала воспользоваться padding-bottom для блока с колонками, но тогда не выполняется последнее условие: при более узком экране между подвалом и текстом остается расстояние. П…
Last reply by lizaveta, -
- 0 replies
- 2.9k views
Собрал три блока в виде геометрических фигур - сверху и снизу треугольники в середине параллелогамм. И составил их в столбец, обернув все в общий блок. <div class="d4"> <div class="d1"></div> <div class="d5"></div> <div class="d3"></div> </div> Но в результате получилось, что расстояния между ними большие. Как состывать их вместе, нужно практически вплотную, максимум с отступом в 10 px. Использование padding и margin к желаемому результату не привело. Код CCS такой Треугольник сверху width: 0; height: 0; border-top: 100px solid #68B8AE; border-right:425px solid transparent; display:inline-block; …
Last reply by intman, -
- 1 reply
- 3.7k views
Появился вопрос на который я так и не смог найти ответа. Нужно создать регистрацию и авторизацию с базой данных и я не понимаю как подключить php файл к html? В остальном попытаюсь разобраться сам
Last reply by npofopr, -
Нужен наставник, интересует верстка, устал искать разрозненные знания в интернете. Естественно не бесплатно. Со своей стороны знаю где и как брать реальные заказы, (не про биржи фриланса). Уже работаю с заказчиками приходится использовать Addobe Muse, WordPress, параллельно работаю директологом. Ты научишь меня верстке. Если ты просто знаешь как верстать, и делаешь это хорошо и усидчиво, я помогу монетизировать тебе твои знания, а ты научишь меня верстке.
Last reply by РоманФ, -
- 4 replies
- 3.3k views
Подскажите пожалуйста, была написана landing page, достаточно давно, и сегодня заметил что пропала картинка. Раньше все было ок, а сегодня она пропала, и на самом сайте, и собственно на компьютере если запустить тоже ее нету. Что такое могло произойти? Код примерно такой. <header class="header"> .... </header> .intro{ background-image: url("../img/header_bg.png") center no-repeat/cover; height: 400px; background-size: 97% auto; }
Last reply by oleg126, -
- 3 replies
- 3.5k views
Добрый вечер, ребята. Вторые сутки блуждаю в сети и не могу найти ответ на свой вопрос. .niz:hover { background: red; этим кодом я получил возможность менять цвет определенного блока наведением курсора, вопрос в следующем. Как делать, что бы после каждого наведения цвет менялся на другой а не на один и тот же. То есть зеленый, красный, оранжевый и так далее, спасибо большое
Last reply by Егор0248, -
- 2 replies
- 3.4k views
Как правильно, грамотно, реализовать верстку таких линий? Код не обязателен, хотя бы просто правильное направление для мыслей.
Last reply by rasmus, -
- 0 replies
- 3k views
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Portfolio of Almas</title> <link rel="stylesheet" href="css/fonts.css" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <header class="header"> <nav> <ul class="menu"> <li><a href="#">About me</a></li> <li><a href="#">Portfolio</a></li> <li&g…
Last reply by almaskazhymurat, -
- 0 replies
- 3k views
Добрый день мне нужно что h1 был как на макете справа по центру (как на макете) max-width: 1920px; max-height: 1080px; И чтобы при изменения размера экрана положения заголовка и фона не менялись Исходники.rar
Last reply by Almaz_Kazan, -
- 0 replies
- 3.5k views
Всем привет! Подскажите, пожалуйста - как в блоге Wordpress сделать себе такие же карточки? Я пробовал Elementor, но что-то там ничего не вышло... В идеале был бы рад наводке на специальный плагин с настройками в админке, чтобы в этом белом боксе сразу указывать по необходимости и картинку, и текст, и ссылку в соотв. полях. Сайт, с которого взял пример, здесь (ссылку ставлю, т.к. может программный код на странице поможет разобраться, как это сделано).
Last reply by Vashenko, -
- 2 replies
- 3.6k views
Как правильно сверстать картинки(руку, лист салата и тд) на данном шаблоне? Интересуют именно первые 3 изображения, а именно тарелка, рука с дошиком и лист салата. Тарелку можно просто сверстать допустим на флексах разбив блок на 3 столбца. Но вот интересно как сверстать две оставшиеся картинки так еще и с текстом. Я подумал, что можно также сверстать на тех же флексах разбив на те же 3(в случае с рукой) и 2(в случае с листом салата) колонки флекс сетку, но в таком случае изображения толкали бы друг друга так как рука с тарелкой и лист салата имеют общую площадь расположения на странице. Как это сделать? Помогите пожалуйста, может какое-то свойство прилипания …
Last reply by npofopr, -
- 2 replies
- 3.4k views
Как реализовать вместе и две совмещеных картинки и блок текста Короче ситуация следующая а нужно ,чтоб было так У меня есть две картинки одна прямоугольник серого цвета и вторая треугольник розового цвета.Пробовал сделать через надания треугольнику position relative;right:0; bottom: 0; а прямоугольнику display: flex; position: relative; Если у меня получалось их обьеденить , то только когда блоку текста прописывал display:flex;И тогда получалось следующее Если кто-то знает как сделать напишите пожалуйста.Я хотел скинуть код ,но в jsfiddle ,картинки не куда загружать.
Last reply by kartopelka, -
- 7 replies
- 4k views
Можно ли с помощью css выровнять блоки одинакового по уровню ? вот картинка. Высота блока должна быть не фиксированной .Контент может быть в любом количестве . Блоки с контентом должны быть на одном уровне . Т.е независимо сколько символом в контенте , описание строго на одном уровнем с другим описание , цена на одном уровне с ценой. Каким способом можно реализовать данное решение ? спасибо за внимание.
Last reply by AlexZaw, -
- 1 reply
- 2.3k views
Как сделать , чтоб при уменьшении екрана , список не сжимался?Код https://jsfiddle.net/RedSniper/7nx6sf2v/3/ При 1920*1080 выглядит нормально, но при маштабировании +10 процентов сжимается и получается не красиво.Можно как-то его зафиксировать ,чтоб он не менялся до размеров телефона?
Last reply by klierik, -
- 4 replies
- 2.5k views
Здраствуйте! Есть форма отправки письма на почту. Как можно ее поставить именно в центр.Пробовал text-aligh:center; для div ,но только текст ставится в центр , а не форма Код https://jsfiddle.net/RedSniper/b157q0xp/
Last reply by kartopelka, -
- 2 replies
- 2.2k views
Здраствуйте!Не могу нажимать на подпункты.Сделал типо навигации на сайте,один подпункт от которого идут остальные подпункты.И когда наводишь на Главный пункт , меню открывается но когда , я пытаюсь нажать на те подменю, оно просто закрывается.
Last reply by kartopelka, -
- 1 reply
- 2.4k views
<html> <head> <style> button.knopka { color text: #000000; text-align: center; background: #F0F0F0; padding: 5px; border-radius: 13px; height: 31px; width: 260px; border: 2px solid #EF9BC7; } button.knopka:hover { background: #EF9BC7; } </style> </head> <body> <div class = "center"><button class="knopka"><b>Разное</b></button> </body> </html> увидел якобы можно сделать отцентровку текста в кнопке так <html>position: absolute; top: 50%; left: …
Last reply by Vic-Tor, -
- 1 reply
- 2.5k views
Допустим этот текст вписан в многострочное текстовое поле (textarea) Окно сжимается и хотелось бы, чтобы высота поля увеличивалась, а не как сейчас: Можно что-то сделать? Пробовал через https://github.com/javierjulio/textarea-autosize - ничего не вышло. Я на правильном пути?
Last reply by npofopr, -
- 1 reply
- 2.2k views
Всем привет! Верстаю первый макет и столкнулся с неприятной трудностью. У меня проблема следующего рода: есть два блока, один зафлоачен налево, другой направо. Внутри правого блока находится список - меню. При этом второй блок на строку ниже первого, но если убрать список и просто оставить текст, то он встаёт нормально. Что я упускаю? <Doctipe! html> <head> <title>Наша компания</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="head"> <div class="layout-position"> <div class="header-content"> <div class="Name">Имя компании</di…
Last reply by npofopr,
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-