〔高分〕求救div的位置问题

wuyg719 2007-01-04 10:33:35

我有一个网页在这里：
http://www.asaap.ca/test/html/test_layout.htm

其中有7个按钮，我想要实现最左边第一个按钮的效果：跟随被点中的按钮
与第二到第5个按钮的区别在于这个被显示的div不是嵌套的，即在所有的div外面。

由于布局模板的问题，第二到第5个按钮弹出的div不可能移出嵌套。由于
id＝pagecell1的div的style有 top =102, 所以第二到第5个按钮弹出的div都向下偏移了102px。top＝102可能会被调整的，所以程序中不能硬减去这个数字。

请教有什么好的方法实现“跟随被点中的按钮”的效果？

...全文

708 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

wuyg719 2007-01-06

打赏
举报

/***********************************************/
/* emx_nav_left.css */
/* Use with template Halo_leftNav.html */
/***********************************************/

/* ********************************************* */
/* HTML tag styles */
/* ********************************************* */
body{
font-family: Arial,sans-serif;
color: #333333;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url(../images/bg_grad.jpg) fixed;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/* ************* header tag styles ************* */

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/
form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/************ Layout Divs *********************/
#pagecell1{
position:absolute;
top: 102px;
left: 2%;
right: 2%;
width:95.6%;
padding: 53px 0px 0px 0px;
background-color: #ffffff;
}

#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 400;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#masthead{
position: absolute;
top: 0px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: left;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-right: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Arial, Verdana, sans-serif;

}

#content{
padding: 0px 10px 0px 0px;
margin:0px 0px 0px 178px;
border-left: 1px solid #ccd2d2;
border-top:1px solid #ccd2d2;
font-size:14px;
color: #21536A;
}

#content a:link, #content a:visited {
font-size:13px;
color: #21536A;
}

#content a:hover {
font-size:13px;
color:#FF0000;
}

/*********** Component Divs *************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/* ************* pageName styles *************** */
#pageName{
position:absolute;
top: 112px;
left: 2%;
right: 2%;
width:350px;
background-color: #ffffff;
z-index:200;
padding: 5px 0px 14px 10px;
font: bold 175% Arial,sans-serif;
color: #000000;
margin: 0px;
overflow:hidden;
white-space:nowrap;
border-bottom:1px solid #ccd2d2;
}

#subPageName{
font:bold 100% Arial,sans-serif;
position:absolute;
top:0px;
left: 360px;
overflow:hidden;
margin: 0px;
float:left;
padding: 11px 0px 11px 0px;
color: #000000;
white-space:nowrap;
z-index:300;
}

#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}

/* *********** subglobalNav styles ************* */

.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
color: #cccccc;
}

/* ************* siteInfo styles *************** */
#siteInfo{
clear: both;
border-top: 1px solid #cccccc;
font-size:14px;
color: #cccccc;
padding: 10px 10px 10px 10px;
margin-top: 0px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}

/* *********** sectionLinks styles ************* */

#sectionLinks{
margin: 0px;
padding: 0px;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
}

#sectionLinks a:link, #sectionLinks a:visited {
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url(../images/bg_nav.jpg);
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
border-top: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
font-weight: bold;
text-decoration: none;
}

/* ************ relatedLinks styles ************* */

.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
}

.relatedLinks a{
display: block;
}

/**************** advert styles *****************/

#advert{
padding: 10px;
}

table {
font-size: 13px;
vertical-align:top;
}

th {
background-color:#CCCCCC;
vertical-align:top;
font-size: 13px;
}
td {
vertical-align:top;
font-size: 13px;
}

/* Input fields length */
.long {width:500px;}
.middle {width:350px;}
.short {width:150px;}
.number {width:50px;}
.float {width:100px;}
.date {width:87px;}

.box {
border:1px solid #cccccc;
}

body,td,th,p,div,ol,ul,dl,li,input, select, p, textarea{
font-family: Arial, sans-serif;
}
input, select, textarea{
font-size:13px;
}

/* selector is css2 specification, but IE can't support */
.logicGroupEdit input[type="text"]{
width:60px;
}

.logicGroupEditDiv{
/* position:absolute; */
/* position:relative; */
position:absolute;
color:#000000;
background-color:#CCCCCC;
border-width:1px;
padding: 3px 3px 3px 3px;
width:auto;
height:auto;
left:60px;
top:30px;
z-index:1000;
}

wuyg719 2007-01-06

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>

<meta http-equiv="Content-Type" content="text/html;">
<title>Xpert4Health by Terida</title>

<link rel="stylesheet" href="include/newstyle.css" title="JustinStyle" type="text/css">
</head><body>

<div id="bracketDiv" class="logicGroupEditDiv" style="display: none;">
<select name="bracket" onchange="javascript:calculateLine(this);">
<option value=""> - - -</option>
<option value="LEFT">(</option>
<option value="RIGHT">)</option>
</select>
</div>

<div id="masthead">
<h1 id="siteName">Test layout</h1>
</div>



<div id="pageName">
Define Logical Rule
</div>

<div id="pagecell1">

<div id="pageNav">
<div id="sectionLinks">
<a href="#">Section Link</a>
<a href="#">Section Link</a>
</div>

<div class="relatedLinks">
<h3>Related Link Category</h3>
</div>

<div class="relatedLinks">
<h3>Related Link Category</h3>
<a href="#">Related Link</a>
<a href="#">Related Link</a>
</div>
<div id="advert">
Advertisement.
</div>
</div>

<div id="content">

<script type="text/javascript">

// pop up a data input block
function popupDIV(event,div){

var myDiv=document.getElementById(div);

var element;
if(event.srcElement){
element=event.srcElement;
}else{
element=event.target;
}
var top=element.offsetTop;
var left=element.offsetLeft;

/*
var o=element;
while(o.parentNode!=null){
o=o.parentNode;
if(o.nodeName=='DIV') break;
}
*/

var parentElement;
while(element.offsetParent!=null) { // Parse the parent hierarchy up to the document element
parentElement = element.offsetParent // Get parent object reference
left += parentElement.offsetLeft // Add parent left position
top += parentElement.offsetTop;
element = parentElement
}

myDiv.style.left=left+"px"; //event.clientX+"px";
myDiv.style.top=top+"px"; //event.clientY-95+"px";
if(myDiv.style.display!=""){
myDiv.style.display="";
}else{
myDiv.style.display="none";
}
}

function testPopup(left,top){
//alert('sss');
// div name
var myDiv=document.getElementById('bracketDiv');

myDiv.style.left=left+"px"; //event.clientX+"px";
myDiv.style.top=top+"px"; //event.clientY-95+"px";

myDiv.style.position="absolute";

if(myDiv.style.display!=""){
myDiv.style.display="";
}else{
myDiv.style.display="none";
}

}

</script>

<div id="subPageName">
Evaluation: justin test
<br>

</div>

<form name="logicGroup" method="post" action="" class="logicGroupEdit">

<br>


<input type="button" value="(...)" name="openBracket" onclick="javascript:popupDIV(event,'bracketDiv');">

<input value="Boolean" name="OpenBoolean" onclick="javascript:popupDIV(event,'outerOperatorDiv');" type="button">

<input value="Number" name="openNumber" onclick="javascript:testPopup(20,102);" type="button">

<div id="instanceDiv" class="logicGroupEditDiv" style="display: none;">
<select name="instanceLeft" onchange="javascript:calculateLine(this);">
<option value=""> - - -</option>
<option value="550">CURRENT</option>
</select>
<br>
<select name="instanceRight" onchange="javascript:calculateLine(this);">
<option value=""> - - -</option>
<option value="550">CURRENT</option>
</select>
</div>

<div id="evaluationDiv" class="logicGroupEditDiv" style="display: none;">
<input name="evaluationLeft" type="hidden">
<input name="relationLeft" type="text">
<br>
<input name="evaluationRight" type="hidden">
<input name="relationRight" type="text">
</div>

<div id="criterionDiv" class="logicGroupEditDiv" style="display: none;">
<select name="criterionLeft" onchange="javascript:calculateLine(this);">
<option value="">- - -</option><option value="63563">Biopsy</option><option value="5506">Cardiac Failure</option><option value="2720">Creatinine</option>
</select>
<br>
<select name="criterionRight" onchange="javascript:calculateLine(this);">
<option value="">- - -</option><option value="63563">Biopsy</option><option value="5506">Cardiac Failure</option><option value="2720">Creatinine</option>
</select>
</div>

<div id="outerOperatorDiv" class="logicGroupEditDiv" style="left: 255px; top: 97px; display: none;">
<select name="outerOperator" disabled="disabled" style="display: none;">
<option value=""> - - -</option>
<option value="NOT">NOT</option>
</select>

<select name="booleanOperator" onchange="javascript:calculateLine(this);">
<option value=""> - - -</option>
<option value="AND">AND</option>
</select>
</div>

<div id="measureDiv" class="logicGroupEditDiv" style="display: none;">
<textarea name="measure" cols="50" rows="4" style="display: none;">0</textarea>
<textarea name="measureDisp" cols="50" rows="4" style="display: none;"></textarea>
</div>

<div id="operatorDiv" class="logicGroupEditDiv" style="display: none;">
<select name="innerOperator" onchange="javascript:calculateLine(this);">
<option value="">- - -</option>
<option value="EQ">=</option>
</select>
</div>

<div id="calculationNumberDiv" class="logicGroupEditDiv" style="display: none;">
<input name="calculationNumber" style="width: 120px;" onchange="javascript:calculateLine(this);" type="text">
</div>

<textarea name="debugInfo" cols="55" rows="12" style="display: none;"></textarea>
<br>

<br>

</form>

<script type="text/javascript">
displayTable=document.getElementById("myDisplayTable");
dataTable=document.getElementById("myDataTable");
singleNewLine=document.getElementById("singleNewLine");
siglePreviousLine=document.getElementById("siglePreviousLine");
//reConstructDisplayTable();
</script>
</div>

<div id="siteInfo">
</div>

</div>

<br>
</body></html>

wuyg719 2007-01-05

打赏
举报

都是台湾地震惹的祸，下面是我的主要代码：

// pop up a data input block
function popupDIV(event,div){

var myDiv=document.getElementById(div);

var element;
if(event.srcElement){
element=event.srcElement;
}else{
element=event.target;
}
var top=element.offsetTop;
var left=element.offsetLeft;

/*
var o=element;
while(o.parentNode!=null){
o=o.parentNode;
if(o.nodeName=='DIV') break;
}
*/

var parentElement;
while(element.offsetParent!=null) { // Parse the parent hierarchy up to the document element
parentElement = element.offsetParent // Get parent object reference
left += parentElement.offsetLeft // Add parent left position
top += parentElement.offsetTop;
element = parentElement
}

myDiv.style.left=left+"px"; //event.clientX+"px";
myDiv.style.top=top+"px"; //event.clientY-95+"px";
if(myDiv.style.display!=""){
myDiv.style.display="";
}else{
myDiv.style.display="none";
}
}