Подскажите в чём проблема этого кода

SanBorisych · 03.01.2010

Уважаемые господа! Подскажите в чём проблема этого кода

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
<div id="hg" style="background: url(images/boxbg.gif);"></div>
<div id="gradient" style="background: url(images/ADIX-v7_hg.png) repeat-x;"></div>
</body>
</html>

Валидатор говорит, что всё нормально, а в браузере не работает!

trueW3C · 03.01.2010

А что не так? Может стоит выставить высоту у блоков?

Код:

style="height:100px ...

SanBorisych · 03.01.2010

Так первый блок должен заливать весь задний фон, а второй должен быть растянут по горизонтали вдоль верхнего края. Какую высоту нужно указать в этом случае? А на вопрос - Что не так? - я и сам не могу ответить. Но в браузере нет картинок ваще :-(

gor · 03.01.2010

SanBorisych сказал(а):
Так первый блок должен заливать весь задний фон, а второй должен быть растянут по горизонтали вдоль верхнего края. Какую высоту нужно указать в этом случае? А на вопрос - Что не так? - я и сам не могу ответить. Но в браузере нет картинок ваще :-(

Так вы ведь не задали ширину и высоту блоков. Если у вас DTD HTML 4.01 Transitional, тогда смело можете задавать в стилях (width и height для div-ов(в пикселах или процентах)).
Например:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
<div id="hg" style="background: url(images/boxbg.gif);width:100%;height:30%"></div>
<div id="gradient" style="background: url(images/ADIX-v7_hg.png) repeat-x;width:100%;height:10%"></div>
</body>
</html>

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

Тогда меняйте местами блоки.

ZitosS_32 · 03.01.2010

SanBorisych, а вы знаете что такое относительное и абсолютное позиционирование блоков?
Это ваша первая и самая главная ошибка. Чтобы блоки располагались друг на друге, надо задать им абсолютное позиционирование.
Так же мне не нравится height в процентном отношении. Вы сами подумайте, относительно чего вы задаёте в процентах размеры по высоте, если родительским элементам вы не задавали размеров. Разные браузеры поймут ваш код по разному, гарантирую.
Вы бы хоть сказали, что у вас за браузер?!

tigra60 · 03.01.2010

Так первый блок должен заливать весь задний фон, а второй должен быть растянут по горизонтали вдоль верхнего края.

Попробуйте вложить блок с градиентом в блок "hg", примерно так:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
<div id="hg" style="background: url(images/boxbg.gif);height:100%">
	<div id="gradient" style="background: url(images/ADIX-v7_hg.png) repeat-x;height:100px">
	</div>
</div>
</body>
</html>

Высоту градиентного блока укажите в соответствие с высотой рисунка ADIX-v7_hg.png.
Вот только по поводу height:100% я до конца не уверен.
Проверено только в Opera.
Удачи!

SanBorisych · 03.01.2010

Большое спасибо Tigra60 и Gor!
Все понял и разобрался. Всё функционирует!

Уважаемый Alex. Будьте проще и будет Вам счастье.

Подскажите в чём проблема этого кода

SanBorisych

Новичок

trueW3C

Поклонник Yii

SanBorisych

Новичок

gor

Well-Known Member

ZitosS_32

Совесть

tigra60

Спасатель

SanBorisych

Новичок

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей