Создание сайтов по стандартам

Willow · №1

Проблема в том, что созданный сайт в Мозилле не отображается вообще. Код загружается верный, но вместо сайта пустая страница.
Почитала форум, оказалось, что причин может быть много.

Сайт оптимизировался под IE.

Помогите веб-мастеру исправиться и создать сайт, корректно отображаемый в популярных (хотя бы) браузерах.
Подскажите, где найти эти стандарты для создания сайтов, про которые упоминается на форуме.

Заранее спасибо.

ViRUS · №2

http://www.w3.org/

Willow · №3

А можно какие-нибудь конкретные выкладки и по-русски?
Протому что перелопатить гору информации...

Lynn · №4

Willow
Стока слов и ни одного по делу.

http://www.ln.com.ua/~openxs/articles/smart-questions-ru.html

Willow · №5

2 Lynn:
А Вы, наверное, считаете свой ответ очень умным?

Мне не нужен совет по тому, что конкретно надо исправить в коде сайта, чтобы он стал корректно отображаться в Мозилле. Именно потому я и не конкретезировала проблему.

Я попросила подсказать, где можно почитать про стандарты. Потому что, ДА, мне не понятно, что имеется в виду.

ViRUS · №6

Советую почитать webmascon.ru.

ragnaar · №7

Willow
Каков вопрос - таков и ответ.
Вам дали ссылку на W3С. Там есть ссылки на русские переводы стандартов. Именно с этого и стоит начинать.
Но рассматривать стандарты проще на конкретном примере. Давайте ссылку, посмотрим.

Willow · №8

2 ViRUS:
Сейчас сайт не грузится. Посмотрю позднее.
В любом случае, спасибо.

Willow · №9

2 ragnaar:
www.stereosignal.ru

ragnaar · №10

Уберите z-index из таблицы - и все будет

Выделить код

Код:

<table style="position: absolute; top: 113px; left: 0px; z-index: -1;"...

Есть еще много над чем поработать. DOCTYPE не указан. Шрифт прописанный в CSS...
Советую поставить расширение HTML Validator очень хорошо помогает находить ошибки.

Willow · №11

2 ragnaar :
Можно уточню?
1. z-index не работает в Mozilla?
2. Насчет шрифта в CSS. Что здесь не так? Уточните пожалуйста, потому что не поняла.

Про DOCTYPE действительно забыла в этой версии сайта.

Al_H · №12

Уважаемая Willow, что я Вам скажу... Поищите в коде такое место:

Выделить код

Код:

<!-- Логотип (написание группы)-->

Там дальше идет

Выделить код

Код:

<table style="position: absolute; top: 113px; left: 0px; z-index: -1;" border="0" cellpadding="0" cellspacing="0" height="86%" width="100%">

Если убрать весь атрибут style из этого тэга, контент загадочным образом появляется. Дальнейшее исследование показывает, что проблему вызывает z-index: -1; так как без него контент тоже показывается.
Теперь несколько слов по поводу остального кода.
Старайтесь не использовать атрибут style, пока есть возможность вынести оформление в таблицу стилей внутри head, или во внешнюю таблицу стилей (привязав к тэгу через class или id).
Дальше, абсолютное позиционирование нужно использовать с осторожностью, может быть проблема с высотой блоков страницы.
Ссылки, включающие доменное имя, желательно использовать только если они ссылаются на другой домен.
Сочетание таблиц с CSS-позиционированием может вызывать проблемы, лучше использовать тэги DIV.
Теперь что касается стилей.
Серия свойств scrollbar- это специфично Ескплорерское расширение.

Выделить код

Код:

font-family: Lucida Sans Unicode;

Тут две ошибки. 1) свойство должно быть записано как

Выделить код

Код:

font-family: 'Lucida Sans Unicode','Lucida Grande',Lucida,Verdana,Arial,Helvetica,sans-serif;

потому что шрифт Lucida Sans Unicode может отсутствовать на компьютере пользователя. При таком подходе как минимум русский текст должен отобразиться, скорее всего этим шрифтом или похожим. 2) Названия шрифтов пишутся в кавычках, если в них присутствует пробел, иначе браузер берет только первое слово из названия. В списке шрифтов лучше не ставить пробел до и после запятой.
a.menu { ... } - тут не хватает определений для других вариантов ссылок. Полный код такой:

Выделить код

Код:

a.menu:link { ... }
a.menu:visited { ... }
a.menu:hover { ... }
a.menu:active { ... }

здесь active включать не обязательно, а в link и visited желательно указывать не одинаковые цвета.

Выделить код

Код:

p.text_left_align

Старайтесь называть классы так, чтобы они отражали роль контента, а не оформление. Например, этот класс у Вас отвечает не только за левое выравнивание, как можно было бы подумать (оно в абзаце идет по умолчанию), а к тому же еще за ширину абзаца.
И, пожалуйста, не используйте в именах классов и id символ подчеркивания _ во избежание проблем. Большинство браузеров как правило обрабатывают его корректно, за исключением Internet Explorer, который иногда отказывается воспринимать такие имена, причем в версиях 5.0, 5.5 и 6.0 поддержка символа _ неодинакова.
У Вас определены в стилях классы для font - лучше не использовать этот тэг вообще.
Надеюсь, мои советы и ссылка на страницы со стандартами, которую Вам дали, помогут Вам верстать корректные страницы.
И еще один совет напоследок. Когда Вы начнете верстать и отлаживать следующий сайт, смотрите его в Firefox или Opera уже на ранних стадиях разработки. Многие веб-мастера отмечают, что при отладке под Internet Explorer и дальнейшем адаптировании под Файрфокс код с большей гарантией превращается в помойку, чем если Вы тестируете сайт в Файрфоксе с самого начала разработки.

Al_H · №13

1. z-index не работает в Mozilla?

Как справедливо отметил ragnaar и как я написал в предыдущем посте, проблема действительно в z-index. Мозилла поддерживает его согласно стандартам, проблема не в свойстве, а в значении -1. На положительных значениях свойство работает как предполагается.

2. Насчет шрифта в CSS. Что здесь не так? Уточните пожалуйста, потому что не поняла.

В моем предыдущем посте об этом написано.

Про DOCTYPE действительно забыла в этой версии сайта.

Мой любимый DOCTYPE

Выделить код

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

потому что он не переводит браузер в Strict-mode.

ragnaar · №14

Z-index - работает, только работает правильно в отличие от IE... Поставив значение -1 вы перенесли таблицу с текстом под, что там у вас ниже, <body> с белым фоном, вот и не видно. ИЕ на это наплевал.
Шрифт указан 1 и нестандартный, а если у человека его нет? Желательно указывать несколько шрифтов, а в конце просто семейство, чтоб уж точно было как надо. К примеру {font-family: arial, verdana, tahoma, sans-serif;}
А еще нету такого тега <nobr>. Чтобы не переносилось например "О группе", лучше написать "О группе"

Willow · №15

2 Al_H:
Благодарю за обстоятельный ответ.
Буду работать над сайтом дальше. Спасибо.

ragnaar · №16

О, тут уже и без меня все разъяснили. Willow, вы попали в хорошие руки Al_H, респект.

Al_H · №17

А еще нету такого тега <nobr>.

К сожалению, нестандартный тэг nobr все же приходится использовать из-за некорректной работы в некоторых случаях атрибута nowrap у ячейки таблицы и отсутствия должной поддержки аналогичного CSS-свойства во все еще распространенных версиях браузера Internet Explorer 5.0 и 5.5.

ragnaar · №18

Al_H

К сожалению, нестандартный тэг nobr все же приходится использовать

Возможно. Но уж если начинать жить по стандартам, то прямо сейчас. Хорошая привычка.

Al_H · №19

Willow
Да не за что!
Вот Вам еще для информации:
http://www.quirksmode.org/ - мой любимый ресурс по совестимости и проблемам верстки на CSS
http://www.htmlcodetutorial.com/
- немножко документации
http://athena.vvsu.ru/docs/www/ccs2/cover.html#minitoc - русский перевод документации по CSS2
http://www.positioniseverything.net/index.php
- отличный ресурс по ошибкам разных браузеров
Спасибо за интерес к браузерной совместимости!

Отредактировано Al_H (13-03-2006 13:44:22)

Willow · №20

А еще нету такого тега <nobr>.

Это стало для меня полным откровением.

Al_H · №21

ragnaar

Возможно. Но уж если начинать жить по стандартам, то прямо сейчас. Хорошая привычка.

Стараемся... Однако же, если Вам действительно нужен непереносимый текст, и нет возможности расставлять везде   то вспомните, что IE 5.0 - это пользователи Windows 2000, который в нашей стране до сих пор очень популярен.

Willow · №22

Al_H , спасибо за полезыне ссылки. Пошла изучать.

Полезная информация