2 <div> tags should be one below another

There are 2 div tags and one div should be below another and it is ove

Page 1 of 1

5 Replies - 3128 Views - Last Post: 24 February 2009 - 04:53 AM

#1 sutr_kam  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 15-February 09

2 <div> tags should be one below another

Posted 24 February 2009 - 03:24 AM

<html>
	<head>
		<title>Multiple Select Box Demo</title>
		<style type="text/css">
			div.tableContainer {
				width: 200px;		/* table width will be 99% of this */
				height: 90px;		/* this div is for scrolling */
				margin: 0 auto;
			}
		</style>
		<script language="javascript">
			function onImageClick(){

				if(document.all.show.value == "0"){
					document.all.multiDropDown.style.visibility = "visible";
					document.all.okcancel.style.visibility = "visible";
					document.all.show.value = 1;
				} else{
					document.all.multiDropDown.style.visibility = "hidden";
					document.all.okcancel.style.visibility = "hidden";
					document.all.show.value = 0;
				}
				var s = '';
				var result = "";
				var temp = 0;
				var j = 0;
				for(var i = 1;i<7;i++){
					s = 'checkbox_' +i;
					if(document.all.item(s).checked == true){
						result+= i+",";
						temp++;
						j = i;
					}
				}
				//if(result != "")
				//	alert(" The checkboxes checked are " + result);
				if(temp > 1){
					document.all.abc.value = "Multiple Addresses";
				} else if(temp == 0){
					document.all.abc.value = "";
				} else if(temp == 1){
					s = "td_" + j;
					document.all.abc.value = document.all.item(s).innerText;
				}
				if(document.all.show.value == "0"){
					document.all.abc.focus();
					document.all.abc.select();
				}
					
			}
			
			function change(obj, flag){
		//		var check = 'checkbox_' + flag;
		//		if(!document.all.item(check).checked){
					if(flag == 1){
						//obj.style.background = "#0174DF";
						obj.style.background = "#2A6BC9";
						obj.style.color = "#FFFFFF";
					} else {
						obj.style.background = "#FFFFFF";
						obj.style.color = "#000000";
					}
		//		}
			}
			function onTRClick(id){
				var s = 'checkbox_'+id;
				var tr = 'tr_' + id;
				if(document.all.item(s).checked){
					document.all.item(s).checked = false;
					document.all.item(tr).style.background = "#FFFFFF";
					document.all.item(tr).style.color = "#000000";
				} else{
					document.all.item(s).checked = true;
					document.all.item(tr).style.background = "#2A6BC9";
					document.all.item(tr).style.color = "#FFFFFF";
				}
			}
		</script
	</head>
	<body>
		<input type="hidden" name="show" value="0">
	
		<div>
			<table border="0" cellpadding="0" cellspacing="0">
				<tr valign="bottom">
					<td valign="bottom">	
						<input type="text" name="abc" id="abc" size="10" value="" style="width:182px" onclick="onImageClick();" readonly>
					</td>
					<td valign="bottom">
						<img src="arrowButton.png" border="1" onclick="onImageClick();" height="15">
					</td>
				</tr>
			</table>
		</div>

		<div id="multiDropDown"  
			style="visibility:hidden; 
					border: 1px solid; 
					overflow: auto; 
					position: absolute; 
					text-align:; 
					cursor: default; 
					height: 100px; 
					width: 200px; 
					color: SteelBlue;
					background: #FFFFFF none repeat scroll 0% 0%;">
			<table style="border-top: none;
					color: black; 
					font-size: 11pt; 
					width: 100%;" 
					id="multiDropDown_dropListTable" 
					border="0" 
					cellpadding="0" 
					cellspacing="0">
				<tbody onblur="onImageClick();">
					<tr onmouseover='change(this,1);' onmouseout='change(this,0)'><td width="100%"><span>Multiple Addresses</span></td></tr>
					<tr onmouseover='change(this,1);' onmouseout='change(this,0)'><td width="100%"><span>--------------------</span</td></tr>
					<tr id='tr_1' name='tr_1' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(1)' onblur="onImageClick();"><td width="100%" id="td_1" name="td_1"><input type="checkbox" name="checkbox_1" onclick='onTRClick(1)'>Checkbox1</td></tr>
					<tr id='tr_2' name='tr_2' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(2)' onblur="onImageClick();"><td width="100%" id="td_2" name="td_2"><input type="checkbox" name="checkbox_2" onclick='onTRClick(2)'>Checkbox2</td></tr>
					<tr id='tr_3' name='tr_3' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(3)'><td width="100%" id="td_3" name="td_3"><input type="checkbox" name="checkbox_3" onclick='onTRClick(3)'>Checkbox3</td></tr>
					<tr id='tr_4' name='tr_4' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(4)'><td width="100%" id="td_4" name="td_4"><input type="checkbox" name="checkbox_4" onclick='onTRClick(4)'>Checkbox4</td></tr>
					<tr id='tr_5' name='tr_5' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(5)'><td width="100%" id="td_5" name="td_5"><input type="checkbox" name="checkbox_5" onclick='onTRClick(5)'>Checkbox5</td></tr>
					<tr id='tr_6' name='tr_6' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(6)'><td width="100%" id="td_6" name="td_6"><input type="checkbox" name="checkbox_6" onclick='onTRClick(6)'>Checkbox6</td></tr>
				</tbody>
			</table>
		</div>
		<div id="okcancel"  
			style="visibility:hidden; 
				position: relative; 
				height: 27px; 
				width: 200px;" >
			<table style="border-top: none;color: black; font-size: 11pt; width: 100%;" id="multiDropDown_okCancelTable" class="" border="0" cellpadding="0" cellspacing="0">
				<tbody>
					<tr id='tr_10' name='tr_10'>
						<td width="100%" id="td_10" name="td_10" align="right">
							<input type="button" name="ok" value="OK" onclick="java script:alert('hai ok button clicked');">
							<input type="button" name="Cancel" value="Cancel" >
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		
	</body>
</html>



here is the code what i have written
can u suggest me anything so that the second and third div tags should not overlap.

Here iam attaching an image the ok and cancel buttons are overlapped on the first div tag

advanced thanks,
regards
sutr kam.

Attached image(s)

  • Attached Image

This post has been edited by sutr_kam: 24 February 2009 - 03:42 AM


Is This A Good Question/Topic? 0
  • +

Replies To: 2 <div> tags should be one below another

#2 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: 2 <div> tags should be one below another

Posted 24 February 2009 - 03:37 AM

The second div is using absolute positioning, which takes it out of the flow of the document and will cause the other content to overlap it. Your image didn't attach properly though, so it's tricky to see what you are trying to achieve.
Was This Post Helpful? 0
  • +
  • -

#3 sutr_kam  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 15-February 09

Re: 2 <div> tags should be one below another

Posted 24 February 2009 - 03:45 AM

sory i forgot to attach image now i have attached it.
regards,
sutr kam.

the problem is with second and third divs
i.e.
multipleDropDown div and okcancel dropDown
Was This Post Helpful? 0
  • +
  • -

#4 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: 2 <div> tags should be one below another

Posted 24 February 2009 - 04:27 AM

Like I said, try taking the absolute positioning off the second div. Absolute positioning prevents the other elements on your page from seeing the second div, so they sit on it rather than around it.
Was This Post Helpful? 0
  • +
  • -

#5 sutr_kam  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 15-February 09

Re: 2 <div> tags should be one below another

Posted 24 February 2009 - 04:34 AM

View Postthehat, on 24 Feb, 2009 - 03:27 AM, said:

Like I said, try taking the absolute positioning off the second div. Absolute positioning prevents the other elements on your page from seeing the second div, so they sit on it rather than around it.


I tried it but it didn't worked
regards
sutr kam
Was This Post Helpful? 0
  • +
  • -

#6 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: 2 <div> tags should be one below another

Posted 24 February 2009 - 04:53 AM

I've removed the absolute positioning, and the incomplete text-align rule that followed it. Seems to be working now.

