Search the Community
Showing results for tags 'Помощь'.
-
Здравствуйте. Имеется рабочий скрипт конвертера валют. https://ilyamio.github.io/currencyconverter/ Мне необходимо изменить источник загрузки курсов на ЦБ РФ вот по этой ссылке: https://www.cbr.ru/scripts/XML_daily.asp А также мне необходимо установить ограничение на количество обращений к сайту ЦБ РФ - 1 раз в сутки. При частом обращении, могут заблокировать. Вот в этом js файле находятся настройки конвертера: const from_currencyEl = document.getElementById('from_currency'); const from_ammountEl = document.getElementById('from_ammount'); const to_currencyEl = document.getElementById('to_currency'); const to_ammountEl = document.getElementById('to_ammount'); const rateEl = document.getElementById('rate'); const exchange = document.getElementById('exchange'); from_currencyEl.addEventListener('change', calculate); from_ammountEl.addEventListener('input', calculate); to_currencyEl.addEventListener('change', calculate); to_ammountEl.addEventListener('input', calculate); exchange.addEventListener('click', () => { const temp = from_currencyEl.value; from_currencyEl.value = to_currencyEl.value; to_currencyEl.value = temp; calculate(); }); function calculate() { const from_currency = from_currencyEl.value; const to_currency = to_currencyEl.value; fetch(`https://api.exchangerate-api.com/v4/latest/${from_currency}`) .then(res => res.json()) .then(res => { const rate = res.rates[to_currency]; rateEl.innerText = `1 ${from_currency} = ${rate} ${to_currency}` to_ammountEl.value = (from_ammountEl.value * rate).toFixed(2); }) } calculate(); Как мне изменить настройки в этом файле чтобы курсы брались с https://www.cbr.ru/scripts/XML_daily.asp и включить ограничение на количество обращений по ссылке cbr.ru - 1 раз в сутки? Заранее спасибо всем, кто хотел помочь с решением этой задачи.
- 4 replies
-
- помощь
- калькулятор
-
(and 2 more)
Tagged with:
-
Я не знаю как "Это" создать многое перепробовал - не получилось.
Vetal6666 posted a question in HTML Coding
Как в верстке создать этот объект?🤔 (Углы по 60 градусов - то есть треугольник равносторонний)- 1 reply
-
- нестандартная задача
- помощь
- (and 8 more)
-
Всем привет! Меня зовут Павел. Я три года работаю Front-end разработчиком в IT-компании. За время работы посещал много семинаров и конференций, читал публикации западных коллег. На сегодняшний день, у меня есть желание поделится знаниями с начинающими верстальщиками, а может быть, обменяться опытом с профи по цеху. Сам я не претендую на звание супер-специалиста фронтенда, поэтому продолжаю дальше развиваться в данном направлении. Как показал мой опыт общения с начинающими и специалистами "фронта", очень быстрое развитие происходит тогда, когда ты что-либо объясняешь другому человеку. Поэтому я, с одной стороны, хочу помочь начинающим, так как в моей памяти ещё свежи воспоминания о муках самостоятельного освоения необходимых знаний, а с другой – продолжить собственное развитие через обучение и помощь другим (то есть, попробовать себя в качестве учителя по фронтенду). Теперь по существу Я достаточно загружен, однако в течении дня вполне могу выделить 1-2 часа на обучение и консультации для начинающих верстальщиков (может быть, даже совсем нулевых – не стесняйтесь). Кроме того, я могу ответить на отдельные вопросы, подсказать, что именно стоит почитать, куда развиваться и как в дальнейшем трудоустроиться верстальщиком. Главное, чтобы вы действительно хотели освоить профессию и понимали, что дело это не очень лёгкое и достаточно кропотливое, требующее усидчивости и работы над собой. Обращайтесь, всегда рад пообщаться Мои контакты: skype: live:frontendpavel email: frontendpavel@gmail.com
- 6 replies
-
- консультация
- вёрстка
- (and 4 more)
-
Проблема в следующем верстаю макет с PSD шаблона. Использую HTML и CSS. Прописал по порядку блоки Header. nav. main. в коде html. Добавил картинку и ссылки в блок header. открыл браузер что бы отобразить результат. и вижу. что блок main наехал на блок header. Вопрос: почему так получилось. Ведь одно из свойств блочных тегов - они начинаются с новой строки и занимают всю доступную ширину. (main. игнорирует свойство и не начинается с новой строки). как решить и почему произошло? Заранее благодарю всех за помощь Скрин прикрепляю. HTML <body> <header> <div class="logo"> <img src="..\matereal\images\logo.png" alt="logotip" class="logo__img"> </div> <nav> <a href="" class="nav" >home</a> <a href="" class="nav" >compane</a> <a href="" class="nav" >servise</a> <a href="" class="nav" >clients</a> <a href="" class="nav" >contacts</a> </nav> </header> <main> <div> <img src="" class="slaider" alt="slaider"> <p class="slaider__text__h1">веб-разработке\практика</p> <p class="slaider__text__h2"></p> </div> </main> <footer> </footer> CSS body { margin: 0; } header { margin: 0; border-top: 3px solid black; } .logo { margin:60,0,60,60; float: left; width: 49%; } nav { float: right; margin: 60,60,60,0; width: 51%; }
-
На главной странице сделал небольшое меню, для того что бы пользователям было проще сразу перейти к нужной странице, но текст почему-то смещён немного вправо, хотя тег <center> присутсвует <center> <div id="navigation"> <a href="pages\news.html">Новости</a> <a href="pages\story.html">Лор</a> <a href="pages\forum.html">Чат</a> <a href="pages\materials.html">Материалы</a> <a href="https://worldofwarcraft.com" target="_blank">Сайт World Of Warcraft</a> <a href="https://www.blizzard.com" target="_blank">Сайт Blizzard</a> <a href="pages\about.html">О сайте</a> </center> <p> </p> </div>
-
верстка карточки Помогите сделать код карточки. CSS3 и HTML5
egor_martynov posted a topic in Freelance
Ребят, помогите сверстать эту карточку, никак не получается поместить иконку и текст в центр и сделать бирюзовый прямоугольник фоном) Буду очень благодарен. Картинки и итоговый результат прикрепил внизу -
Всем привет! Мне нужно сделать горизонтальное меню посередине страницы. Я его сделал и через <ul>, при этом width 100% и margin 0, но почему-то слева возник отступ от края страницы. Градиент на заднем плане - это background-image, и там болжны быть белые отступы, потому что картинка такая, а отступ у меню быть не должен.. Не подскажите, как это исправить? Код и скриншоты прилагаю. <body> <div class="topnav"> <ul> <li ><a href="default.asp" id="first">Л1</a></li> <li><a href="news.asp" id="second">Ф2</a></li> <li><a href="contact.asp" id="third">С3</a></li> <li><a href="about.asp" id="fourth">О4</a></li> </ul> </div> </body> body { background-image: url("https://sun1-20.userapi.com/c830108/v830108125/1c35a9/gYiNRO0w7sw.jpg"); background-size: cover; } .topnav { margin: 0 auto; } ul { list-style-type: none; position: absolute; margin: 0 auto; margin-top:23.5%; padding: 0 ; overflow: hidden; height: 83px; width: 100%; } li { float: left; display: inline; } li a { display: block; text-align: center; padding: 24px 34px; }
-
Проблема со слайдером. При заходе на стартовою страницу слайдер ведет себя не корректно. Посмотрите пожалуйста в чем проблема.. Скину архив всего сайта, чтобы была понятна проблема целиком. Проект первый Низовцева Алена.7z
-
Приветствую всех! Подскажите пожалуйста где помогут абсолютному "чайнику" от сайтостроения и HTML с разными мелкими вопросами? По CSS стилям, "дефейсу" - форумы, чаты (телеграм)... Например: пытаюсь создать rss-ленту для форума внешним сервисом, как правильно определить css селекторы? нужен чистый "title" сообщений, fetchrss (получает нераздельные "имяНазваниеОписание" топика): li.activitybit div.title > a ... другой сервис автоопределяет по XPath так и это работает корректно: /html/body/div/div/div/ul/li/div div[2]/a[2]/child::node()
-
Я новичок и не могу ни как разобраться , мне надо сделать что бы текст был по бокам картинки , но ни как не выходит , может как то исправить код , или что-то добавить в него . Кто знает как помогите. 1 и 2 картинка то что у меня. 3 то что должно получиться.
-
Помогите, пожалуйста, разобраться как активировать кнопки чтобы при нажатии на них сменялась информация (текст/картинка). Один отзыв заменял другой. Прикрепляю свой код. Большое спасибо) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="reviews.css"> </head> <body> <style type="text/css"> .uc-reviws { position: relative; display: block; } .uc-reviews-slider{ overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .uc-reviews-slider-wrapper{ max-width: 100%; overflow: hidden; position: relative; display: block; } .uc-reviews-slider-wrapper > .uc-reviews-list:after { clear: both; } .uc-reviews-slider-wrapper .uc-reviews-list{ -webkit-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition: all 1s; -webkit-transition-property: -webkit-transform,height; -moz-transition-property: -moz-transform,height; transition-property: transform,height; -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .uc-reviews-list:before { content: " "; display: table; } .uc-reviews-slider-wrapper > *.active { z-index: 10; } .uc-reviews-slider-wrapper > *.active { opacity: 1; } .uc-reviews-block{ cursor: -webkit-grab; float: left; display: list-item; text-align: -webkit-match-parent; margin: 0px 0 0 0; position: relative; } .uc-reviews-img{ width: 100%; height: 100%; position: relative; z-index: 55; } .uc-reviews-wrapper{ position: absolute; z-index: 77; top: 0; margin: -0.7% 0 0 50%; padding-top: 40px; min-height: 100%; max-width: 1600px; box-sizing: border-box; display: block; } .uc-reviews-text { width: 485px; left: 50%; padding: 30px 0 0 45px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .uc-reviews-text-outer-type-a:before{ content: ''; position: absolute; left: 11px; background: #3c3c3c; width: 28px; height: 2px; margin: 9px 0 15px 0; } .uc-reviews-text-outer-type-a p { font-size: 17px; font-family: Lato_regular; line-height: 22px; color: #000; margin: 0 0 20px 0; position: relative;} .uc-reviews-text-outer-type-b p { font-size: 16px; font-family: Lato_italic; color: #747474; margin: 20px 0 0 0; } .uc-reviews-slider:after { clear: both; content: " "; display: table; } .uc-reviews-buttom { display: block; } .uc-reviews-buttom_left { width: 32px; display: block; top: 50%; height: 32px; background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png); cursor: pointer; position: absolute; z-index: 9999; opacity: 0.8; margin-top: -16px; background-position: 0 0; left: 30px; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; } .uc-reviews-buttom_right{ width: 32px; display: block; top: 50%; height: 32px; background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png); cursor: pointer; position: absolute; z-index: 9999; margin-top: -16px; opacity: 0.8; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; background-position: -32px 0; right: 30px; } .uc-reviews-number { position: relative; bottom: 67px; left: 0; right: 0; margin: 0 auto; padding: 0; text-align: center; } .uc-reviews-slider .uc-reviews-number a { background-color: #222222; border-radius: 30px; display: inline-block; height: 8px; overflow: hidden; text-indent: -999em; width: 8px; position: relative; z-index: 99; -webkit-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; cursor: pointer; } .uc-reviews-slider .uc-reviews-number > li:hover a, .uc-reviews-slider .uc-reviews-number > li.active a { background-color: #428bca; } .uc-reviews-slider .uc-reviews-number { margin: 10px 0 0; padding: 0; text-align: center; } .uc-reviews-slider .uc-reviews-number-position { cursor: pointer; display: inline-block; padding: 0 5px; } </style> <div class="uc-reviews"> <div class="uc-reviews-slider "><div class="uc-reviews-slider-wrapper" style="transition-duration: 1000ms; transition-timing-function: ease;"> <ul class="uc-reviews-list" style="width: 9443px; transform: translate3d(-2698px, 0px, 0px); height: 424px; padding-bottom: 0%;"> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage2.static.itmages.ru/i/18/0104/h_1515086726_8963396_bc057ad031.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“Management of the centre frequently engages media to showcase the success of their residents.</p> <p>iHUB also provides an opportunity for all their startups to participate in interesting events. For example, we have presented our startup in Oslo thanks to iHUB.”</p> </div> <p class="review-bg-text-outer-type-b"> Nikita Dobrynin & Katia Dobrynina, Founders @ AstraFit </p> </div> </div> </li> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage4.static.itmages.ru/i/18/0104/h_1515086781_3914429_0b10231d6a.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p> </div> <p class="uc-reviews-text-outer-type-b"> Stakh Vozniak, CEO @ TONA </p> </div> </div> </li> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage8.static.itmages.ru/i/18/0104/h_1515086875_1757560_ad7a2b467a.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p> </div> <p class="uc-reviews-text-outer-type-b"> Stakh Vozniak, CEO @ TONA </p> </div> </div> </li></ul> <div class="uc-reviews-buttom"> <a class="uc-reviews-buttom_left"></a> <a class="uc-reviews-buttom_right"></a></div></div> <ul class="uc-reviews-number" style="margin-top: 5px; transform: translate3d(0px, 0px, 0px);"> <li class="uc-reviews-number-position"><a href="#">1</a> </li> <li class="uc-reviews-number-position"><a href="#">2</a> </li> <li class="uc-reviews-number-position"><a href="#">3</a></li></ul></div> </div> </body> </html>
-
Всем привет. Есть калькулятор по ссылке http://billprof.ru/stoimost.html. Нужно его сделать покрасивее, динамичнее, и сделать вывод результата кнопкой. Подскажите что не так? Я написал CSS-стиль, подгружаю скрипт jquery для подсчета, и подгружаю скрипт для обработки полей select. Но почему то не считает результат. Помогите люди добрые, нужно что бы считал результат, и выводил нажатием по кнопке;(( index.htm style.css generic.css jquery-1.11.3.js jquery.animateNumber.min.js select.js
-
Можете подсказать как можно сделать такой каталог на своем сайте (нужно скопировать,или сделать подобное вот с этого сайта)http://amigo.ru/kollekcii/kollektsiya-rulonnykh-tkaney/
-
Недавно установил CMS WordPress на свой сайт (я новичок) ,и вот хочу чтобы мне помогли подключить все существующие страницы (их не много где-то 30) к cms с целью оптимизировать сайт под cms ну и сменить дизайн . HELP!!!!
-
Я не силен в hrml`е ,по этому очень нужна ваша помощь ребята. Суть вопроса в том ,что мне нужно сделать на странице вид таким образом -> с левой стороны будет таблица (которую я уже сделал). с выплывающим выбором а справа текст с дополнительными ссылками! Вроде бы все легко и понятно ,но вся проблема в том ,что я не знаю как правильно это сделать. При попытке написать текст с ссылками справой стороны страницы ,моя таблица начинает двигаться по абзацам вниз! Что делать?
-
не могу понять ничего... Есть страница сайта http://roza.org.ua/sovetyi-i-rekomendatsii/ По непонятной мне причине некоторые миниатюры отображаются сверху анонса, хотя должны быть сбоку. код через firebug проверил 5 раз, он одинаковый... Буду очень рад советам или помощи, тк сам не знаю, что с этим сделать.
-
Доброго времени суток. Ни как не получается прикрутить готовое боковое меню к сайту, первая проблема это не отоброжает текст когда закидываешь на локальный хост... стоит apache, php... локальные хосты работают отлично. когда запускаешь index.html из папки все работает на удивление... Мои подозрения пали на js, в этом я полный ноль, да и в html не очень силен... поэтому прошу помощи у панимающих людей которым не жалко своего времени на такого пацана как я... P.S. когда то вы же и сами были такими, а во круг и подсказать не кому, а разобраться очень хочется... спасибо за понимание... вот index.html <!DOCTYPE html> <head> <meta charset="UTF-8" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <!-- menu styles --> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/modernizr-custom.js"></script> <script src="js/main.js"></script> <script src="js/classie.js"></script> </head> <body> <!-- Main container --> <button class="action action--open" aria-label="Open Menu"><span class="icon icon--menu"></span></button> <nav id="ml-menu" class="menu"> <button class="action action--close" aria-label="Close Menu"><span class="icon icon--cross"></span></button> <div class="menu__wrap"> <ul data-menu="main" class="menu__level"> <li class="menu__item"><a class="menu__link" data-submenu="submenu-1" href="#">Vegetables</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-2" href="#">Fruits</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-3" href="#">Grains</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-4" href="#">Mylk & Drinks</a></li> </ul> <!-- Submenu 1 --> <ul data-menu="submenu-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Stalk Vegetables</a></li> <li class="menu__item"><a class="menu__link" href="#">Roots & Seeds</a></li> <li class="menu__item"><a class="menu__link" href="#">Cabbages</a></li> <li class="menu__item"><a class="menu__link" href="#">Salad Greens</a></li> <li class="menu__item"><a class="menu__link" href="#">Mushrooms</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1" href="#">Sale %</a></li> </ul> <!-- Submenu 1-1 --> <ul data-menu="submenu-1-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Fair Trade Roots</a></li> <li class="menu__item"><a class="menu__link" href="#">Dried Veggies</a></li> <li class="menu__item"><a class="menu__link" href="#">Our Brand</a></li> <li class="menu__item"><a class="menu__link" href="#">Homemade</a></li> </ul> <!-- Submenu 2 --> <ul data-menu="submenu-2" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Citrus Fruits</a></li> <li class="menu__item"><a class="menu__link" href="#">Berries</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-2-1" href="#">Special Selection</a></li> <li class="menu__item"><a class="menu__link" href="#">Tropical Fruits</a></li> <li class="menu__item"><a class="menu__link" href="#">Melons</a></li> </ul> <!-- Submenu 2-1 --> <ul data-menu="submenu-2-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Exotic Mixes</a></li> <li class="menu__item"><a class="menu__link" href="#">Wild Pick</a></li> <li class="menu__item"><a class="menu__link" href="#">Vitamin Boosters</a></li> </ul> <!-- Submenu 3 --> <ul data-menu="submenu-3" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Buckwheat</a></li> <li class="menu__item"><a class="menu__link" href="#">Millet</a></li> <li class="menu__item"><a class="menu__link" href="#">Quinoa</a></li> <li class="menu__item"><a class="menu__link" href="#">Wild Rice</a></li> <li class="menu__item"><a class="menu__link" href="#">Durum Wheat</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-3-1" href="#">Promo Packs</a></li> </ul> <!-- Submenu 3-1 --> <ul data-menu="submenu-3-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Starter Kit</a></li> <li class="menu__item"><a class="menu__link" href="#">The Essential 8</a></li> <li class="menu__item"><a class="menu__link" href="#">Bolivian Secrets</a></li> <li class="menu__item"><a class="menu__link" href="#">Flour Packs</a></li> </ul> <!-- Submenu 4 --> <ul data-menu="submenu-4" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Grain Mylks</a></li> <li class="menu__item"><a class="menu__link" href="#">Seed Mylks</a></li> <li class="menu__item"><a class="menu__link" href="#">Nut Mylks</a></li> <li class="menu__item"><a class="menu__link" href="#">Nutri Drinks</a></li> <li class="menu__item"><a class="menu__link" data-submenu="submenu-4-1" href="#">Selection</a></li> </ul> <!-- Submenu 4-1 --> <ul data-menu="submenu-4-1" class="menu__level"> <li class="menu__item"><a class="menu__link" href="#">Nut Mylk Packs</a></li> <li class="menu__item"><a class="menu__link" href="#">Amino Acid Heaven</a></li> <li class="menu__item"><a class="menu__link" href="#">Allergy Free</a></li> </ul> </div> </nav> <script> (function() { var menuEl = document.getElementById('ml-menu'), mlmenu = new MLMenu(menuEl, { breadcrumbsCtrl : true, // show breadcrumbs initialBreadcrumb : 'all', // initial breadcrumb text backCtrl : false, // show back button itemsDelayInterval : 60, // delay between each menu item sliding animation onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item]) }); // mobile menu toggle var openMenuCtrl = document.querySelector('.action--open'), closeMenuCtrl = document.querySelector('.action--close'); openMenuCtrl.addEventListener('click', openMenu); closeMenuCtrl.addEventListener('click', closeMenu); function openMenu() { classie.add(menuEl, 'menu--open'); } function closeMenu() { classie.remove(menuEl, 'menu--open'); } // simulate grid content loading var gridWrapper = document.querySelector('.content'); function loadDummyData(ev, itemName) { ev.preventDefault(); closeMenu(); gridWrapper.innerHTML = ''; classie.add(gridWrapper, 'content--loading'); setTimeout(function() { classie.remove(gridWrapper, 'content--loading'); gridWrapper.innerHTML = '<ul class="products">' + dummyData[itemName] + '<ul>'; }, 700); } })(); </script> </body> </html> вот к нему СSS: /* Icons (made with Icomoon.io) */ @font-face { font-family: 'feather'; font-weight: normal; font-style: normal; src: url('../fonts/feather/feather.eot?1gafuo'); src: url('../fonts/feather/feather.eot?1gafuo#iefix') format('embedded-opentype'), url('../fonts/feather/feather.woff2?1gafuo') format('woff2'), url('../fonts/feather/feather.ttf?1gafuo') format('truetype'), url('../fonts/feather/feather.woff?1gafuo') format('woff'), url('../fonts/feather/feather.svg?1gafuo#feather') format('svg'); } .icon { font-family: 'feather'; font-weight: normal; font-style: normal; font-variant: normal; line-height: 1; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none; } .icon--arrow-left:before { content: '\e901'; } .icon--menu:before { content: '\e903'; } .icon--cross:before { content: '\e117'; } /* Menu styles */ .menu { position: fixed; top: 0px; left: 0; width: 300px; height: calc(100vh - 120px); background: #1c1d22; } .menu__wrap { position: absolute; top: 3.5em; bottom: 0; overflow: hidden; width: 100%; } .menu__level { position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; overflow-y: scroll; width: calc(100% + 50px); height: 100%; margin: 0; padding: 0; list-style-type: none; } .menu__level--current { visibility: visible; } .menu__item { display: block; width: calc(100% - 50px); } .menu__link { font-weight: 600; position: relative; display: block; padding: 1em 2.5em 1em 1.5em; color: #bdbdbd; -webkit-transition: color 0.1s; transition: color 0.1s; } .menu__link[data-submenu]::after { content: '\e904'; font-family: 'feather'; position: absolute; right: 0; padding: 0.25em 1.25em; color: #2a2b30; } .menu__link:hover, .menu__link[data-submenu]:hover::after { color: #5c5edc; } .menu__link--current::before { content: '\00B7'; font-size: 1.5em; line-height: 0; position: absolute; top: 50%; left: 0.5em; height: 4px; color: #5c5edc; } [class^=animate-], [class*= animate-] { visibility: visible; } .animate-outToRight .menu__item { -webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes outToRight { to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes outToRight { to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .animate-outToLeft .menu__item { -webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes outToLeft { to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes outToLeft { to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .animate-inFromLeft .menu__item { -webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes inFromLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes inFromLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .animate-inFromRight .menu__item { -webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); } @-webkit-keyframes inFromRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes inFromRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .menu__breadcrumbs { font-size: 0.65em; line-height: 1; position: relative; padding: 2.5em 3.75em 1.5em 2.5em; } .menu__breadcrumbs a { font-weight: bold; display: inline-block; cursor: pointer; vertical-align: middle; letter-spacing: 1px; text-transform: uppercase; color: #5c5edc; } .menu__breadcrumbs a:last-child { pointer-events: none; } .menu__breadcrumbs a:hover { color: #8182e0; } .menu__breadcrumbs a:not(:last-child)::after { content: '\e902'; font-family: 'feather'; display: inline-block; padding: 0 0.5em; color: #33353e; } .menu__breadcrumbs a:not(:last-child):hover::after { color: #33353e; } .menu__back { font-size: 1.05em; position: absolute; z-index: 100; top: 0; right: 2.25em; margin: 0; padding: 1.365em 0.65em 0 0; cursor: pointer; color: #2a2b30; border: none; background: none; } .menu__back--hidden { pointer-events: none; opacity: 0; } .menu__back:hover, .menu__back:focus { color: #fff; outline: none; } /* Open and close buttons */ .action { position: absolute; display: block; margin: 0; padding: 0; cursor: pointer; border: none; background: none; } .action:focus { outline: none; } .action--open { font-size: 1.5em; top: 1em; left: 1em; display: none; color: #fff; position: fixed; z-index: 1000; } .action--close { font-size: 1.1em; top: 1.25em; right: 1em; display: none; color: #45464e; } @media screen and (max-width: 40em) { .action--open, .action--close { display: block; } .menu { z-index: 1000; top: 0; width: 100%; height: 100vh; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .menu--open { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } а это дополнительные скрипты: /** * main.js * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2015, Codrops * http://www.codrops.com */ ;(function(window) { 'use strict'; var support = { animations : Modernizr.cssanimations }, animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ], onEndAnimation = function( el, callback ) { var onEndCallbackFn = function( ev ) { if( support.animations ) { if( ev.target != this ) return; this.removeEventListener( animEndEventName, onEndCallbackFn ); } if( callback && typeof callback === 'function' ) { callback.call(); } }; if( support.animations ) { el.addEventListener( animEndEventName, onEndCallbackFn ); } else { onEndCallbackFn(); } }; function extend( a, b ) { for( var key in b ) { if( b.hasOwnProperty( key ) ) { a[key] = b[key]; } } return a; } function MLMenu(el, options) { this.el = el; this.options = extend( {}, this.options ); extend( this.options, options ); // the menus (<ul>´s) this.menus = [].slice.call(this.el.querySelectorAll('.menu__level')); // index of current menu this.current = 0; this._init(); } MLMenu.prototype.options = { // show breadcrumbs breadcrumbsCtrl : true, // initial breadcrumb text initialBreadcrumb : 'all', // show back button backCtrl : true, // delay between each menu item sliding animation itemsDelayInterval : 60, // direction direction : 'r2l', // callback: item that doesn´t have a submenu gets clicked // onItemClick([event], [inner HTML of the clicked item]) onItemClick : function(ev, itemName) { return false; } }; MLMenu.prototype._init = function() { // iterate the existing menus and create an array of menus, more specifically an array of objects where each one holds the info of each menu element and its menu items this.menusArr = []; var self = this; this.menus.forEach(function(menuEl, pos) { var menu = {menuEl : menuEl, menuItems : [].slice.call(menuEl.querySelectorAll('.menu__item'))}; self.menusArr.push(menu); // set current menu class if( pos === self.current ) { classie.add(menuEl, 'menu__level--current'); } }); // create back button if( this.options.backCtrl ) { this.backCtrl = document.createElement('button'); this.backCtrl.className = 'menu__back menu__back--hidden'; this.backCtrl.setAttribute('aria-label', 'Go back'); this.backCtrl.innerHTML = '<span class="icon icon--arrow-left"></span>'; this.el.insertBefore(this.backCtrl, this.el.firstChild); } // create breadcrumbs if( self.options.breadcrumbsCtrl ) { this.breadcrumbsCtrl = document.createElement('nav'); this.breadcrumbsCtrl.className = 'menu__breadcrumbs'; this.el.insertBefore(this.breadcrumbsCtrl, this.el.firstChild); // add initial breadcrumb this._addBreadcrumb(0); } // event binding this._initEvents(); }; MLMenu.prototype._initEvents = function() { var self = this; for(var i = 0, len = this.menusArr.length; i < len; ++i) { this.menusArr.menuItems.forEach(function(item, pos) { item.querySelector('a').addEventListener('click', function(ev) { var submenu = ev.target.getAttribute('data-submenu'), itemName = ev.target.innerHTML, subMenuEl = self.el.querySelector('ul[data-menu=' + submenu + ']'); // check if there's a sub menu for this item if( submenu && subMenuEl ) { ev.preventDefault(); // open it self._openSubMenu(subMenuEl, pos, itemName); } else { // add class current var currentlink = self.el.querySelector('.menu__link--current'); if( currentlink ) { classie.remove(self.el.querySelector('.menu__link--current'), 'menu__link--current'); } classie.add(ev.target, 'menu__link--current'); // callback self.options.onItemClick(ev, itemName); } }); }); } // back navigation if( this.options.backCtrl ) { this.backCtrl.addEventListener('click', function() { self._back(); }); } }; MLMenu.prototype._openSubMenu = function(subMenuEl, clickPosition, subMenuName) { if( this.isAnimating ) { return false; } this.isAnimating = true; // save "parent" menu index for back navigation this.menusArr[this.menus.indexOf(subMenuEl)].backIdx = this.current; // save "parent" menu´s name this.menusArr[this.menus.indexOf(subMenuEl)].name = subMenuName; // current menu slides out this._menuOut(clickPosition); // next menu (submenu) slides in this._menuIn(subMenuEl, clickPosition); }; MLMenu.prototype._back = function() { if( this.isAnimating ) { return false; } this.isAnimating = true; // current menu slides out this._menuOut(); // next menu (previous menu) slides in var backMenu = this.menusArr[this.menusArr[this.current].backIdx].menuEl; this._menuIn(backMenu); // remove last breadcrumb if( this.options.breadcrumbsCtrl ) { this.breadcrumbsCtrl.removeChild(this.breadcrumbsCtrl.lastElementChild); } }; MLMenu.prototype._menuOut = function(clickPosition) { // the current menu var self = this, currentMenu = this.menusArr[this.current].menuEl, isBackNavigation = typeof clickPosition == 'undefined' ? true : false; // slide out current menu items - first, set the delays for the items this.menusArr[this.current].menuItems.forEach(function(item, pos) { item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms'; }); // animation class if( this.options.direction === 'r2l' ) { classie.add(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); } else { classie.add(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); } }; MLMenu.prototype._menuIn = function(nextMenuEl, clickPosition) { var self = this, // the current menu currentMenu = this.menusArr[this.current].menuEl, isBackNavigation = typeof clickPosition == 'undefined' ? true : false, // index of the nextMenuEl nextMenuIdx = this.menus.indexOf(nextMenuEl), nextMenuItems = this.menusArr[nextMenuIdx].menuItems, nextMenuItemsTotal = nextMenuItems.length; // slide in next menu items - first, set the delays for the items nextMenuItems.forEach(function(item, pos) { item.style.WebkitAnimationDelay = item.style.animationDelay = isBackNavigation ? parseInt(pos * self.options.itemsDelayInterval) + 'ms' : parseInt(Math.abs(clickPosition - pos) * self.options.itemsDelayInterval) + 'ms'; // we need to reset the classes once the last item animates in // the "last item" is the farthest from the clicked item // let's calculate the index of the farthest item var farthestIdx = clickPosition <= nextMenuItemsTotal/2 || isBackNavigation ? nextMenuItemsTotal - 1 : 0; if( pos === farthestIdx ) { onEndAnimation(item, function() { // reset classes if( self.options.direction === 'r2l' ) { classie.remove(currentMenu, !isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); classie.remove(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } else { classie.remove(currentMenu, isBackNavigation ? 'animate-outToLeft' : 'animate-outToRight'); classie.remove(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } classie.remove(currentMenu, 'menu__level--current'); classie.add(nextMenuEl, 'menu__level--current'); //reset current self.current = nextMenuIdx; // control back button and breadcrumbs navigation elements if( !isBackNavigation ) { // show back button if( self.options.backCtrl ) { classie.remove(self.backCtrl, 'menu__back--hidden'); } // add breadcrumb self._addBreadcrumb(nextMenuIdx); } else if( self.current === 0 && self.options.backCtrl ) { // hide back button classie.add(self.backCtrl, 'menu__back--hidden'); } // we can navigate again.. self.isAnimating = false; }); } }); // animation class if( this.options.direction === 'r2l' ) { classie.add(nextMenuEl, !isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } else { classie.add(nextMenuEl, isBackNavigation ? 'animate-inFromRight' : 'animate-inFromLeft'); } }; MLMenu.prototype._addBreadcrumb = function(idx) { if( !this.options.breadcrumbsCtrl ) { return false; } var bc = document.createElement('a'); bc.innerHTML = idx ? this.menusArr[idx].name : this.options.initialBreadcrumb; this.breadcrumbsCtrl.appendChild(bc); var self = this; bc.addEventListener('click', function(ev) { ev.preventDefault(); // do nothing if this breadcrumb is the last one in the list of breadcrumbs if( !bc.nextSibling || self.isAnimating ) { return false; } self.isAnimating = true; // current menu slides out self._menuOut(); // next menu slides in var nextMenu = self.menusArr[idx].menuEl; self._menuIn(nextMenu); // remove breadcrumbs that are ahead var siblingNode; while (siblingNode = bc.nextSibling) { self.breadcrumbsCtrl.removeChild(siblingNode); } }); }; window.MLMenu = MLMenu; })(window); /*! * classie v1.0.1 * class helper functions * from bonzo https://github.com/ded/bonzo * MIT license * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */ /*jshint browser: true, strict: true, undef: true, unused: true */ /*global define: false, module: false */ ( function( window ) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); }; } else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); }; } function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c ); } var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass }; // transport if ( typeof define === 'function' && define.amd ) { // AMD define( classie ); } else if ( typeof exports === 'object' ) { // CommonJS module.exports = classie; } else { // browser global window.classie = classie; } })( window ); /*! modernizr 3.2.0 (Custom Build) | MIT * * http://modernizr.com/download/?-cssanimations-prefixed !*/ !function(e,n,t){function r(e,n){return typeof e===n}function o(){var e,n,t,o,i,s,a;for(var f in C)if(C.hasOwnProperty(f)){if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(o=r(n.fn,"function")?n.fn():n.fn,i=0;i<e.length;i++)s=e,a=s.split("."),1===a.length?Modernizr[a[0]]=o:(!Modernizr[a[0]]||Modernizr[a[0]]instanceof Boolean||(Modernizr[a[0]]=new Boolean(Modernizr[a[0]])),Modernizr[a[0]][a[1]]=o),g.push((o?"":"no-")+a.join("-"))}}function i(e){var n=w.className,t=Modernizr._config.classPrefix||"";if(x&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),x?w.className.baseVal=n:w.className=n)}function s(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function a(e,n){return!!~(""+e).indexOf(n)}function f(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):x?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function l(e,n){return function(){return e.apply(n,arguments)}}function u(e,n,t){var o;for(var i in e)if(ein n)return t===!1?e:(o=n[e],r(o,"function")?l(o,t||n) );return!1}function p(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(){var e=n.body;return e||(e=f(x?"svg":"body"),e.fake=!0),e}function c(e,t,r,o){var i,s,a,l,u="modernizr",p=f("div"),c=d();if(parseInt(r,10))for(;r--;)a=f("div"),a.id=o?o[r]:u+(r+1),p.appendChild(a);return i=f("style"),i.type="text/css",i.id="s"+u,(c.fake?c:p).appendChild(i),c.appendChild(p),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(n.createTextNode(e)),p.id=u,c.fake&&(c.style.background="",c.style.overflow="hidden",l=w.style.overflow,w.style.overflow="hidden",w.appendChild©),s=t(p,e),c.fake?(c.parentNode.removeChild©,w.style.overflow=l,w.offsetHeight) .parentNode.removeChild(p),!!s}function m(n,r){var o=n.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(p(n[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var i=[];o--;)i.push("("+p(n[o])+":"+r+")");return i=i.join(" or "),c("@supports ("+i+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return t}function v(e,n,o,i){function l(){p&&(delete z.style,delete z.modElem)}if(i=r(i,"undefined")?!1:i,!r(o,"undefined")){var u=m(e,o);if(!r(u,"undefined"))return u}for(var p,d,c,v,h,y=["modernizr","tspan"];!z.style;)p=!0,z.modElem=f(y.shift()),z.style=z.modElem.style;for(c=e.length,d=0;c>d;d++)if(v=e[d],h=z.style[v],a(v,"-")&&(v=s(v)),z.style[v]!==t){if(i||r(o,"undefined"))return l(),"pfx"==n?v:!0;try{z.style[v]=o}catch(g){}if(z.style[v]!=h)return l(),"pfx"==n?v:!0}return l(),!1}function h(e,n,t,o,i){var s=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(s+" ")+s).split(" ");return r(n,"string")||r(n,"undefined")?v(a,n,o,i):(a=(e+" "+N.join(s+" ")+s).split(" "),u(a,n,t))}function y(e,n,r){return h(e,t,t,n,r)}var g=[],C=[],_={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=_,Modernizr=new Modernizr;var w=n.documentElement,x="svg"===w.nodeName.toLowerCase(),S="Moz O ms Webkit",b=_._config.usePrefixes?S.split(" "):[];_._cssomPrefixes=b;var E=function(n){var r,o=prefixes.length,i=e.CSSRule;if("undefined"==typeof i)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in i)return"@"+n;for(var s=0;o>s;s++){var a=prefixes,f=a.toUpperCase()+"_"+r;if(f in i)return"@-"+a.toLowerCase()+"-"+n}return!1};_.atRule=E;var N=_._config.usePrefixes?S.toLowerCase().split(" "):[];_._domPrefixes=N;var P={elem:f("modernizr")};Modernizr._q.push(function(){delete P.elem});var z={style:P.elem.style};Modernizr._q.unshift(function(){delete z.style}),_.testAllProps=h;_.prefixed=function(e,n,t){return 0===e.indexOf("@")?E(e) -1!=e.indexOf("-")&&(e=s(e)),n?h(e,n,t):h(e,"pfx"))};_.testAllProps=y,Modernizr.addTest("cssanimations",y("animationName","a",!0)),o(),i(g),delete _.addTest,delete _.addAsyncTest;for(var T=0;T<Modernizr._q.length;T++)Modernizr._q[T]();e.Modernizr=Modernizr}(window,document); без этих скриптов текст тоже не отоброжается в меню...
-
Всем привет! Имеется одна до безобразия простейшая веб-страница (http://www.cssdesk.com/FzRm2), созданная в процессе изучения азов HTML и CSS. Вопрос таков: что в HTML-коде и таблице стилей данной вёрстки можно было бы сделать грамотнее/иначе/правильнее/лучше? За банальный пример простите уж, да больно хотелось спросить... Спасибо!
-
Предлагаю консультации по веб-дизайну. Опыт работы в сфере около 3-х лет. За это время выполнено почти 100 проектов. Данная услуга подходит особенно начинающим дизайнерам. Консультации проводятся по таким вопросам: - с чего начинать разработку проекта; - зарисовка и создание прототипов; - работа с цветами; - типографика; - ритм страницы и grid-сетки; - работа с содержимым сайта (кнопки, иконки, слайдеры, формы и др.) - особенности разработки различных типов сайтов; - ошибки веб-дизайнеров; - практические моменты; - веб-дизайн в Photoshop; - специальные сервисы для дизайнеров; - советы по поиску заказов; Также помогу веб-дизайнерам при проблемах связанных с выполнением заказа, например отсутствием идей. Моё портфолио с некоторыми работами и отзывами - freelance.ru/Alexey_Korol Консультации проводятся по скайпу. Цена – 450р (за 2 часа). Skype – lking86 Обращайтесь, буду рад поделиться своими знаниями с вами.
-
- веб
- консультация
-
(and 2 more)
Tagged with:
-
Как сделать border для всей строки <tr> при клике на форму ввода текста?
kirill- posted a question in HTML Coding
Прощу помощи в оформлении! Не пойму как сделать border для всей строки при клике на текстовую форму Сейчас у меня все выглядит вот так: http://pastenow.ru/DCU7 Хочу чтобы tr выделялся таким образом : http://pastenow.ru/DCU5 Код : http://jsfiddle.net/kirill111/o0hx8sqb/3/ -
У меня не срабатывают мета теги ,когда я делаю анализ сайта (http://pr-cy.ru/a/for-droid.ru)мне пишет что не найдено описание в мета тегах ,и вот как выглядит мета тег главной страницы : <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <meta name="description" content="Выбор только лучших смартфонов и игр на платформе Андроид"><meta name="Keywords" content="выбор,смартфоны,Андроид,Android,smartphone,игры,приложения,помощь"><title>for-droid.ru выбор только лучших смартфонов и игр </title><link rel="stylesheet" type="text/css" href="style.css"> </head>Подскажите пожалуйста в чем ошибка .Заранее спасибо!
-
Здравствуйте! Очень нужна помощь с JavaScript Необходимо сделать так, чтобы меню для сайта при изменении размера окна браузера меняло количество пунктов(*1) и те, которые не уместились в списке перемещались в выпадающий список в конце(**2). HTML-код такой: <ul class="Горизонтальное-Меню"> <li class="line"> <a href="/">Адреса магазинов</a> </li> <li class="line"> <a href="/">Оплата</a> </li> <li class="line"> <a href="/">Доставка</a> </li> <li class="line"> <a href="/">Сотрудничество</a> </li> <li class="more"> <a href="/">Ещё<input type="submit" name="more" value=""/></a> </li> </ul> <ul class="Выпадающий-Список"> <li class="submore"> <a href="//">Раздватри</a> </li> <li class="submore"> <a href="//">Четырепятьшесть</a> </li> <li class="submore"> <a href="//">Семьвосемьдевять</a> </li> <li class="submore"> <a href="//">Десять</a> </li> </ul> Может, можно сделать скрипт, который при определенной ширине экрана меняет класс элемента и перемещает его в другой список? Заранее благодарю вас за помощь! Фотографии прикрепила
- 8 replies
-
- script
- javascript
-
(and 2 more)
Tagged with:
-
Здравствуйте помогите пожалуйста сайту уже более 3-месяца а посетителей нет помогите пожалуйста,описание сайта уникальное,описание фильмов уникальные сайт:live-kino.ru