Xpoint
   [напомнить пароль]

Фотоальбом: перетекание фото при резиновом дизайне

Метки: [без меток]
2007-08-30 11:09:50 [обр] Yuri Pavlov(0/13)[досье]
сообщение промодерировано
Основной макет из 3-х колонок, резиновый, табличный.
Средняя ячейка резиновая, остальные фиксированные.
Средняя ячейка содержит элементы альбома (элементом является div или table, куда входят фото, название и еще кое-что).
Я хочу сделать так, чтобы при изменении окна элементы растекались по средней ячейке так, как показано на фото (верхняя и нижняя части).
При этом выравнивание в каждом ряду желательно по верхней границе элемента, размеры элементов могут быть разные.
То есть должно выглядеть, как в таблице с разницей в том, что количество колонок зависит от окна.
Создаётся такое впечатление, что это возможно только скриптами.
К сожалению, даже близко подойти в цели не удалось, тем не менее вот пока исходный код, который в IE растягивается на много экранов, а в FireFox разделяется на ряды, но неправильно (правильно так,как на картинке):
<style>
.table {}
.table1 {width:100px; height:200px; background:#CCFF33}

</style>
</head>

<body>


<table >
<tr>
<td bgcolor="#CC0000">
    <table width="200">
    <tr><td> ХРЕНЬ!
    </table>
    
    
    
<td bgcolor="#FFFF99" >

<table  border="1" align="left" class="table">
  <tr>
    <td>dghdf ghd d</td>
    <td>dfgh dfghdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr> 
</table> 
<table  border="1" align="left" class="table1">
  <tr>
    <td>dghdf ghd d</td>
    <td>dfgh dfghdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr> 
</table> 
<table  border="1" align="left" class="table">
  <tr>
    <td>dghdf ghd d</td>
    <td>dfgh dfghdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr> 
</table> 
<table  border="1" align="left" class="table1">
  <tr>
    <td>dghdf ghd d</td>
    <td>dfgh dfghdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr> 
</table> 
<table  border="1" align="left" class="table">
  <tr>
    <td>dghdf ghd d</td>
    <td>dfgh dfghdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr> 
</table> 
<table  border="1" align="left" class="table">
  <tr>
    <td>dghdf ghd d</td>
    <td>dfgh dfghdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr> 
</table> 
<table  border="1" align="left" class="table1">
  <tr>
    <td>dghdf ghd d</td>
    <td>dfgh dfghdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr> 
</table> 
<table  border="1" align="left" class="table">
  <tr>
    <td>dghdf ghd d</td>
    <td>dfgh dfghdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr> 
</table> 
<table  border="1" align="left" class="table">
  <tr>
    <td>dghdf ghd d</td>
    <td>dfgh dfghdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr> 
</table> 
<table  border="1" align="left" class="table">
  <tr>
    <td>dghdf ghd d</td>
    <td>dfgh dfghdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr> 
</table> 
<table  border="1" align="left" class="table">
  <tr>
    <td>dghdf ghd d</td>
    <td>dfgh dfghdf</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr> 
</table> 
</div>

<td bgcolor="#99FF33">
    <table width="200"  >
    <tr><td> ХРЕНЬ!
    </table>
</table>
спустя 23 минуты [обр] Rumata(0/3)[досье]
хттп://foto.volg-gsm.ru/users/17/works/
Это то, что Вам нужно?
спустя 20 минут [обр] Yuri Pavlov(0/13)[досье]
Спасибо, почти похоже, но ширина и высота в моём случае могут меняться достаточно сильно, и в Вашем варианте очень много пустоты.
То, что очень близко - это организация альбомов picasaweb в google, но там всё-всё на скриптах
спустя 5 минут [обр] Lynn «Кофеман»(56/571)[досье]
спустя 23 минуты [обр] Yuri Pavlov(0/13)[досье]
Почти. Добавляю табличное обрамление и FF тютю
спустя 2 часа 11 минут [обр] Rumata(0/3)[досье]
Yuri Pavlov[досье]
Что Вам мешает уменьшить пустоту и все таки "достаточно сильно" поменять ширину и высоту?
спустя 1 час 59 минут [обр] Yuri Pavlov(0/13)[досье]
Не знаю..., нужно попробовать. Посмотрите, какое оно всё разное может быть:
http://lacart.ru/collection.php?id=48&page=1
Если идти таким способом, то все объекты должны быть огромными, такие, как те две нижние. Этого хочется избежать...
Powered by POEM™ Engine Copyright © 2002-2005