VPF::Резиновый дизайн и высота таблицы

barcelona

Дата 11.10.2007, 16:15 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 21.4.2007

Репутация: нет
Всего: нет

Здравствуйте!
У меня на странице есть таблица следующего рода:

Код


<table width="100%" height="121" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="121"><img src="images/emblem.jpg" style="margin-left:13px; float:left; margin-right:19px;"></td>
            <td height="121"><span style="color:#000000; font-family:'Times New Roman', Times, serif; font-size:24px; height:121px;">Мой текст, текст, текст...</span></td>
            <td width="292" height="121"><img src="images/people.jpg" width="292" height="121"></td>
         </tr>
</table>

Хочу сделать резиновый дизайн, чтобы страница занимала всё окно броузера. Но возникла проблема: когда я уменьшаю окно, колонка "Мой текст, текст, текст..." тоже уменьшается (ширина её не задана) и когда не вмещает текст, начинает расти в высоту, а мне бы хотелось, чтобы она достигала криитического минимума и появлялись полосы прокрутки, а высота ячейки не менялась. Как это сделать?
Заранее спасибо.

SelenIT

Дата 11.10.2007, 16:40 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

barcelona, в стили span-а в 4-й строке добавьте "overflow: auto;".

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

barcelona

Дата 11.10.2007, 16:49 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 203
Регистрация: 21.4.2007

Репутация: нет
Всего: нет

Нет, мне нужны полосы прокрутки у всего окна, а overflow: auto; задают полосы для отдельного элемента.

Illuminaty

Дата 11.10.2007, 17:28 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Так что ли?

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
html, body {
    height: 100%;
    background-color: #FFFFFF;
    margin: 0px;
    padding: 0px;
}
#mainTable {
    height: 100%;
    width: 100%;
}
</style>
</head>
<body> 
<table id="mainTable" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td><img src="images/emblem.jpg" style="margin-left:13px; float:left; margin-right:19px;"></td> 
    <td style="background-color:#FFFF00; "><span style="color:#000000; font-family:'Times New Roman', Times, serif; font-size:24px; height:121px;">Мой текст, текст, текст...</span></td> 
    <td width="292px"><img src="images/people.jpg" width="292px" height="121px"></td> 
  </tr> 
</table> 
</body>
</html>

SelenIT

Дата 11.10.2007, 21:13 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

А, кажется до меня дошло. Я зациклился на фразе "высота не должна меняться", а на деле задача - ограничить минимальную ширину.

Имхо, самое железное кроссбраузерное решение - невидимая распорка а-ля

Код


<div style="width:200px; height:1px; overflow:hidden;margin-bottom: 1px;"></div>

в этой ячейке перед span-ом, хоть это и жутко несемантично. В идеальном мире хватило бы указать для самого span-а min-width. Но увы, IE его не понимает (можно эмулировать с помощью expression, но это работает только при включенном JS)...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Vladimir3

Дата 15.10.2007, 14:47 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 18
Регистрация: 6.8.2007
Где: Винница

Репутация: нет
Всего: нет

Решил такую-же проблему для своего сайта. Делаем с помощью таблицы(<table>)

Код


<table width="100%">
  <tr>
    <td width="200px" width="1px"></td>
    <td width="100%" width="1px"></td>
  </tr>
  <tr>
    <td width="100%" colspan="2">Сдесь вставляем текст или другое. Минимальный размер 200px.  Максимальный 100%. можно изменить на другой. </td>
  </tr>
</table>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »