Any given sunday
Таблица. Табличные данные. Всё верно.
Список. UL/DL — не важно. Идеология, tabless, blah-blah-blah. И здесь тоже вроде как неплохо (простите меня, пользователи IE).
А теперь самое интересное. Попробуйте отцентировать блок с картинкой и описанием к ней по горизонтали. Без таблиц (и display:table; сжалимся над IE). Без скриптов. Без малейшего представления о ширине картинки.
Т.е. попробуйте получить эквивалент
<table align="center">
<tr>
<td><img .. /></td>
<td>Blah, blah, blah.<br />Blah, blah, blah.</td>
</tr>
</table>
…или я устал, или… Одно из двух. Если верить спецификации, то второе.
Q: Где заканчивается tabless и начинается table?
A: Там, где таблицами проще есть IE.
On any given Sunday you’re gonna win or you’re gonna lose. The point is — can you win or lose like a man?
Ну и так просто, на десерт: различное поведение в Opera и Mozilla.
Categories: CSS | comments: (13)
Комментарии
1. Serge 11th May 2004 - 10:00
А так нет?
#thumb div{
float: left;
margin: 10px;
padding: 10px;
border: 1px solid #000000;
background-color: #CCCCCC;
text-align: center;
}
<div id=thumb><div>05.05.2004<br><img src="1.jpg"><br>Description</div><div>05.05.2004<br><img src="1.jpg"><br>Description</div></div>
Mash:
Нет, не то.
Есть блок, содержащий картинку и текст. Картинка слева, текст справа. Размеров пикчера мы, в общем случае, не знаем.
Задача: выравнивание блока по центру.
Скопируй код таблицы, приведённый в посте, и посмотри на её поведение. Ячейки растягиваются «автоматом» в зависимости от содержимого, сама таблица на центре по горизонтали. Над размерами картинки можно не задумываться.
2. Эргэл 11th May 2004 - 10:00
<center> или я чего-то не понял?
Mash:
1) XHTML. Depricated;
2) Не сработает.
3. Serge 11th May 2004 - 10:01
Кстати, before & etc IE не понимает. Странно? ;)
Mash:
Я же извинился. :)
4. Илья Бирман 11th May 2004 - 10:51
<html>
<body style="text-align: center">
<div id="pic_text">
<img src="pic.jpg" /> text text text
</div>
</body>
</html>
Ясно, что вместо body можно сделать еще один div (width: 100%) и у него прописать соответствующий text-align. Img по умолчанию имеет display: inline, поэтому преступления в использовании text-align по отношению к ней нет.
5. Илья Бирман 11th May 2004 - 10:58
Хм, кажется, я понял, что предложил не совсем то, щас ещё поиграюсь
Mash:
Я позавчера часа три играл. Затягивает. :)
6. Эргэл 11th May 2004 - 11:01
Ну хорошо, center depricated, хотя все на это кладут болт. Но можно «p», «span», «div» и еще хрен знает сколько тэгов с аттрибутом align или с отдельным стилем, где прописан text-align. Проблема-то в чем?
Mash:
Проблема в том, что всё это не cработает.
7. alshur 11th May 2004 - 14:50
use tables where tables are due :-)
Mash:
эх… :)
8. Julik 11th May 2004 - 15:28
Все dl в контейнер, контейнер по традиции
#superwrapper {
margin-left: auto;
margin-right: auto;
width: 50%; /* строго например */
}
и любая заданная ширина (главное чтобы она была, и по возможности меньше окна — например 50%)
в чем смысл вырваниваь floated блоки? разве что текст внутри них подравнять (и то…)
Или я не понял задачу?
Mash:
Конечно, было бы хорошо задать ширину блока в px, em, %, ага. :) А потом… Скрестить пальчики и надеяться на то, что ширина порта просмотра браузера посетителя не будет больше/меньше, картинки не будут больше/меньше, шрифт не будет больше/меньше…
Но это не универсальное решение. Оно слишком бледно выглядит на фоне классической таблицы или display:table. Там можно не беспокоиться.
С другой стороны, иногда правильное заигрывание со свойством float может дать великолепный результат. Т.е. «соскользнувший» блок будет смотреться более привлекательно, нежели таблица на три горизонтальных скролла. В этом случае float просто порвёт таблицу.
>> в чем смысл выравнивать floated блоки?
Заказчики… они как дети.
Я хочу кусок графики слева, кусок текста справа, и чтобы по центру. Без оглядки на размеры содержимого, без таблиц, потому что содержимое этих кусков — не табличные данные. Это ведь не из области фантастики? :)
Такую конструкцию можно соорудить без использования float? Или таблица, или разговор на тему изменения макета. У меня пока так.
9. ganges 11th May 2004 - 16:20
Девочка красивая очень, про 25 лет это ты гонишь :)
литл бит офтопик
не знать заранее размеров пикчера — ИМХО — вот где самая страшная проблема
ссылку послал
Mash:
Гоню. :)
Не самая страшная, но проблема, да.
До почты доберусь только вечером.
10. Julik 11th May 2004 - 17:25
Я думаю тебя заинтересует старая работа Боумена — во всяком случае задача у него была похожая (только без картинок)
Далее вопрос: ты хочешь блоки с графикой и текстом по центру (то есть чтобы все блоки были по центру, но подписи к картинкам съезжали вправо-влево в зависимости от размера картинки) или ты хочешь картинки и текст «прижатые» к одной линии (то есть есть линия, впритык к ней слева картинки а справа текст)
И еще. Да, ужжжасно хочется чтобы и картинки любого размера, и монитор любой диагонали, и тд. Только так не бывает. Для приведения картинок к порядку надо иметь картинкожатель (и знать, что тамбнейл может быть по ширине не меньше 32 пикселей и не больше 300 — например), и железной рукой это форсировать. А для мониторов любой диагонали иметь параметры min-max и форсировать их для недобраузеров типа IE и Сафари. А если уж действительно любое ВСЁ — то тут самый случай оставить все таблицами, данные то довольно табличного вида.
Это я к тому что есть задачи поинтереснее. А картинкожателем на PHP могу даже поделиться (если есть нужда).
Mash:
>> Я думаю тебя заинтересует старая работа Боумена
px, px, px.
>> Далее вопрос
Я хочу получить таблицу (код см. выше) без таблицы (вот такой вот я извращенец). Две колонки: ширина левой определяется графикой, ширина второй — текстом. И расположить эту псевдо-таблицу чётко в центре.
Если текстовая колонка при определённом стечении обстоятельств (уменьшение ширины порта просмотра ПА) будет съезжать вниз, под картинку, то это было бы просто пределом мечтаний, но мне достаточно «таблицы».
>> Только так не бывает
Всё в em’ах + svg. И пускай пользователь настраивает сам. Шучу, конечно.
>> данные то довольно табличного вида
Достаточно спорный момент. Ключевое слово — «вид».
Я могу представить список в виде таблицы. С этим успешно справляется display:table. Это не таблица, это список. Однако, IE.
11. ganges 11th May 2004 - 18:58
А почему Сафари «недобраузер»
Очень ничего, кстати, браузер, я бы, во всяком случае, в один ряд его с ИЕ 6,0 не поставил бы
2MASH
Ты усложнил задачу в предыдущих комменариях. «Универсальное решение» ;-) — жестко зафиксировать все в пикселях, в том числе и размеры картинки и текстового блока
Параметры min-max на мой скромный взгляд отдыхают, они фиг в ИЕ вообще поддерживаются: уж лучше float
Насчет float интересно ты спросил — можно ли БЕЗ:возможно, что и нет (именно поэтому, наверное, Эрик Мейер в новой редакции своей книги перенес описание float из главы «Визуальное форматирование» в главу посвященную Layout) :))
Мои клиенты пользуются ИЕ 5,0 (во всяком случае на работе) — можешь себе представить мои кошмары ;) и ничего
Используя, например,
http://www.maxdesign.com.au/presentation/definition/dl-float-right.htm
потом выровнять блок-контейнер по центру Мой пример, который я тебе послал, работает в старших весиях Оперы Мозиллы и ИЕ (в пятом точно не работает центрирование,наверное)
- зато не использует таблиц «тама де не нада» ;)
Хотя…. Я недавно парился с формами, мне это надоело и я «запердолил» их в таблицу и ничего, никому хуже от этого не стало — Transitional Layout вполне в духе DWWS
Mash:
>> Ты усложнил задачу в предыдущих комменариях.
Гнусные инсинуации. :) Я изначально спрашивал о возможности создания блока с поведением, эквивалентному поведению таблицы, код которой приведён в посте. Там размеры таблицы нигде не указаны. Также я специально подчеркивал, что ширина картинки неизвестна.
>> Мой пример, который я тебе послал…
.container {width:500px;}
dd.txt {width:200px;}
Ну не то это, не то…
padding-right:5em;
Попробуй «Text size: Largest»
12. Julik 11th May 2004 - 19:22
Шуток вы не понимаете :-)
Сафари отличный браузер. Я им вообще-то пользуюсь.
Но поддержка max-min height ему бы не помешала вовсе (в следующем апдейте будет).
Но вообще с align (любого толка) у CSS есть ряд родовых болячекъ.
13. Julik 12th May 2004 - 04:17
Если ты решишь эту задачу — немедленно получаешь 85 по перфектометру.
Ибо экстремизм надо награждать.