как выравнять по вертикали

[Alannn]

Здрасьти! Такая ситуация возникла! Не получается у меня блок с несколькими рисунками который находится в ячейке таблицы, выровнять по нижней границе этой самой ячейки. Прошу помочь :blush2:
__________________________________________________ _________


<td align=left valign=top bgcolor="#ffffff" border="0" height="1000" width="200">


ТУТ ТАБЛИЦА шириной 200пх

<div ?????????>
[img]images/ghtgg.jpg[/img]
[img]images/1133725.jpg[/img]
[img]images/hist.jpg[/img]
</div>

ТУТ еще 2 СТОЛБЦА, на них можно забить, а потом строка..

<tr><td valign=top colspan=3 bgcolor="#4682B4" height="2" width="100%">
</td></tr>


Не могу пристроить тот блок к этой строке или другими словами опустить в ячейке до самого низа. Менять valign=top на bottom в ячейке где находится блок - не вариант, т.к. там еще что то есть что должно быть вверху.

[Eternity]

Задать margin-top для div, он зависит от ширины блока-контейнера, значит будет... 500%

[Alannn]

Originally posted by Eternity@Feb 12 2008, 18:07
Задать margin-top для div, он зависит от ширины блока-контейнера, значит будет... 500%
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Спасибо, но в моем случае точно не зависит. Я пытался указать в процентах, только не 500, а от 70 до 100 и в принципе получилось, но в разных браузерах отображается по разному.. Не пойму почему не срабатывает margin-bottom...

[Kiosuki]

Originally posted by Alannn@Feb 12 2008, 15:13
Не могу пристроить тот блок к этой строке или другими словами опустить в ячейке до самого низа. Менять valign=top на bottom в ячейке где находится блок - не вариант, т.к. там еще что то есть что должно быть вверху.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Что-то я, определенно, ничего из этого не понял...

Originally posted by Alannn@Feb 12 2008, 15:13
там еще что то есть что должно быть вверху
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
А "там" - это где?

[Alannn]

Originally posted by Kiosuki@Feb 13 2008, 12:27
Что-то я, определенно, ничего из этого не понял...
А "там" - это где?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
там выше в этой же ячейке где и блок, еще располагается таблица. Так вот эта таблица расположенна в верхней части этой ячейки, а блок хотелось бы расположить в нижней части.. В общем я выкладываю полностью..
__________________________________________________ _______

<table style="margin: 1px 0px" valign=top bgcolor="#ffffff" border="0" cellPadding="0" cellSpacing="0" height="100" width="100%">
<tr><td bgcolor="#3aa20d" align=left valign=top height="100" width="100%">

</td></tr>
</table>
<table valign=top border="0" cellPadding="0" cellSpacing="3" width="100%">
<tr><td valign=top colspan=3 bgcolor="#4682B4" height="2" width="100%">
</td></tr>
</table>
<table align=left bgcolor="#ffffff" valign=top border="0" cellPadding="0" cellSpacing="1" width="100%">
<tr>
<td align=left valign=top bgcolor="#ffffff" border="0" height="1000" width="200">
<table class="menu" align=top bgcolor="#ffffff" valign=top border="0" cellPadding="0" cellSpacing="1" width="200">
<tr><td align=left valign=middle border="0" height="30" width="200">
[img]555.jpg[/img]
</td></tr>
<tr><td align=left valign=middle height="22" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=left valign=middle height="22" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=left valign=middle height="22" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=left valign=middle height="22" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=left valign=middle border="0" height="30" width="200">
[img]444.jpg[/img]
</td></tr>
</table>

<div ???????????????????????????>
[img]images/Kurortnyj_Bulvar_9.jpg[/img]
[img]images/1133725.jpg[/img]
[img]images/hist.jpg[/img]
</div>


</td>
<td style="padding: 5px; margin: 0px" valign=top bgcolor="#ffffff" border="0" height="1000" width="100%">
<div style="background: #ffffff; width: 100%; margin-top: -9px; text-align: center" >
<h1 style="padding: 4px; font: bold 17px tahoma; color: #696969; margin: 0px 0px 0px">Отдых и лечение в санаториях Кисловодска</h1>
</div>



