Не Могу Правильно Разместить Блоки

[c0d3r]

Такая проблема с вёрсткой. Есть таблица где то на 10 ячеек, нужно к каждой ячейке сделать вверху по центру заголовок, вставить картинку и подпись внизу справа. Нужно чтобы заголовок всегда был вверху, а подпись внизу даже если картинки нет.

Я пробовал делать вот так

<table border="1">
  <tr>
	<td width="150px" height="300px">
	   <div style="text-align: center; vertical-align: top;">
	   Заголовок
	   </div>

	   <img src="1.jpg" alt="image">

	   <div style="text-align: right; vertical-align: bottom;">
	   Подпись
	   </div>

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

Но когда картинки нет или она меньше всё смещается к центру.

Может я неправильно делаю? Как сделать правильно?

[psywalker]

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

[c0d3r]

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

Можете показать на примере? Не очень понял

[swetlana]

А разве самой ячейке нельзя задать position: relative?

[s0rr0w]

А разве самой ячейке нельзя задать position: relative?

http://www.w3.org/TR/CSS21/visuren.html#choose-position

А-я-яй, таких простых вещей не знать, а уже в html5 лезть...

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

[Verder]

http://www.w3.org/TR/CSS21/visuren.html#choose-position

А-я-яй, таких простых вещей не знать, а уже в html5 лезть...

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

А че, так не валидно типа - http://freeway-design.ru/table_i/

Да пох. Тока в <h6> индентом поиграться. Верстальщики епт

P.S.

Ух ты, охренеть, валидацию прошел Релейтивы... я с вас пухну.

Edited September 5, 2010 by Verder

[s0rr0w]

А че, так не валидно типа - http://freeway-design.ru/table_i/

Да пох. Тока в <h6> индентом поиграться. Верстальщики епт

P.S.

Ух ты, охренеть, валидацию прошел Релейтивы... я с вас пухну.

Задание читал?

[Verder]

Задание читал?

Ну и че? Убери картинку и будет то же самое - заголовок по центру и подпись справа. Как и просили.

[sigma77]

Verder,

Подпись справа, но не внизу

[Verder]

Verder,

Подпись справа, но не внизу

Мля вы читать умеете??? -

...вставить картинку и подпись внизу справа

!!!!!!

[sigma77]

Мля вы читать умеете??? -

Умеем не кипишуй

Нужно чтобы заголовок всегда был вверху, а подпись внизу даже если картинки нет.

[Verder]

Умеем не кипишуй

Я ща разорвусь...

Если убрать картинку, то подпись так и останется внизу!!!!!!

[sigma77]

Я ща разорвусь...

Если убрать картинку, то подпись так и останется внизу!!!!!!

Да ну?

Edited September 5, 2010 by sigma77

[Verder]

Да ну?

Не да ну, а ну да. Ты еще сильнее сожми окно. Подпись ОСТАЕТСЯ ВНИЗУ СПРАВА. Просто размер шрифта отрегулировать и min-width прописать.

Вот вариация с выравниванием - http://freeway-design.ru/table_i/2.html

[sigma77]

Verder,

Внизу - это значит по нижней границе ячейки, а не просто ниже относительно другого контента.

[Verder]

Verder,

Внизу - это значит по нижней границе ячейки, а не просто ниже относительно другого контента.

Где сказано, что по нижней границе ячейки надо выравнивать??? Ты этот вывод сделала по написанному в исходном коде ТСа vertical-align: bottom? Он просто пытался этот блок под картинкой разместить.

Я сделал как просили - заголовк сверху по центру, потом картинка и потом подпись внизу справа.

Edited September 5, 2010 by Verder

[sigma77]

Где сказано, что по нижней границе ячейки надо выравнивать??? Ты этот вывод сделала по написанному в исходном коде ТСа vertical-align: bottom? Он просто пытался этот блок под картинкой разместить.

Об этом и не обязательно прямо говорить, все и так понятно, что ТС хочет получить:

1) При таком таком расположении элементов они и так будут расположены вертикально: заголовок - картинка - подпись

2) ТС пытается применять вертикальное выравнивание.

3) Проблем с горизонтальным выравниванием у него нету.

4) При уменьшении картинки или при её отсутствии применяется обычное вертикальное центрирование у ячейки, о чем ТС прямо пишет.

п.с., всё, блин, больше ничего доказывать тебе не буду. В конце-концов решение psywalker предложил.

[Verder]

Об этом и не обязательно прямо говорить, все и так понятно, что ТС хочет получить:

1) При таком таком расположении элементов они и так будут расположены вертикально: заголовок - картинка - подпись

2) ТС пытается применять вертикальное выравнивание.

3) Проблем с горизонтальным выравниванием у него нету.

4) При уменьшении картинки или при её отсутствии применяется обычное вертикальное центрирование у ячейки, о чем ТС прямо пишет.

п.с., всё, блин, больше ничего доказывать тебе не буду. В конце-концов решение psywalker предложил.

Если что-то "пытаешься", лучше сходить в отдельный кабинет с белым другом.

Если бы в просьбе было указано - "выровнять по нижнему краю", то я бы и выровнял по нижнему.

Какой вопрос - такой ответ. Не умеешь формулировать - учись, а потом спрашивай.

Edited September 5, 2010 by Verder

[psywalker]

А разве самой ячейке нельзя задать position: relative?

Нет, нельзя, потому-что абсолют у дива не даст нужного результата.

Verder

Я уже не раз встречал задачи похожего рода, поэтому и посоветовал подходящий вариант. Кстати насчёт задачи, я понял так, что нужно выравнивать именно по нижнему краю, т..е именно по bottom

А разве самой ячейке нельзя задать position: relative?

Нет, нельзя, потому-что абсолют у дива не даст нужного результата.

Verder

Я уже не раз встречал задачи похожего рода, поэтому и посоветовал подходящий вариант. Кстати насчёт задачи, я понял так, что нужно выравнивать именно по нижнему краю, т..е именно по bottom/

ТС объясни подробнее, что ты хочешь, чтобы не было путаницы.

[Verder]

В конце-концов решение psywalker предложил.

В свете появления здесь Светланы, я бы назвал Psywalker'а скорее ремесленником от верстки. Вкладывать душу в такое прагматичное дело не каждому дано.

Psywalker'у дано просто следовать правилам и запоминать их.

Светлане дано творить.

Да, несомненно, точные определения - ремесленник и художник.

Psywalker, не обижайся, ты хороший верстальщик, но отличия сразу видны.

[mishka]

Verder, ты конечно у нас мачо горячий, но ненужно понапрасну девушке хамить.

Сделать так как ты ТС смог бы и сам (чет я в этом почти не сомневаюсь), ну может он не мог по правому краю выровнять, ну а сделать так чтобы текст был сразу под заголовком, ну эт просто "непосильная задача".

Макс предложил вариант.

Я еще такой могу предложить - картинки обернуть холдером, ему высоту. И если картинки не будет, то он всеравно оттолкнет текст.

[Verder]

Verder, ты конечно у нас мачо горячий, но ненужно понапрасну девушке хамить.

Сделать так как ты ТС смог бы и сам (чет я в этом почти не сомневаюсь), ну может он не мог по правому краю выровнять, ну а сделать так чтобы текст был сразу под заголовком, ну эт просто "непосильная задача".

Макс предложил вариант.

Я еще такой могу предложить - картинки обернуть холдером, ему высоту. И если картинки не будет, то он всеравно оттолкнет текст.

А нафига тогда вообще таблицами делать, если они будут загромождены кучей дивов? Делал бы тогда уж сразу по человечески, это без таблиц гораздо проще сделать.

P.S.

Я никому не хамил, а просто посоветовал ТСу сходить в отдельный кабинет, посидеть-подумать, сформулировать, а уж потом постить. Sigma тут не при чем.

Edited September 5, 2010 by Verder

[mishka]

И ты сразу попробуй релейтив ячейке задать, потом относительно нее спозиционировать, и если получится, то потом обвиняй Макса в том что он чего то там не попробовал

Я никому не хамил, а просто посоветовал ТСу сходить в отдельный кабинет, посидеть-подумать, сформулировать, а уж потом постить. Sigma тут не при чем.

Извини, недосмотрел что это адресовалось в сторону ТС.

[Verder]

И ты сразу попробуй релейтив ячейке задать, потом относительно нее спозиционировать, и если получится, то потом обвиняй Макса в том что он чего то там не попробовал

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

[psywalker]

Psywalker, не обижайся, ты хороший верстальщик, но отличия сразу видны.

Даже не думаю обижаться.

И ты сразу попробуй релейтив ячейке задать, потом относительно нее спозиционировать, и если получится, то потом обвиняй Макса в том что он чего то там не попробовал

Зачем ему пробовать, он же дизайнер и лучше верстальщика знает, что к чему))

[Searcher]

Verder не может быть не прав, и он фактически единственный, кто тут во всеуслышанье раздает определения способнастям и распределяет значимость участников форума