Чат сообщества
   | |
| Модератор форума: Yuri_G |
| Сообщество uCoz Мастерская uCoz Дизайн: управление шаблонами Оптимизация дизайна под разные браузеры |
| Оптимизация дизайна под разные браузеры |
|
Зачем нужен "правильный" HTML-код?
HTML - это специальный язык разметки для веб-страниц. Этот язык стандартизован. Значения каждого тега строго определены. Каждый тег имеет определенные атрибуты. HTML-код страницы интерпретируется браузерами и переводится в изображение веб-страницы, которое видит пользователь. Теперь представьте, что HTML код страницы содержит ошибки (не соответствует стандарту). Что в этом случае делать браузеру? Самый простой вариант - это вывести на экран сообщение об ошибке и все. Однако пользователь вряд ли будет рад увидеть вместо страницы, на которой пропущен закрывающийся тег, сообщение об ошибке. Поэтому создатели браузеров пошли другим путем. Браузеры пытаются (в меру своей интеллектуальности) "исправить" некорректный HTML-код. Вот тут и кроется проблема. Каждый браузер имеет свои правила, по которым он будет исправлять HTML ошибки на веб-страницах. Поэтому, если на странице есть ошибки, то существует большая вероятность, что данная страница в разных браузерах будет выглядеть по-разному. Более того, если даже он сейчас выглядит одинаково во всех браузерах, это не значит, что так будет всегда. С выходом новой версии какого-либо браузера коррекция HTML ошибок может быть изменена. А вот следование стандартам изменено вряд ли будет. Если вы хотите, чтобы ваш сайт выглядел одинаково в самых популярных браузерах, постарайтесь избежать ошибок в HTML коде. В общем, бывает когда есть сайт, есть дизайн, но вот проблема - неизвестно, как он выглядит на других браузерах. Те, кто попроще, просто отписываются, что проверил на таком-то браузере, на других - не знаю.
Эта тема для того, чтобы обнаруживать косяки в разных браузерах. Также и проблема оптимизации и предложения по устранении ошибок (только советы, не просите других делать за вас работу) Проблема с отображением тега HR
Советую вместо Code <hr> который красиво может выглядить только в ИЕ использовать цветную однопиксельную картинку: Code <img src="путь до картинки/hr.gif" class="hr"> и прописать ее в стилях: Code .hr {height: 1px; width: 100%; margin-top: 5px; margin-bottom: 5px;} © Andre Разное понимание CSS браузреами типа IE и Opera (там же Mozilla и прочие)
Проблема в следующем: ИЕ и Опера по разному принимают стили и пересчитывают ее на свой лад. Так расстояние между тегами H1 и P разное и поэтому текст по разному смотрится. Для решения этой проблемы надо использовать дополнительную таблицу стилей под IE, поставить там в ручную padding и margin, или другие атрибуты (в зависиости от ситуации) и прописать ссылку в html, заключив ее в специальные теги.
Code <html> <head> <title>Максим Пелевин - Главная страница</title> <link href="http://maxpelevin.3dn.ru/_st/my.css" rel="StyleSheet" type="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="/img/ie7.css" /><![endif]--> <script type="text/javascript" src="/img/global.js"></script> </head> Надеюсь понятно объяснил. © Русак
Решаем проблему с прозрачностью картинок PNG в ИЕ: http://www.tigir.com/alpha_png.htm |
|
Tune,
Quote Ну не будут эти люди ничего качать добровольно, никаких обновлений или новых браузеров Если не будете тормошить проблема останется , а тыкните в проблему зашевелятся , а не захотят шевелиться , вот и пусть сидят как ..... быстрее отстанут от компьютера и вам проблем меньше . Я понимаю , Internet для народа , но не для прослойки же полного отстоя , а для нормальных людей . Учить надо неучей , поднимать уровень а не опускаться в канализацию самим ... Сообщение отредактировал Miss_Esq - Четверг, 22 Дек 2011, 14:10:18
|
|
Здравствуйте подскажите пожалуйста как размеры сайта до 1024х768 вот css http://dalnoboy-life.ucoz.ru/_st/my.css
|
|
Bumer_2, Сайт и так вписывается в 1024 Х 768 ... что то не понятно что хотите ... И пропишите Doctype в общих настройках ...
|
|
Bumer_2, В общих настройках сайта есть поле для вставки значения Doctype :
Значение тега <!DOCTYPE>: Поставьте туда например <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Quote я хочу сделать чтоб на всех экранах был 1024х768 Строки в исходном тексте в шаблоне блока XAXA сами поставили или так рипнули ? от 0 до 20 447 ... мда уж ... <body style="background:url('/img/b.gif') #000000; margin:0px; padding:0px;"> <center><table border="0" cellpadding="5" cellspacing="0" width="95%"> сменить на <body style="background:url('/img/b.gif') #000000; margin:0px; padding:0px;"> <center><table border="0" cellpadding="5" cellspacing="0" width="1024"> <center><table border="0" cellpadding="5" cellspacing="0" width="95%"><tr><td class="bBlok2"> сменить на <center><table border="0" cellpadding="5" cellspacing="0" width="1024"><tr><td class="bBlok2"> и так далее .. много ошибок в шаблоне ... Сообщение отредактировал Miss_Esq - Суббота, 24 Дек 2011, 15:11:39
|
|
Bumer_2,
В заголовке , скрипты для чего ??? Убрать не пробовали ?? Тот что выделен , его вообще у вас на сайте нет .. Вот это всё успешно можно заменить на другую функцию .Столько одинаковых скриптов на на страницу , на каждый материал отдельное , совершенно бесмсленно ставить ... Вид материалов на странице каталога файлов у вас откуда ?? Какой шаблон ?? Все JS ссылки в материалах ведут на модуль новостей . Не удивительно что и переключатель переносит вас в новости а не на другую страницу каталога файлов ... Смотреть нужно все шаблоны каталога файлов , что там понаписано , по исходному тексту концов не найти .. Сообщение отредактировал Miss_Esq - Воскресенье, 25 Дек 2011, 23:06:52
|
|
Люди, помогите пожалуйста, если знаете решение моей проблемы!:shock:
 :shock: Делал сайт на браузере Google Chrome, а когда посмотрел в IE - мамка дорогая!  Суть проблемы: все блоки сайта я заключил в код <button>...</button> - получилось красиво. На Гугл Хроме работает отлично, за исключением скрипта перевода страниц сайта (http://www.google.com/webelements/#!/translate), наверно потому, что текст теперь воспринимается скриптом как одна такая большущая кнопка. Это не гуд. Хочу исправить, но не знаю "как". Вопрос: как можно изменить этот <button> на что-нить другое, чтобы в браузере IE работали ссылки, скрипт перевода текста и скрипт раскрывающегося скрипта. Может что в CSS прописать касательно стилей кнопки (button'a этого треклятого  ) или заменить чем другим и класс присвоить... Познания мои в HTML скудноваты, в инете ответов не нашел, вся надежда токмо на ВАС!  Еще вот мысль пришла...может можно с помощью условного оператора сделать так, чтобы в Хроме показыался button, а в Эксплорере - нет. Теоретически же это возможно? Как вот только Хром там обозначается - не ведаю.:shock: Правда тогда все равно в Хроме не будет пахать скрипт переводчика сайта. Короче, спасите-помогите, загибаюсь уже! Вот мой сайт: http://rfs.ucoz.ru/ Кстати, на Мозилле и Опере не проверял, если кто глянет, напишите как оно ваще. P.S. Поздравляю всех всех всех пользователей системы uCoz с наступающим Новым Годом!!!!!  Пусть Новый год принесет вам море удачи и дачу у моря! Верстаю сайты на uCoz от 500 ք (Блочная верстка на HTML5)
ВКонтакте: http://vk.com/vg_forex Мой Мир: http://my.mail.ru/mail/vg_forex |
|
Owner1919, Вы сначала пропишите Doctype в общих настройках , а потом и сравнивайте что и как выглядит в обозревателях , IE 8 - 9 и Google Chrome .
|
|
Quote (Miss_Esq) Owner1919, Вы сначала пропишите Doctype в общих настройках , а потом и сравнивайте что и как выглядит в обозревателях , IE 8 - 9 и Google Chrome . А что туда надо написать? Верстаю сайты на uCoz от 500 ք (Блочная верстка на HTML5)
ВКонтакте: http://vk.com/vg_forex Мой Мир: http://my.mail.ru/mail/vg_forex |
|
Owner1919, Панель управления - Админ бар - Общее - Общие настройки
Внизу поле ввода .. Значение тега <!DOCTYPE>: Данный тег будет добавлен в самое начало документа. Используйте эту настройку только если понимаете ее смысл. Вставить туда <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> И сохранить .. |
|
Quote (Miss_Esq) Вставить туда <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> И сохранить .. Вставил и сохранил. В IE откорректировалась длина блоков (это хорошо), однако, все равно нельзя зайти ни в один раздел меню, Эксплорер не понимает (это плохо). Подскажите, а как будет Хром, Опера и Мозилла для условного оператора? Я наверно попробую вручную отредактировать шаблон, может что и выйдет. Верстаю сайты на uCoz от 500 ք (Блочная верстка на HTML5)
ВКонтакте: http://vk.com/vg_forex Мой Мир: http://my.mail.ru/mail/vg_forex |
|
Owner1919,
Quote Эксплорер не понимает |
|
Quote (Miss_Esq) Нужно не блок окружать тегом кнопки , а саму кнопку превращать в блок .. Это было бы замечательно, но я не знаю, как, подскажете? Верстаю сайты на uCoz от 500 ք (Блочная верстка на HTML5)
ВКонтакте: http://vk.com/vg_forex Мой Мир: http://my.mail.ru/mail/vg_forex |
|
Owner1919, Ещё замечательнее было бы воспользоваться HTML редактором типа Ms Office SharePoint Designer 2007 и немного пофантазировать экспериментально ..
<button style="width: 100px; height: 100px;"><img alt="" src="изображение" style="width: 50px; height: 50px;"></button> Сообщение отредактировал Miss_Esq - Понедельник, 26 Дек 2011, 20:23:58
|
| |||
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!