PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

возможно ли такое с помощью CSS

Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS (Модераторы: ALEN, armancho7777777)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

Ex	Отправлено: 07 Апреля, 2014 - 16:48:34
Частый гость Покинул форум Сообщений всего: 189 Дата рег-ции: Июнь 2013 Помог: 0 раз(а)	у меня сверху сбоку сайта есть форма авторизации, поля для логина и пароля, и плюс кнопка "войти" и ссылка на регистрацию. Я ее сделал так, если на нее не наводить, она спрятана, и выглядывает только кусочек.(то есть с помощью :hover) когда на нее наводишь, она выезжает на "полный рост". Так вот, можно ли сделать так, если нажать на поле ввода логина или пароля, или же нажать на саму форму эту, что бы оно не уезжало обратно, если мышку отвести вбок?

LIME	Отправлено: 07 Апреля, 2014 - 16:55:05
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	Цитата: form:focus{ # отображать } то есть к ховеру через запятую добавь и фокус (Добавление) это если инпуты в фокусе для клика по форме CODE (javascript): скопировать код в буфер обмена $('#form').click(fuction(){ $(this).toggleClass('show'); }); и этот класс тоже в стили добавить для отображения

Ex	Отправлено: 07 Апреля, 2014 - 17:07:25
Частый гость Покинул форум Сообщений всего: 189 Дата рег-ции: Июнь 2013 Помог: 0 раз(а)	добавил фокус :focus , в итоге если нажать на поле логина или пароля, оно переделывает весь блок в строку ввода бред какой то получается

LIME	Отправлено: 07 Апреля, 2014 - 17:11:18
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	а пример css привести нельзя догадаться? и кусок html бы не помешал хотя думаю весь бред в css

Ex	Отправлено: 07 Апреля, 2014 - 17:13:29
Частый гость Покинул форум Сообщений всего: 189 Дата рег-ции: Июнь 2013 Помог: 0 раз(а)	CODE (html): скопировать код в буфер обмена <div id="log_in"> <form method="post" action=""><table> <tr><td>Логин: </td><td><input type="text" size="15" name="login"/></td></tr> <tr><td>Пароль: </td><td><input type="password" name="password" size="15"/></td></tr> <tr><td><input type="submit" value="Войти"/></td><td></td></tr> </table></form> <a href="http://my/Site/pages/register.php"><u>Регистрация</u></a> <hr /><center><h4 style="color:#036;">Авторизация</h4></center></div> CODE (htmlphp): скопировать код в буфер обмена #log_in { background:#CCC; width:250px; height:110px; position:fixed; top:-88px; right:100px; box-shadow: 0 0 15px 1px #000; font-size:14px; border-radius: 0 0 15px 15px; transition:1.5s; } #log_in:hover { background:#CCC; width:250px; height:110px; position:fixed; top:0; right:100px; box-shadow: 0 0 15px 1px #000; font-size:14px; border-radius: 0 0 15px 15px; transition:1.5s; }

LIME	Отправлено: 07 Апреля, 2014 - 18:22:57
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	не...я ошибался...в такой верстке стилями не обойтись Спойлер (Отобразить) CODE (html): скопировать код в буфер обмена <style> #log_in { background:#CCC; width:250px; height:110px; position:fixed; top:-88px; right:100px; box-shadow: 0 0 15px 1px #000; font-size:14px; border-radius: 0 0 15px 15px; transition:0.5s; } #log_in:hover, #log_in.show { background:#CCC; width:250px; height:110px; position:fixed; top:0; right:100px; box-shadow: 0 0 15px 1px #000; font-size:14px; border-radius: 0 0 15px 15px; transition:0.5s; } </style> <form method="post" action="" id="log_in"> <table> <tr><td>Логин: </td><td><input type="text" size="15" name="login"/></td></tr> <tr><td>Пароль: </td><td><input type="password" name="password" size="15"/></td></tr> <tr><td><input type="submit" value="Войти"/></td><td></td></tr> </table> <a href="http://my/Site/pages/register.php"><u>Регистрация</u></a> <center><h4 style="color:#036;">Авторизация</h4></center> </form> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script> $('#log_in').click(function(){ $(this).toggleClass('show'); }); </script>

Ex	Отправлено: 07 Апреля, 2014 - 19:00:25
Частый гость Покинул форум Сообщений всего: 189 Дата рег-ции: Июнь 2013 Помог: 0 раз(а)	спасибо большое то что нужно. а можно еще улучшить вот так: что бы не на любую точку блока нажимать и оно фиксируется, а именно на конкретную? у меня получается блок где форма авторизации, и в самом низу слово "авторизация" когда блок запрятан (не выделен) выглядывает только это слово. как сделать, что бы блок фиксировался только при нажатии на это слово(на этот кусочек блока)? я пробовал химичить с твоим кодом, но не то получается что хочется

LIME	Отправлено: 07 Апреля, 2014 - 19:04:27
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	CODE (html): скопировать код в буфер обмена <center id="clickToShow"><h4 style="color:#036;">Авторизация</h4></center> CODE (javascript): скопировать код в буфер обмена $('#lclickToShow').click(function(){ $(this).parent().toggleClass('show'); });

Ex	Отправлено: 07 Апреля, 2014 - 19:27:29
Частый гость Покинул форум Сообщений всего: 189 Дата рег-ции: Июнь 2013 Помог: 0 раз(а)	LIME Спасибо, ты мой спаситель

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« HTML, Дизайн & CSS »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.