Petek
значит, есть вот такой код
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>index</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
<meta http-equiv="Content-Language" content="ru-ru" />
<style>
body {
font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
background: #999966;
}
* {margin: 0; padding: 0;}
#header {
width: 960px;
height: 230px;
background: #CCCC66;
}
#header h1 {
margin: 150px 475px 0 0;
font-size: 24px;
color:#FFFFFF;
background: #666633;
}
</style>
</head>
<body>
<div id="header">
<h1>Заголовок</h1>
</div>
</body>
</html>
в IE выглядит как я и хотел, то есть заголовок со своим бэкграундом располагается внутри шапки с отступом сверху 150 px,
но в опере и лисе он расположен в верхнем левом углу шапки, а сама шапка отступает (вероятно на 150 px) от верхнего края окна,
можно это вылечить?
использование padding вместо margin не предлагать, п.ч. надо чтобы у заголовка был бэкграунд в виде полоски
спасибо
CostOut
попробуй поставить так
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>index</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251" />
<meta http-equiv="Content-Language" content="ru-ru" />
<style>
body {
font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif;
background: #999966;
}
* {margin: 0; padding: 0;}
.header {
width: 960px;
height: 230px;
background: #CCCC66;
}
h1 {
margin: 0px 475px 0 0;
font-size: 24px;
color:#FFFFFF;
background: #666633;
position:relative; top:150px;
}
</style>
</head>
<body>
<div class="header">
<h1>Заголовок</h1>
</div>
</body>
</html>
про оперу ничего сказать не могу, а в ишаке и в лисе отображается одинаково, так как было задумано
Petek
CostOut, спасибо, оценил. в опере тоже работает
но ещё нашел более очевидный вариант, убрать margin-top у заголовка, а к #header добавить padding-top:150px и вычесть его из высоты, то есть height:80px
Petek
ещё вопрос
страница с DOCTYPE XHTML 1.0 Strict не проходит проверку валидатором (если поменять на Transitional все нормально), а виновата во всем форма поиска
Код:
<form name="search" action="/">
<input type="text" class="formtext" />
<input type="submit" class="formbutton" value="Найти" />
</form>
ему не нравится name и input
пишет вот что,
не пойму, их надо заменить на другие теги? или в css-файл что-то вынести надо?
CSS гуру, подскажите )
Цитата:
Line 35, Column 11: there is no attribute "name".
<form name="search" action="/">
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).
This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.
How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
Цитата:
Line 36, Column 37: document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag.
<input type="text" class="formtext" />
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").
для второго input пишет тоже самое
Petek
pierx, спасибо, инпуты внутрь дива засунул - минус две ошибки )
name удалил - теперь всё валидно
Dizman©, да я особо и не парюсь, но валидный код душу всё-таки греет немного, можно кнопочку "Valid XHTML 1.0 Strict" на сайт повесить =)
хотя цсс все равно с хаками