<div style="text-align: justify; border-top: solid 2px #C0C0C0; border-bottom: solid 2px #C0C0C0; padding: 5px; margin-top: -8px">

фиыуиуфкифаиафифиифиф
яриыкерфкеиыифиыифефыефеи

</div>



<div style="text-align: left">
<div id="NNInform">Все новости Рунета на сайте [Только зарегистрированные пользователи могут видеть ссылки. ]</div>
<script src="http://www.newnetnews.ru/news/informer/inf.php?8402b0f5365eea73417518a2f85babcd" type="text/javascript" language="javascript"></script>
</div>

</td>
<td align=right valign=top bgcolor="#ffffff" border="0" height="1000" width="200">

<table class="san" align=center bgcolor="#ffffff" valign=top border="0" cellPadding="0" cellSpacing="1" width="200">
<tr><td align=left valign=middle border="0" height="30" width="200">
[img]sanat.jpg[/img]
</td></tr>
<tr><td align=center bgcolor="#3aa20d" valign=middle height="15" width="200">
<div style="margin-top: 4px; color: #ffffff">
****
</div>
</td></tr>
<tr><td align=center valign=middle border="0" height="15" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=center valign=middle height="15" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=center valign=middle height="15" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=center valign=middle height="15" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=center bgcolor="#3aa20d" valign=middle height="15" width="200">
<div style="margin-top: 4px; color: #ffffff">
***
</div>
</td></tr>
<tr><td align=center valign=middle height="15" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=center valign=middle height="15" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=center valign=middle height="15" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=center bgcolor="#3aa20d" valign=middle height="18" width="200">
<div valign=middle style="color: #ffffff">
детские
</div>
</td></tr>
<tr><td align=center valign=middle height="15" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=center valign=middle height="15" width="200">
[Только зарегистрированные пользователи могут видеть ссылки. ]
</td></tr>
<tr><td align=center valign=middle border="0" height="30" width="200">
[img]sanator.jpg[/img]
</td></tr>
</table>





<div ?????????????????????????????>
[img]images/2337021.jpg[/img]
[img]images/Park_3.jpg[/img]
[img]images/1521055.jpg[/img]
</div>

<td>
</tr>
<tr><td valign=top colspan=3 bgcolor="#4682B4" height="2" width="100%">
</td></tr>

<tr><td align=center style="padding-top: 15px" colspan=3 valign=top width="100%" bgcolor="#ffffFF" height="100" >

</td></tr>
</table>

[Kiosuki]

Мда... Верстка, конечно, ужасна. В Вашем случае вряд ли что-то поможет... Но все-таки, если у Вас от отчаяния опускаются руки, попробуйте следующее:

1. Прописать для своих колонок valign="bottom", чтобы все содержимое "прилипло" к низу.
2. С этими блоками, что у Вас отмечены знаками вопросов, ничего делать не нужно. А вот таблицу, что над каждым из них, нужно поместить в такой блок:

<div style="position: absolute; top: 120px;">

[Alannn]

Originally posted by Kiosuki@Feb 13 2008, 21:35
Мда... Верстка, конечно, ужасна. В Вашем случае вряд ли что-то поможет... Но все-таки, если у Вас от отчаяния опускаются руки, попробуйте следующее:

1. Прописать для своих колонок valign="bottom", чтобы все содержимое "прилипло" к низу.
2. С этими блоками, что у Вас отмечены знаками вопросов, ничего делать не нужно. А вот таблицу, что над каждым из них, нужно поместить в такой блок:

<div style="position: absolute; top: 120px;">

<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

Спасибо, а почему ужасная верстка?

[Eternity]

тада весь этот див выйдет из нормального потока документа и будет позиционирован относительно html тега

Спасибо, а почему ужасная верстка?

потому что css&#39;ом не пахнет

[Alannn]

Originally posted by Eternity@Feb 13 2008, 22:00
тада весь этот див выйдет из нормального потока документа
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Да точно! И в браузерах по разному будет отображаться..

[Aykroyd]

Едет верстальщик в поезде и слышится ему:
<td></td>, <td></td>, <td></td>, <td></td>, <td></td>...

(оффтоп)

[Alannn]

Originally posted by Eternity@Feb 13 2008, 22:00
тада весь этот див выйдет из нормального потока документа и будет позиционирован относительно html тега
потому что css&#39;ом не пахнет
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Да я просто не выложил ксс..

[Eternity]

Короче вот, во всех браузерах вроде нормально

<td align=left valign=top bgcolor="#ffffff" border="0" height="1000" width="200" style="background:#CCCCCC;">
<div style="width:200px; position:relative; height:100%;">
[img]images/Kurortnyj_Bulvar_9.jpg[/img]
[img]images/1133725.jpg[/img]
[img]images/hist.jpg[/img]
<div style="position:absolute; top:auto; bottom:0; right:auto; left:0; margin:0; background:#999999;">
[img]555.jpg[/img]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[Только зарегистрированные пользователи могут видеть ссылки. ]
[img]444.jpg[/img]</div>
</div>

</td>

[Alannn]

Originally posted by Aykroyd@Feb 13 2008, 23:24
Едет верстальщик в поезде и слышится ему:
<td></td>, <td></td>, <td></td>, <td></td>, <td></td>...

(оффтоп)
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Не сыпь мне соль на рану)) Лень учиться блочной верстке

[Eternity]

Originally posted by Aykroyd@Feb 13 2008, 23:24
Едет верстальщик в поезде и слышится ему:
<td></td>, <td></td>, <td></td>, <td></td>, <td></td>...

(оффтоп)
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
:biggrin2: :biggrin2: :biggrin2:

[Aykroyd]

Originally posted by Alannn@Feb 14 2008, 00:31
Не сыпь мне соль на рану)) Лень учиться блочной верстке
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
1. Лень – двигатель прогресса.
2. Не блочной, а семантической.

[Kiosuki]

Originally posted by Alannn@Feb 13 2008, 22:31
Не сыпь мне соль на рану)) Лень учиться блочной верстке
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Знаете, после своей первой попытки сделать валидную семантическую верстку, я понял, что никогда больше не вернусь к таблицам!

[Aykroyd]

Originally posted by Kiosuki@Feb 14 2008, 02:55
Знаете, после своей первой попытки сделать валидную семантическую верстку, я понял, что никогда больше не вернусь к таблицам!
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

А и не получится даже.) Если однажды начинаешь мыслить по-иному, по-правильному, вся эта табличная дурь вылетает из головы очень быстро и практически безвозвратно...

Мне вот недавно пришлось испытать все это на практике. Согласился сверстать три шаблона e-mail для одного западного проекта (письма, которые рассылаются подписчикам сайта). Согласился за 400$, но если бы знал, чем все это обернется, не взялся бы ни за какие деньги...

Дело в том, что многие почтовые интерфейсы (особенно западные) очень далеки от веб-стандартов. К примеру:

– Yahoo Mail не понимает абсолютного позиционирования элементов и CSS-свойства text-indent;
– Google Mail отказывается интерпретировать все стилевые инструкции, расположенные в элементе style (т.е. игнорирует этот элемент в принципе), а также не понимает CSS-свойств border и background-image (даже если они заданы в атрибуте style);
– Hotmail вообще не понимает ничего, кроме font-family, font-size, color и padding...

Так что как бы паскудно все это ни было, для «кроссинтерфейсности» (с) шаблонов e-mail следует использовать массу несемантических и табличных гадостей. А перед тем, как использовать, их еще ведь и вспомнить надо...) :fie:

[Kiosuki]

Originally posted by Aykroyd@Feb 14 2008, 01:21
Дело в том, что многие почтовые интерфейсы (особенно западные) очень далеки от веб-стандартов.<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Спасибо, коллега, что поделились информацией. Сочувствую