Три дива объединить, position: absolute не подходит. Что использовать?

Атом · March 17, 2013

Прошу помочь реализовать одну идею, есть таблица из 1 строки и 2 колонок, размеры таковы( высота 100% ширина каждой колонки 50% от ширины экрана).

В каждой ячейке фотография, нужно поставить прицел в центр каждой ячейки. Код


<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
</head>
<body>
<table height="100%" width="100%">
<tr>
<td height="100%" width="50%" bgcolor="#CC9900">
<div id="okno1" style="height:100%;"><img src="1.jpg" height="886" width="955"></div>
<div style="position: absolute; width:3px; height:50px; background:#f00;top:418px; left:478px; margin-bottom:-50px"></div>
<div style="position: absolute; relative; width:50px; height:3px; background:#f00;top:443px; left:453px;line-height:1px"></div>
</td>
<td height="100%" width="50%" bgcolor="#006633">
<div id="okno2" style="height:100%"><img src="1.jpg" height="886" width="955"></div>
<div style="position: relative; width:3px; height:50px; background:#f00;top:418px; left:474px; margin-bottom:-50px"></div>
<div style="position: relative; width:50px; height:3px; background:#f00;top:443px; left:449px;line-height:1px"></div>
</td>
</tr>
</table>
</body>
</html>

Условие, координаты прицела должны быть идентичны. С помощью position: absolute можно привязать только к 1-ой ячейке пицел, а вот как привязать прицел ко-второй?

sammasati · March 18, 2013

С помощью position: absolute можно привязать только к 1-ой ячейке пицел

На самом деле координаты отсчитываются не от ячейки, а от окна. Относительно ячейки нельзя позиционировать элементы. Поэтому, нужно делать так:

<table height="100%" width="100%">
<tr>
<td height="100%" width="50%" bgcolor="#CC9900">
<div id="okno1" style="height:100%;position:relative;">
<img src="1.jpg" height="886" width="955">
<div style="position: absolute; width:3px; height:50px; background:#f00;top:418px; left:50%; margin-bottom:-50px"></div>
<div style="position: absolute; width:50px; height:3px; background:#f00;top:443px; left:50%;line-height:1px;margin:0 0 0 -25px;"></div>
</div>
</td>
<td height="100%" width="50%" bgcolor="#006633">
<div id="okno2" style="height:100%;position:relative;">
<img src="1.jpg" height="886" width="955">
<div style="position: absolute; width:3px; height:50px; background:#f00;top:418px; left:50%; margin-bottom:-50px"></div>
<div style="position: absolute; width:50px; height:3px; background:#f00;top:443px; left:50%;line-height:1px;margin:0 0 0 -25px;"></div>
</div>
</td>
</tr>
</table>

"left: 50%" и "margin:0 0 0 -25px" добавлены для резиновости. Можно и фиксированные значения поставить.

Советую почитать: http://htmlbook.ru/s...vanie-elementov в частности раздел про вложенные слои.

Атом · March 18, 2013

На самом деле координаты отсчитываются не от ячейки, а от окна. Относительно ячейки нельзя позиционировать элементы. Поэтому, нужно делать так:

У меня формирование этой таблицы происхожид с помощью Javascript, использую события onresize, получаю центр каждой ячейки, но смысл в другом.

Вы 2 дива закинули в 1 див к рисунку, я же так не могу тэг закрытия </div> перенести за 2 остальных дива, отвечающих за прицел, так как использую .innerHTML для добавления дивов по очереди... Может есть какой вариант другой? с z-index?

Атом · March 18, 2013

Все разобрался, схитрить немного пришлось, Sammasati спс за направление

Sign In

Три дива объединить, position: absolute не подходит. Что использовать?

Question

Атом

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

sammasati

Link to comment

Share on other sites

Атом

Link to comment

Share on other sites

Атом

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information