прибить текст к низу, выровнять по низу, как? @ DeForum.ru

В продолжение к предыдущему вопросу, про деление дива на 4 части, где karamba спас:
упрощённая задача, коллеги, подскажите, Plz. Есть спозиционированный див. Как сделать, чтобы текст в нём прибивался к низу, то есть, при добавлении текста, он оставался прибитым к низу и поднимался вверх. Соответственно, при overflow:hidden -- верхние строки должны уползать за верхнюю границу дива, но не более (и не менее)

(вобще задачка про прибить такой текс в тех самых четырёх дивах, ну на этом более простом примере яснее будет) Обпробовался разными вариантами, не помогает. Спасибо. абсолютное позиционирование абзаца с bottom:0 совсем не хочется. Подсказка из webdev со ссылкой на лебедевский техногрет тоже не сработала даже в ФФоксе, не говоря про ИЕ.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>the site</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1251" />
<style type="text/css" media="Screen">
html {
height: 100%;
min-height:100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
background: #fff;
color: inherit;
}
</style> 

</head>
<body>
<div style="position:absolute;width:50%;height:50%;left:25%;top:25%;background-color:#e0e0e0;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ac est. Donec sed lorem. 
Fusce nunc. Vestibulum pretium, nunc ut venenatis iaculis, mauris erat dapibus nibh, in feugiat 
sapien odio sed pede. Suspendisse sed diam. Mauris massa. Nam purus tellus, volutpat imperdiet, 
laoreet at, lacinia vitae, orci. Proin nisi. Curabitur nibh odio, pharetra nec, pellentesque non, 
faucibus id, lacus. Nulla lacinia velit in diam aliquam condimentum. Morbi tincidunt.
</p>
</div>
</body>
</html>

tentoys писал(а):

абсолютное позиционирование абзаца с bottom:0 совсем не хочется.

почему? Элементарное и изящное решение.

tentoys писал(а):

Подсказка из webdev со ссылкой на лебедевский техногрет тоже не сработала даже в ФФоксе, не говоря про ИЕ

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

Код:

div p {
margin-top: expression(this.parentNode.offsetHeight - this.offsetHeight) + "px");
}

На икспойнте обсуждался еще один муторный способ, но там столько избыточного кода цсс и хтмл, что таблица просится сама собой ))

karamba писал(а):

почему? Элементарное и изящное решение.

Ну, может быть. Не хотел потому, что это в продолжение предыдущей задачки -- слишком много абсолютно позиционированных элементов: основной див, в котором 4, в каждом из которых ещё по одному (*), а в них абсолютно позиционированные абзацы с текстом.
(*) -- нужно для того, чтобы задавать паддинги для текста ибо, если делать их для текста, то как-то странно он уползает наверх, всё равно выходит за границы дива, в котором лежит и процентные паддинги совсем по-другому задаются, так, как те самые 4 дива делащие основной на 4 части, проценты считают от родителя, что усложняет подсчёт. Такое нагромождение абсолютных позиционирований как-то смущает. Хотя, если в css создать отдельный класс, типа .absolute и задавать его всем элементам, экономя байтецы... надо подумать.
UPD: абзацы -- неее... проверил. В ФФ даже нулевой отступ снизу превращается в 10-15% процентный. Если отлько ещё в один див оборачивать.

karamba писал(а):

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

Код:

div p {
margin-top: expression(this.parentNode.offsetHeight - this.offsetHeight) + "px");
}

Может быть, ночью было трудно уследить за собой

. Просто там, мне кажется всё проще, позиционирование относительное, 50 с лишком строк кода css, если сократить в три раза (там для трёх колонок), то получится около 17, всё равно многовато, если можно обойтись одним expression (попробую, спасибо)

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

В данном случае нужно юзать таблицу с valign=bottom.
Все остальное ненадежно и глючно.
Основные элементы интерфейса нельзя выставлять через javascript.

prometheus писал(а):

В данном случае нужно юзать таблицу с valign=bottom.
Все остальное ненадежно и глючно.

Привер кода дадите, ну хоть посмотреть? Исходник наверху. Кстати, Вы ,наверное, имели ввиду vertical-align в css?
Насчёт всего остального ненажёжного и глючного, я б поспорил.

prometheus писал(а):

В данном случае нужно юзать таблицу с valign=bottom.
Все остальное ненадежно и глючно.
Основные элементы интерфейса нельзя выставлять через javascript.

Что вы что вы!!! Я слышал, что таблицами верстают лохи! :laugh:

tentoys, на самом деле, весь этот код, табличным решением, минимум будет раза в 2 меньше чем с экспрэшном для ие и доп.стилем для ФФ.
Я бы делал таблицу с стилем vertical-align:bottom, либо как уже карамба говорил фикс. размер, если позволяется, юзать его

Kurilshik писал(а):

Что вы что вы!!! Я слышал, что таблицами верстают лохи! :laugh:

Да не, дивами верстают лохи. На самом деле я б просто, just for curiosity, посмотрел бы код в табличном сполнении...

Kurilshik писал(а):

на самом деле, весь этот код, табличным решением, минимум будет раза в 2 меньше чем с экспрэшном для ие и доп.стилем для ФФ.
Я бы делал таблицу с стилем vertical-align:bottom, либо как уже карамба говорил фикс. размер, если позволяется, юзать его

Поколдовал я немного, заработало display:table-cell, не без помощи хаков для ИЕ, который, включая ИЕ7, так и не понимает этого, вроде победил. На самом деле Эксплореры делают то, что надо, а ФФ нет, в части overflow:hidden: текст, должен уползать за верхнюю границу. Это пока единственно, что останавливает. В остальном, я обошёлся без таблиц (просто даже не пробовал, если что, не потому, что у меня идиосинкразия)

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>the site</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1251" />
<style type="text/css" media="Screen">

html {
height:100%;
min-height:100%;
font-family: sans-serif;
color: #bbb;
}
body {
margin: 0;
padding: 0;
height: 100%;
background: #fff;
color: inherit;
min-width: 750px;
min-height:100%;
}
.absolute{
position:absolute;
}
</style> 

</head>
<body>
<div class="absolute" style="display:table;
background-color:#000;right:30%;left:30%;
width:40%;bottom:30%;top:30%;height:40%;
overflow-y:hidden;">
<div style="#position:absolute;#bottom:5%;display:table-cell;vertical-align:bottom;">
<div style="#position:relative;#top:-5%;">
0<br />
1<br />
2<br />
3<br />
4<br />
5<br />

01<br />
11<br />
21<br />
31<br />
41<br />
51<br />

</div>
</div>
</div>
</body>
</html>

ВОПРОС:

Цитата:

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

ОТВЕТ:
Сделать такое с помощью DIV - изящно нельзя.
vertical-align:bottom работать не будет.

Альтернативный вариант -
<table>
<tr valign="bottom">
<td>bla-bla-bla</td>
</tr>
</table>

prometheus писал(а):

Сделать такое с помощью DIV - изящно нельзя.

Уважаемый, я выше привёл код целиком, который работает (скажу по секрету, пара дивов там даже даже лишняя), всё работает, есть конечно, недоработка с ФФ о которой я писал, но это спишу на ночь и хотение спать. Сделать на дивах можно. Более того, я сам понял (раньше не приходилось сталкиваться, поэтому и не морочился), как работает для нормальных браузеров display:table и vertical-align:bottom -- оно работает.

prometheus писал(а):

vertical-align:bottom работать не будет.

Альтернативный вариант -
<table>
<tr valign="bottom">
<td>bla-bla-bla</td>
</tr>
</table>

Если не затруднит, приведите, прожалуйста, код целиком, а не альтернативный вариант, в котором, кстати, valign, ЕМНИП, deprecated. Для ИЕ5+ + ФФ.

tentoys писал(а):

слишком много абсолютно позиционированных элементов: основной див, в котором 4, в каждом из которых ещё по одному (*), а в них абсолютно позиционированные абзацы с текстом.

и что?
Насчет оверфлоу вы говорите странные вещи. Вот моя попытка, все работает как вы хотите или вы не целиком оговорили ограничения и условия (сорри, линкой не могу — домен еще не раздуплился, но копи-пейст работает )):

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>the site</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=windows-1251" />
<style type="text/css" media="Screen">
html {
   height: 100%;
   }
body {
   margin: 0;
   padding: 0;
   height: 100%;
   min-height: 100%;
   background: #fff;
   color: inherit;
   font-size: 100.1%;
   }
div, p {
   position: absolute;
   z-index: 1;
   }
div div {
   width: 50%;
   height: 50%;
   overflow: hidden;
   }
div p {
   font: .89em Arial;
   color: #000;
   padding: 1em;
   margin: 0;
   left: 0;
   bottom: 0;
   }
</style>
</head>
<body>
<div style="width:90%;height:90%;left:5%;top:5%;border:1px solid black;">
   <div style="left:0;top:0;background-color:#ff9;">
      <p>Текст внизу, с оверфлоу<br />
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
   </div>
   <div style="right:0;top:0;background-color:#99f;">
      <p>Текст внизу, с оверфлоу<br />
      Lorem ipsum dolor sit amet</p>
   </div>
   <div style="left:0;bottom:0;background-color:#9f9;">
      <p>Текст внизу, с оверфлоу<br />
      Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt</p>
   </div>
   <div style="right:0;bottom:0;background-color:#f99;">
      <p>Текст внизу, с оверфлоу<br />
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?</p>
   </div>

</div>
</body>
</html>

прекрасно работает оверфлоу и абсолютные параграфы, без никаких хаков и экспершнов.
В принципе, зная имея размеры (хоть в пикс, хоть в %) контейнеров их их положение на странице и относительно друг друга, без внешнего контейнера можно вообще обойтись. На одну ноду в дом-е будет меньше…
Сейчас же количество структурных тегов одинаково что для этой, что для табличной реализации (даже на один меньше — нет tbody).
prometheus, где вы видите джаваскрипт?

tentoys писал(а):

Если не затруднит, приведите, прожалуйста, код целиком, а не альтернативный вариант, в котором, кстати, valign, ЕМНИП, deprecated. Для ИЕ5+ + ФФ.

Элементарно реализуется на такой основе.
Кода минимум, работает везде, начиная с IE 4.01. (для ie 3.01 у таблицы нужно в лоб атрибуты писать)

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Untitled</title>
   <style type="text/css" media="screen">
   html, body {width:100%;height:100%;margin:0px;padding:0px;}
   body {min-height:100%;background:#fff;font-size:100.1%;}
   .tab {width:100%;height:100%;border-spacing:0;border-collapse:collapse;}
   .tab td {vertical-align:bottom;width:50%;height:50%;}
   </style>
</head>
<body>
<table border="1" class="tab">
<tr>
   <td>text<br />text<br />text<br />text<br />text</td>
   <td>text<br />text<br />text<br />text<br />texttext<br />text<br />text<br />text<br />texttext<br />text<br />text<br />text<br />texttext<br />text<br />text<br />text<br />text</td>
</tr>
<tr>
   <td>text<br />text<br />text<br />text<br />text</td>
   <td>text<br />text<br />text<br />text<br />texttext<br />text<br />text<br />text<br />text</td>
</tr>
</table>
</body>
</html>

karamba писал(а):

prometheus, где вы видите джаваскрипт?

Да, в этом примере js нету.
Реализация неплохая, но я не понимаю для чего может такое пригодится.
Если текст не влезает - его обрезают. На практике где такое нужно?
Вот с таблицами - понятно, текст выведется столько сколько нужно.
Кстати, ваш пример с div-элементами актуален тока ie 5.5 и выше.

prometheus писал(а):

Кстати, ваш пример с div-элементами актуален тока ie 5.5 и выше.

кстати, версионность в отрыве от статистики по аудитории имеет обычно чисто академический характер. Проблемы владельцев ранних (очень ранних) версий — это только проблемы владельцев ранних (очень ранних) версий.

karamba писал(а):

Проблемы владельцев ранних (очень ранних) версий — это только проблемы владельцев ранних (очень ранних) версий.

Это не так.
В числе наших клиентов есть такие пользователи, т.е. с IE 5.5 и даже IE 5.0
При разработке речь не идет - их проблемы, тем более про верстку.
Верстка должна работать везде. Это 100%.
У меня AJAX работает на 5.0 … А тут какой-то примитивный интерфейс сгенерить не можете.

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

prometheus, при таком подходе вам светит оптимизить код под ленивых/скупых юзеров до конца дней своих.
тут панимашь веб 2.0, ДТД какие-то новые, цсс3 не за горами, а вы предлагаете на хтмл 3.2 опираться. Кста, почему вы не говорите о поддержке ИЕ 4, НН 4, Линкс тот же? Где прходит ваша условная граница?

Если аудиторию моего сайта составляет менее 5% юзеров под ИЕ 5 и ниже — я пожертвую этой аудиторией в пользу оставшихся 95% и не буду лишать их фич, в колеса которых ставят палки 5% ленивых. И нужен ли работающий аджакс юзеру под ИЕ 5.0?

prometheus писал(а):

Элементарно реализуется на такой основе.
Кода минимум, работает везде, начиная с IE 4.01. (для ie 3.01 у таблицы нужно в лоб атрибуты писать)

Спасибо за пример, он удачный, но не полный. при малейшем ресайзе окна возникает скролл. Изначальная задача была про прибитый к низу текст в абсолютно спозиционированном диве.
А, valign благополучно исчезло, эо гуд.

prometheus писал(а):

Реализация неплохая, но я не понимаю для чего может такое пригодится.
Если текст не влезает - его обрезают. На практике где такое нужно?
Вот с таблицами - понятно, текст выведется столько сколько нужно.

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

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

karamba, спасибо. Дома посмотрю пример. Всё-таки мысль с table-cell для дива, а не для абзаца не отпускает. overflow для ФФ -- мой косяк, я уже заприметил, исправлю.

karamba писал(а):

prometheus, при таком подходе вам светит оптимизить код под ленивых/скупых юзеров до конца дней своих.

Ой, да была б моя воля, я б давно забил бы на всех этих динатопов

Но, приходится поддерживать этот старый хлам, что делать когда у заказчиков такое. У них организация, лицензионные виндуйсы 98/95. Работники самиж не виноваты.

karamba писал(а):

Кста, почему вы не говорите о поддержке ИЕ 4, НН 4, Линкс тот же? Где прходит ваша условная граница?

Для каждого конкретного проекта своя граница.
Но в целом мои требования такие.
100% адекватность интерфейса, javascript в
- IE 5.5/6/7
- Mozilla 1.x - 2
- Opera 8/9

80% адекватность интерфейса, javascript в
- IE 5.0
- Opera 6/7
- Сафари

karamba писал(а):

И нужен ли работающий аджакс юзеру под ИЕ 5.0?

Нужен,
задуманный функционал должен работать.

2 Сообщения: 132 Зарегистрирован: 21.10.06

prometheus писал(а):

80% адекватность интерфейса, javascript в
- IE 5.0
- Opera 6/7

Простите за некоторый оффтоп, но два вопроса:
1) 80% адекватности javascript (впрочем, иногда и разметки) - это имхо осетрина второй свежести, то есть, не работающий функционал. Нет?
2) Могу себе представить необходимость в некотором специальном случае (тот же интранет) поддержки древнего ИЕ. Но поддержка заведомо старинной Оперы, пользователи которой в общем-то обновляют её по своей воле и регулярно - зачем?

