Чат сообщества
   | |
| Модератор форума: 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 |
|
Miss_Esq,
Quote (Miss_Esq) <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='7.0')?> <meta http-equiv="X-UA-Compatible" content="IE=7"> <?else?> <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='8.0')?> <meta http-equiv="X-UA-Compatible" content="IE=8"> <?else?> <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='9.0')?> <meta http-equiv="X-UA-Compatible" content="IE=9"> <?endif?><?endif?><?endif?> Какое гениальное условие )))) А главное - оптимальное ))) Ничего лишнего. ... Тогда уж вот так Code <?if($USER_AGENT$='ie')?> <?if($USER_AGENT_VER$='7.0')?><meta http-equiv="X-UA-Compatible" content="IE=7" /><?endif?> <?if($USER_AGENT_VER$='8.0')?><meta http-equiv="X-UA-Compatible" content="IE=8" /><?endif?> <?if($USER_AGENT_VER$='9.0')?><meta http-equiv="X-UA-Compatible" content="IE=9" /><?endif?> <?endif?> Но лучше, вот так: Code <?if($USER_AGENT$='ie')?><meta http-equiv="X-UA-Compatible" content="IE=<?substr($USER_AGENT_VER$,0,1)?>" /><?endif?> ... но это, наверно, слишком ... заумно ))) ... Добавлено (01-Фев-2012, 03:09:56) --------------------------------------------- Miss_Esq, Quote (Miss_Esq) А где гарантия что эти пользователи АДЕКВАТНЫЕ личности ? То есть, вы обвиняете меня и пользователя Quick в неадекватности? ... Смелое заявление... ... Quote (Miss_Esq) Скоро выйдет IE 10 а они всё ещё скребуться на версиях созданных 5 - 10 лет назад ... Какой версией обозревателя пользуется пользователь - его личное дело. Дело же веб разработчика, что бы сайт приемлемо отображался во всех популярных браузерах. На данный момент, из всех обозревателей, ИЕ9 имеет такой низкий процент, что его нельзя отнести к группе «популярные браузеры» в принципе. Не говоря уж о ИЕ10))) ... Как и браузеры ИЕ к группе «популярные», если уж по большому счёту ... Explorer 6 и то полуярнее ИЕ9 и ИЕ8 вместе взятых. Откройте глаза. Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Среда, 01 Фев 2012, 03:19:28
|
|
Quick,
Quote (Quick) Самое интересное - эта проблема только у группы "ГОСТЬ"(если авторизоваться, то сайт приобретает нормальный вид) и только в ИЕ (!). В Мозиле и Хроме всё нормаль. зы:(дело не в ширине информеров! Иначе у авторизованных пользователей, проблема бы не исчезала) Прошу помощи... Сайт Горизонтальный скролл убрать можно, сто пудов. НО, сделать всё что вы хотите, про картинки, и прочее, без доктайпа просто не реально. Точнее, реально-то реально, но геморрой - ... жуткий.... Так что ... так. Добавлено (01-Фев-2012, 03:34:28) Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Среда, 01 Фев 2012, 03:34:15
|
|
Quote (Miss_Esq) Quote Куда именно этот код вставлять? После тега <head> Вставил это в шаблон Страниц сайта. Вот так теперь выглядит фрагмент кода: Code <html> <head> <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='7.0')?> <meta http-equiv="X-UA-Compatible" content="IE=7"> <?else?> <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='8.0')?> <meta http-equiv="X-UA-Compatible" content="IE=8"> <?else?> <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='9.0')?> <meta http-equiv="X-UA-Compatible" content="IE=9"> <?endif?><?endif?><?endif?> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>$SITE_NAME$ - $MODULE_NAME$</title> <?$META_DESCRIPTION$?> <link type="text/css" rel="StyleSheet" href="/.s/src/css/844.css" /> </head> <body> $ADMIN_BAR$ Только ничего не изменилось!( А ИЕ7 у меня не потому, что я ленивый, а потому что я им не пользуюсь, я на лисе сижу. Добавлено (01-Фев-2012, 04:03:50) Quote (fflesh) Горизонтальный скролл убрать можно, сто пудов. НО, сделать всё что вы хотите, про картинки, и прочее, без доктайпа просто не реально. Точнее, реально-то реально, но геморрой - ... жуткий.... Так что ... так. Звучит оптимистично!) А как прописывать доктайп? Quote Добавлено (01-Фев-2012, 03:34:28) --------------------------------------------- !!!!! Я увидел его, увидел!!! Значит, он есть !!! Круто)) Как убрать сколл я напишу. Остальное, только после прописки адекватного доктайпа. Кого увидел то?!  ...ладно, узнать бы как доктайп прописывать ещё  Добавлено (01-Фев-2012, 04:13:57) Quote Приветствую Вас Гость | Регистрация | Вход | Добавить фотографию | Мои фотографии Когда авторизовался вот так: Quote Вы вошли как Quick | Группа "Администраторы" Мой профиль | Выход | Добавить фотографию | Мои фотографии Я все эти кнопки воткнул в блок меню, код выглядит вот так: Есть тут ошибки и могут ли они быть причиной? сайт |
|
Quick,
Quote (Quick) Вставил это в шаблон Страниц сайта. Вот так теперь выглядит фрагмент кода: Code <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='7.0')?> <meta http-equiv="X-UA-Compatible" content="IE=7"> <?else?> <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='8.0')?> <meta http-equiv="X-UA-Compatible" content="IE=8"> <?else?> <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='9.0')?> <meta http-equiv="X-UA-Compatible" content="IE=9"> <?endif?><?endif?><?endif?> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>$SITE_NAME$ - $MODULE_NAME$</title> <?$META_DESCRIPTION$?> <link type="text/css" rel="StyleSheet" href="/.s/src/css/844.css" /> </head> <body> $ADMIN_BAR$ Только ничего не изменилось!( А ты что ожидал? Это же просто .... рекомендации браузеру. ... Quote (Quick) А ИЕ7 у меня не потому, что я ленивый, а потому что я им не пользуюсь, я на лисе сижу. А какая связь между браузером и человеческими качествами, в данном случае, ленью? ... ... Quote (Quick) Звучит оптимистично!) Ну почему “звучит” ... Вот: В шапку - в глобальный блок верхний AHEADER, в самый верх кода, перед остальным кодом блока, вот этот код: Code <?if(!$USER_LOGGED_IN$&&$USER_AGENT$='ie')?> <style type="text/css"> table.myTbBan{left:auto!important;right:0px!important;} </style> <script type="text/javascript"> document.getElementsByTagName('table')[0].className='myTbBan'; </script> <?endif?> Что б было вот так: Code <?if(!$USER_LOGGED_IN$&&$USER_AGENT$='ie')?> <style type="text/css"> table.myTbBan{left:auto!important;right:0px!important;} </style> <script type="text/javascript"> document.getElementsByTagName('table')[0].className='myTbBan'; </script> <?endif?> <div id="logoBlock"><span style="color:#A22833;font:38pt bold Georgia;"><!-- <logo> -->Планета фото<!-- </logo> --></span></div> <div id="navBar"> .... остальной код .... ... Или вот этот: Code <?if(!$USER_LOGGED_IN$&&$USER_AGENT$='ie')?> <style type="text/css"> table.myTbBan{left:auto!important;top:0px!important;right:0px!important;} body{z-index:expression(runtimeStyle.zIndex=1,(document.getElementsByTagName('table')[0].style.zIndex<100)?document.getElementsByTagName('table')[0].className='myTbBan':0);} </style> <?endif?> Ту да же ... ... И всё. ... Добавлено (01-Фев-2012, 04:20:37) --------------------------------------------- Quote (Quick) Кого увидел то?! Прокрутку ) ... Вчера я её не нашёл, так как исходник копировал под мозиллой, а сегодня исходник взял с ИЕ - и ... увидел ))) Прикольно было ) Quote (Quick) ..ладно, узнать бы как доктайп прописывать ещё ПУ » Общие настройки сайта - в самом низу есть поле для доктайпа. Туда вот это: Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ... Quote (Quick) Есть тут ошибки и могут ли они быть причиной? Причина соОвсем не в этом, а в верхнем рекламном блоке с кнопками. Тот что справа в самом верху. ... Добавлено (01-Фев-2012, 04:24:35) --------------------------------------------- Quote (fflesh) В шапку - в глобальный блок верхний AHEADER, в самый верх, хотя не существенно, вот этот код: Как сделаешь - напиши - гляну ... Если сегодня сделаешь ) Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Среда, 01 Фев 2012, 15:18:58
|
|
fflesh,
Вах! Всё заработало!!!  Всё очень понятно объяснили!...А то начинают иногда помогать, с учётом, что я вэб-дизайнер с рождения, это как минимум!) Вообщем, как код вставил, всё исправилось сразу. А когда доктайп прописал, уже ничего не изменилось. Quote А какая связь между браузером и человеческими качествами, в данном случае, ленью? ... Не знаю, это Мисс написала) Я даже опрос запустил про браузеры, хочу теперь выяснить процент ленивцев!) Ещё раз - огромное спасибо! Добавлено (01-Фев-2012, 05:13:20) |
|
Quick,
Quote (Quick) Вах! Всё заработало Логично ... ... Смотрю, доктайп воткнул ... подкорректируй стили, поменяй на эти: Quote <style type="text/css"> table.myTbBan{left:auto!important;top:0px!important;right:0px!important;} </style> - а то банер плавает вверх/вниз при прокрутке ... ) ... Quote (Quick) Ещё раз - огромное спасибо Незачто) Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Среда, 01 Фев 2012, 05:19:13
|
|
Quick,
Quote (Quick) Да я банер оплачу, не будет его. Ну, сейчас-то нужно сделать нормально, пока не оплатил ))) Поправь всё таки,недолго ведь. ... И ещё ... у тебя меню поехало. Да и вообще, дизайн. Ты что, пересохранил стили? Quote (Quick) сё поломалось, у меня как-то всплыл частично дизайн, который я первый брал...Не пойму пока причины... Посмотрите, если не сложно? А-а ... Тоже заметил ))) ... Вот эти стили (это ссылка на стили) скопируй, полностью всё. Зайди в ПУ » Управление дизайном » Таблица стилей CSS - и ЗАМЕНИ всё что там, на эти, скопированные стили ... Сохрани. И всё будет нормально. ... .... И отредактируй стили для банера - некрасиво ... .... Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Среда, 01 Фев 2012, 05:49:09
|
|
Quick,
Так, по поводу картинок: Информеры с картинками упаковываем в блок с классом: Code <div class="infTableImg">$MYINFx$</div> Вот стили: Code div.infTableImg table{table-layout:fixed;width:100%;} div.infTableImg img{position:relative;width:100%;height:auto;} div.infTableImg img.imgVert{height:100%;width:auto;} * html div.infTableImg{zoom:1;} Куда ставить? - на выбор, либо в CSS - заведи блок со своими стилями, либо в любой глобальный блок, НО только один раз. И небольшой скрипт: Code <script type="text/javascript"> $('div.infTableImg img').each(function(){var o=$(this); if(o.width()<o.height())o.addClass('imgVert'); }); </script> - Добавляет вертикальным картинкам класс «imgVert». Скрипт, в принципе, не обязателен. Его в самый низ шаблона. Можно, например, в нижний глобальный блок. ... И тогда ... сайт впишется в разрешение: от 1024 - 1280 - ∞ ... Скриншотики ... ... Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Четверг, 02 Фев 2012, 06:28:45
|
|
Quick,
Quote А доктайпы, которые мы прописали, они зачем? Сообщение отредактировал Miss_Esq - Среда, 01 Фев 2012, 16:46:44
|
|
fflesh,
Quote Quick, Так, по поводу картинок: Информеры с картинками упаковываем в блок с классом: ... ... ... И тогда ... сайт впишется в разрешение: от 1024 - 1280 - ∞ ... А сейчас он не вписывается что ли?! Сейчас уменьшал до 1280 и всё нормльно с виду. Единственная проблема, которая очень расстраивает с картинками, это то, что при маленьком разрешении экран (уже от 1280) они прилипают друг к другу, причём начинают "липнуть" с правой стороны, очень некрасиво... Как вообще сделать, чтобы при уменьшении разрешения между картинками оставался зазор? Сообщение отредактировал Quick - Четверг, 02 Фев 2012, 04:47:38
|
|
Quick,
Quote (Quick) А сейчас он не вписывается что ли?! Нет, конечно))) ... Quote (Quick) Сейчас уменьшал до 1280 и всё нормльно с виду. Ты, видимо, не внимательно смотришь. Я написал: Quote (fflesh) И тогда ... сайт впишется в разрешение: от 1024 - 1280 - ∞ ... ... а ты про “уменьшал до 1280” ... ))) ... Quote (Quick) Как вообще сделать, чтобы при уменьшении разрешения между картинками оставался зазор? Code div.infTableImg img{margin:0 2px;} ... Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 |
|
Quick,
Quote (Quick) Стили прописал. Упаковал один информер в <div class="infTableImg">$MYINFx$</div> Один погоды не сделает - остальные распирают блок. Кроме того, к картинкам у вас контекстом прописан нулевой отступ (это я не посмотрел). Так что стили писать вот такие нужно: Code width:96%;margin:0 2px!important; То бишь, всё вместе (одна строка) вот так: Code div.infTableImg img{position:relative;width:96%;height:auto;margin:0 2px!important;}  ... P.S. и добавьте свой сайт в подпись, ужасно не удобно искать по теме ссылку. ... Прикрепления:
1015820.png
(38.2 Kb)
Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Четверг, 02 Фев 2012, 06:05:15
|
| |||