Блок поверх страницы
Суть в следующем.
Мне нужно наверное что-то типа шаблона. То есть, есть веб-страница. В ней есть основное поле, занимающее все поле окна браузера. И мне нужно поверх этого поля выводить окно с формой для ввода пароля. Суть моего пожелания в том, что независимо от того, что «нарулят» потом (уже не я) в «основном поле» после открытия страницы поверх появлялось мое окно с формой ввода пароля. Надеюсь, хоть кто-то поймет то, что я тут понаписал.
Вопрос такой — мне что гуглить? С учетом того, что это должно быть решено именно с помощью HTML
Рисование поверх страницы
Привет. Ребята, думаю над следующей задачей — есть страничка, поверх которой мне надо.
Открытие окна поверх html-страницы
Здравствуйте! Есть задача на html странице при выборе ссылки, что бы открывалось небольшое окно.
Блок поверх другого
Не получается установить блок content по верх блока doska, после того как вставил в doska.
Блок поверх остальных
Здравствуйте! Как сделать, чтобы один блок находился "над" остальными, как-бы налаживался поверх.
навскидку глянул — эт похоже на jqery или js. причем затеняет остальной фон.
а варианты именно html ?
может какой-то вариант, чтобы например div нагромождался поверх всей остальной страницы?
ну тебе же не нужно, чтобы форма висела всегда поверх окна? если тебе надо её отображать/скрывать, нужен javascript. тут уже html не поможет — он не для этого. а затенение фона и прочие приблуды там настраиваются
мне КАК РАЗ ИМЕННО ЭТО И НУЖНО, чтобы форма висела поверх основного окна.
Все вместе — это страница авторизации. Страница формируется скриптом на пхп или перле. В ней есть всякая белиберда по всему размеру окна. Какой будет эта белиберда — от меня не зависит. Ее дизайн будут лепить «на свой вкус и цвет» другие, те, кто будет пользоваться этой страницей авторизации. Причем, сменить «типовой» дизайн на свой собственный — у этих «других» прямо мечта какая-то..
Я в скрипте обозначаю какую-нибудь переменную типа «custom_body» и в нее вкидываю весь тот дизайн, что слепят эти самые «другие». И в работе скрипта вывожу содержимое этой переменной — на экране браузера появляется тот самый дизайн, что слепили «другие».
А потом как раз мой скрипт поверх всей этой ихней лабуды выводит мой блок, в котором просто есть стандартная форма с полем для ввода пароля. При этом мне глубоко по барабану, что именно там в их дизайне закроет этот блок.
Как добавить кнопку поверх поля для ввода?
Как добавить кнопку в строке ввода, чтобы это выглядело примерно так? Вот мой код:
Search U.K. house price data
Кнопка появляется снизу. В чём проблема? Как, вообще, примерно должен выглядеть код для всей строки?
Вопрос помечен тегом bootstrap. В бутстрапе есть специальные классы для этого: form-group для оборачивания и input-group-addon для запихивания кнопок/значков на инпуты. Больше описания здесь
5 ответов 5
* < padding: 0; margin: 0; box-sizing: border-box; >form < display: inline-block; vertical-align: top; position: relative; >input[type="search"] < outline: none; border: 2px solid #222; padding: 5px 100px 5px 30px; display: block; width: 100%; height: 50px; background: #fff; border-radius: 25px; >button[type="submit"] < position: absolute; top: 7px; right: 10px; z-index: 9; outline: none; border: none; display: inline-block; background: #00f; color: #fff; padding: 10px 25px; border-radius: 25px; cursor: pointer; >button[type="submit"]:hover
Вариант 1: Вы можете воспользоваться абсолютным позиционированием. Разместить кнопку поверх input с помощью z-index.
Вариант 2: Разместить кнопку справа от поля ввода, с помощью дизайна кнопки притвориться частью поля ввода.
Для этого существует input groups, вам надо кастомизировать button addons
А почему у вас Search получился в рамке? Как в том месте вставить картинку? И чтобы она была не в рамке.
Связанные
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.27.43548
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.