VPF::растянуть div с position:absolute по контейнеру

leneCaress

Дата 12.12.2008, 12:59 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 54
Регистрация: 12.12.2008
Где: Москва

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

добрый день.

третий день мучаюсь над проблемой:

есть таблица, в ней - ячейка, в этой ячейке нужно сделать два слоя:
на нижнем - замороченый фон - таблица id="bg_table"
на верхнем - произвольное содержание id="data"

проблема - чтобы ячейка таблицы все это содержащая, и оба слоя были одинаковой высоты и ширины.

мне удалось добится нужного эффекта в firefox 3.

а для IE - ни в какую. smile

гуглила безуспешно.

помогите дуре smile

Код


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

<html>
<head>
<title>test</title>
</head>
<body>

<table width="100%">
    <tr>
        <td valign="top">
        
            <div style="position:relative;clear:both;height:100%;">
        
                <div style="position:absolute;height:100%;width:100%;">
                    <table width="100%" style="min-height:100%;height:100%;" id="bg_table">
                        <tr>
                            <td width="100%" height="100%" style="background-color:#f00">куча картинок в таблице</td>
                        </tr>
                    </table>
                </div>
                
                <div style="position:relative;z-index:10;" id="data">
                    куча текста поверх таблицы<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                </div>
                
            </div>
            
        </td>
    </tr>
</table>

</body>

</html>

Это сообщение отредактировал(а) leneCaress - 12.12.2008, 13:00

bars80080

Дата 12.12.2008, 15:07 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

ну зачем так критично? я даже к себе так не отношусь

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style>
* { margin: 0px; padding: 0px; }
table { border-collapse: collapse; }
td { vertical-align: top; }
#tab { width: 100%; border: 0px; }
#bg_table { min-height: 100%; height: 100%; width: 100%; }
</style>
</head>
<body>
<table id="tab">
    <tr>
        <td>
        
            <div style="position:relative;clear:both;height:100%;">
        
                <div style="position:absolute;height:100%;width:100%;">
                    <table id="bg_table">
                        <tr>
                            <td width="100%" height="100%" style="background-color:#f00">куча картинок в таблице</td>
                        </tr>
                    </table>
                </div>
                
                <div style="position:relative;z-index:10;" id="data">
                    куча текста поверх таблицы<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                </div>
                
            </div>
            
        </td>
    </tr>
</table>
</body>
</html>

холотое правило - изначально всегда ставим * { margin: 0px; padding: 0px; }, а всем таблицам table { border-collapse: collapse; }. и после этого начинаем верстать нормальную вёрстку без излишеств. наверняка здесь натыкано много чего лишнего

остальное я вывел в стили, чтобы было ясно, как красиво выглядит разметка без кучи ненужных атрибутов в тэгах

leneCaress

Дата 12.12.2008, 15:40 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 54
Регистрация: 12.12.2008
Где: Москва

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

код:

Код


* { margin: 0px; padding: 0px; }
table { border-collapse: collapse; }
td { vertical-align: top; }

просто супер!!! smile

спасибо!!! smile

(а я то заморачивалась)

хотя style="..." я писала ТЕ тестировала, обычно, разумеется, все выношу в css.

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

Код


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

<html>

<head>

<title>test</title>

<style>

*        { margin: 0px; padding: 0px; }
table    { border-collapse: collapse; }
td        { vertical-align: top; }

.root    { width: 100%; border: 0px; }
.bg_table
        { min-height: 100%; height: 100%; width: 100%; }

</style>

</head>

<body>

<table class="root">
    <tr>
        <td>
        
            <div style="position:relative;clear:both;height:100%;">
        
                <div style="position:absolute;height:100%;width:100%;">
                    <table class="bg_table">
                        <tr>
                            <td width="100%" height="100%" style="background-color:#f00">куча картинок в таблице</td>
                        </tr>
                    </table>
                </div>
                
                <div style="position:relative;z-index:10;">
                    куча текста поверх таблицы<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                </div>
                
            </div>
            
        </td>
    </tr>
</table>

</body>

</html>

но проблема осталась.
в firefox и в ie выглядит по разному(а нужно чтобы везде как в ff) - прилагаю скриншоты.

Присоединённый файл ( Кол-во скачиваний: 6 )

screenshot.zip 5,84 Kb

bars80080

Дата 12.12.2008, 17:40 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

тогда не понятны заморочки с высотами, у тебя же в ФФ не выдерживается высота 100%
а по рисунку так:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<style>
* { margin: 0px; padding: 0px; }
table { border-collapse: collapse; }
td { vertical-align: top; }
#tab { width: 100%; border: 0px; }
#bg_table { width: 100%; }
#data { position: relative; }
</style>
</head>
<body>
<table id="tab">
    <tr>
        <td>
        
            <div style="position:relative;background-color:#f00">
        
                <div style="position:absolute;width:100%;">
                    <table id="bg_table">
                        <tr>
                            <td width="100%"><img src="zzz.jpg" />куча картинок в таблице</td>
                        </tr>
                    </table>
                </div>
                
                <div id="data">
                    куча текста поверх таблицы<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                    123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                </div>
                
            </div>
            
        </td>
    </tr>
