Еще раз про DOCTYPE

styleroom · December 27, 2007

Всем привет! Всех с наступающим Новым Годом!

Вопрос: если на странице не будет DOCTYPE вообще - это чем чревато? Какую функцию выполняет этот DOCTYPE.

Задаю вопрос вот почему: при тестировании дизайна страницы она корректно заработала только когда удалил DOCTYPE нафиг! Полез в Инет - везде пишут "...без доктайпа..." счастия не быват! А тут получается что быват....

styleroom · December 27, 2007

Вот вариант страницы с ДОКТАЙП =

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF00FF" id="base">
 <tr>
 <td align="center" valign="middle"> </td>
 </tr>
</table>
<table width="100%" height="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000">
 <tr>
 <td> </td>
 </tr>
</table>

</body>
</html>

Вот вариант БЕЗ ДОКТАЙП =

<html>
<head>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF00FF" id="base">
 <tr>
 <td align="center" valign="middle"> </td>
 </tr>
</table>
<table width="100%" height="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000">
 <tr>
 <td> </td>
 </tr>
</table>

</body>
</html>

Мне нужен результат из второго варианта. Но стоит в него вставить ДОКТАЙП - нужный результат летит к черту...

ХЭЛП!

yopopt · December 27, 2007

Добавьте в документ:

<style type="text/css">
html, body {height:100%;}
</style>

styleroom · December 27, 2007

Хм... Спасибо! А что делает этот код? И почему без него с ДОКТАЙПОМ верхняя таблица не хочет растягиваться на всю страницу? А без ДОКТАЙПА делает этот как заколдованная?

maddogrts · December 27, 2007

Всем привет! Всех с наступающим Новым Годом!

Вопрос: если на странице не будет DOCTYPE вообще - это чем чревато? Какую функцию выполняет этот DOCTYPE.

Задаю вопрос вот почему: при тестировании дизайна страницы она корректно заработала только когда удалил DOCTYPE нафиг! Полез в Инет - везде пишут "...без доктайпа..." счастия не быват! А тут получается что быват....

______________

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

http://www.artlebedev.ru/tools/technogrette/html/doctype/

http://www.artlebedev.ru/tools/technogrette/html/doctype2/

styleroom · December 27, 2007

вот так должно быть?

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	html, body {height:100%;}
}
-->
</style></head>

Что то не сработало....

styleroom · December 27, 2007

Почитайте про режимы браузера, и все поймете. Можно создавать качественные страницы и без доктайпа, это не панацея. Если вам удобнее работать без доктайпа то я очень рад за вас
http://www.artlebedev.ru/tools/technogrette/html/doctype/
http://www.artlebedev.ru/tools/technogrette/html/doctype2/

пошел читать... спасибо...

klierik · December 27, 2007

вот так должно быть?
<style type="text/css">

</style></head>
Что то не сработало....

для начала я б рекомендовал изучить основы синтаксиса CSS

а вышеуказанный стиль лучше записать так:

html, body {height:100%;}
body{margin:0;}

styleroom · December 27, 2007

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

Ссылки прочитал... Типа хочешь делай - хочешь не делай... Странно!

Мой личный сайт - без ДОКТАЙП. Вроде бы фурычит.

styleroom · December 27, 2007

для начала я б рекомендовал изучить основы синтаксиса CSS
а вышеуказанный стиль лучше записать так:
html, body {height:100%;}
body{margin:0;}

Согласен с тем что CSS нужно изучать - до сих пор за меня это делал Dreamweaver. Спасибо!

klierik · December 27, 2007

... Типа хочешь делай - хочешь не делай... Странно!
Мой личный сайт - без ДОКТАЙП. Вроде бы фурычит.

не совсем так.если взять во внимание то что на сегодняшний день все больше и больше

разработчиков начинают писать согласно стандартов,

а так же начинающие разработчики читая литературу так же начинают изначально писать согласно стандартов,

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

да и не забывайте что не указание доктайпа требуется в основном только для браузеров старых версий (IE5-, etc)

имхо: я б рекомендовал вам изначально писать согласно стандартов и указывать доктайп

Vlad · December 27, 2007

Без всякого имхо, писать доктайп надо. Доводов несколько.

1. Браузеры более-менее одинаково начинают работать, если стоит DOCTYPE. Пример 1 - IE7 не распознает вообще ни дочерние, ни соседние селекторы, ни min-width без указания строгого доктайпа. Пример 2 - ширина элементов в IE и FF сильно различается, если есть доктайп и если его нет. В первом случае ширина во всех браузерах становится одинаковой.

2. Тенденция идет на поддержку стандартов и их соблюдение. "Выбрасывая" доктайп ты тем самым возвращаешься в прошлый век (в прямом и переносном смысле), отказываешься соответствовать современности и превращаешься в "динозавра".

3. Браузер IE постепенно сдает позиции и вскоре наступит время, когда пользователей FF и Opera станет больше. На сайте htmlbook.ru это время уже наступило, кстати. Браузеры FF и Opera принципиально поддерживают стандарты и могут диктовать свои условия. В частности, сделать, что сайт без доктайпа вообще не отображается в браузере.

4. Добавление доктайпа и следование стандартам показывает, что ты действительно умеешь делать сайты, следовательно, доверие к тебе и к твоему ресурсу со стороны посетителей возрастает.

styleroom · December 27, 2007

ту Влад:

Очень развернуто и сверхубедительно. Ответы на воспросы получил. Сэнкс!

styleroom · December 27, 2007

Вот страница:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 html, body {height:100%;}
}
-->
</style></head>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF00FF" id="base">
 <tr>
 <td align="center" valign="middle">  </td>
 </tr>
</table>
<table width="100%" height="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000">
 <tr>
 <td> </td>
 </tr>
</table>
</body>
</html>

При тесте верхняя таблица все равно не расползается на весь экран по высоте... Вставлял и

html, body {height:100%;}
body{margin:0;}

- не работает....

Что не так?

D.S.Denton · December 28, 2007

- не работает....
Что не так?

видимо читал не так:+) куда именно "Вставлял и

html, body {height:100%;}
body{margin:0;}

"?

есть элемент , в него кладем css-объявления.

синтаксис css:

селектор {свойство: значение; свойство: значение;}

если вставлял также как в примере из своего поста 14, оно разумеется неверно. раскладываем

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

html, body {height:100%;}

}

это

селектор {

свойство: значение;

селектор {свойство: значение;}

}

а селекторы не могут пересекаться либо быть вложенными - это параллельные феньки.

Dimitry Wolotko · December 28, 2007

Русский гений меня вдохновляет!

body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 html, body {height:100%;}
}

Простите за оффтоп.

Dimitry Wolotko · December 28, 2007

PS - первые 4ре строки можно сократить до margin:0; px указывать не обязательно, ибо ноль он и в африке ноль.

styleroom · December 28, 2007

[есть элемент , в него кладем css-объявления.
синтаксис css:
селектор {свойство: значение; свойство: значение;}

Так более понятно! Спасибо!

styleroom · December 28, 2007

Теперь то правильно? Или нет?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
	margin:0;
	height:100%;
}
-->
</style></head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#3333FF">
 <tr>
 <td> </td>
 </tr>
</table>
<table width="100%" height="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000">
 <tr>
 <td> </td>
 </tr>
</table>
</body>
</html>

Все равно ТАК не работает...

А вот так - все гут

<html>
<head>
<style type="text/css">
<!--
body {
	margin:0;
	height:100%;
}
-->
</style></head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#3333FF">
 <tr>
 <td> </td>
 </tr>
</table>
<table width="100%" height="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000">
 <tr>
 <td> </td>
 </tr>
</table>
</body>
</html>

ps. С помощью слоев задачу решать не хотелось бы....

yopopt · December 28, 2007

Теперь то правильно? Или нет?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
body {
	margin:0;
	height:100%;
}
-->
</style></head>

<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#3333FF">
 <tr>
 <td> </td>
 </tr>
</table>
<table width="100%" height="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000">
 <tr>
 <td> </td>
 </tr>
</table>
</body>
</html>

Все равно ТАК не работает...

И вновь неправильно. html забыли. У Вас:

body {
	margin:0;
	height:100%;
}

, а должно быть

html, body {
	margin:0;
	height:100%;
}

styleroom · December 28, 2007

а должно быть
html, body {
	margin:0;
	height:100%;
}

Вот теперь настало счастие!!! Сработало! ОЧЕНЬ большой сенкс!

Но тогда возникает второй вопрос: а как-это рядом два селектора? И я не нашел в свойствах CSS селектор "html"... "body" есть, а "html" нет...

——

Всех с Новым Годом! = http://www.styleroom.ru/ny_card.htm

D.S.Denton · December 28, 2007

под "селектор" имется в виду

а) назание html-элемента (html | body | p | div | h1 | итд) - т.е. первое слово в тэге

б) айди html-элемента (#название_класса) - т.е. значение атрибута id:

. айди не может быть одинаковым у нескольких элементов на странице

в) класс html-элемента (.название_класса) - аналогично значение атрибута class:

. класс может быть задан более чем одному элементу, эти css-объявления будут применены ко всем

г) псевдокласс html-элемента (:псевдокласс) - например hover псевдокласс элемента при наведении на него. в тэге не прописывается.

один пример:

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<title> </title>
<style type="text/css" media="screen">
/* зададим белый текст на черном фоне и размер шрифта 10 пунктов */
/* - при таком размере легче считать процентные отношения к нему */
/* (1) */ body {background-color:#000000; color:#ffffff; font-size:10pt;}

/* все сылки на странице будут размером 100% от 10 пунктов, цвета lime и без оформления */
/* (2) */ a {color:lime; text-decoration:none;}

/* но ссылки с классом class1 должны быть 12 пунктов, т.е. 120% */
/* (что не отменяет использование для них того же цвета, т.к. в этой строке color не определяем */
/* (3) */ a.class1 {font-size:12pt;}

/* при этом ссылки id1 и id2 вообще 16 пунктов и цвета gold */
/* (4) */ a#id1,a#id2 {font-size:16pt; color:gold;}

/* все ссылки при наведении будут подчеркнутыми и болотного цвета */
/* (5) */ a:hover {text-decoration:underline; color:#667766;}

/* вдобавок текст ссылок class1 будет увеличиваться до 14 пунктов, */
/* а переопределение text-decoration отменит подчеркивание при наведении */
/* (6) */ a.class1:hover {font-size:14pt; text-decoration:none;}

/* над этой же ссылкой с ид = id1 и id2 вообще извратимся при наведении: */
/* 1 - к ней применили было цвет gold, который теперь будет #ff00ff */
/* 2 - т.к. к ней в "нормальном" состоянии был размер 12 пунктов и не переопределен - останется тем же */
/* 3 - а вот офрмление сделаем в виде зачеркивания */
/* (7) */ a#id1:hover,a#id2:hover {color:#ff00ff; text-decoration:line-through;}

/* для абзацев уберем поля и отступы - ну не люблю я их когда лезут без дела. */
/* margin и padding - сокращенные формы чтоб не использовать *-left, *-right, *-top, *-bottom */
p {margin:0; padding:0;}
</style>
</head>

<body>
<ul>
 <li><a href="http://denton.msk.ru">denton.msk.ru</a> - эта ссылка самая обычная, будут использованы стили из строк (2) и (5)</li>
 <li><a id="id1" href="http://htmlbook.ru">htmlbook.ru</a> - сюда пойдут стили из строк (2) и (5), а также (4) и (7) по айди</li>
 <li><a class="class1" href="http://htmlbook.ru/html/">htmlbook.ru/html/</a> - для этой кроме (2) и (5) возьмем по классу (3) и (6)</li>
 <li><a id="id2" class="class1" href="http://htmlbook.ru/css/">htmlbook.ru/css/</a> - ну тут будут (2) и (5), плюс (4) и (7) по айди, плюс (3) и (6) по классу</li>
</ul>
<p>последнюю ссылку разберем малость подробнее, т.к. приоритет айди выше класса, в случае совпадения объявленных свйств в обоих местах, будет использовано значение из объявления, определенного по селектору с айди.</p>
<p>1 - вначале применяем (2) и (5) что делает ссылку размером 10 пунктов цвета lime, а при наведении подчеркнутой и цвета #667766</p>
<p>2 - по классу, однако ее размер будет 11 пунктов, а приоритет класса выше, значит оставляем так</p>
<p>3 - при наведении по классу ее размер станет 11,5 пунктов, подчеркивание отменяется</p>
<p>4 - айди говорит что этой ссылке надо задать вообще 12 пунктов и золотой цвет в обычном состоянии</p>
<p>5 - а при наведении цвет стал бы 667766, не задай мы здесь ff00ff. также отменяем отмну оформления, сообщая что быть ей зачеркнутой</p>
</body>

</html>

styleroom · December 28, 2007

под "селектор" имется в виду
а) назание html-элемента (html | body | p | div | h1 | итд) - т.е. первое слово в тэге <html xmlns="...">
б) айди html-элемента (#название_класса) - т.е. значение атрибута id:
. айди не может быть одинаковым у нескольких элементов на странице
в) класс html-элемента (.название_класса) - аналогично значение атрибута class:
. класс может быть задан более чем одному элементу, эти css-объявления будут применены ко всем
г) псевдокласс html-элемента (:псевдокласс) - например hover псевдокласс элемента при наведении на него. в тэге не прописывается

У-у-у-у-у-у-у... Я в шоке... Пока сие слишком сложно для меня! Спасибо за коучинг! Приятно, что на таком приятном сайте есть такие отзывчивые люди!

Sign In

Еще раз про DOCTYPE

Question

Link to comment

Share on other sites

22 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information