VPF::Поместить слой в таблицу. Возможно ли?

Teleport

Дата 11.11.2008, 19:17 (ссылка)

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

Загрузка ...

Опытный

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

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

вот код - слой отдельно таблица отдельно располагаются на экране.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
<!--
#apDiv1 {
    position:absolute;
    width:35%;
    height:120px;
    z-index:1;
    left: 734px;
    top: 21px;
    background-color: #0000CC;
}
-->
</style>
</head>

<body>
<div id="apDiv1"></div>
<table width="60%" height="269" border="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Возможно ли поместить данный слой в эту таблицу? Так чтобы параметры:
width:35%;
left: 734px;
top: 21px;
отсчитывались не от размеров окна браузера, а от размеров данной таблицы?

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

webster

Дата 11.11.2008, 20:27 (ссылка)

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

Загрузка ...

Опытный

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

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

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
<!--
#apDiv1 {
    position:absolute;
    width:35%;
    height:120px;
    z-index:1;
    left: 734px;
    top: 21px;
    background-color: #0000CC;
}
table {
position: relative;
}
-->
</style>
</head>

<body>

<table width="60%" height="269" border="0">
  <tr>
    <td>
<div id="apDiv1"></div>
</td>
  </tr>
</table>
</body>
</html>

Teleport

Дата 11.11.2008, 20:45 (ссылка)

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

Загрузка ...

Опытный

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

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

2 webster - слой все равно у меня отдельно от таблицы остался...
синий прямоугольничек в правой части экрана, а таблица слева... или я чего-то не понял?

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

champion

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

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

Загрузка ...

Опытный

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

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

Скорее вы чего-то не поняли smile

для дива установлен отступ слева в 734px, из-за этого такой перекос.

Идентичный результат, как у Webster'a, только другим способом.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
<!--
#apDiv1 {
    position:relative;
    width:35%;
    height:120px;
    z-index:1;
    left: 734px;
    top: 21px;
}
div {
    background: red;
}
td {
    background: blue;
    width: 100%;
}
-->
</style>
</head>
<body>
<table width="60%" height="269" border="0">
  <tr>
    <td>
    <div id="apDiv1">div</div>
    </td>
  </tr>
</table>
</body>
</html>

position:absolute используется при Абсолютном позиционировании - т.е. от окна, когда relative от элемента в котором находится слой. Поменяв первое на второе получаем желаемое. Для видимости выделил цветом.

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

webster

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

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

Загрузка ...

Опытный

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

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

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

Код


<div class="apDiv1">+</div>
<table width="60%" height="269" border="0">
  <tr>
    <td>
<div class="apDiv1">+</div>
</td>
  </tr>
</table>

Код


.apDiv1 {
...

и вы увидите разницу... Т.к. у вас <div> позиционируется абсолютно (и отсчет в данном случае ведется относительно левого верхнего угла таблицы и относительно ширины таблицы берутся размеры вложенного Дива), то он совершенно спокойно может покидать пространство родительского контейнера, в данном случае - таблицы.

P.S. А если быть уже совсем точным, то лучше написать:

Код


table td {
position: relative;
display: block;
height: 269px;
}

Это сообщение отредактировал(а) webster - 11.11.2008, 21:26

Teleport

Дата 12.11.2008, 11:39 (ссылка)

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

Загрузка ...

Опытный

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

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

примерно ясно smile

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

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

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