Два бекграунда для body или высоту таблицы 100% или?

regi

Новичок
Два бекграунда для body или высоту таблицы 100% или?

Необходимо сделать что-то типа такого:
<body background="основной бек" style="background-image: url(еще один бекграунд, который будет растягиваться только по высоте); background-position: center; background-repeat: repeat-y;">

такая конструкция не работает :).
Я надеюсь цель понятна моя - по центру выводится контент, и необходимо вне зависимости от его количества выводить второй бекграунд так, чтобы он простирался к нижнему краю страницы.
Если же второй бекграунд разместить в таблице контента и указать height="100%", то, как мне казалось, это не везде работает, просто не помню в каких случаях это не сработало у меня :)
как сделать? height="100%"? <div style="height: 100%;">???
 

Линка

Новичок
regi
У элемента не может быть два backgrounda
Можно слоем, но врядли подайдет
 
в body и в своей таблице укажи, style="overflow: visible;"

должно работать везде, правда могут быть глюки в FireFox-е...

-~{}~ 20.12.05 17:03:

а лучше скинь картинку, мжет быть там можно по-другому сделать....
 

regi

Новичок
Линка - я это понимаю :), привел как пример того, что нужно

сделал через <div style="height: 100%; background......"> под ie6 и под оперу7 работает :)
 
regi
а в мозииле, дай угадаю, обрезается только по высоте текущего окна?

можно указать в таблице height="100%", а в стилях min-height: 100%, тогда будет работать везде :)

т.к. ie поймет height="100%", но проигнорирует, min-height...

з.ы. если, ты уверен в том, чот контента - много, то можно вообще не указывать высоту, тогда тоже будет везде работать
 

regi

Новичок
спасибо, Loshadka.
Вот как раз уверенности, что заказчик забьет много контента - нет :)
 
regi
Да, я правильно сказал:
<body style="margin: 0px; padding: 0px; _здесь_твой_фон_1_">
<table height="100%" style="min-height: 100%; margin: 0px; padding: 0px; border: 0px; _здесь_твой_фон_2_">
<tr><td>

...контент...

</td></tr>
</table>
</body>

только не забудь указать указать
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
причем именно такой, с другим - не уверен, что будет корректно работать....

вот рабочий пример (работает в ie 6, opera 8.5, FFox 1.0.7):
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
        background: url(_img/css.gif) no-repeat left bottom;
    }
    .a {
        margin: 0px;
        padding: 0px;
        border: 0px;
        min-height: 100%;
        background: url(_img/reg.gif) no-repeat left center;
    }
</style>
</head>

<body>

<table height="100%" width="100%" class="a">
    <tr>       
    <td height="100%">
        text
    </td>
    </tr>
</table>
    

</body>
</html>
 

SelenIT

IT-лунатик :)
Тот же эффект:
PHP:
min-height: 100%; /* IE не знает */
_height: 100%; /* увидит только IE и поймет по-своему, т.е. как нужно) */
и не надо смешивать CSS и атрибуты. Правда, запись _height - не по стандарту CSS, есть минимум 2 "чистых", но чуть более сложных способа.

А указанный Loshadkой DOCTYPE, по-моему, ничего не меняет по сравнению с его отсутствием. Вот в стандартном режиме (при указании URL в DOCTYPE), действительно, body по умолчанию не растягивается на все окно. Но его можно растянуть, указав в CSS "html, body { height: 100%; }".
 
SelenIT
попробуй поменять DOCTYPE на xhtml, т.е. на:
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
кстати, а на _height: 100%;
http://validator.w3.org/ ругаться не будет?
 

SelenIT

IT-лунатик :)
Loshadka
1) Именно это я и имел в виду - второй доктайп и ему подобные (со ссылкой на соотв. DTD от W3C) переводят браузеры в Standards mode, а первый оставляет в умолчательном Quirks mode => его присутствие не играет роли. Возможно, в каких-то браузерах это не так - буду благодарен за инфо. А что делать в случае Standards mode - см. выше.
2) Валидатор HTML - не будет, но валидатор CSS, увы, будет. Но есть варианты хака для IE, на кот. валидатор не ругается, например
PHP:
* html .a { height: 100%; }
 
SelenIT
* html .a { height: 100%; }
пасиб, не знал, хотя, имхо, это все равно - изврат...

Возможно, в каких-то браузерах это не так - буду благодарен за инфо.
1. У картинок не обрабатывается padding в ie при html
2. не работает min-height везде(в ie - он вообще никогда не работает) при xhtml
 
Сверху