ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HTML в Википедии
16 сообщений из 16, страница 1 из 1
HTML в Википедии
    #38051833
Фотография Владимир Саныч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Владимир СанычПривилегированный пользователь
Участник
Мое почтение присутствующим и благодарность заранее.

Пытаюсь сделать некую диаграмму в Википедии. Основная сложность в том, что окончательный HTML составляет их движок на основании написанного мной кода на их языке. Возможность влиять на этот HTML у меня есть, но ограниченная. На данный момент имеется следующий HTML:
 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
<!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;". Однако у меня такой возможности нет.
...
Рейтинг: 0 / 0
24.11.2012, 20:56
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38051849
Фотография Владимир Саныч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Владимир СанычПривилегированный пользователь
Участник
Владимир Санычimg'и высотой 5 пикселей съезжают вниз на 10 пикселей, а высотой 8 - на 7.
А в сумме всегда 15. То есть дело явно в выравнивании по вертикали. Ищется способ задать его не через сами img'и, которые надо выравнивать и которые мне не подчиняются, а через объемлющий div, который я полностью пишу сам, или через что-нибудь на уровне таблицы.
...
Рейтинг: 0 / 0
24.11.2012, 21:20
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38051899
Фотография Владимир Саныч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Владимир СанычПривилегированный пользователь
Участник
Нашел некрасивое решение. У div'ов добавляется в style:

если height:5px; - то top:-10px;position:relative;
если height:8px; - то top:-7px;position:relative;
...
Рейтинг: 0 / 0
24.11.2012, 22:31
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38051945
Фотография Владимир Саныч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Владимир СанычПривилегированный пользователь
Участник
А вот и красивое решение. У div'ов добавляется в style:

line-height:0;
...
Рейтинг: 0 / 0
24.11.2012, 23:44
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052009
Фотография iConst
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
iConst
Участник
Владимир Саныч,

Если со стилями заморачиваться, то таких cellpadding="0" cellspacing="0" вещей не стоит допускать. Они, вообще-то, деприкейтд в 5-ке...
...
Рейтинг: 0 / 0
25.11.2012, 01:07
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052018
Фотография Владимир Саныч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Владимир СанычПривилегированный пользователь
Участник
iConstВладимир Саныч,

Если со стилями заморачиваться, то таких cellpadding="0" cellspacing="0" вещей не стоит допускать. Они, вообще-то, деприкейтд в 5-ке...
Понял, большое спасибо.
...
Рейтинг: 0 / 0
25.11.2012, 01:18
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052035
Фотография Владимир Саныч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Владимир СанычПривилегированный пользователь
Участник
А вот не получается. Если через css, то надо либо задавать padding, border и border-spacing для каждой ячейки, что сильно утяжеляет код, либо создавать стайл на уровне документа, чего мне движок не даст.
...
Рейтинг: 0 / 0
25.11.2012, 01:36
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052039
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
Владимир Саныч,

Стили каскадные, пользуйтесь.
...
Рейтинг: 0 / 0
25.11.2012, 01:42
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052046
Фотография Владимир Саныч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Владимир СанычПривилегированный пользователь
Участник
mage.lanВладимир Саныч,

Стили каскадные, пользуйтесь.
Вот именно про это я и написал выше. Читайте всё, что я написал про движок Википедии.
...
Рейтинг: 0 / 0
25.11.2012, 02:01
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052126
Фотография iConst
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
iConst
Участник
Владимир СанычА вот не получается. Если через css, то надо либо задавать padding, border и border-spacing для каждой ячейки, что сильно утяжеляет код, либо создавать стайл на уровне документа, чего мне движок не даст.Незнание CSS не освобождает от изучения: border-spacing неприменим к ячейкам - это свойство тега table .
Уж проще, чем с таблицами работать - не придумать. Самые предсказуемые и покладистые контейнеры.

А что, эта самая википедия не дает применять классы?
...
Рейтинг: 0 / 0
25.11.2012, 13:39
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052161
Фотография Владимир Саныч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Владимир СанычПривилегированный пользователь
Участник
Применять существующие - да. Описывать свои - нет.
...
Рейтинг: 0 / 0
25.11.2012, 14:42
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052188
st_st
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
st_st
Участник
iConstУж проще, чем с таблицами работать - не придумать. Самые предсказуемые и покладистые контейнеры.

У меня с ними наоборот, мучения, в основном из-за того, что постоянно забываю, что таблицы, ячейки не являются блочными элементами + их особенности, по привычке к td лепишь overflow:hidden, position:relative и т.д., а потом чешешь репу почему же это всё не работает.
...
Рейтинг: 0 / 0
25.11.2012, 15:36
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052401
Фотография iConst
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
iConst
Участник
Владимир СанычПрименять существующие - да. Описывать свои - нет.Ужос!
И все-таки - следует привести код к спецификации html5 (убрать всякие valign-ы и пр.) и потом уже бодаться...

Потом - препарация страницы в фаербаге/хроме/etc... должна показать проблему...
...
Рейтинг: 0 / 0
25.11.2012, 21:12
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052477
Фотография Владимир Саныч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Владимир СанычПривилегированный пользователь
Участник
iConstИ все-таки - следует привести код к спецификации html5 (убрать всякие valign-ы и пр.) и потом уже бодаться...
В принципе, часть этой работы делает тот же движок, например заменяет nowrap на style="white-space: nowrap;". Думаю, когда это станет критично, они начнут так обрабатывать и cellpadding/cellspacing.
...
Рейтинг: 0 / 0
25.11.2012, 23:20
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052553
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mage.lan
Участник
Владимир СанычПрименять существующие - да. Описывать свои - нет.Что-то слабо верится.
Это наколеночный самопис или все же нормальное решение? Может вы какую доку не дочитали, как темплейты описывать?
...
Рейтинг: 0 / 0
26.11.2012, 01:59
| Ответить | Цитировать | Написать  
HTML в Википедии
    #38052558
Фотография Владимир Саныч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Владимир СанычПривилегированный пользователь
Участник
mage.lanМожет вы какую доку не дочитали, как темплейты описывать?
Ну, такой шанс всегда есть...
...
Рейтинг: 0 / 0
26.11.2012, 02:25
| Ответить | Цитировать | Написать  
16 сообщений из 16, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HTML в Википедии
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38052046&tid=1449046]:
 0ms
get settings:
 9ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 199ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 66ms
get tp. blocked users:
 1ms
others: 240ms
total:  553ms
созд. / загр.: 553ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]