VPF::растягивание таблицы на 100% по высоте

mixas

Дата 14.10.2007, 18:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 39
Регистрация: 20.6.2007

Репутация: нет
Всего: нет

уже по разному пробовал, никак не растягивается красная таблица на всю синюю ячейку в ИЕ, а mozilla firefox показывает так как надо.

index.html

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="full">
<tr>
<td>

    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="full">
    <tr style="height:82px;">
    <td class="top" height="82">&nbsp;</td>
    </tr>
    <tr> 
    <td class="stein">&nbsp;</td>
    </tr>
    </table>

</td>
<td width="960" align="center" valign="top">

    <table width="100%" border="1" cellpadding="0" cellspacing="0" style="height:100%">
    <tr>
    <td width="352" height="82" class="top">&nbsp;</td>
    <td width="258" class="top">&nbsp;</td>
    <td width="350" class="top">&nbsp;</td>
    </tr>
    <tr>
    <td height="133">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td height="26">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="stein" height="119">&nbsp;</td>
    <td class="stein">&nbsp;</td>
    <td class="stein">&nbsp;</td>
    </tr>
    <tr>
    <td class="stein" height="360">&nbsp;<img src="images/test.gif" width="3" height="360" alt=""></td>
    <td  align="center" valign="top" bgcolor="Blue">
            
        <table border="1" cellpadding="0" cellspacing="0" height="100%" class="full" bgcolor="Red">
        <tr style="height: 120px;">
        <td class="centr">
            
            <table width="220" class="login" border="0" cellpadding="0" cellspacing="0">
            <tr><form action="#" method="post" name="enter">
            <td class="message">логин:</td>
            <td class="field"><input name="user_name" type="text" size="10" maxlength="30"></td>
            </tr>
            <tr>
            <td class="message">пароль:</td>
            <td class="field"><input name="password" type="password" size="10" maxlength="30"></td>
            </tr>
            <tr>
            <td>&nbsp;</td>
            <td class="subm"><input name="Submit" type="submit" class="butt" value="Войти"></td>
            </tr>    
            <tr>
            <td class="links"><a href="#">Регистрация</a></td>
            <td class="links"><a href="#">Забыли пароль?</a></td>
            </tr></form>                
            </table>
                
        </td>
        </tr>
        <tr>
        <td class="centr">
            <table width="220" class="login" style="height: 100%;" border="0" cellpadding="0" cellspacing="0">
            <tr>
            <td align="center">&nbsp;
            </td>            
            </tr>
            <tr>
            <td class="centr">&nbsp;</td>            
            </tr>                    
            </table>
                
        </td>
        </tr>
        <tr>
        <td  height="40">&nbsp;
        </td>
        </tr>
        </table>        
            
    </td>
    <td class="stein">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3" height="30" class="stein" align="center"><p class="copy">© Copyright 2007</p>
    </td>    
    </tr>
    </table>
    
</td>
<td>

    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="full">
    <tr style="height: 82px;">
    <td class="top" height="82">&nbsp;</td>
    </tr>
    <tr>
    <td class="stein">&nbsp;</td>
    </tr>
    </table>

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

style.css

Код


html, body {
    margin:0px;
    padding:0px;
}
body {
    background-color: #44463A;

}

td.stein {    
    background-color: #ECE9D8;
    padding: 0px;
}

table.login {
    background-color: #585B4B;
    border-width: 1px; 
    border-style: solid; 
    border-color: #E2D4AF;
}
table.full {
    width: 100%;
    height: 100%;
}
td.top {
    background-color: #ECE9A8;        
    
}
td.field {
    vertical-align: bottom;
}
td.centr {
    text-align: center;
}

.message {
    text-align: right;
    vertical-align: bottom;
        FONT-SIZE: 7.5pt; 
    
    font-family: verdana,sans-serif,arial;
        COLOR: #E1D4AE;
    padding-right: 5px;
    height: 22px;
}
.copy {
    text-align: center;
    vertical-align: bottom;
        FONT-SIZE: 7.5pt;    
    font-family: verdana,sans-serif,arial;
        COLOR: #E1D4AE;
    
}
.subm {        
    padding-top: 5px;
    
}
.links {
    text-align: center;
        FONT-SIZE: 7.5pt; 
    FONT-FAMILY: verdana,sans-serif,arial;
        COLOR: #E1D4AE;
    padding-top: 4px;
    padding-bottom: 15px;
}
.butt {        
    font-size: 7.5pt;
        color: #E1D4AE;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        BACKGROUND-COLOR: #BA940C;
        border: 1px double #817A63;
}

сорри, что так много кода

yalo

Дата 14.10.2007, 19:40 (ссылка)

(голосов:2)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 210
Регистрация: 24.5.2006

Репутация: нет
Всего: 2

Может так?

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
html, body {
    margin:0px;
    padding:0px;
}
body {
    background-color: #44463A;
}
td.stein {
    background-color: #ECE9D8;
    padding: 0px;
}
table.login {
    background-color: #585B4B;
    border-width: 1px;
    border-style: solid;
    border-color: #E2D4AF;
}
table.full {
    width: 100%;
    height: 100%;
}
td.top {
    background-color: #ECE9A8;

}
td.field {
    vertical-align: bottom;
}
td.centr {
    text-align: center;
}
.message {
    text-align: right;
    vertical-align: bottom;
        FONT-SIZE: 7.5pt;

    font-family: verdana,sans-serif,arial;
        COLOR: #E1D4AE;
    padding-right: 5px;
    height: 22px;
}
.copy {
    text-align: center;
    vertical-align: bottom;
        FONT-SIZE: 7.5pt;
    font-family: verdana,sans-serif,arial;
        COLOR: #E1D4AE;

}
.subm {
    padding-top: 5px;

}
.links {
    text-align: center;
        FONT-SIZE: 7.5pt;
    FONT-FAMILY: verdana,sans-serif,arial;
        COLOR: #E1D4AE;
    padding-top: 4px;
    padding-bottom: 15px;
}
.butt {
    font-size: 7.5pt;
        color: #E1D4AE;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        BACKGROUND-COLOR: #BA940C;
        border: 1px double #817A63;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="full">
<tr>
<td>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="full">
    <tr style="height:82px;">
    <td class="top" height="82">&nbsp;</td>
    </tr>
    <tr>
    <td class="stein">&nbsp;</td>
    </tr>
    </table>
</td>
<td width="960" align="center" valign="top">
    <table width="100%" border="1" cellpadding="0" cellspacing="0" style="height:100%">
    <tr>
    <td width="352" height="82" class="top">&nbsp;</td>
    <td width="258" class="top">&nbsp;</td>
    <td width="350" class="top">&nbsp;</td>
    </tr>
    <tr>
    <td height="133">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td height="26">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td class="stein" height="119">&nbsp;</td>
    <td class="stein">&nbsp;</td>
    <td class="stein">&nbsp;</td>
    </tr>
    <tr>
    <td class="stein" height="360">&nbsp;<img src="images/test.gif" width="3" height="360" alt=""></td>
    <td  align="center" valign="top" bgcolor="Blue" height="360">

        <table border="1" cellpadding="0" cellspacing="0" height="100%" class="full" bgcolor="Red">
        <tr style="height: 120px;">
        <td class="centr" style="height: 120px;">

            <table width="220" class="login" border="0" cellpadding="0" cellspacing="0">
            <tr><form action="#" method="post" name="enter">
            <td class="message">логин:</td>
            <td class="field"><input name="user_name" type="text" size="10" maxlength="30"></td>
            </tr>
            <tr>
            <td class="message">пароль:</td>
            <td class="field"><input name="password" type="password" size="10" maxlength="30"></td>
            </tr>
            <tr>
            <td>&nbsp;</td>
            <td class="subm"><input name="Submit" type="submit" class="butt" value="Войти"></td>
            </tr>
            <tr>
            <td class="links"><a href="#">Регистрация</a></td>
            <td class="links"><a href="#">Забыли пароль?</a></td>
            </tr></form>
            </table>

        </td>
        </tr>
        <tr style="height: 200px;">
        <td class="centr">
            <table width="220" class="login" style="height: 100%;" border="0" cellpadding="0" cellspacing="0">
            <tr>
            <td align="center">&nbsp;
            </td>
            </tr>
            <tr>
            <td class="centr">&nbsp;</td>
            </tr>
            </table>

        </td>
        </tr>
        <tr style="height: 40px;">
        <td  height="40">&nbsp;
        </td>
        </tr>
        </table>

    </td>
    <td class="stein">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3" height="30" class="stein" align="center"><p class="copy">© Copyright 2007</p>
    </td>
    </tr>
    </table>

</td>
<td>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" class="full">
    <tr style="height: 82px;">
    <td class="top" height="82">&nbsp;</td>
    </tr>
    <tr>
    <td class="stein">&nbsp;</td>
    </tr>
    </table>
</td>
</tr>
</table>

</body>
</html>

Цитата(mixas @ 14.10.2007, 18:19

)

сорри, что так много кода

Вообще, чтобы не сильно страшно было, следует впредь сводить все к простой задаче, например, к такой:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
html, body {
    margin:0px;
    padding:0px;
}
body {
    background-color: #44463A;
}
td.stein {
    background-color: #ECE9D8;
    padding: 0px;
}

table.full {
    width: 100%;
    height: 100%;
}

</style>
</head>
<body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" style="height:100%">
    <tr>
        <td class="stein" height="360">серая область слева</td>
        <td align="center" valign="top" bgcolor="Blue">
            <table border="1" cellpadding="0" cellspacing="0" class="full" bgcolor="Red">
                <tr><td>qwerty</td></tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

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

P.S. А еще часто случается, что пока оформляешь грамотно вопрос, отсеивая лишнее, то вдруг и вопрос уходит сам собой, так как решение становится налицо. Недаром говорят - правильно сформулированный вопрос - есть уже половина ответа.

Это сообщение отредактировал(а) yalo - 14.10.2007, 19:57

Се ля ви

Дата 15.10.2007, 09:30 (ссылка)

(голосов:1)

Загрузка ...

Java/SOAрхитектор

Профиль
Группа: Модератор
Сообщений: 2016
Регистрация: 5.6.2004
Где: place without tim e and space

Репутация: 1
Всего: 127

Проблема именно в XHTML. Поменяй доктайп и будет работать - это проще всего. Но если хочется именно в XHTML, то есть несколько хитрых способов... Сейчас поищу.

--------------------

)
(
[_])
проф. блог