</table>
</body>
</html>

leneCaress

Дата 12.12.2008, 21:21 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 54
Регистрация: 12.12.2008
Где: Москва

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

ммм... выглядит правильно - на деле не то :(
точнее bg_table имеет размер - всего одна строка

моя задача такова (может есть другой способ решения):

есть два слоя - фон и данные.
фон состоит из двух частей - левой и правой. каждая часть представляет собой повторяющийся по вертикали background, плюс картинка вверху или внизу области фона. ( ТЕ фон не однороден, в общем случае - произвольной структуры )
данные - текст,таблицы и пр.(не важно что) - могут иметь произвольную высоту.

хотелось бы чтобы фон растягивался под данные.

при этом и фон и данные лежат в ячейке таблицы.

я пытаюсь это реализовать создав два слоя: для фона и данных и расположив их друг над другом.
это получается без проблем.
но требуется чтобы слой с фоном - <div> растягивался под высоту всей ячейки.
для firefox этого удалось добится - см. мой первый пост
проблема - добится того же эффекта под IE

в итоге моя ячейка таблицы выглядит следующим образом:

Код


    <td valign="top">

        <div style="position:relative;">
        
            <div style="position:absolute;height:100%;width:100%;">
                <table width="100%" style="min-height:100%;height:100%;">
                    <tr>
                        <td style="background:#f5e9de url('/media/mid-line-left.gif') repeat-y;" valign="top">
                              <img src="/media/mid-left.gif">
                        </td>
                        <td style="background:#f5e9de url('/media/mid-line-mid.gif') right repeat-y;" valign="top" align="right">
                              <img src="/media/mid-mid.gif">
                        </td>
                    </tr>
                </table>
            </div>
            
            <div style="position:relative;z-index:10;min-height:500px;">
                123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
                123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>123<br>
            </div>
        
        </div>
        
    </td>

и под ФФ это работает!!!
(css запихнуты в style в целях эксперемента)

возможно существуют другие метода добится того-же эффекта?

заранее спасибо smile

Это сообщение отредактировал(а) leneCaress - 12.12.2008, 21:22

webster

Дата 12.12.2008, 21:48 (ссылка)

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

Загрузка ...

Опытный

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

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

Вы совсем забываете использовать свойство background-position, которое позволяет установить точку, с которой начнется повторение бэкгроундной картинки по той или иной оси (или по обоим):

Код


<!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" xml:lang="ru" lang="ru">
<head>
<title>тест</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
}
#container_1, #container_2, #container_3, #container_4 {
    min-height: 100%;
    height: auto!important;
    height: 100%;
    width: 100%;
    display: inline-block;
}
#container_1 {
    background-image: url(pict_1.gif);/* Повторяющаяся картинка без отступа слева в 50% */
    background-repeat: repeat-y;
    background-position: 0% 0%;
}
#container_2 {
    background-image: url(pict_2.gif);/* Повторяющаяся картинка с отступом отлевой стороны видимой области в 50% */
    background-repeat: repeat-y;
    background-position: 50% 0%;
}
#container_3 {
    background-image: url(pict_3.gif);/* Статичная картинка в левом верхнем углу */
    background-repeat: no-repeat;
    background-position: 0% 0%;
}
#container_4 {
    background-image: url(pict_4.gif);/* Статичная картинка в правом нижнем углу */
    background-repeat: no-repeat;
    background-position: 100% 100%;
}
</style>
</head>
<body>
<div id="container_1">
    <div id="container_2">
        <div id="container_3">
            <div id="container_4">
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />
            Содержимое<br />            
            
            </div>
        </div>
    </div>
</div>
</body>
</html>

leneCaress

Дата 12.12.2008, 21:53 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 54
Регистрация: 12.12.2008
Где: Москва

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

ОГРОМНОЕ СПАСИБО!!!!!!!!!!!!!!!!!!!! smile

blah

Дата 12.12.2008, 23:35 (ссылка)

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

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

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

Цитата(webster @ 12.12.2008, 19:48)

А Вы попробуйте установить вертикальную позицию для repeat-y, или горизонтальную для repeat-x smile

leneCaress

Дата 13.12.2008, 00:09 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 54
Регистрация: 12.12.2008
Где: Москва

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

я сделала в итоге немного иначе:
воспользовалась опцией transparent - и не заморачивалась с позициями картинок
ТЕ не повторяющиеся картинки рисовала во внутренних дивах. повторяющиеся - во внешних.

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