Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Помогите с выравниванием столбцов в строке таблицы
 
 автор: Sproot   (22.07.2008 в 23:23)   письмо автору
 
 

Доброго времени суток. У меня такая проблема. В строке таблицы 6 столбцов. Вот код этой строки

<tr>
 <td class="bort_2">
 </td>
 <td align="center" class="error_warning_log">
 </td>
 <td class="in_form" align="right" valign="center">
   <form action="#" method="post">
   <b><font>Логин:</font></b>
   <input type="text" name="login" size="29">
   <b><font>Пароль:</font></b>
   <input type="password" name="pas" size="29">
   <input type="submit" name="check_log" value="Вход">
   </form>
  </td>
  <td align="center" class="reg_href">
    <a href="reguser.php" class="navigation"><b>Забыли пароль</b></a>
  </td>
  <td align="center" class="reg_href">
   <a href="reguser.php"><b>Регистрация</b></a></td>
  <td class="bort_3">
  </td>
 </tr>

Для каждого td в цсс задан параметр ширины. Вот код css

TD.in_form {width:440px} 
TD.error_warning_log {width:390px}
TD.ref_href {width:50px}
TD.forgotten_password {width:110px}
TD.bort_2 {width:12px}
TD.bort_3 {width:12px}

Полная ширина таблицы 1014. Но почему-то
TD.error_warning_log
не отбражается с нужной шириной, а отображается будто параметр вовсе не задан.

   
 
 автор: PAT   (23.07.2008 в 02:25)   письмо автору
 
   для: Sproot   (22.07.2008 в 23:23)
 

Принудительно указываемая ширина ячеек таблицы для браузера - величина РЕКОМЕНДАТЕЛЬНАЯ, а никак не ОБЯЗАТЕЛЬНАЯ.
Главный принцип браузера - ПОКАЗАТЬ юзеру ВСЮ информацию.

Т.е. если вы напишете <td style="width: 10px">, а в ячейку вложите картинку размером 200 пикселей по ширине, то браузер "плюнет" на ваш стиль и сделает ширину ячейки такой, чтобы вся картинка ПОЛНОСТЬЮ в неё влезла.


Но, в принципе, добиться точной (до пиксела) ширины таблицы и её ячеек вполне можно.
Если ВОВСЕ не задавать ячейкам ширину, а исходить из ширины внутреннего наполнения каждой ячейки.

Последовательность действий такая:

1. Обязательно прописать в теге <TABLE> атрибуты CELLSPACING="0" и CELLPADDING="0"

2. Ширину всей таблицы нигде не указывать - ни в стилях, ни в атрибуте WIDTH таблицы.

3. Для пустых ячеек (а они у вас есть, например, с классом error_warning_log) - надо обязательно в них "вкладывать" неразрывный пробел &#160; и указывать ширину ячейки в стиле.

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

5. Форму внутрь ячейки "засовывать" не надо. Вполне можно теги <form> и </form> прописать вовсе ВЫШЕ и НИЖЕ таблицы.

6. Теги ячеек прописывать НЕРАЗРЫВНО, т.е. код любой ячейки всегда должен быть или в ОДНУ строку - вот так:
<td><input name="f1"><br><input type="submit"></td>

Или же должен содержать "переходящие" теги - вот так:
<td
><input name="f1"
><br
><input type="submit"
></td
>



И учтите ещё одно соображение - как бы вы не ухитрялись с шириной, у юзера есть кнопочка "Увеличить/уменьшить шрифт/масштаб". Как только юзер этой кнопочкой воспользуется - все ваши усилия пойдут прахом. Избежать принудительного увеличения/уменьшения масштаба юзером можно только в браузере MSIE. Во всех всех прочих браузерах юзер возможность изменить масштаб будет иметь ВСЕГДА.

   
 
 автор: winflip   (23.07.2008 в 09:01)   письмо автору
 
   для: PAT   (23.07.2008 в 02:25)
 

А может лучше воткнуть картинку с цветом фона на всю ширину?

   
 
 автор: mihdan   (24.07.2008 в 12:36)   письмо автору
 
   для: Sproot   (22.07.2008 в 23:23)
 

В каждой ячейке сделайте так:

<style>
div.hidden {
   overflow: hidden;
}
</style>


<td><div class="hidden">содержимое ячейки</div></td>

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования