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

ProGGGer · June 1, 2008

Нужно сделать что бы показывался определенный блок 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>

homm · June 1, 2008

position: absolute;

ProGGGer · June 1, 2008

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

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

homm · June 1, 2008

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

Плохо знаешь, учи теорию.

ProGGGer · June 1, 2008

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

absolute

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

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

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

SibBear · June 1, 2008

absolute + visibility (или display)

размещаешь все в одном месте и прячешь при необходимости, гонять ничего не нужно.

homm · June 1, 2008

http://rossomachin.livejournal.com/62656.html

Sign In

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

Question

ProGGGer

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

homm

Link to comment

Share on other sites

ProGGGer

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

ProGGGer

Link to comment

Share on other sites

SibBear

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

Обсуждения

Forums

Important Information