Форум » Вопросы по настройке внешнего вида и управлению » Оптимизация под разные браузеры » Ответить

Оптимизация под разные браузеры

zheshka: Такая проблема: работаю над шапкой форума. Когда просматриваю форум на компьютере в браузерах firefox, opera, explorer выглядит все идеально. Когда перехожу на планшет во встроенном браузере правая сторона шапки форума уходит вправо от тела форума, а при просмотре в браузерах yandex и chrome опять все выглядит идеально. Когда перехожу на телефон в любых браузерах правая сторона шапки форума опять уходит вправо. Как же сделать так, чтобыфорум выглядел одинакого правильно на всех устройствах и во всех браузерах? Адрес форума www.school.myqip.ru

Ответов - 6

Rory: zheshka ваша шапка сделана не в процентах, а в пикселях. Сделайте шапку в процентах и тогда она будет подстраиваться под разные расширения экрана.

zheshka: О! Спасибо. Попробую.

Rory: zheshka нет за что.


zheshka: Я туплю... С помощью 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> Выглядело это так: Верх: Низ: Я явно что-то делаю не так... А, ведь, кажется, это так очевидно...

Rory: zheshka вам не нужны такие сложные расчеты! Процентное соотношение должно быть = 100%. То есть, если у вас 3 картинки, то, пример: 1 должна быть 15%, 2 (которая больше) 70%, 3 - 15% и если все эти проценты приплюсовать, то будет 100%. Следующая у вас таблица или низ который начинается и заканчивается <table></table>, тоже должны быть в процентах, которые в совокупности тоже должны давать 100%. Так же, не забывайте делать бэкапы, если вы сделаете что-то не так, легко будет вернуть назад.

zheshka: Ндя... Ровняла-ровняла свои таблицы, считала-считала проценты, бегала-бегала по всему инету в поисках, куда бы приткнуть эти картинки для кнопок... Сделала конфетку... И тут... Реклама. И как теперь сие "произведение" дарить ума не приложу... За две недели на новом месте нового не успею сделать... Обидно до соплей... Простите за флуд. Сие был всхлип души...



полная версия страницы