|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
26.07.2012, 15:29 | #1 |
Форумчанин
Регистрация: 07.12.2011
Сообщений: 112
|
Выравнять label по центру input
Господа, подскажите плиз как выравнять label по центру input?
Сейчас Username и Password находятся слева, а должны быть в центре полей input. Вот полный код страницы: Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css" media="all"> body { font-size: 1em; font-family: arial,helvetica,sans-serif; } h1 { font-size:1.3em; } form#login { padding:6px; position:relative; border:1px solid grey; } div#username, div#password { position:relative; margin-right:3px; } input#username-field, input#password-field { width:10em; } label.overlabel { color:#999; } label.overlabel-apply { position:absolute; top:3px; left:5px; z-index:1; color:#999; cursor:text; } </style> <script type="text/javascript"> function initOverLabels () { if (!document.getElementById) return; var labels, id, field; // Set focus and blur handlers to hide and show // LABELs with 'overlabel' class names. labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { if (labels[i].className == 'overlabel') { // Skip labels that do not have a named association // with another field. id = labels[i].htmlFor || labels[i].getAttribute('for'); if (!id || !(field = document.getElementById(id))) { continue; } // Change the applied class to hover the label // over the form field. labels[i].className = 'overlabel-apply'; // Hide any fields having an initial value. if (field.value !== '') { hideLabel(field.getAttribute('id'), true); } // Set handlers to show and hide labels. field.onfocus = function () { hideLabel(this.getAttribute('id'), true); }; field.onblur = function () { if (this.value === '') { hideLabel(this.getAttribute('id'), false); } }; // Handle clicks to LABEL elements (for Safari). labels[i].onclick = function () { var id, field; id = this.getAttribute('for'); if (id && (field = document.getElementById(id))) { field.focus(); } }; } } }; function hideLabel (field_id, hide) { var field_for; var labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { field_for = labels[i].htmlFor || labels[i].getAttribute('for'); if (field_for == field_id) { labels[i].style.textIndent = (hide) ? '-1000px' : '0px'; return true; } } } window.onload = function () { setTimeout(initOverLabels, 50); }; </script> </head> <body> <table border="1" cellpadding="9" cellspacing="0" width="100%"> <tr align="center"> <td> <form id="login" action="#" method="post"> <div id="username"> <label for="username-field" class="overlabel">Username</label> <input id="username-field" type="text" name="username" title="Username" value="" tabindex="1" /> </div> <div id="password"> <label for="password-field" class="overlabel">Password</label> <input id="password-field" type="password" name="password" title="Password" value="" tabindex="2" /> </div> <div id="submit"> <input type="submit" name="submit" value="Login" tabindex="3" /> </div> </form> </td> </tr> </table> </body> </html> |
26.07.2012, 15:39 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Это делается атрибутом placeholder, а не лейблом.
Alar, верни репу!
|
26.07.2012, 15:43 | #3 |
Форумчанин
Регистрация: 07.12.2011
Сообщений: 112
|
|
26.07.2012, 16:28 | #4 |
Форумчанин
Регистрация: 08.07.2010
Сообщений: 679
|
А давайте я Вас поправлю. Тег label вы никак не запихаете внутрь input, если только не расположить его сверху с помощью абсолютного позиционирования, что глупо. То что вы пытаетесь сделать судя по всему и есть placeholder, о чем вам уже сказали. В противном случае абсолютно не понятно что вы хотите изобразить.
|
26.07.2012, 16:40 | #5 | |
Форумчанин
Регистрация: 07.12.2011
Сообщений: 112
|
Цитата:
Я тщательно подошёл к вопросу - и узнал, что тот кто юзает placeholder в данной ситуации, тот делает ошибку |
|
26.07.2012, 17:38 | #6 | |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Использование для этого Label`a — костыль начала 2000х. В стандарте HTML5 для этой цели специально был введен placeholder. По полочкам:
1) с отключенными (рухнувшими) скриптами лейбл никуда не денется и будет мешать набору текста; 2) плейсхолдер будет работать без скриптов (во взрослых браузерах, конечно); 3) семантическая задача лейбла — создание зависимости между поясняющим текстом и инпутом, а не нагромождать его поверх инпута; 4) Цитата:
5) валидная верстка HTML5 не требует костылей и велосипедов для тривиальных задач. По-сути любую страницу можно сверстать используя одни только дивы с тоннами CSS & JS, только зачем? Ведь есть ссылки, таблицы, инпуты, картинки, кнопки, селекты, списки... не говоря уже о новых тегах и атрибутах HTML5.
Alar, верни репу!
|
|
26.07.2012, 17:54 | #7 | |
Форумчанин
Регистрация: 07.12.2011
Сообщений: 112
|
Спасибо за детальные пояснения.
Но почему Яндекс использунт именно lable, а не placeholder в почтовом боксе? Они это делают специально я думаю. Мне тоже нужно надёжно и чтобы работало в старых браузерах. Цитата:
|
|
26.07.2012, 21:27 | #8 | ||
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Цитата:
Прямо как в этой цитате с баша: Цитата:
Alar, верни репу!
|
||
26.07.2012, 23:16 | #9 | |
Форумчанин
Регистрация: 07.12.2011
Сообщений: 112
|
Мне тоже нужна кроссбраузерность широкая.
Ведь HTML5 не поддерживается старыми браузерами. Цитата:
|
|
27.07.2012, 12:48 | #10 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Я говорил про неоправданную кроссбраузерность, включающую в себя поддержку ИЕ4 (упаси хоспаде), фф1, навигатора и конкъерора.
Даже для ИЕ6+ уже можно неопасаясь верстать православными слоями, а не таблицами
Alar, верни репу!
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Размещение по центру | Vitaliy> | HTML и CSS | 3 | 16.07.2012 15:09 |
Выравнять текст на MsgBox | VistaSV30 | Microsoft Office Access | 1 | 25.12.2009 15:34 |
выравнивание по центру | ruavia3 | Microsoft Office Access | 5 | 03.12.2009 09:30 |
При расположении Label на компонентах, место под Label, не реагирует на событие onClick. | NavigatorNeba | Компоненты Delphi | 3 | 15.11.2008 19:56 |
Вопрос по label. Как сделать так чтобы label была прозрачной. | Lonix | Компоненты Delphi | 2 | 01.04.2007 06:23 |