[HTML] резиновая верстка

maxiim9

Постановка задачи: нужно сверстать макет, у которого часть блоков должна тянуться с разными коэффициентами по горизонтали.
Например:
1-я колонка тянется с коэффициентом 1
2-я колонка фиксированной ширины (не тянется вообще, для определённости 100px)
3-я колонка тянется с коэффициентом 2
(то есть при ширине окна браузера в 400px, у нас будет таблица 100-100-200, при ширине 700px будет соответственно 200-100-400 ну и т.д.)
Решение (по идее):
сделать таблицу с шириной 100%, в colgroup задать ширину колонок как width="1*", width="100", width="2*" соответственно.
Проблема: в IE6 не работает :) (IE6 тянет блок фиксированной ширины, не смотря на то, что он фиксированной ширины; в FF работает)
Нужно любое кроссбраузерное решение (желательно без хаков на js). Есть идеи?

Chupa

вроде чит-код с прозрачным пикселом помогать должен (см. например http://www.dwfaq.com/Tutorials/Tables/managing_tables.asp )

maxiim9

У них примеры для таблиц с фиксированной шириной. Это немного не про то.

Chupa

чото не глянул на сабж, вот другая: http://www.goshen.edu/communication/comm326fall04/tables/tab...
смысл в том, что если в столбце фиксированной ширины есть клетка, где только картинка, то столбец не тянется

maxiim9

Да что-то на картинки ему положить...
Вот такой код по крайней мере в FF работает правильно, в IE6 не пашет:


<head>

<style>

td {border:solid 1px #000;}

</style>

</head>

<body>

<table width="100%"> 

<colgroup> 

<col width="1*"/> 

<col width="100"/> 

<col width="2*"/> 

</colgroup> 

<tr> 

<td>1</td> 

<td><img src='http://amesh.ru/usefull/img/px.gif'/></td> 

<td>2</td>

</tr>

</table>

</body>

Chupa

попробуй картинке явно размер задать

maxiim9

не помогает, что в принципе не удивительно...

artimon

<table width="100%" cellpadding="0" cellspacing="0" style="table-layout: fixed">

           <tr>

               <td>1x</td>

               <td width="100">100</td>

               <td colspan="2">2x</td>

           </tr>

       </table>

kruzer25

Проблема: в IE6 не работает
Для ИЕ6 (и для ИЕ вообще) можно воспользоваться expression-ами ;)

Fragaria

КРОССБРАУЗЕРНОЕ РЕШЕНИЕ
Я уж не знаю, как научить тебя ещё читать...

SCIF32

Очевидно, для него надо писать азбукой Брайля.
Можно еще на php попробовать.

kruzer25

Чем тебе не нравится кроссбраузерное решение вида "для нормальных браузеров делаем так-то, для IE <=6 используем expression-ы"?
Или для тебя "кроссбраузерно" - это чтобы ни в коем случае не использовать специфичные фишки отдельных браузеров, но чтобы при этом всё работало и в старых ИЕ, и в нормальных браузерах?

Fragaria

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

kruzer25

Ну и иди тогда на йух с такими требованиями.

hwh2010

[отмазка] Нижеследующий код не претендует на то, что он решает поставленную задачу (хотя в IE, FF, Opera вроде работает). Стандарт CSS 2.1 не полностью описывает поведение браузера, но грозится сделать это в 3 версии
tr.spacers td img {height:1px;}

tr.data td {border:1px solid red;}
<table style="width:100%">

<tr class="spacers">

<td style="width:66%"><img src="spacer.gif"></td>

<td style="width:100px"><img src="spacer.gif" style="width:100px;"></td>

<td style="width:33%"><img src="spacer.gif"></td>

</tr>

<tr class="data">

<td style="width:66%">1</td>

<td style="width:100px">2</td>

<td style="width:33%">3</td>

</tr>

</table>

avinir60

Кроссбраузерно так: у таблицы table-layout:fixed, первых тд в первой строке таблицы - ширина соответственно относительная(в процентах) или абсолютная. Проверенно - работает.
В твоём случае:


<table style="table-layout:fixed; width:100%;">

<tr>

   <td style="width:33%; background-color:Red;">1*</td>

   <td style="width:100px; background-color:Green;">100px</td>

   <td style="width:66%; background-color:Blue;">2*</td>

</tr>

</table>

maxiim9

Ага, спасибо
Хотя вариант от уже помог :)

Fragaria

Во, вот это я называю кроссбраузерно.

avinir60

Хотя вариант от уже помог
У меня закрались сомнения и я проверил. И правда - не работает в Safary v3.0.4
Оставить комментарий
Имя или ник:
Комментарий: