Jens Heinerl: Div in Div zentrieren

Beitrag lesen

SELF-Forum

Div in Div zentrieren

Jens Heinerl
– Informationen zu den Bewertungsregeln

Hi Gunther,

einen Link zu der Page habe ich leider nicht, aber den Quellcode mit den Tabellen. Ich hab den Border mal sehr breit gewählt, damit der Fehler stark zur Geltung kommt.

Kurz was der Code überhaupt bewirken soll. Im Html-Body hab ich eine Tabelle erstellt. In manchen Zellen ist ein Div ("cdiv") integriert. Wird auf dieses "cDiv" geklickt wird die Javascript-Funktion "CreateDiv" ausgeführt. In dieser Funktion soll dem "cdiv" ein weiteres div "cdiv_ul" angehängt werden, welches eine Liste beinhaltet. Ähnlich wie bei einer Dropdownbox.

Das Problem bei diesem Ansatz ist, dass ich im IE9 einen Pixelversatz dieses "cdiv_ul" erhalte. Setze ich den Border der Tabelle auf 1px ist der Versatz auch nur 1px. Setze ich den Border der Tabelle auf 10px sind es 5px Versatz. Das Div "cdiv_ul" ist gegenüber dem "cdiv" nach links und nach oben verschoben. Lasse ich den Border komplett weg, habe ich auch keinen Versatz und alles läuft wie erwartet.

Im Firefox und Safari hab ich bei diesem Bsp auch keinen Versatz; gleiches trifft auch für den IE8 zu. Im IE9 (9.0.8112.16421) tritt der Versatz auf.

Gruß
Jens

  
  
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><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';  
}  
  


  
.cdiv  
 {  
 	display:block;  
 	border: 1px solid #000;  
 	height: 24px;		  
	margin:0px auto;  
	padding:0px;	  
 }  
  
.cbox_div								  
{  
    display:block;  
    background-color:transparent;  
}  
  
.cbox_ul {  
    background:#aaa;  
    list-style:none;  
    border: 1px solid #000;  
    border-top-width:0px;  
    border-top:none;  
    cursor:default; 		  
}  
  
.cbox_ul li:hover					  
{  
background:#dcdcdc;  
}  
  
.cbox_ul li {padding-left:4px; }  
  
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;  
}  
  


  
<body>  
<div class="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>
Beitrag melden
–
Informationen zu den Bewertungsregeln