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

[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>

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

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

[Verder]

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

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

Ну во всяком случае мне моих знаний хватает, чтобы сверстать любой сайт.

Как пример - http://forum.htmlbook.ru/index.php?s=&...st&p=159509 - это решение в разы лучше, чем твое, с прижатым абсолютом нижним блоком.

Но это так, частности, какие-то тонкости ты, конечно, знаешь лучше меня. Но это не значит, что я не смогу решить любую задачу.

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

Фигню говоришь. Просто я всегда говорю то что думаю не прикрываясь "корректностью".

Edited September 6, 2010 by Verder

[Searcher]

Фигню говоришь. Просто я всегда говорю то что думаю не прикрываясь "корректностью".

Возможно. Но говорить всегда то что думаешь и думать о чувствах (уважать) собеседников, предполагая последствия высказанных слов - очень разные вещи. Первая - выполнение программы роботом, с очень сильным субъективизмом (т.е. неопределенно относительно истины), вторая - мудрость созидателя. Ну а игра на страстях людей очень глубоко затягивает во тьму...

[Verder]

Возможно. Но говорить всегда правду и думать о чувствах (уважать) собеседников, предполагая последствия высказанных слов - очень разные вещи. Первая - выполнение программы роботом, вторая - мудрость созидателя. Ну а игра на страстях людей очень глубоко затягивает во тьму...

А я никогда не скрывал, что люди, за исключением моих родных, друзей и некоторых, которые просто нравятся (что бывает редко), для меня просто как неприятное раздражающее дополнение к окружающей действительности. Я не знаю, что такое совесть, я всегда ищу выгоду для себя, я люблю играть на чувствах и манипулировать людьми, вытаскивая их сущность на всеобщее обозрение.

Я могу быть вежливым и тактичным, но только тогда, когда мне это выгодно, или если просто хорошее настроение. Но в любом случае это только маска. Да, я не люблю людей, кроме тех, которых перечислил выше.

[Searcher]

А за что ты не любишь людей?

[psywalker]

Как пример - http://forum.htmlbook.ru/index.php?s=&...st&p=159509 - это решение в разы лучше, чем твое, с прижатым абсолютом нижним блоком.

Прикинь, ты не поверишь, но твоё решение хуже, чем прижатый абсолютом футер

[Verder]

А за что ты не любишь людей?

Встречный вопрос - а за что их любить или, более конкретно, за что именно ты их любишь?

Когда говорят - "Мне нравится помогать людям и я их люблю", то это вранье. Человек, который безвозмездно любит людей и помогает им, делает это не от любви, а для того, чтобы посмотреть на их унижение и показать, насколько он их лучше, богаче, благородней.

Уж лучше я буду людей открыто ненавидеть, чем во так.

Прикинь, ты не поверишь, но твоё решение хуже, чем прижатый абсолютом футер smile.gif

Доказательства? Сделай в своем варианте не просто контент и футер, а размести хотя бы штук 5 резиновых блоков в разных местах и посмотри что из этого выйдет. Без правки твоего существующего когда.

Edited September 6, 2010 by Verder

[psywalker]

Доказательства? Сделай в своем варианте не просто контент и футер, а размести хотя бы штук 5 резиновых блоков в разных местах и посмотри что из этого выйдет. Без правки твоего существующего когда.

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

[Verder]

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

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

[psywalker]

Вот тебе простой пример. Тут контент и футер - прижатый абсолютом. Всё резиновое, и внутрь контента ты можешь засовывать кучу блоков и т. д. В чём проблема?

http://psywalker.ru/Forum/Footer_bottom/main.html

[Verder]

Вот тебе простой пример. Тут контент и футер - прижатый абсолютом. Всё резиновое, и внутрь контента ты можешь засовывать кучу блоков и т. д. В чём проблема?

http://psywalker.ru/Forum/Footer_bottom/main.html

Меня вполне устраивает мой вариант, которым я пользуюсь уже долгое время. Твой способ пробовал - не работает на сайтах, на которых много контента и блоков с различным позиционированием. И вообще, странно видеть пример с исключенным из потока нижним блоком от человека, который называет себя верстальщиком.

[psywalker]

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

У меня мой способ всегда работал отлично и никогда не подводил. Я уверен, что ты просто что-то не так делал, или верстал неправильно, отсюда все твои беды.

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

Не понимаю, что в этом плохого? Если делать бездумно, лижбы было, то тогда конечно, получиться хрень, а если точно знаешь, что делаешь и что это 100% будет работать, то я не вижу в этом ничего плохого.

[Verder]

У меня мой способ всегда работал отлично и никогда не подводил. Я уверен, что ты просто что-то не так делал, или верстал неправильно, отсюда все твои беды.

Не понимаю, что в этом плохого? Если делать бездумно, лижбы было, то тогда конечно, получиться хрень, а если точно знаешь, что делаешь и что это 100% будет работать, то я не вижу в этом ничего плохого.

Ню-ню Сейчас покажу что будет при добавлении приличного контента с твоим примером

[psywalker]

Ню-ню Сейчас покажу что будет при добавлении приличного контента с твоим примером

Давай, интересно посмотреть.

[Verder]

Давай, интересно посмотреть.

http://freeway-design.ru/psy/

Всего лишь три резиновых колонки, шапка в 7em и адью.

Clear не поможет, добавь еще несколько произвольных блоков в абсолюте и релейтиве и проверь.

Твой вариант, как пособие для начинающих, как пример прижатия блока - просто хрень.

Он просто недоделан.

Edited September 6, 2010 by Verder

[psywalker]

Вердер

Хаа, смешно, вот этим самым примером ты ещё раз показал свой уровень знаний - как верстальщик и опозорился, как обычно

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css"> 
*{ margin: 0; padding: 0;}
	html { height: 100%; overflow: auto; }
	body { height: 100%;}
	div.wrap{
		min-height: 100%;
		background: #990;
		width: 70%;
		margin: 0 auto;
		position: relative;
	}
	div.footer { 
		position: absolute;
		bottom: 0; 
		left: 0;
		height: 50px; 
		width: 100%;
		background: red;
	}



	#header {height: 7em;}

	#lcol, #middle-col, #rcol {float:left; width: 30%;}


</style>
	<!--[if IE 6]>
		  <style type="text/css">
			div.wrap {height: 100%;}
		</style>
	<![endif]-->

</head>

<body>
<div class="wrap">

<div id="header">Header</div>

<div style='padding-bottom: 100px; overflow: hidden;'>
<div id="lcol">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
<div id="middle-col">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat. 
</p>
</div>
<div id="rcol">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fermentum dapibus congue. Morbi blandit varius nibh, ut iaculis arcu vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin eu quam vel nulla malesuada aliquam non non felis. Aenean eu elementum sem. Etiam laoreet ultricies lectus ut placerat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat orci id sem vestibulum ut imperdiet purus faucibus. Vivamus sem erat, faucibus sed facilisis at, lacinia quis purus. Vestibulum sem massa, volutpat eget tincidunt pharetra, placerat luctus justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>

	<div class="footer">FOOTER</div>
	</div>
</div>
</body>
</html>

[c0d3r]

Когда я делаю получается вот так

Т.е если изображения не одинакового размера то текст смещается к центру (как в правой ячейке), а надо чтобы оставался на месте (как в левой).

Можно конечно сделать все рисунки одинакового размера, но я хочу понять как сделать средствами html/css т.к потом понадобиться.

Как этот код доработать чтобы было как надо?

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

[sigma77]

Как этот код доработать чтобы было как надо?

http://forum.htmlbook.ru/index.php?showtop...st&p=159593 (2-й пост)

Edited September 6, 2010 by sigma77

[mishka]

http://forum.htmlbook.ru/index.php?showtop...st&p=159593 (2-й пост)

Непойдет такое. Блоками переделать нужно.

Чтобы строка была блоком, ей релейтив, и относительно нее позиционировать. Таким образом картинки могут быть любой высоты.

[psywalker]

Непойдет такое. Блоками переделать нужно.

Медведь, а почему не пойдёт?

[mishka]

Медведь, а почему не пойдёт?

Макс, ну ты сразу сделай как говоришь, потом так как я, и сравни.

Высота картинок разная, и заранее неизвестная.