Jump to content
  • 0

Размещение блоков с помощью position: relative


ProGGGer
 Share

Question

Нужно сделать что бы показывался определенный блок DIV по нажатию на выбор radio, остальные блоки становятся невидимыми. Блоки выводить нужно в одном и том же месте где и первый блок. Для реалицаии сделал использование

position: relative. с отрицательными координатами top. Но в различных браузерах значения отступа разные... как это можно пофиксить? Делал изначально под Opera 9.27 там норма. в FF немного едит вниз. в IE 6 cущественно сьезжает вниз. Какие есть методы пофиксить эту проблему?

<!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>
<script type="text/javascript">

function showLayer1() {
document.getElementById("d1").style.visibility = "visible";

document.getElementById("d2").style.visibility = "hidden";
document.getElementById("d3").style.visibility = "hidden";

}

function showLayer2() {
document.getElementById("d2").style.visibility = "visible";

document.getElementById("d1").style.visibility = "hidden";
document.getElementById("d3").style.visibility = "hidden";
}

function showLayer3() {
document.getElementById("d3").style.visibility = "visible";
document.getElementById("d1").style.visibility = "hidden";
document.getElementById("d2").style.visibility = "hidden";
}

</script>
</head>
<body>

<table width="700" border="1">
<tr>
<td width="100">test1</td>
<td colspan="2" rowspan="3">
<form method="get" name="Form1">
<h3 align="center">
Выберите Операцию : <br/>
продам<input onClick="showLayer1()" type="radio" name="oper1" value="продам">
куплю<input onClick="showLayer2()" type="radio" name="oper1" value="куплю">
сниму<input onClick="showLayer3()" type="radio" name="oper1" value="сниму">
</h3>
<div style="border:dotted">
<div id="d1" style="border:dotted; text-align:center; visibility: hidden; width: 500px;">
Для меню "продам":
</div>

<div id="d2" style="border:dotted; text-align:center; visibility: hidden; width: 500px;
position: relative; top: -25px; left: 0px;"> Для меню "куплю":
</div>

<div id="d3" style="border:dotted;text-align:center; visibility: hidden; width: 500px;
position: relative; top: -50px; left: 0px;"> Для меню "сниму":
</div>
<br/>
</div>
</form> </td>
</tr>
<tr>
<td width="100">test2</td>
</tr>
<tr>
<td width="100">test3</td>
</tr>
</table>

</body>
</html>

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

И потом кучу блоков гонять от начала координат. А при различном разрешении вообще ловить блоки за экраном?

Насколько я знаю абсолют идет от координат 0,0 левого верхнего угла страницы. если бы можно было бы сделать от родительского элемента было бы хорошо.

Link to comment
Share on other sites

  • 0

http://htmlbook.ru/css/position.html

absolute

Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

вроде это теория.

И если опять же я правильно понимаю отступы не идет от родительского DIV как мне надо в моем случае.

Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy