Positionering af billed, på kandten af en div.
HejJeg har en nød, der skal knækkes.
Jeg skal lave en side(der selvfølgelig skal virke i alle browsere(ff,ie, safari, chrome(i det mindste :-) )
Well, det handler om at jeg har en table, der har nogle rækker. I hver række i det yderste felt, har jeg en knap. Når denne knap klikkes, viser jeg "dynamisk", via innerHTML 1 div boks, med noget indhold, under den row hvor knappen blev klikket.
Mit hovedbrud er så nu, at ud over denne div boks, skal jeg også vise et billed, der skal side "fast" på kanten af denne div boks. Dvs, at jeg skal egentlig lave den position:absolute, for at kunne angive et z-index. Men, da jeg ikke ved på forhånd hvilken knap der er blevet klikket, kan jeg ikke globalt sætte top på billedet.
Jeg har i FF, fået det til at virke, med noget margin med negativ værdi, og en masse flytten rundt med div boksen, da den bliver påvirket af den negative margin på billedet, men det kan jeg ikke forestille mig er efter bogen.
Så nogen må meget gerne fortælle mig hvordan dette kan, skal virke. Pft.
Nedenfor er der noget kode, der i FF, viser hvad jeg vil, men hvor logoet helst skal side i det øverste højre hjørne på boksen der kommer frem. Ikke I hjørnet, men oven på hjørnet...
Jeg håber I forstår.
Så spørgsmålet er, hvordan gør jeg det, på en ordentlig måde, og så det også virker i IE og de andre browsere.
<script>
var selected = null;
function show(row, elem){
if(null != selected)
{
document.getElementById(selected).style.display = 'none';
}
document.getElementById(elem).innerHTML = document.getElementById('box').innerHTML;
document.getElementById(row).style.display = '';
selected = row;
}
</script>
<div style="border: 1px solid black; width: 400px">
<table width="380px">
<tr>
<td width="20%">1</td><td width="80%"">2</td><td width="20%"><input type="button" value="klik" onClick="show('row1','div1');" /></td>
</tr>
<tr style="display:none" id="row1">
<td colspan="3"><div id="div1"></div></td>
</tr>
<tr>
<td width="20%">1</td><td width="80%"">2</td><td width="20%"><input type="button" value="klik" onClick="show('row2','div2');" /></td>
</tr>
<tr style="display:none" id="row2">
<td colspan="3"><div id="div2"></div></td>
</tr>
<tr>
<td width="20%">1</td><td width="80%"">2</td><td width="20%"><input type="button" value="klik" onClick="show('row3','div3');" /></td>
</tr>
<tr style="display:none" id="row3">
<td colspan="3"><div id="div3"></div></td>
</tr>
</table>
<div id="box" style="display:none;"><div style="width: 390px; height: 100px; border: 1px solid blue;">HER ER MIN TEKST !</div>
<div style="text-align: right; margin-right: -40px; margin-top: -90px"><img src="http://www.mozilla-europe.org/img/image-library/firefox-logo_small.png" /></div></div>