Mimo писал(а):

prometheus писал(а):

80% адекватность интерфейса, javascript в
- IE 5.0
- Opera 6/7

Простите за некоторый оффтоп, но два вопроса:
1) 80% адекватности javascript (впрочем, иногда и разметки) - это имхо осетрина второй свежести, то есть, не работающий функционал. Нет?
2) Могу себе представить необходимость в некотором специальном случае (тот же интранет) поддержки древнего ИЕ. Но поддержка заведомо старинной Оперы, пользователи которой в общем-то обновляют её по своей воле и регулярно - зачем?

1) Адекватность предполагает, что пользователь может пользоваться функционалом в принципе.
Другое дело, что некоторые фитчи будут недоступны (кнопочки будут скрыты, например).

2) Тут комментировать нечего.
Нужно смотреть сюда хотя бы.

2 Сообщения: 132 Зарегистрирован: 21.10.06

prometheus писал(а):

1) ...пользователь может пользоваться функционалом в принципе …(кнопочки будут скрыты, например).

Какой же это функционал тогда будет?

prometheus писал(а):

2) Тут комментировать нечего.
Нужно смотреть...

Я вопрос как раз и задавал посмотрев:
Opera 6 - 0.0074%
Opera 7 - 0.4240%

И есть время убиваться с хаками и вариантами чтобы обслужить ещё 0.4314% чтобы решить обсуждаемую задачу по прибиванию текста книзу или того же уровня вопросы кроссбраузерности?

Впрочем, сорри, наверное это уж совсем оффтоп. Спасибо, я вашу позицию понял.

prometheus писал(а):

2) Тут комментировать нечего.
Нужно смотреть сюда хотя бы.

Ну вот, наверное на первой семёрке можно и остановиться.

Цитата:

Броузер Посетители
Microsoft Internet Explorer 6 58.2350%
Microsoft Internet Explorer 7 12.3538%
FireFox 2 0.7248%
Opera 9 9.3364%
FireFox 1 2.8561%
Opera 8 2.4029%
Microsoft Internet Explorer 5 1.6391%

DeДверь
Логин:
Пароль:
	Автологин