| Автор | Сообщение |
|
|
| |
Сообщение: 10
Зарегистрирован: 29.02.16
Репутация:
0
|
|
Отправлено: 12.04.16 11:43. Заголовок: Оптимизация под разные браузеры
Такая проблема: работаю над шапкой форума. Когда просматриваю форум на компьютере в браузерах firefox, opera, explorer выглядит все идеально. Когда перехожу на планшет во встроенном браузере правая сторона шапки форума уходит вправо от тела форума, а при просмотре в браузерах yandex и chrome опять все выглядит идеально. Когда перехожу на телефон в любых браузерах правая сторона шапки форума опять уходит вправо. Как же сделать так, чтобыфорум выглядел одинакого правильно на всех устройствах и во всех браузерах?
Адрес форума www.school.myqip.ru
|
 |
Профиль
Цитата
Ответить
|
|
Ответов - 6
[только новые]
|
|
|
|
| |
Сообщение: 7
Зарегистрирован: 04.03.16
Репутация:
0
|
|
Отправлено: 12.04.16 13:07. Заголовок: zheshka ваша шапка с..
zheshka ваша шапка сделана не в процентах, а в пикселях. Сделайте шапку в процентах и тогда она будет подстраиваться под разные расширения экрана.
|
|
Профиль
Цитата
Ответить
|
|
|
| |
Сообщение: 11
Зарегистрирован: 29.02.16
Репутация:
0
|
|
Отправлено: 12.04.16 13:27. Заголовок: О! Спасибо. Попробую..
О! Спасибо. Попробую.
|
|
Профиль
Цитата
Ответить
|
|
|
| |
Сообщение: 8
Зарегистрирован: 04.03.16
Репутация:
0
|
|
Отправлено: 12.04.16 13:32. Заголовок: zheshka нет за что. ..
zheshka нет за что. 
|
|
Профиль
Цитата
Ответить
|
|
|
| |
Сообщение: 12
Зарегистрирован: 29.02.16
Репутация:
0
|
|
Отправлено: 13.04.16 00:02. Заголовок: Я туплю... С помощь..
Я туплю... С помощью Firebug я измерила все, что есть у меня в шапке в пикселях. Получилось: 82 (картинка левого бока) + 17+102,5+ 1000 (картинка по-середине) + 17+82 (картинка правого бока) = 1403. 1403 приняла за сто процентов. Нашла сколько процентов от 1403 составляет 82, 1000 и 82. Вставила значения в код. Тоже самое предприняла с телом форума и низом. Конечный код выглядел так: Скрытый текст
Верх:
</STYLE>
</HEAD>
<BODY bgColor=#000000>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" background="http://s11.radikal.ru/i183/1604/e0/57ade3a5b6d6.gif"><img src="http://s017.radikal.ru/i416/1604/54/548054330fd8.gif" width="6%"></td>
<td align="center" background="http://s11.radikal.ru/i183/1604/e0/57ade3a5b6d6.gif"><img src="http://s018.radikal.ru/i524/1604/0b/77d152417dd4.gif" width="71%"></td>
<td align="right" background="http://s11.radikal.ru/i183/1604/e0/57ade3a5b6d6.gif"><img src="http://s019.radikal.ru/i601/1604/28/00bf2f69f8e1.gif" width="6%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="6%" style="background:url(http://s06.radikal.ru/i179/1604/76/9cdab0cf6fb0.gif); background-repeat:repeat-y;"></td>
<td><TABLE cellSpacing=0 cellPadding=10 width="86%" border=0>
<TR style="background:url(http://s019.radikal.ru/i613/1604/5f/ca71dfa13cb2.gif);"><TD valign=top>
Низ:
</center></TD></TR></TABLE></td>
<td width="6%" style="background:url(http://s019.radikal.ru/i618/1604/0f/3a1240771492.gif); background-repeat:repeat-y; background-position:right;"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="background:url(http://s019.radikal.ru/i637/1604/8b/32a03bee0a08.gif)"><img src="http://s020.radikal.ru/i719/1604/79/97378c601eed.gif"width="7%"</td>
<td align="right" style="background:url(http://s019.radikal.ru/i637/1604/8b/32a03bee0a08.gif)"><img src="http://s019.radikal.ru/i626/1604/cf/b077f9ad6857.gif" width="16%" border="0"></td>
</tr>
</table>
</BODY></HTML>
Выглядело это примерно так: Верх:
Низ:
|
Потом я сделала по-другому. Рассмотрела каждую картинку как элемент окруженный телом-фоном. Например: картинка левого бока шапки 82 пикселя + фон 17 пикселей = 99 пикселей. Нашла сколько процентов 82 составляет от 99. Далее картинка в 1000 пикселей окружена фоном в 205 пикселей, в сумме 1205 пикселей. Нашла сколько будет составляет 1000 в процентах от 1205... и т.д. Тоже самое проделала с телом форума и низом. В результате получился код: Скрытый текст
Верх:
</STYLE>
</HEAD>
<BODY bgColor=#000000>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" background="http://s11.radikal.ru/i183/1604/e0/57ade3a5b6d6.gif"><img src="http://s017.radikal.ru/i416/1604/54/548054330fd8.gif" width="83%"></td>
<td align="center" background="http://s11.radikal.ru/i183/1604/e0/57ade3a5b6d6.gif"><img src="http://s018.radikal.ru/i524/1604/0b/77d152417dd4.gif" width="83%"></td>
<td align="right" background="http://s11.radikal.ru/i183/1604/e0/57ade3a5b6d6.gif"><img src="http://s019.radikal.ru/i601/1604/28/00bf2f69f8e1.gif" width=83%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="89%" style="background:url(http://s06.radikal.ru/i179/1604/76/9cdab0cf6fb0.gif); background-repeat:repeat-y;"></td>
<td><TABLE cellSpacing=0 cellPadding=10 width="99%" border=0>
<TR style="background:url(http://s019.radikal.ru/i613/1604/5f/ca71dfa13cb2.gif);"><TD valign=top>
Низ:
</center></TD></TR></TABLE></td>
<td width="90%" style="background:url(http://s019.radikal.ru/i618/1604/0f/3a1240771492.gif); background-repeat:repeat-y; background-position:right;"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" style="background:url(http://s019.radikal.ru/i637/1604/8b/32a03bee0a08.gif)"><img src="http://s020.radikal.ru/i719/1604/79/97378c601eed.gif"width="23%"</td>
<td align="right" style="background:url(http://s019.radikal.ru/i637/1604/8b/32a03bee0a08.gif)"><img src="http://s019.radikal.ru/i626/1604/cf/b077f9ad6857.gif" width="23%" border="0"></td>
</tr>
</table>
</BODY></HTML>
Выглядело это так: Верх:
Низ:
|
Я явно что-то делаю не так... А, ведь, кажется, это так очевидно... |
|
Профиль
Цитата
Ответить
|
|
|
| |
Сообщение: 9
Зарегистрирован: 04.03.16
Репутация:
0
|
|
Отправлено: 13.04.16 10:36. Заголовок: zheshka вам не нужны..
zheshka вам не нужны такие сложные расчеты! Процентное соотношение должно быть = 100%. То есть, если у вас 3 картинки, то, пример: 1 должна быть 15%, 2 (которая больше) 70%, 3 - 15% и если все эти проценты приплюсовать, то будет 100%. Следующая у вас таблица или низ который начинается и заканчивается <table></table>, тоже должны быть в процентах, которые в совокупности тоже должны давать 100%. Так же, не забывайте делать бэкапы, если вы сделаете что-то не так, легко будет вернуть назад.
|
|
Профиль
Цитата
Ответить
|
|
|
| |
Сообщение: 13
Зарегистрирован: 29.02.16
Репутация:
0
|
|
Отправлено: 23.05.16 16:46. Заголовок: Ндя... Ровняла-ровня..
Ндя... Ровняла-ровняла свои таблицы, считала-считала проценты, бегала-бегала по всему инету в поисках, куда бы приткнуть эти картинки для кнопок... Сделала конфетку... И тут... Реклама. И как теперь сие "произведение" дарить ума не приложу... За две недели на новом месте нового не успею сделать... Обидно до соплей...
Простите за флуд. Сие был всхлип души...
|
|
Профиль
Цитата
Ответить
|
|
- участник сейчас на форуме
- участник вне форума