Чат сообщества
   | |
| Модератор форума: 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 |
|
Quote (fflesh) Так, по поводу картинок: Информеры с картинками упаковываем в блок с классом: Code <div class="infTableImg">$MYINFx$</div> А как упаковывать, если информер на странице контента скриптом прописан?) Code <script type="text/javascript" src="http://planeta-foto.ucoz.ru/informer/4"></script> |
|
Quick,
Quote (Quick) А как упаковывать, если информер на странице контента скриптом прописан?) Скрипт в блок. Про “распирает” - имелось в виду правая колонка. Хотя и центральную, не мешало бы ... А зачем у вас скриптом? ... ... Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Четверг, 02 Фев 2012, 06:36:14
|
|
Quick,
Quote А как упаковывать, если информер на странице контента скриптом прописан?) Да и с размерами поэкспериментировать , однообразить по высоте или ширине ... |
|
Quote (Miss_Esq) Quick, Quote А как упаковывать, если информер на странице контента скриптом прописан?) А указать в настройках информера количество колонок выводимого материала ? Да и с размерами поэкспериментировать , однообразить по высоте или ширине ... А указано количество материалов!) А зачем уравнивать по ширине или высоте? Мне нужны равные промежутке между рядом картинок в информере(сейчас как бог не=а душу положит), только и всего, вы знаете как это сделать? Окажите услугу тогда - помогите. Буду признателен) Добавлено (03-Фев-2012, 00:45:04) --------------------------------------------- Quote (fflesh) Quick, Quote (Quick) А как упаковывать, если информер на странице контента скриптом прописан?) Скрипт в блок. Про “распирает” - имелось в виду правая колонка. Хотя и центральную, не мешало бы ... А зачем у вас скриптом? ... ... А как ещё информер вставлять, если не скриптом? Можно ещё как-то? Оо Вы знаете... я упаковал всё в дивы, стили явно заработали, потому что картинки у меня вытянулись и недостающие пиксели заменились похожими ближайшими, что вроде как и называется интерполяцией... Сообщение отредактировал Quick - Пятница, 03 Фев 2012, 00:49:54
|
|
Quick,
Quote (Quick) А как ещё информер вставлять, если не скриптом? Можно ещё как-то? Если в шаблон, то кодом $MYINFORx$ ... Quick, Quote (Quick) Мне нужны равные промежутке между рядом картинок в информере(сейчас как бог не=а душу положит), только и всего, вы знаете как это сделать? Ещё можно вот так: Quote div.infTableImg table{table-layout:fixed;width:100%;} div.infTableImg table td{padding:2px;} div.infTableImg img{position:relative;width:100%;height:auto;} div.infTableImg img.imgVert{height:100%;width:auto;} Устанавливает поля в ячейке == 2px ... То бишь, две ячейки в строке - поля складываются == 4px; ... Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Пятница, 03 Фев 2012, 00:52:16
|
|
fflesh
О, сейчас попробую. А искажение фотографий знаете как исправить?? А то всё поломалось этими стилями, не знаю как исправить.. Добавлено (03-Фев-2012, 01:00:09) |
|
Quick,
Quote (Quick) то все картинки растянуты и превращены в сплошной артефакт, как это устраняется?) Каким образом? Картинки ведь маленькие. Можно конечно установить ограничение размеров, типа: Code div.infTableImg img{position:relative;width:100%;height:auto;max-height:150px;max-width:150px;} ... Или, тогда используйте не маленькие фотки, а большие ... или средние ... ... Это про информеры ... Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Пятница, 03 Фев 2012, 01:28:34
|
|
Quick,
Quote превращены в сплошной артефакт, как это устраняется А то у вас сейчас сайт резинового типа а изображения от эластичного типа макета .. |
|
Здравствуйте! Подскажите, пожалуйста, как можно исправить глюк при отображении сайта http://revivals.at.ua/ в Internet Explorer, весь текст съезжает вниз на расстояние экрана оставляя чистое поле, да, и в др. браузерах много глюков и картинка главная часто не отображается. Спасибо
|
|
|
|
Olenkiy, http://htmlbook.ru/html/!doctype
|
|
romans, без адреса проблемного сайта вам вряд ли ответят. но можно вслепую посоветовать прописать в общих настройках Doctype
подробности смотрите сообщениями выше |
|
Вот сайт, webanet, спасибо, Doctype прописан :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Странно, что на моем компе отображается нормально, а на другом всё сплыло вниз, под каркас.... Кстати, интересно, как он отображается в других браузерах, например Опере и т.л... Ламер. Не пинать.
Сообщение отредактировал romans - Вторник, 21 Фев 2012, 20:59:38
|
| |||