VPF::Положить div один на другой - Форум программистов

Dewas

Дата 9.4.2008, 13:01 (ссылка)

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

Загрузка ...

Новичок

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

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

Кладу два дива один на другой, в одном диве таблица (вообще говоря, таблица это или нет - не важно, но с таблицами хорошо видно пустое место), в другом картинка, картинка идет после таблицы, так вот в браузере картинка оказывается под таблицей как и хотелось, но после таблицы остается пустое место высотой в картинку.
Отсюда вопрос, как наложить два дива так чтобы "лишнего" места нигде не занималось.

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<link href="style1.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
    <table width="100%" border="1">
    <tr>
        <td>
            <div class="front">
            <table width="100%" border="1">
                <tr>
                    <td heiht="100px" width="50%">&nbsp;</td>
                    <td heiht="100px" width="50%">&nbsp;</td>
                </tr><tr>
                    <td height="500px">&nbsp;</td>
                    <td height="500px">&nbsp;</td>
                </tr>
            </table>
            </div>
            <div class="back">
                <img src="back.png">
            </div>
        </td>
    </tr>
    </table>
</body>
</html>

Код


div.front {
    z-index:10;
    position : relative;
    top: 0px;
    left : 0px;
}
div.back {
    text-align:right;
    z-index:0;
    position : relative;
    bottom: 350px;
    right : 100px;
}

Тоже самое прилагаю в аттаче.

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

www.rar 53,29 Kb

NDenis

Дата 9.4.2008, 13:27 (ссылка)

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

Загрузка ...

Опытный

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

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

а если стили вот так прописать:

Код


div.back {
    text-align:right;
    /*z-index:0;*/
    position: absolute;
    bottom: 350px;
    right: 100px;
}

Dewas

Дата 9.4.2008, 14:02 (ссылка)

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

Загрузка ...

Новичок

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

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

Цитата(NDenis @ 9.4.2008, 13:27)

а если стили вот так прописать...

Так будет позиционирование относительно экрана, а нужно именно относительно ячейки большой таблицы. И при изменении размеров окна фон будет "плавать".

bars80080

Дата 9.4.2008, 14:20 (ссылка)

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

Загрузка ...

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

Награды: 1

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

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

засунь слой, который ты хочешь позиционировать относительно ячейки в эту саму ячейку
назначь ячейке position: relative, а слою position: absolute;

Dewas

Дата 9.4.2008, 14:25 (ссылка)

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

Загрузка ...

Новичок

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

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

Работает! Спасибо! smile

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