<html>
	<head>
		<title>Multiple Select Box Demo</title>
		<style type="text/css">
			div.tableContainer {
				width: 200px;		/* table width will be 99% of this */
				height: 90px;		/* this div is for scrolling */
				margin: 0 auto;
			}
		</style>
		<script language="javascript">
			function onImageClick(){

				if(document.all.show.value == "0"){
					document.all.multiDropDown.style.visibility = "visible";
					document.all.okcancel.style.visibility = "visible";
					document.all.show.value = 1;
				} else{
					document.all.multiDropDown.style.visibility = "hidden";
					document.all.okcancel.style.visibility = "hidden";
					document.all.show.value = 0;
				}
				var s = '';
				var result = "";
				var temp = 0;
				var j = 0;
				for(var i = 1;i<7;i++){
					s = 'checkbox_' +i;
					if(document.all.item(s).checked == true){
						result+= i+",";
						temp++;
						j = i;
					}
				}
				//if(result != "")
				//	alert(" The checkboxes checked are " + result);
				if(temp > 1){
					document.all.abc.value = "Multiple Addresses";
				} else if(temp == 0){
					document.all.abc.value = "";
				} else if(temp == 1){
					s = "td_" + j;
					document.all.abc.value = document.all.item(s).innerText;
				}
				if(document.all.show.value == "0"){
					document.all.abc.focus();
					document.all.abc.select();
				}
				   
			}
		   
			function change(obj, flag){
		//		var check = 'checkbox_' + flag;
		//		if(!document.all.item(check).checked){
					if(flag == 1){
						//obj.style.background = "#0174DF";
						obj.style.background = "#2A6BC9";
						obj.style.color = "#FFFFFF";
					} else {
						obj.style.background = "#FFFFFF";
						obj.style.color = "#000000";
					}
		//		}
			}
			function onTRClick(id){
				var s = 'checkbox_'+id;
				var tr = 'tr_' + id;
				if(document.all.item(s).checked){
					document.all.item(s).checked = false;
					document.all.item(tr).style.background = "#FFFFFF";
					document.all.item(tr).style.color = "#000000";
				} else{
					document.all.item(s).checked = true;
					document.all.item(tr).style.background = "#2A6BC9";
					document.all.item(tr).style.color = "#FFFFFF";
				}
			}
		</script>
	</head>
	<body>
		<input type="hidden" name="show" value="0">
   
		<div>
			<table border="0" cellpadding="0" cellspacing="0">
				<tr valign="bottom">
					<td valign="bottom">	
						<input type="text" name="abc" id="abc" size="10" value="" style="width:182px" onclick="onImageClick();" readonly>
					</td>
					<td valign="bottom">
						<img src="arrowButton.png" border="1" onclick="onImageClick();" height="15">
					</td>
				</tr>
			</table>
		</div>

		<div id="multiDropDown"  
			style="visibility:hidden;
					border: 1px solid;
					overflow: auto;
					
					cursor: default;
					height: 100px;
					width: 200px;
					color: SteelBlue;
					background: #FFFFFF none repeat scroll 0% 0%;">
			<table style="border-top: none;
					color: black;
					font-size: 11pt;
					width: 100%;"
					id="multiDropDown_dropListTable"
					border="0"
					cellpadding="0"
					cellspacing="0">
				<tbody onblur="onImageClick();">
					<tr onmouseover='change(this,1);' onmouseout='change(this,0)'><td width="100%"><span>Multiple Addresses</span></td></tr>
					<tr onmouseover='change(this,1);' onmouseout='change(this,0)'><td width="100%"><span>--------------------</span</td></tr>
					<tr id='tr_1' name='tr_1' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(1)' onblur="onImageClick();"><td width="100%" id="td_1" name="td_1"><input type="checkbox" name="checkbox_1" onclick='onTRClick(1)'>Checkbox1</td></tr>
					<tr id='tr_2' name='tr_2' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(2)' onblur="onImageClick();"><td width="100%" id="td_2" name="td_2"><input type="checkbox" name="checkbox_2" onclick='onTRClick(2)'>Checkbox2</td></tr>
					<tr id='tr_3' name='tr_3' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(3)'><td width="100%" id="td_3" name="td_3"><input type="checkbox" name="checkbox_3" onclick='onTRClick(3)'>Checkbox3</td></tr>
					<tr id='tr_4' name='tr_4' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(4)'><td width="100%" id="td_4" name="td_4"><input type="checkbox" name="checkbox_4" onclick='onTRClick(4)'>Checkbox4</td></tr>
					<tr id='tr_5' name='tr_5' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(5)'><td width="100%" id="td_5" name="td_5"><input type="checkbox" name="checkbox_5" onclick='onTRClick(5)'>Checkbox5</td></tr>
					<tr id='tr_6' name='tr_6' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(6)'><td width="100%" id="td_6" name="td_6"><input type="checkbox" name="checkbox_6" onclick='onTRClick(6)'>Checkbox6</td></tr>
				</tbody>
			</table>
		</div>
		<div id="okcancel"  
			style="visibility:hidden;
				position: relative;
				height: 27px;
				width: 200px;" >
			<table style="border-top: none;color: black; font-size: 11pt; width: 100%;" id="multiDropDown_okCancelTable" class="" border="0" cellpadding="0" cellspacing="0">
				<tbody>
					<tr id='tr_10' name='tr_10'>
						<td width="100%" id="td_10" name="td_10" align="right">
							<input type="button" name="ok" value="OK" onclick="java script:alert('hai ok button clicked');">
							<input type="button" name="Cancel" value="Cancel" >
						</td>
					</tr>
				</tbody>
			</table>
		</div>

	   
	</body>
</html>


Was This Post Helpful? 1
  • +
  • -

Page 1 of 1