Practise Templates
Templates for self education and practise
99 topics in this forum
-
- 0 replies
- 1.8k views
Всем привет. Собрал шаблон jsfiddle но знаю что сделал криво, прошу посоветовать как правильно такое реализовать, сейчас поведение блоков именно такое как нужно, просто думаю что реализовано неверно. На экранах компьютеров должно быть две колонки, левая с картинкой во всю высоту и примерно в половину ширины. В правой колонке текст. На мобильных устройствах, левая колонка поднимается в самый верх на всю ширину экрана, а ниже уже идет текстовый блок который был справа. Пытался сделать кросбраузерно но не получилось, у меня используется свойство background-size: cover которое ниже ие 9 не поддерживается. Пробовал картинку делать не бекграундом, а как обычное img…
Last reply by sadko007, -
- 2 replies
- 1.8k views
index.html scripts.js style.css
Last reply by Евгений_SB, -
- 1 reply
- 1.8k views
Имеется вот такой код: <html> <head> <title>ИС-41521</title> <style> <style type="text/css"> #container { width: 500px; /* Ширина макета */ margin: 0 auto; /* Выравниваем по центру */ background: #FCE600; /* Цвет колонок */ } } body { font: 11pt Arial, Helvetica, sans-serif; /* Рубленый шрифт текста */ margin: 0; /* Отступы на странице */ } #sidebar { /* ПРаваЯ колонка */ float: right; /* Обтекание справа */ border: 0px solid #333; /* Параметры рамки вокруг */ width: 40%; /* Ширина колонки */ padding: 5px; /* Поля вокруг текста */ margin: 10px 10px 20px 5px; /* Значения отступ…
Last reply by ErUnDAK, -
- 2 replies
- 1.8k views
Вопрос вроде тривиальный. При наведении на кнопку текста стрелка не закрашивается в белый цвет. как быть? https://jsfiddle.net/dimasgrig1575/dgLupco3/
Last reply by daggi, -
- 2 replies
- 1.8k views
Весь день пытаюсь разобраться как сделать так что бы слово подвал опустилось и выравнялось по нижнему краю, и не могу понять почему нечего не получается, я все перепробывал, получилось этого достичь только с помощью позицирования, но я хочу более точный способ. vertical-align не работает даже когда "display: inline". Помогите пожалуйста. .fot2 {border: 1px solid black; display: inline; height: 20px; vertical-align: bottom;}
Last reply by wwt, -
- 1 reply
- 1.7k views
Здравствуйте, подскажите пожалуйста как убрать расстояние , которое ниже футера(которое заштриховано)
Last reply by AlexZaw, -
Всем привет! Скиньте кто-нибудь psd макеты приютов для животных, вет.клиник и все что связано с данной тематикой. Нигде не нашел. Заранее СПАСИБО!!!
Last reply by tanat, -
- 1 reply
- 1.7k views
Здравствуйте! Я в HTML новечек. Изучаю язык на примерах. В одном из примеров есть такие строки: <div class="menu"> <a href="#" class="navbar-menu nav-trigger"><span></span></a> </div> в самом примере при нажатие на ссылку под выше указанным кодом открывается меню, но не в новом окне и не новая ссылка а просто получается новое наложение меню на имеющуюся страницу. скачал пример себе на комп и у меня она не открывается, ссылка на меню просто не реагирует. Скачал и .js файлы и .css файлы. И путь к ним тоже прописал, но все равно не работает...
Last reply by npofopr, -
- 1 reply
- 1.6k views
Помогите пожалуйста,как сделать добавление элемента в маркированный или нумерованный список прямо на странице.
Last reply by klierik, -
- 10 replies
- 1.6k views
Подскажите, пожалуйста, как убрать слишком большой отступ между контентом и футером в HTML
Last reply by sovsemnovichok, -
- 0 replies
- 1.6k views
Разбираюсь с прекрасным сервисом Гугл формы. Открыл для себя, что они могут работать прямо из тела письма. При этом они могут отправлять почту и им не нужны серверные скрипты. Возникла идея сделать интернет магазин прямо в теле письма. Клиент открывает письмо и никуда не переходит. У него в теле письма уже корзинка с товарами и несколько товаров. Это решает вопрос отсутствия сайта и хостинга, снимает вопрос приватности, такой магазин невозможно забанить или взломать. Вот пример такого статичного интернет магазина со скрытой гугл формой внутри http://heeg.ru/heeg5.1.zip в нем куча картинок для примера, но они могут встраиваться в сайт через base64 если просто перетащит…
Last reply by HEEG.HTML, -
- 1 reply
- 1.6k views
Правильно ли будет сверстать блок из макета так, что блоку с картинкой и блоку с обратной связью нужно будет задавать фиксированную ширину и высоту? Или есть способ более правильный? Макет https://www.figma.com/file/zwa7oxqCS43WTsPEAQhMik/Форма-заказа?node-id=1%3A40
Last reply by Switch74, -
- 1 reply
- 1.6k views
Здравствуйте участники форума обращаюсь с таким вопросом: решил проверить на валидацию код одного из онлайн генераторов свойств CSS3?, а именно генератор градиентов https://www.cssmatic.com/gradient-generator В итоге в сгенерированном коде оказалось куча ошибок, подскажите с чем это может быть связано и стоит ли добиваться 100% валидации html и css? За любые советы и наставления буду благодарен. Заранее спасибо.
Last reply by AlexZaw, -
- 2 replies
- 1.6k views
<a href="#q1" id="q2">132</a> <div id="q1"> <h1>Заголовок</h1> <p>Элемент</p> <a href="#x">Закрыть</a> </div> div{ width:500px; height:400px; background:gray; position:fixed; top:90px; left:30%; display:none; } div:target{ display:block; } body{height:10000px;} https://jsfiddle.net/a9zeppqq/ Вопрос собственно такой: Почему если присвоить href="#" то, таблица закрывается и браузер возвращается на начало страницы, а если указать href="#x" то блок просто пропадает. И можно ли запретить скролинг страницы когда открыт блок?.
Last reply by radioactive, -
- 3 replies
- 1.4k views
Селектор тегов = 1 еденица. Класс = 10 едениц. значит при условии <body > <div class="content"> <div2> <div3> <div4> <div5> <div6> <div7> <div8> <div9> <div10> <p><em>pppp</em></p> </div10> </div9> </div8> </div7> </div6> </div5> </div4> </div3> </div2> </div> </body> .content em{color: blue;} div div2 div3 div4 div5 div6 div7 div8 div9 div10 p em{ color: red;} Должен быть применён красный цвет т.к. у него 12 тегов =12едениц. А у первого 10ед. за класс + 1 за тег =11едениц.
Last reply by Launder, -
- 1 reply
- 1.4k views
Подскажите пожалуйста как на html лендинге вместо скрипта Яндекс карты сделать статичную картинку? Сам лендинг сайт расположен в папке www.profnaviki.ru/vospitateli/index.html вот кусок кода код файла index.html где выводится карта чтобы я не менял - карта удаляется вместе с модуле контактной информации на ней... А мне этот модуль очень нужен <div id="maps" class="bl"> <div id="map"></div> <div class="bl_center"> <div class="map_info"> <span class="title">Контактная информация</span> <div class="list l1"> <span class="b">Тел.: +7 (495) 258-07-…
Last reply by AlexZaw, -
- 5 replies
- 1.4k views
Так выглядит слайдер на ПК. Тут всё ок. А вот так всё плохо на телефоне, планшетах или на ПК с низким разрешением. Стрелки перелистывания фотографии немного выходят. Фотоальбом весь автоматом масштабируется благодаря: "width: 98%; max-width: 700px;", кроме стрелок. Стрелки почему то не хотят, по этому я сделал им ограничитель "max-height: 78%". Подскажите как пофиксить этот нюанс. Простите, если не корректно объяснил, я тот ещё Сусанин.
Last reply by klierik, -
- 1 reply
- 1.4k views
Привет, друзья. У меня есть вопрос. Как сделать чтобы при нажатии на кнопки "войти" отображались два "input" возле кнопки один из которых это "имя" а второй "пароль" ???
Last reply by klierik, -
- 1 reply
- 1.4k views
Здравствуйте, возникла проблема с выравниванием меню. Меню нужно выровнять по центру. ( Сайт должен быть с расширением 800 на 600) Посмотрите css файлик, может быть есть предложения как выровнять? Некоторые способы не подходят, поэтому выставляю архивированный файл со всем сайтом. Весит мало. Проект первый Низовцева Алена.7z
Last reply by gladiolus3228, -
- 1 reply
- 1.4k views
Не могу определиться с цветовой темой и списком разделов на сайте. Рассматриваю варианты.
Last reply by klierik, -
- 1 reply
- 1.4k views
Всем привет, Подскажите, пожалуйста имея некоторый опыт в bootstrap-верстке хочется попрактиковаться с установкой готовых шаблонов как на бекэенд так и на фронтенд приложения. Попрактиковаться хочется на ThemeForest шаблонах, так как я вижу что они достаточно востребованы. Немного погуглив нахожу довольно много ThemeForest шаблонов например этот ThemeForest - Atlant v1.5 - Bootstrap Admin Template with Frontend Стоит ли с ним связываться? Нашел версии поновее, но платные, хочется халявы... И просветите ThemeForest шаблоны - это что унаследованные шаблоны от какого-то родительского шаблона ? Может посоветуете какой другой ThemeF…
Last reply by klierik, -
- 1 reply
- 1.3k views
Простите за мой программный язык, не владею и описать точно не могу(. Проблема в меню(навигатор). есть 2 блока <div> (вообще <nav>)ссылок и по середине логотип картинка png(1 картинка). На моём мониторе широкоформатном всё хорошо, а если у человека fhd и меньше разрешение, то у человека будешь в логотипе ссылки(4 картинка, логотип убрал, ссылки в ссылках). Лого и ссылки в коллизии. Помогите пожалуйста! Должно получиться, что при сужении сайта всё будет на своём месте, а не съезжаться. На счёт телефонов, планшетов там бургер меню. body { margin: 0; line-height: 1.0; } .bar { } .bar span { /* bar menu */ top: 4px; position: fixed; …
Last reply by Igor Schnaider, -
- 1 reply
- 1.3k views
Last reply by klierik, -
- 1 reply
- 1.2k views
добрый день всем, я начинающий верстальщик. Ищу макеты в основном в телеграме и верстаю их, н, ради интереса я решил забить один из макетов в гугл и обнаружил что существует сайт на этом макете, причем такой навороченный сайт. Стоит ли верстать такие макеты для портфолио ?
Last reply by klierik,
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть. -
Решение нашел. Заменил на Всем привет. Список выходит из дива. При этом, другие элементы в диве отображаются корректно. Не могу найти причину. Нужно чтобы список был под кнопкой ПЛЕЙ... -
Здравствуйте! Мы команда программистов с многолетним опытом разработки. Работая с нашей командой, Вы получаете порядок условий и развитие с обеих сторон: разработка проекта и продолжение сотрудничества на долгосрочной основе, так же специалисты всегда готовы предложить различные идеи и дополнения. Разрабатываем проекты любой сложности: скрипты для автоматизации рутины, боты, сайты, админ панели, ico, ldo, разработка криптовалюты, смарт контракты, приложения, игры. Ответственность, качество, соблюдение дедлайнов - это про нас! Наш контакт: https://t.me/MadFury (https://t.me/madfury) (TG) TG: https://t.me/2e7.io Сайт: https://code-r.io/
-