Одна ячейка, разное выравнивание

[psywalker]

Ребят, поставил себе задачку,

Имеем: 1 ячейка таблицы, две картинки

Задача: Нужно, чтобы одна картинка выравнивалась по верхнему краю, а другая по нижнему, в Одной ячейке

Решение было найдено засчёт margin-top: у одной из картинок

  
<style type="text/css">
*{ margin: 0; padding: 0;}

   table{ border-collapse: collapse; width: 300px;}
	  table td { border: 1px solid #f00; height: 200px; text-align: center; vertical-align: top;}
			 table td img.bottom { display: block; margin-top: 150px;}

</style> 
 <table>
	   <tr>
		  <td>
			<img src="green-but.jpg" alt="" />
			<img class="bottom" usa-f.jpg" alt="" />
		  </td>
	   </tr>
	</table>

У кого какие идеи, вообще эта задачка решаема каким нибудь здравым способом?

[DjTarik]

Если нужно, чтобы картинки были всегда одна сверху, другая снизу, вне зависимости от высотры ячейки - то я делаю с помощью позиционирования... Я вообще много чего делаю имеено с помощью "позишн" =)))

[psywalker]

DjTarik

Если нужно, чтобы картинки были всегда одна сверху, другая снизу, вне зависимости от высотры ячейки - то я делаю с помощью позиционирования... Я вообще много чего делаю имеено с помощью "позишн" =)))

Хаа, какой вы наивный человек, наверное не знаете, что позиционирование не работает в ячейках, если бы так можно было сделать, я бы даже не создавал этот топик)))

Edited May 12, 2009 by psywalker

[s0rr0w]

Ребят, поставил себе задачку,

Имеем: 1 ячейка таблицы, две картинки

Задача: Нужно, чтобы одна картинка выравнивалась по верхнему краю, а другая по нижнему, в Одной ячейке

У кого какие идеи, вообще эта задачка решаема каким нибудь здравым способом?

Одна картинка фоном, вторая - картинкой.

[Lincky]

Одна картинка фоном, вторая - картинкой.

у меня тоже была такая мысль. Но а если по дизайну фон какой-нить изощренный, который только картинкой вставлять... так что этот способ прокатывает не в 100% случаев.

хорошу задачку psywalker преподнес. надо бы подумать...аа вот

можно вынести картинку за табл и спозиционировать абсолютом, как сделал я на сайте ancient-image.ru на страничке "о проетке"..

создал в футере див с фоном и поднял вверх.

[psywalker]

s0rr0w

Одна картинка фоном, вторая - картинкой.

Дело хорошее, но картинки должны быть активными ссылками, что теперь скажете?

Lincky

можно вынести картинку за табл и спозиционировать абсолютом, как сделал я на сайте ancient-image.ru на страничке "о проетке"..

создал в футере див с фоном и поднял вверх.

Выносить за таблицу тоже не вариант, это уже изврат опятьже

Edited May 12, 2009 by psywalker

[s0rr0w]

s0rr0w

Дело хорошее, но картинки должны быть активными ссылками, что теперь скажете?

Lincky

Выносить за таблицу тоже не вариант, это уже изврат опятьже

Поместите картинку, которая должна быть выровнена по низу, в следующую строку, укажите position: absolute и сделайте отрицательный margin на высоту картинки + паддинги ячеек

[Lincky]

s0rr0w

Дело хорошее, но картинки должны быть активными ссылками, что теперь скажете?

Lincky

Выносить за таблицу тоже не вариант, это уже изврат опятьже

тут без изврата наврятли получится...

[psywalker]

s0rr0w

укажите position: absolute

А вот это зачем?

[s0rr0w]

s0rr0w

А вот это зачем?

Ну вы ж хотели одну картинку по низу выровнять

[psywalker]

s0rr0w

Ну вы ж хотели одну картинку по низу выровнять

А зачем задавать Позиционирование, можно ведь просто изображение сделать блочным?

Edited May 12, 2009 by psywalker

[s0rr0w]

s0rr0w

А зачем задавать Позиционирование, можно ведь просто изображение сделать блочным?

<table>
 <tr>
   <td><img src="11.png"></td>
   <td>Cell 1</td>
 </tr>
 <tr>
   <td><img src="12.png" style="position: absolut; margin-top: -100px;"></td>
   <td>Cell 2</td>
 </tr>
</table>

[Lincky]

s0rr0w

А зачем задавать Позиционирование, можно ведь просто изображение сделать блочным?

думаю это не логично!

[psywalker]

s0rr0w

Когда я задаю позиционирование картинке, она у меня вываливается из таблицы

[Lincky]

s0rr0w

Когда я задаю позиционирование картинке, она у меня вываливается из таблицы

это само собой разумеется...

абсолют фиг знает как тогда считается...особенно для ие.

У кого какие идеи, вообще эта задачка решаема каким нибудь здравым способом?

а что ты имеешь в виду под "здравым способом"?

[DjTarik]

DjTarik

Хаа, какой вы наивный человек, наверное не знаете, что позиционирование не работает в ячейках, если бы так можно было сделать, я бы даже не создавал этот топик)))

знаю... именно поэтому засовываю в таблицу див... и уже относитено него позиционирую... =)

[s0rr0w]

s0rr0w

Когда я задаю позиционирование картинке, она у меня вываливается из таблицы

Да, это так. Она и должна вываливаться.

Хотя, с другой стороны, никто не отменял onclick на td, тогда можно обратно вернуться к варианту с фоновой картинкой.

[psywalker]

s0rr0w

Извините, раз уж на то пошло, тогда скажите, чем этот способ хуже?

<style type="text/css">
*{ margin: 0; padding: 0;}

   table{ border-collapse: collapse; width: 300px;}
	  table td { border: 1px solid #f00; height: 200px; text-align: center; vertical-align: top;}
			 table td img.bottom { display: block; margin-top: 150px;}

</style>
<table>
	   <tr>
		  <td>
			<img src="green-but.jpg" alt="" />
			<img class="bottom" usa-f.jpg" alt="" />
		  </td>
	   </tr>
	</table>

[Lincky]

s0rr0w

Извините, раз уж на то пошло, тогда скажите, чем этот способ хуже?

<style type="text/css">
*{ margin: 0; padding: 0;}

   table{ border-collapse: collapse; width: 300px;}
	  table td { border: 1px solid #f00; height: 200px; text-align: center; vertical-align: top;}
			 table td img.bottom { display: block; margin-top: 150px;}

</style>
<table>
	   <tr>
		  <td>
			<img src="green-but.jpg" alt="" />
			<img class="bottom" usa-f.jpg" alt="" />
		  </td>
	   </tr>
	</table>

статичностью!!!!!!

надо чтобы контент можно было менять без потери дизайна....

и еще раз вопрос, раз нет ответа: что имеешь в виду под "здравым способом"?

[s0rr0w]

s0rr0w

Извините, раз уж на то пошло, тогда скажите, чем этот способ хуже?

Все нарушится, если будут меняться размер ячейки или размер картинки.

[psywalker]

Lincky

и еще раз вопрос, раз нет ответа: что имеешь в виду под "здравым способом"?

Под здравым смыслом я подразумеваю: Лёгкий, простой способ, без всяких извратов и т.д, тоесть что бы было мало кода, и при этом надёжно и чётко, как я люблю