Кролики думали, что занимаются любовью, а на самом деле их просто разводили...

mixas

Дата 15.10.2007, 10:13 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 39
Регистрация: 20.6.2007

Репутация: нет
Всего: нет

Се ля ви, спасибо, жду хитрых способов smile

с доктайпом не принципиально, поменял на

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

и добавил

Код


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

но в ИЕ всё равно не растягивается

kizune

Дата 15.10.2007, 10:33 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 277
Регистрация: 10.7.2007

Репутация: 9
Всего: 9

попробуй так

Код


<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">

mixas

Дата 15.10.2007, 11:03 (ссылка)

(голосов:1)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 39
Регистрация: 20.6.2007

Репутация: нет
Всего: нет

kizune, спасибо! так заработало!

странно, сейчас доктайп ваще убрал и всё равно правильно отображается, а с доктайпами неправильно
доктайпы брал здесь:
http://www.w3.org/QA/2002/04/valid-dtd-list.html

Это сообщение отредактировал(а) mixas - 15.10.2007, 11:11

SelenIT

Дата 15.10.2007, 13:43 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(Се ля ви @ 15.10.2007, 09:30

)

Проблема именно в XHTML.

Уточнение: не в XHTML, а в Strict mode (строгом режиме рендеринга). Зависимость режима рендеринга от доктайпа в разных браузерах лучше всего раскрыта здесь.

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

mixas

Дата 15.10.2007, 16:15 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 39
Регистрация: 20.6.2007

Репутация: нет
Всего: нет

SelenIT, спасибо за инфу

а с этим всё нормально? разве можно так без указания URL?

Код


<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">

SelenIT

Дата 15.10.2007, 17:03 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

mixas, можно, конечно. Правда, имхо, не имеет особого практического смысла - Quirks mode можно получить и без доктайпа...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

morfus

Дата 16.10.2007, 11:54 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 71
Регистрация: 30.6.2007

Репутация: нет
Всего: 2

Возможно это поможет

Код

<style type="text/css">
html, body, table{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
table td {
    vertical-align: middle;
    text-align: center;
}
</style>
<table>
    <tr>
        <td>Я большой и страшный</td>
    </tr>
</table>

(работает при любом Doctype)

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »