lavrentyev

Всем доброго времени суток! Буду благодарен за помощь в одном вопросе! Есть форма с <input required>. В CSS я прописал стили для тех input которые не заполнил пользователь (использовал input:invalid). Но проблема в том, что при загрузке получается то, что вы можете видеть в jsfiddle: все input с required подсвечиваются. И это понятно ведь они не заполнены. Но как сделать так как на фото? Чтобы подсвечивался незаполненный input только после нажатия на кнопку, а не при загрузке формы? Понимаю, что это можно сделать на JS. Но как я не знаю. Может что-то подскажете? https://jsfiddle.net/Lavrentyev/1nLnjrb4/2/#&togetherjs=LSIgkgrqlh

Всем большое спасибо за помощь. Я решение нашел путем подключения другого скрипта. Вот,что мне помогло: JQUERY $(document).ready(function() { // вся мaгия пoсле зaгрузки стрaницы $('a#go').click( function(event){ // лoвим клик пo ссылки с id="go" event.preventDefault(); // выключaем стaндaртную рoль элементa $('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку function(){ // пoсле выпoлнения предъидущей aнимaции $('#modal_form') .css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none; .animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз }); }); /* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */ $('#modal_close, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке $('#modal_form') .animate({opacity: 0, top: '45%'}, 200, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх function(){ // пoсле aнимaции $(this).css('display', 'none'); // делaем ему display: none; $('#overlay').fadeOut(400); // скрывaем пoдлoжку } ); }); }); Структура HTML: <a href="#" id="go">Обратная связь</a> <div id="modal_form"> <span id="modal_close">X</span> <form> <h3 class="form">Обратная связь</h3> <h5>Ваше имя*</h5> <input type="text" name="name" required> <h5>Телефон*</h5> <input type="tel" name="tel" required> <h5>Email*</h5> <input type="email" name="email" required> <h5>Сообщение</h5> <textarea name="text"></textarea> <input type="submit" class="send_form" value="Отправить"> </form> </div> <div id="overlay"></div> Стили CSS: #modal_form { width: 468px; height: 577px; /* Рaзмеры дoлжны быть фиксирoвaны */ background: #fff; position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */ top: 25% !important; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */ left: 44%; /* пoлoвинa экрaнa слевa */ margin-top: -150px; margin-left: -150px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */ display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */ opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */ z-index: 5; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */ padding: 20px 10px; text-align: center; } /* Кнoпкa зaкрыть для тех ктo в тaнке) */ #modal_form #modal_close { width: 21px; height: 21px; position: absolute; top: -21px; right: -21px; cursor: pointer; display: block; color: #fff; font-size: 17px; background-color: rgba(127,127,127,0.8); } /* Пoдлoжкa */ #overlay { z-index:3; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */ position:fixed; /* всегдa перекрывaет весь сaйт */ background-color:#000; /* чернaя */ opacity:0.8; /* нo немнoгo прoзрaчнa */ -moz-opacity:0.8; /* фикс прозрачности для старых браузеров */ filter:alpha(opacity=80); width:100%; height:100%; /* рaзмерoм вo весь экрaн */ top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */ left:0; cursor:pointer; display:none; /* в oбычнoм сoстoянии её нет) */ }

Спасибо, что уделили время. Но я только что заметил, что в jsfiddle окно работает (к моему удивлению). А у меня в браузере нет. Что-то я совсем завис!!!

Доброго времени суток! Проблема: не работает модальное окно. Т.е при нажатии на ссылку ничего не происходит. Кнопка есть, подключенный файл со скриптом есть. Jquery подключен. Ссылка связана с блоком, который должен всплывать. сделал все по инструкции. Я не профи но вроде немного разбираюсь. Я уже все глаза высмотрел!!! В чем дело не пойму. Делал по этой инструкции: http://dbmast.ru/modalnoe-okno-s-pomoshhyu-css-i-jquery Выложил код в Jsfiddle. Прошу подскажите в чем может дело! https://jsfiddle.net/#&togetherjs=sVlwnJV0mM

Доброго времени суток. Очень надеюсь на вашу помощь! Сразу даю ссылку на код https://jsfiddle.net/Lavrentyev/f5ygLoxp/5/#&togetherjs=L9Tx3aRbGa Проблема в том, что мне нужна резиновая шапка. Чтобы блок с выбором языка и кнопка входа при уменьшении экрана ехали влево, но при этом сама шапка не обрезалась. Когда я ставлю шапке min-width: 1280px то шапка не обрезается но и блок с выбором языка и кнопка входа остаются на месте (http://joxi.ru/52ayglEIdaYQ20), а если ставлю шапке width: 100% блоки едут как надо, но шапка понятно обрезается по ширине экрана. (http://joxi.ru/5mdogq5HZOd5r1) Не могу разобраться с этим. Помогите, пожалуйста. Немного разобрался, но не до конца. Получается если ставлю шапке width: 100% то при уменьшении экрана его размер остается 1280px но шапка уменьшается вместе с экраном. Я применил к body overflow-x: hidden и это сработало, убралась горизонтальная полоса прокрутки. Но при сильном уменьшении экрана должна появляться. Я это сделал с помощью медиа запроса. Полоса появляется, но опять же горизонтально прокручивается до 1280px, а шапка обрезана. Все еще нуждаюсь в помощи!

Очень нужна помощь! !! Верстка почти закончена за исключением одной детали, которая портит всю "малину". Не знаю как сделать чтобы при нажатии на пункт меню выделялся также и основной блок с контентом относящийся к пункту меню. Прилагаю ссылку на скриншот. http://itmages.ru/image/view/4756644/ed59c9f0

Я начинающий верстальщик. Довольно не плохо знаю HTML и CSS. В данный момент изучаю JS и Jquery. Но, конечно, мне нужна практика. Поэтому готов выполнять работу бесплатно или за символическую плату. Может кому нужен помощник, то я готов.

Доброго времени суток! Я новичок в деле верстки, так что не судите строго. У меня проблема с отображением background с ссылкой на PNG в браузере IE 11 (может и в ранних версиях тоже, я не проверял.) В других браузерах, естественно, все нормально. А в IE просто белый фон. Это не коммерческий заказ, а просто я набиваю руку. Може подскажете как решить проблему. Буду очень благодарен! https://jsfiddle.net/2aw8h9xd/2/

Доброго времени суток! Я новичок в деле верстки, так что не судите строго. У меня проблема с отображением background с ссылкой на PNG в браузере IE 11 (может и в ранних версиях тоже, я не проверял.) В других браузерах, естественно, все нормально. А в IE просто белый фон. Это не коммерческий заказ, а просто я набиваю руку. Може подскажете как решить проблему. Буду очень благодарен! Вот код HTML: <!DOCTYPE html> <!-- html lang="ru" class="lt-ie9 lt-ie8 lt-ie7"> <html lang="ru" class="lt-ie9 lt-ie8"> <html lang="ru" class="lt-ie9"> <html lang="en"> --> <head> <meta charset="UTF-8"> <title>MobileNews</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="css/main.css" tipe="text/css"> <link rel="stylesheet" href="css/media.css" tipe="text/css"> <link rel="shortcut icon" href="images/CloneMobile.png"> </head> <body> <img class="arrow2" src="images/Arrow2.png" alt="Arrow2"/> <header> <div class="head"> <img src="images/CloneMobile.png" alt="CloneMobile"/> <p class="logo">CloneMobile</p> <img class="arrow" src="images/Arrow1.png" alt="Arrow"/> </div> </header> <div class="line"></div> <nav> <ul class="main"> <li><a href="#">Главная</a></li> <li><a href="#">Мобильные новинки</a></li> <li><a href="#">Форум</a></li> <li><a href="#">FM-радио</a></li> <li><a href="#">FAQ</a></li> </ul> </nav> <div class="maincont"> <div class="sidebar"> <aside class="first"> <h1>Навигация</h1> <ul> <li><a href="#">Игры</a></li> <li><a href="#">Программы</a></li> <li><a href="#">Темы и обои</a></li> <li><a href="#">Смартфоны</a></li> <li><a href="#">GPS навигаторы</a></li> <li><a href="#">MP3 плееры</a></li> <li><a href="#">Bluetooth гарнитуры</a></li> <li><a href="#">Разное</a></li> </ul> </aside> <aside class="second"> <a href="#"><img src="images/Register.png" alt="Register"/></a> </aside> <aside></aside> </div> <main> </main> </div> <footer> sdfsadfwfweeagf </footer> <script src="libs/html5shiv/es5-shim.min.js"></script> <script src="libs/html5shiv/html5shiv.min.js"></script> <script src="libs/html5shiv/html5shiv-printshiv.min.js"></script> <script src="libs/respond/respond.min.js"></script> </body> </html> Вот CSS: body { position: absolute; background-image: url(../images/Design.png); margin: 0; padding: 0; width: 80vw; } header, footer, nav, article { display: block; } header { width: 100%; position: relative; display: block; height: 90px; background-color: #fff; padding-right: 240px; } .head img { position: relative; height: 60px; top: 15px; left: 170px; } p.logo { position: relative; margin: 0; left: 240px; bottom: 35px; font-size: 26px; font-family: Arial, Helvetica, sans-serif; } img.arrow { height: 117px; left: 900px; position: absolute; top: 0; } img.arrow2 { height: 117px; left: 860px; position: absolute; top: 0; } .line { height: 3px; min-width: 100%; width: 100%; background-color: #9F9FA1; padding-right: 240px; } nav { height: 72px; width: 1000px; transform: translateX(145px); margin: 0 5px 5px; } .main li { display: inline; font-size: 15px; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; } .main li a { padding: 15px 25px; text-decoration: none; color: #070707; transition: border-radius 0.5s, background-color 0.5s, color 0.5s; } .main li a:hover { color: #070DFD; background-color: #AECCE5; border-radius: 3px; } ul.main { margin: 0; padding-top: 28.5px; padding-bottom: 28.5px; padding-left: 30px; } .maincont { height: 100%; width: 1000px; background-image: linear-gradient(to bottom, #F3F6F8, #D4E5F3) ; box-shadow: 3px 3px 3px #7F7C7C; transform: translateX(150px); padding-top: 9px; border-radius: 5px; } .sidebar { width: 250px; margin: 0; height: 100% border-right: 1px solid #8C8B8B; } aside.first { width: 100%; height: 470px; } .first h1 { margin: 21px 0 20px 20px; text-transform: uppercase; font-size: 21px; color: #1A62F6; font-family: Arial, Helvetica, sans-serif; } .first li { list-style-type: circle; font-family: Arial, Helvetica, sans-serif; } .first li a { display: block; font-size: 18px; line-height: 18px; padding: 15px 15px; text-decoration: none; color: #070707; transition: border-radius 0.5s, background-color 0.5s, color 0.5s; } .first li a:hover { color: #070DFD; border-radius: 3px; background-color: #AECCE5; } .second img { padding-left: 25px; } .header { width: 100%; } footer { height: 80px; width: 100%; background-color: #666464; padding-right: 240px; margin: 15px 0 5px 0; }

Добрый день уважаемые! Подскажите, пожалуйста, как заставить свойство transition выполняться одновременно на нескольких элементах (div) Вот код: <div class="anim"> <div class="mbez" style="transition: width 3s ease;"></div><div class="mbez" style="transition: width 3s linear;">;</div><div class="mbez" style="transition: width 3s ease-in;"></div><div class="mbez" style="transition: width 3s ease-out;"></div><div class="mbez" style="transition: width 3s ease-in-out;">;</div><div class="mbez" style="transition: width 3s step-start;"></div><div class="mbez" style="transition: width 3s step-end;"></div></div> И стили: div.mbez {width: 250px; height: 50px; background: #F97B16; border: 1px solid #A13F0A; padding: 5px 10px; font-size: 14px; font-style: italic; cursor: pointer;} div.mbez:hover {width: 550px;} div.anim {cursor: pointer;} Нужно чтобы при наведении на область общего блока <div class="anim"></div> выполнялось свойство transition на всех блоках <div class="mbez"></div> одновременно. Буду благодарен за помощь!