Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 HTML в Википедии  [new]
Владимир Саныч
Member

Откуда: Израиль (причем это 1 человек, а не 2 => прошу на ты)
Сообщений: 40401
Мое почтение присутствующим и благодарность заранее.

Пытаюсь сделать некую диаграмму в Википедии. Основная сложность в том, что окончательный HTML составляет их движок на основании написанного мной кода на их языке. Возможность влиять на этот HTML у меня есть, но ограниченная. На данный момент имеется следующий HTML:
+
<!DOCTYPE html>
...
<table style="background-color:lightblue;" cellpadding="0" cellspacing="0" border="1">
<tr valign="top">
<td style="color:white;font-size:50%;padding:0px;margin:0;">
<div style="padding:0;margin:0;height:8px;border:1px solid red;"><b>Upper level</b></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:5px;"><img src="HT_N.png" width="55" height="5" /></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:5px;border:1px solid red;"><img src="HT_A1.png" width="55" height="5" /><img src="HT_S2.png" width="55" height="5" /></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:8px;border:1px solid red;"><img src="HP1_S1.png" width="55" height="8" /><img src="HP1_S2.png" width="55" height="8" /></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:8px;border:1px solid red;"><img src="HP2_S1.png" width="55" height="8" /><img src="HP2_S2.png" width="55" height="8" /></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:5px;border:1px solid red;"><img src="HT_S1.png" width="55" height="5" /><img src="HT_A2.png" width="55" height="5" /><img src="3/3e/HL_L.png/11px-HL_L.png" width="11" 

height="5" /></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:5px;border:1px solid red;"><img src="HT_N.png" width="55" height="5" /></div>
</td>
</tr>
</table>

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

Примечания.
1. Если убрать <!DOCTYPE html> в самом начале, то проблема решается одним махом, но убрать это я не могу, это вставляет движок.
2. div'ы я поставил для борьбы с этим же <!DOCTYPE html> - без них все td получаются очень большой высоты (хотя та высота, которую я задал у div'ов, просто равна высоте img'ей и без <!DOCTYPE html> всё работает и так).
3. Бордеры у div'ов и таблиц я сделал для отладки, чтобы было видно, где что. Видно, что таблица рисуется правильно, а вот img'и оказываются ниже своих клеток. Причем img'и высотой 5 пикселей съезжают вниз на 10 пикселей, а высотой 8 - на 7.
4. Картинка такая мелкая потому, что в более крупном масштабе этой проблемы нет.
5. Пробовал в разных браузерах (Хром, ФФ, ИЭ), проблема одна и та же.
6. Проверено, что проблема решается, если всем img'ам задать style="vertical-align:top;". Однако у меня такой возможности нет.

К сообщению приложен файл. Размер - 1Kb
24 ноя 12, 20:56    [13524213]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
Владимир Саныч
Member

Откуда: Израиль (причем это 1 человек, а не 2 => прошу на ты)
Сообщений: 40401
Владимир Саныч
img'и высотой 5 пикселей съезжают вниз на 10 пикселей, а высотой 8 - на 7.

А в сумме всегда 15. То есть дело явно в выравнивании по вертикали. Ищется способ задать его не через сами img'и, которые надо выравнивать и которые мне не подчиняются, а через объемлющий div, который я полностью пишу сам, или через что-нибудь на уровне таблицы.
24 ноя 12, 21:20    [13524254]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
Владимир Саныч
Member

Откуда: Израиль (причем это 1 человек, а не 2 => прошу на ты)
Сообщений: 40401
Нашел некрасивое решение. У div'ов добавляется в style:

если height:5px; - то top:-10px;position:relative;
если height:8px; - то top:-7px;position:relative;
24 ноя 12, 22:31    [13524398]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
Владимир Саныч
Member

Откуда: Израиль (причем это 1 человек, а не 2 => прошу на ты)
Сообщений: 40401
А вот и красивое решение. У div'ов добавляется в style:

line-height:0;
24 ноя 12, 23:44    [13524593]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
iConst
Member

Откуда:
Сообщений: 2066
Владимир Саныч,

Если со стилями заморачиваться, то таких cellpadding="0" cellspacing="0" вещей не стоит допускать. Они, вообще-то, деприкейтд в 5-ке...
25 ноя 12, 01:07    [13524805]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
Владимир Саныч
Member

Откуда: Израиль (причем это 1 человек, а не 2 => прошу на ты)
Сообщений: 40401
iConst
Владимир Саныч,

Если со стилями заморачиваться, то таких cellpadding="0" cellspacing="0" вещей не стоит допускать. Они, вообще-то, деприкейтд в 5-ке...

Понял, большое спасибо.
25 ноя 12, 01:18    [13524828]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
Владимир Саныч
Member

Откуда: Израиль (причем это 1 человек, а не 2 => прошу на ты)
Сообщений: 40401
А вот не получается. Если через css, то надо либо задавать padding, border и border-spacing для каждой ячейки, что сильно утяжеляет код, либо создавать стайл на уровне документа, чего мне движок не даст.
25 ноя 12, 01:36    [13524855]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
mage.lan
Member

Откуда: Царьград
Сообщений: 1475
Владимир Саныч,

Стили каскадные, пользуйтесь.
25 ноя 12, 01:42    [13524871]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
Владимир Саныч
Member

Откуда: Израиль (причем это 1 человек, а не 2 => прошу на ты)
Сообщений: 40401
mage.lan
Владимир Саныч,

Стили каскадные, пользуйтесь.

Вот именно про это я и написал выше. Читайте всё, что я написал про движок Википедии.
25 ноя 12, 02:01    [13524895]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
iConst
Member

Откуда:
Сообщений: 2066
Владимир Саныч
А вот не получается. Если через css, то надо либо задавать padding, border и border-spacing для каждой ячейки, что сильно утяжеляет код, либо создавать стайл на уровне документа, чего мне движок не даст.
Незнание CSS не освобождает от изучения: border-spacing неприменим к ячейкам - это свойство тега table.
Уж проще, чем с таблицами работать - не придумать. Самые предсказуемые и покладистые контейнеры.

А что, эта самая википедия не дает применять классы?
25 ноя 12, 13:39    [13525189]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
Владимир Саныч
Member

Откуда: Израиль (причем это 1 человек, а не 2 => прошу на ты)
Сообщений: 40401
Применять существующие - да. Описывать свои - нет.
25 ноя 12, 14:42    [13525328]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
st_st
Member

Откуда: Tasm 5.0
Сообщений: 2392
iConst
Уж проще, чем с таблицами работать - не придумать. Самые предсказуемые и покладистые контейнеры.


У меня с ними наоборот, мучения, в основном из-за того, что постоянно забываю, что таблицы, ячейки не являются блочными элементами + их особенности, по привычке к td лепишь overflow:hidden, position:relative и т.д., а потом чешешь репу почему же это всё не работает.
25 ноя 12, 15:36    [13525428]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
iConst
Member

Откуда:
Сообщений: 2066
Владимир Саныч
Применять существующие - да. Описывать свои - нет.
Ужос!
И все-таки - следует привести код к спецификации html5 (убрать всякие valign-ы и пр.) и потом уже бодаться...

Потом - препарация страницы в фаербаге/хроме/etc... должна показать проблему...
25 ноя 12, 21:12    [13526396]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
Владимир Саныч
Member

Откуда: Израиль (причем это 1 человек, а не 2 => прошу на ты)
Сообщений: 40401
iConst
И все-таки - следует привести код к спецификации html5 (убрать всякие valign-ы и пр.) и потом уже бодаться...

В принципе, часть этой работы делает тот же движок, например заменяет nowrap на style="white-space: nowrap;". Думаю, когда это станет критично, они начнут так обрабатывать и cellpadding/cellspacing.
25 ноя 12, 23:20    [13526898]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
mage.lan
Member

Откуда: Царьград
Сообщений: 1475
Владимир Саныч
Применять существующие - да. Описывать свои - нет.
Что-то слабо верится.
Это наколеночный самопис или все же нормальное решение? Может вы какую доку не дочитали, как темплейты описывать?
26 ноя 12, 01:59    [13527243]     Ответить | Цитировать Сообщить модератору
 Re: HTML в Википедии  [new]
Владимир Саныч
Member

Откуда: Израиль (причем это 1 человек, а не 2 => прошу на ты)
Сообщений: 40401
mage.lan
Может вы какую доку не дочитали, как темплейты описывать?

Ну, такой шанс всегда есть...
26 ноя 12, 02:25    [13527263]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить