Jens Heinerl: Pixel-Schubserei ...

Beitrag lesen

SELF-Forum

Pixel-Schubserei ...

Jens Heinerl
– Informationen zu den Bewertungsregeln

Hi Gunther,

hier hab ich mal den vollständigen, funktionierenden Code (selbst ausprobiert im IE9 mit dem Versatzfehler).

  
  
<!DOCTYPE html>  
<html lang="en-us">  
  
<head>  
	<title>Index</title>  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
	<!--<meta http-equiv="X-UA-Compatible" content="IE=8" />-->  
  
  
<script type="text/javascript">  
  
	function getPosition(obj) {  
		var topValue = 0, leftValue = 0;  
		while (obj) {  
			leftValue += obj.offsetLeft;  
			topValue += obj.offsetTop;  
			obj = obj.offsetParent;  
		}  
		finalvalue = leftValue + "," + topValue;  
		return finalvalue;  
	}  
  
function CreateDiv(obj) {  
  
    var pos = getPosition(obj);  
    var posarray = pos.split(",");  
    var offset = obj.offsetHeight;  
    var width = obj.offsetWidth;  
  
  
    /* create & define div container */  
    var newdiv = document.createElement('div');  
    var divIdName = 'mDivCBox';  
    newdiv.setAttribute('id', divIdName);  
  
    newdiv.style.position = "absolute";  
    newdiv.style.top = (parseInt(posarray[1]) + parseInt(1)) + 'px';  
    newdiv.style.left = (parseInt(posarray[0]) + parseInt(1)) + 'px';  
    newdiv.style.top = (parseInt(posarray[1])) + 'px';  
    newdiv.style.left = (parseInt(posarray[0])) + 'px';  
    newdiv.style.width = (parseInt(width)) + 'px';  
  
    newdiv.innerHTML = '<div id="cbox_div"><ul id="cdiv_ul" class="cdiv_ul"><li>first item</li><li>second item</li><li>third item</li><li>four item</li></ul></div>';  
  
  
    /* wrapper div container will contain our new div */  
    var ni = document.getElementById('wrapper');  
    ni.appendChild(newdiv);  
  
    /* add specific padding-value */  
    var select_ul = document.getElementById('cdiv_ul');  
    select_ul.style.marginTop = parseInt(offset) + 'px';  
}  
  
</script>  
  
<style type="text/css">  
  
  
  
.cbox_div  
{  
    display:block;  
    background-color:transparent;  
}  
  
.cdiv_ul {  
    background:#aaa;  
    list-style:none;  
    border: 1px solid #000;  
    border-top-width:0px;  
    border-top:none;  
    cursor:default;  
}  
  
.cdiv_ul li:hover  
{  
background:#dcdcdc;  
}  
  
.cdiv_ul li {padding-left:1px; }  
  
table {  
        border-collapse: collapse;  
        /*border:1px solid #000;*/  
        /*border-right-width:0px;  
        border-bottom-width:0px;  
        border-bottom:none;  
        border-right:none;*/  
  
}  
  
td, th  
{  
   padding:2px;  
   border: 10px solid #000;  
   height:60px;  
}  
  
thead th {  
        text-align: center;  
        background: #787878;  
        color: #000;  
}  
  
  
.combotext  
{  
background: url("../images/dd_bk.png") repeat-x;  
height:100%;  
margin-right:21px;  
padding:0px 2px 0px 2px;  
text-align:left;  
}  
  
  
.combobild  
{  
float:right;  
border-left:1px solid #747373;  
border-right:none;  
background: url("../images/dd_img.png") no-repeat;  
width:21px;  
height:100%;  
}  
  
.cdiv  
 {  
/* display:block; macht das hier Sinn??? */  
border: 1px solid #000;  
height: 24px;  
text-align:center;  
vertical-align: middle;  
line-height: 24px;  
 }  
  
  
  
</style>  
  
  
</head>  
<body>  
	<div class="wrapper" id="wrapper">  
  
		<div class="tablecontainer">  
			<table>  
				<thead>  
					<tr>  
						<th>Hdr1</th>  
						<th>Hdr2</th>  
						<th>Hdr3</th>  
					</tr>  
				</thead>  
				<tbody>  
					<tr>  
						<td>  
							<div class="cdiv" onclick="CreateDiv(this);">  
								<div class="cbild">  
								</div>  
								<div class="ctext">  
									<span class="as_cui_t">Auswahl:</span>  
								</div>  
							</div>  
						</td>  
						<td>  
							<div class="cdiv" onclick="CreateDiv(this);">  
								<div class="combobild">  
								</div>  
								<div class="combotext">  
									<span class="as_cui_t">Auswahl2:</span>  
								</div>  
							</div>  
						</td>  
					</tr>  
				</tbody>  
			</table>  
		</div>  
	</div>  
</body>  
	</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln