Avatar billede kasseper Nybegynder
23. april 2009 - 09:25 Der er 2 kommentarer og
1 løsning

Positionering af billed, på kandten af en div.

Hej

Jeg 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>
Avatar billede kasseper Nybegynder
24. juni 2009 - 11:28 #1
Der er ikke nogen svar...æv :-(
Avatar billede kasseper Nybegynder
24. juni 2009 - 11:28 #2
lukkes
Avatar billede kasseper Nybegynder
24. juni 2009 - 11:28 #3
Jeg tror jeg prøver en anden kat.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester