Купить книжку по CSS и прочитать главу про позиционирование.

> Купить книжку по CSS и прочитать главу про позиционирование.

Чуть подробнее пожалуйста. Док по CSS я найду море у инете. По каким ключевым словам искать нужную мне информацию?

Ну вот я задаю <div style="position: absolute; bottom: 0%">Test</div> а оно мне выдает Test в самом низу окна браузера, а мне нужно внизу ячейки. Как сделать правильно?

курить значения position

Спасибо за обсуждение. Решилась проблема без CSS. Просто вставил в эту TD еще одну таблицу с двумя ячейками с разными valign.

> Просто вставил в эту TD еще одну таблицу с двумя ячейками с разными valign.

Ахтунг! Табличная верстка!

> Просто вставил в эту TD еще одну таблицу с двумя ячейками с разными valign.

> Ахтунг! Табличная верстка!

А в чем проблема?

> А в чем проблема?

Слово «семантика» и принцип разделения содержания и представления вам, вероятно, не знакомы.

> > Просто вставил в эту TD еще одну таблицу с двумя ячейками с разными valign.

> Ахтунг! Табличная верстка!

ну и что не так с табличной версткой ?

>> А в чем проблема?

> Слово «семантика» и принцип разделения содержания и представления вам, вероятно, не знакомы.

а вам видно знакомы ?

была поставленна конкретная задача, и была решина самым простым и очевидным способом..

причем тут "семантика" ?

Неграмотные школьники всегда решают задачи "простыми и очевидными способами"... Вот только за ними код правишь и плачешь...

>самым простым и очевидным способом

Эта пять, бгг.

Ну что вы раскудахтались? Куча "специалистов", а вменяемо никто не сказал причин почему таблица в ячейке плохо.

Мне думается что тот простой способ, которым я решил задачу надежнее. Наверняка у браузеров по CSS больше расхождений чем по голому HTML.

Прежде чем говорить "наверняка" советую таки набраться опыта. Эти специалисты (в том числе я говорю и о себе), в отличие от вас осилили CSS, а не ********* до сих пор с presentational атрибутами. Отображение принадлежит CSS, а вложенными таблицами верстали в прошлом веке.

p.s. "почему таблица в ячейке плохо" поймёт тот, кто после тебя будет твой шаблон править, потому что это такая засада...

Прошу прощения, а CSS-вёрстка одинаково отображается в IE,FF,Opera, Safari, Konquerror, Seamonkey?

Мне просто интересно... также было бы интересно, чтобы топикстартер показал своё решение (с табличной вёрсткой), а кто-то из гуру в ответ показал бы аналогичный вариант, но с CSS-вёрсткой.

Для данного вопроса — одинаково. Различия есть, но они есть и в HTML'е. Разные параметры по умолчанию — размеры шрифтов, например, margin/padding'и и т.п. (хотя это касается и CSS но там это всё сбарсывается через *, если нужно).

Про CSS вариант уже сказали — с posiotion. Просто что бы он сработал относительно родительского элемента, а не всей страницы нужно элементу предку тоже задать position (position: relative; скажем).

У меня было так:

<table>
 <tr>
  <td>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
  </td>
  <td valign=top>
   Bla-bla-bla<br>
   <i>This text should be at the bottom</i>
  </td>
 </tr>
</table>

<HR>
Потом сделал так:

<table>
 <tr>
  <td>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
  </td>

  <td valign=top height="100%">
   <table height="100%">
    <tr>
     <td valign=top height="100%">
      Bla-bla-bla
     </td>
    </tr>
    <tr>
     <td valign=bottom>
      <i>This text is really at the bottom</i>
     </td>
    </tr>    
   </table>
  </td>

 </tr>
</table>

хм... в вашем случае (если вам всё-таки нужна эта таблица),
можно проще тогда:

<style type="text/css">
.myt td { vertical-align: top;}
.myt .add { vertical-align: bottom;}
</style>

<table class="myt">
<tr>
<td rowspan="2">
Bla-bla-bla<br>
Bla-bla-bla<br>
Bla-bla-bla<br>
Bla-bla-bla<br>
Bla-bla-bla<br>
Bla-bla-bla<br>
Bla-bla-bla<br>
Bla-bla-bla<br>
Bla-bla-bla<br>
Bla-bla-bla<br>
Bla-bla-bla<br>
Bla-bla-bla<br>
</td>
<td>Bla-bla-bla</td>
</tr>
<tr>
<td class="add">
<i>This text is really at the bottom</i>
</td>
</tr>
</table>

форматирование...

<style type="text/css">
.myt td { vertical-align: top;}
.myt .add { vertical-align: bottom;}
</style>

<table class="myt">
<tr>
  <td rowspan="2">
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
   Bla-bla-bla<br>
  </td>
  <td>Bla-bla-bla</td>
</tr>
<tr>
  <td class="add">
    <i>This text is really at the bottom</i>
  </td>
</tr>
</table>

Насколько я понял твоё решение, это немного не то, что нужно.
Нужно примерно такое результат:
---------------------------------------------------
| Bla-bla-bla | Some text
| Bla-bla-bla |
| Bla-bla-bla |
| Bla-bla-bla |
| Bla-bla-bla |
| Bla-bla-bla |
| Bla-bla-bla |
| Bla-bla-bla |
| Bla-bla-bla |
| Bla-bla-bla |
| Bla-bla-bla |
| Bla-bla-bla | This text should be at the bottom
--------------------------------------------------
В твоём случае и "Some text" "прижмётся" вниз...

Попробовал я сейчас поиграться с
<td>
Bla-bla-bla<br>
<div style="height: 100%"></div>
<i>This text should be at the bottom</i>
</td>

так этот height вычисляется относительно высоты td, а не остатка от высоты. То есть нижняя надпись уже вылетает за пределы td

А ты пробовал? В моём случае будет всё как надо. Смотрю в Опере и FF.

Mystra_x64, Ваше решение работает но мне в общем случае не подходит. Вы добавили второй tr а в первом tr поставили rowspan="2", а это плохо, так как теперь первый tr зависит от контента вторго. У меня автоматически генерятся страницы и костяк - это один tr с двумя td. А что там будет во втором td - это не должно ни на что влиять.

Надеюсь я понятно выразился. Как уже кто-то здесь правильно сказал, реализация и контент должны быть разделены.

Да, извини, тормознул.

Но всё же же это опять же - табличная вёрстка. Те же яйцы, только в профиль.

2Allъ: Для чистоты эксперимента задачка вообще без таблиц.
Исходные данные:
<div>
<div>
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
</div>
<div>
Текст новости
<div><a href="...">Читать далее...</a></div>
</div>
</div>

Что хочется в результате:

Боковое меню | Текст новости
Боковое меню |
Боковое меню |
Боковое меню |
Боковое меню |
Боковое меню |
Боковое меню | Читать далее...

Кто-нибудь знает как какие стили нужны? Ну или в исходных данных поменять тэги, но чтобы без таблицы

>реализация и контент должны быть разделены.
rowspan не presentational атрибут, в отличие от valign. Также, оно автоматически изменит размер в зависимости от содержимого, вы, видимо, не пробовали применить. Если во "втором td" внизу ничего быть не должно, ничего и не случится.

Ну это коню понятно (но у автора таблица...). По идее надо бы всё к чертям выбросить, и сделать без таблицы. Если это не табличные данные, конечно. Однако если табличные, то для чего эта надпись именно внизу я не очень пока понимаю.

Без таблицы, сейчас сваяю.

Примерно так. По идее (мне казалось) в clearfix надо бы в content что-то прописать (хотя бы точку, например), но при этому почему-то Опера вставляет лишнее пространстро (строку, видимо), хотя height: 0 явно указан. Но оказалось работает и так. В IE проверить не могу за неимением такового.

p.s. вкладывать в блоковый элемент инлайн и блок элементы одновременно всё же не рекоммендуется.

<style type="text/css">
.clearfix:after {clear: both; content: ""; display: block; height: 0; visibility: hidden;}
.wrapper {position: relative;}
.menu, .content {float: left;}
.menu {width:20%;}
.content {width: 80%;}
.link {position: absolute; bottom: 0; left: 20%;}
</style>
<div class="wrapper clearfix">
<div class="menu">
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню
</div>
<div class="content">
<div>Текст новости</div>
</div>
<div class="link"><a href="...">Читать далее...</a></div>
</div>

Да что ты будешь делать %)

<style type="text/css">
.clearfix:after {clear: both;  content: ""; display: block; height: 0; visibility: hidden;}
.wrapper {position: relative;}
.menu, .content {float: left;}
.menu {width:20%;}
.content {width: 80%;}
.link {position: absolute; bottom: 0; left: 20%;}
</style>
<div class="wrapper clearfix">
	<div class="menu">
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню<br />
Боковое меню
	</div>
	<div class="content">
		<div>Текст новости</div>
	</div>
	<div class="link"><a href="...">Читать далее...</a></div>
</div>

Столько дивов — п*здец. Я как бы намекну, что у элементов разметки есть семантика, о которой вы не в курсе.

Лучше вам на завод идти работать, промышленность поднимать. Некомпетентных верстальщиков и без вас хватает.

В меню можно и UL'и запихать и прочее, в примере это не принципиально.

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

Спасибо всем.

Откуда вы такие повылезали?

<ul class="menu">
    <li>Боковое меню</li>
    <li>Боковое меню</li>
    <li>Боковое меню</li>
</ul>
<div class="content">
    <p>Текст новости <a class="more" href="#">Как бы зазывающий текст</a></p>
</div>

Никогда не используйте «читать далее» — это моветон.

Семантически, новости — список сортированный по дате. Так что там может быть ol к месту.

От меня то вы что хотите? Как человек попросил, так я и пишу. То, что меню в ul, li и параграфы в p это это и без вас в курсе.

s/это это/это я

Я и не предендую на звание профессионала-верстальщика. Я сисадмин, а глупые вопросы здесь задаю в целях самообразования. В конце концов, мне просто интересно, иначе я не участвовал бы в этой дискуссии.

> ну и что не так с табличной версткой ?

отображение идет после того, как вся таблица прогружается.

>> ну и что не так с табличной версткой ?

>отображение идет после того, как вся таблица прогружается

всю жизнь жили с табличной верстокой и ничего =))

щас и брузеру умнее стали )

> Ахтунг! Табличная верстка!

Кстати, не далее, как вчера столкнулся с необходимости верстки на таблицах:

http://ofprodiv.aroks.net/mockup/work.html

Задача была уложить этот дизайн, сохранив "эластичность" и корректное отображение в IE и FF. Все было хорошо, пока не понадобилось сделать "декор" -- полосы по краям сайта. В основной части они должны растягиваться по высоте основного блока, как ни крутил, с помощью чистого CSS сделать не удалось. Из двух зол (js-ресайзинг и таблицы) выбрал таблицы.

Или можно было таки сделать по канонам?

> В основной части они должны растягиваться по высоте основного блока
>Или можно было таки сделать по канонам?

http://alistapart.com/articles/negativemargins

Чем больше читаю подобные шаманства вокруг HTML-related тем больше поражаюсь тому, что он существует. Искренне жаль бедняг, которые вынуждены с ним возиться.

> http://alistapart.com/articles/negativemargins

Хех! А мог бы и сам догадаться :-).

Спасибо за наводку :-).

> Чем больше читаю подобные шаманства вокруг HTML-related тем больше поражаюсь тому, что он существует. Искренне жаль бедняг, которые вынуждены с ним возиться.

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

Хотя, если тему вкурил, то очень весело получается...

>Хотя, если тему вкурил, то очень весело получается... =))))