Возникли проблемы с настройкой внешнего вида веб-элемента управления

Я пытаюсь настроить внешний вид веб-элемента управления входом, но у меня довольно много проблем. Насколько я понимаю, я все настроил правильно, но управление почему-то все равно отображается некорректно:


а) Ширина двух элементов управления TextBox (с идентификаторами UserName и Password) должна быть равна 70% ширины таблицы, но это не так, хотя я Мы установили их атрибуты ширины. Любая идея, почему это так?


b) Если в ячейках таблицы, содержащих элементы управления lblPassword и lblPassword, для свойства text-align установлено значение center, то lblPassword и lblPassword переполняются. Это почему?


    <div id="loginbox">
       <asp:Login ID="Login1" runat="server" Width="100%" FailureAction="RedirectToLoginPage"
                    RememberMeSet="false">
                    <LayoutTemplate>
                        <table>
                            <tr>
                                <td style="padding:6px;text-align:center;">
                                    <asp:Label ID="lblUserName" Width="30%"  runat="server" Text="UserName "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="UserName" Width="70%" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding:6px;text-align:center;" >
                                    <asp:Label ID="lblPassword" Width="30%" runat="server" Text="Password "></asp:Label>
                                </td>
                                <td>
                                    <asp:TextBox ID="Password" Width="70%" runat="server"></asp:TextBox>
                                </td>
                            </tr>
                        </table>
                    </LayoutTemplate>
                </asp:Login>

  #loginbox
  {
      position: absolute;
      top: 16px;
      right: 30px;
      width: 180px;
      height: 80px;
      padding: 2px 2px 2px 2px;    
      font-size: 9px;
      margin:0px;
  }


очень признателен


РЕДАКТИРОВАТЬ:

Этот код сообщает браузеру, что диапазон должен быть на 70% меньше, чем TD. Единственный элемент, сообщающий TD, какая ширина должна быть, — это span, который должен быть на 70% меньше, чем TD. Таким образом, TD просто использует текст внутри диапазона, чтобы указать, насколько большим он должен быть.

Тогда это поведение отличается от моего примера с текстовыми полями, поскольку, насколько я понимаю ваш аргумент, в приведенном выше случае элемент span (т. е. текст внутри span) отображался с использованием ширины по умолчанию, в то время как TD адаптировал свою ширину на 70% больше чем ширина диапазона по умолчанию?! Но в случае элементов управления TextBox ширина, используемая для элементов управления TextBox, не была их шириной по умолчанию D, но вместо этого их ширина также была уменьшена (назовем это уменьшенной шириной TextBox W), поэтому TD не был на 70% больше, чем D, но вместо этого TD был на 70% больше, чем W (где W ‹ D)?! Но как браузер придумал ширину W?


Теперь TD справа хочет быть равным 70% ширины строки (TR), которая равна ширине TABLE. В этом случае ТД слева определяет конечный размер таблицы, так как ее содержимое должно составлять 30% ширины таблицы.

Почему вы говорите, что элемент слева определяет размер таблицы? Разве левый и правый TD не определяют окончательный размер стола?


спасибо приятель


ВТОРОЕ РЕДАКТИРОВАНИЕ:


а) Я понимаю, что две ячейки должны иметь размеры относительно друг друга, но я не уверен, что понимаю, как 55px/30%*70% дает нам правильный результат? Во всяком случае, формула не должна быть 55 * 100% / 30% (здесь 55px представляет 30% ширины правой ячейки) или 55 * 100% / 70% (здесь 55px представляет 70% ширины левой ячейки)?!


б) Что, если бы элементы span в этих двух ячейках имели разную ширину? Как тогда браузер вычислит ширину двух ячеек?


в) Я предполагаю, что если бы у таблицы была указана ширина, то ширины двух ячеек были бы не относительно друг друга, а относительно ширины таблицы?


Спасибо, приятель


ТРЕТЬЕ РЕДАКТИРОВАНИЕ:


A) Насколько я понимаю ваше объяснение, браузер вычисляет ширину двух ячеек следующим образом:

  • Левая ячейка имеет ширину, установленную на 30% от некоторого значения, и формула 55px * 100% / 30% = 183px* говорит нам, что ширина левой ячейки (то есть 55px) составляет 30% от 183px.

  • Это также означает, что правая ячейка имеет ширину, равную 70% от 183 пикселей, что составляет 183 * 70% / 100% = 124 пикселей. Таким образом, ширина левой и правой колонок составляет 30% от 183 пикселей и 70% от 183 пикселей соответственно.


B) Но я думал, что термин, который вы использовали в своем объяснении --> "ширины левой и правой ячеек должны быть относительно друг друга" ‹-- означает, что браузер должен вычислять ширину одним из следующих двух способов:

а) ширина левой ячейки должна составлять 30% от ширины правой ячейки. Поскольку левая ячейка имеет ширину 55 пикселей, где 55 пикселей представляют 30% ширины правой ячейки, тогда ширина правой ячейки будет 55 пикселей * 100% / 30% = 183 пикселей.

            OR

б) ширина правой ячейки должна составлять 70% от ширины левой ячейки. Поскольку правая ячейка имеет ширину 55 пикселей, где 55 пикселей представляют 70% ширины левой ячейки, тогда ширина левой ячейки будет 55 пикселей * 100% / 70% = 78 пикселей.


person carewithl    schedule 11.01.2010    source источник


Ответы (1)


Когда ширина в текстовом поле установлена ​​на 70%, он сообщает браузеру, что элемент должен составлять 70% ширины своего контейнера — в данном случае TD. Вместо этого вы должны установить ширину TD на 70%, а затем ширину текстового поля на 100%. Как это:

<td style="width: 70%;">
    <asp:TextBox ID="UserName" Width="100%" runat="server"></asp:TextBox>
</td>

Сделайте это и для этикеток.


Чтобы ответить на комментарии:

Рассмотрим порядок событий, который браузер использует для определения размера TD. Если у вас есть следующее:

<html>
<body>
<table border="1">
    <tr>
         <td><span style="width: 30%;">ASDF</span></td>
         <td><span style="width: 70%;">ASDF</span></td>
    </tr>
<table>
</body>
</html>

Этот код сообщает браузеру, что диапазон должен быть на 70% меньше, чем TD. Единственный элемент, сообщающий TD, какая ширина должна быть, — это span, который должен быть на 70% меньше, чем TD. Таким образом, TD просто использует текст внутри диапазона, чтобы указать, насколько большим он должен быть.

Переключение на это:

<html>
<body>
<table border="1">
    <tr>
         <td style="width: 30%;"><span>ASDF</span></td>
         <td style="width: 70%;"><span>ASDF</span></td>
    </tr>
<table>
</body>
</html>

Теперь TD справа хочет быть равным 70% ширины строки (TR), которая равна ширине TABLE. В этом случае ТД слева определяет конечный размер таблицы, так как ее содержимое должно составлять 30% ширины таблицы.


Редактировать 2

Браузер попытается интерпретировать HTML и отобразить то, что, по его мнению, пытается сделать HTML, потому что HTML очень часто плохо сформирован. Подобный код не имеет смысла <td><span style="width: 70%;">ASDF</span></td>, так как диапазон говорит, что он должен быть на 70% меньше, чем TD, но TD не имеет определенного размера. Поскольку он не имеет определенного размера, он получает свой размер из своего содержимого. В конце значение ширины диапазона игнорируется. Вы можете видеть, что все эти вещи приводят к одному и тому же результату:

<td><span style="width: 1%;">ASDF</span></td>
<td><span style="width: 70%;">ASDF</span></td>
<td><span style="width: 200%;">ASDF</span></td>

Вот упрощенная версия того, что для этого делает браузер:

<td><span style="width: 70%;">ASDF</span></td>
  • Нашел ТД
  • TD не имеет ширины, его TR и TABLE также не имеют установленной ширины, поэтому необходимо определять ширину на основе содержимого.
  • Содержимое SPAN
  • SPAN имеет ширину 70%, поэтому SPAN должен составлять 70% ширины TD (запомните это позже).
  • SPAN содержит обычный текст, отрисовывает текст и измеряет ширину, скажем, до 55 пикселей.
  • Сообщите SPAN, что его ширина должна быть минимум 55 пикселей (поскольку свойство переполнения не установлено).
  • Какое значение больше? 55 пикселей или 70% ширины ТД? 55 пикселей > не определено
  • Установите ширину SPAN на 55 пикселей.
  • Установите ширину TD на 55 пикселей.

В этот момент браузер будет возвращаться к HTML, так как была установлена ​​родительская ширина, это будет второй проход при определении размера элементов.

  • TD имеет ширину 55 пикселей
  • SPAN имеет ширину 70%, поэтому SPAN должен составлять 70% ширины TD.
  • Какое значение больше? 55 пикселей или 70% ширины ТД? 55 пикселей > 39 пикселей
  • Сохраняйте ширину SPAN на уровне 55 пикселей.
  • Проверьте ширину текста, без изменений
  • Проверьте ширину SPAN, без изменений
  • Проверьте ширину TD, без изменений

Таким образом, в этот момент браузер прошел по HTML, а затем вернулся к TD, внес изменение, затем вернулся и снова вышел.

Тот же самый процесс происходит при определении ширины нескольких ячеек в строке. В этом примере:

<tr>
<td><span style="width: 30%;">ASDF</span></td>
<td><span style="width: 70%;">ASDF</span></td>
</tr>

Каждый TD вычисляет свою ширину отдельно и в результате получается 55px каждый, потому что ничто не говорит TD, что они должны иметь размеры относительно друг друга.

Переключитесь на следующий код, и внезапно каждый TD будет иметь ширину 55 пикселей, но затем стиль сообщает браузеру, что они должны быть относительно друг друга. Таким образом, правый столбец получает дополнительные пиксели и в конечном итоге имеет размер 55 пикселей / 30% * 70% = 128 пикселей.

<tr>
<td style="width: 30%;"><span>ASDF</span></td>
<td style="width: 70%;"><span>ASDF</span></td>
</tr>

Почему браузер использует левый столбец для определения размера правого столбца? Простые браузеры будут вычислять его в обоих направлениях и выяснять, какой из них по-прежнему соответствует минимальной ширине, указанной TD. Этот расчет приведет к тому, что ширина левого столбца будет меньше минимальной ширины, необходимой для его содержимого: 55 пикселей / 70% * 30% = 24 пикселя.


Чтобы ответить на ваше второе редактирование, a/b - браузер обычно должен вычислять его в обоих направлениях, а затем определяет, какой из них имеет больше смысла с учетом ограничений. Вероятно, у него есть сложные алгоритмы, чтобы определить, действительно ли ему нужно видеть, имеете ли вы в виду, что 30% - это ограничение слева или 70% - определяющее ограничение справа. Кроме того, если вы умножаете что-то на 100 %, оно не меняется, так как это то же самое, что умножать что-то на 1. Таким образом, 55 пикселей * 100 % / 30 % (или 55 * 1 / 0,3) — это то же самое, что 55 пикселей/30 %. (или 55/0,3).

Вы должны подумать о том, чтобы подойти к этим типам проблем по-другому. После создания HTML-кода вам нужно четко указать, что браузер должен делать с размером и интервалом, если значение по умолчанию не соответствует вашим требованиям. Если вы просто установите что-то на 30%, вы, вероятно, не предоставите браузеру достаточно информации, чтобы сделать последовательный выбор. Даже если есть спецификация HTML, которая говорит, что должно произойти, это не всегда ясно. И разные браузеры реализуют это по-разному, поскольку браузер может выполнить сотни шагов, чтобы отобразить страницу.

В вашем исходном примере, например, метка и текстовое поле должны иметь ширину в пикселях, чтобы правильно соответствовать вашему графическому дизайну, если размеров по умолчанию недостаточно. Делая что-либо еще, вы оставляете это на усмотрение браузера, потому что элементам html не хватает контекста, чтобы быть согласованными.

Чтобы поиграть с тем, что браузеры делают в разных сценариях, просто попробуйте создать небольшую html-страницу, которая удаляет все, что вы не тестируете. Затем корректируйте одну вещь за другой, пока это не станет понятным, это единственный способ изучить что-то столь сложное, как расположение таблиц в браузере. Если происходит что-то противоположное тому, что, по вашему мнению, должно произойти, опубликуйте пример в новом вопросе на этом сайте, и кто-нибудь укажет вам на спецификацию HTML, объясняющую, что должно произойти. Я рекомендую этот сайт: http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_tables

person DavGarcia    schedule 11.01.2010
comment
А откуда взялась ширина ячейки таблицы ( ‹td› )? Это означает, что если я явно не устанавливаю ширину ячейки таблицы и если отступ в ячейке таблицы установлен равным нулю, то не должна ли ширина ячейки таблицы равняться (или быть немного больше) ширине элемент, который он содержит? - person carewithl; 11.01.2010
comment
Я добавлю свой комментарий к ответу выше, так как здесь недостаточно места. - person DavGarcia; 12.01.2010
comment
В ответ на ваш ответ я отредактировал свой первоначальный пост ... извините, что продолжаю тянуть это - person carewithl; 12.01.2010
comment
Прошу прощения за то, что был таким толстым. В любом случае, я добавил второе редактирование в свой первоначальный пост… на случай, если вы еще не разочаровались в моих гороховых мозгах. - person carewithl; 14.01.2010
comment
+1 за такое подробное объяснение того, как браузер может определить, как рисовать интерфейс. - person Ryan Joy; 16.01.2010
comment
Если вы найдете время — я добавил третью правку в свой пост, чтобы объяснить, что меня смутило в вашем объяснении. В любом случае, спасибо миллион за помощь мне - person carewithl; 18.01.2010