Jump to content
  • 0

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


psywalker
 Share

Question

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

Имеем: 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>

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

Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0

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

Link to comment
Share on other sites

  • 0

DjTarik

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

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

Edited by psywalker
Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

  • 0

s0rr0w

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

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

Lincky

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

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

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

Edited by psywalker
Link to comment
Share on other sites

  • 0
s0rr0w

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

Lincky

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

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

Link to comment
Share on other sites

  • 0
s0rr0w

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

Lincky

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

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

Link to comment
Share on other sites

  • 0

s0rr0w

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

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

Edited by psywalker
Link to comment
Share on other sites

  • 0
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>

Link to comment
Share on other sites

  • 0
s0rr0w

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

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

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

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

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

Link to comment
Share on other sites

  • 0
DjTarik

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

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

Link to comment
Share on other sites

  • 0
s0rr0w

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

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

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

Link to comment
Share on other sites

  • 0

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>

Link to comment
Share on other sites

  • 0
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>

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

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

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

Link to comment
Share on other sites

  • 0

Lincky

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy