Avatar billede lillebror Nybegynder
30. december 2005 - 21:16 Der er 3 kommentarer og
1 løsning

Et layer popup

Jeg har en side, hvor der i nogle tilfælde skal skabes et layer, når siden hentes.

Dette layer skal være en lille boks med information, som man kan lukke med et klik på et link. Mit problem er dog at boksen skubber til indholdet, når jeg sætter position: relative; men sætter jeg position: absolute; så farer den straks op i venstre hjørne af skærmen.

Min CSS kode ser således ud:
#response {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 50;
    text-align: center;
    background-color: blue;
    width: 250px;
    height: 100px;
}

Den er nested i en tabel således
...
<td>
<div id="response">
Her står response
</div>
<div>
Indhold der bliver skubbet længere ned
</div>
</td>
...

Er der en der har en løsning på problemet?
Avatar billede Slettet bruger
30. december 2005 - 21:39 #1
Du skal bare bruge position absolute og lade være med at pille ved left og top.. så skulle popuppen være ved din div..

Vh Mathias.
Avatar billede apo Praktikant
30. december 2005 - 21:39 #2
Det er klart at layeret futter op i venstre hjørne; Du beder den jo om det via: top:0; og left:0; ;-)

Her er et eksempel på det du leder efter (Kan tilpasses yderligere):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Nyt dokument</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<script type="text/javascript">
    function toggle(id){
          elmStyle = document.getElementById(id).style;
          if(elmStyle.display != "none")
            elmStyle.display = 'none';
        }
</script>
</head>
<body>

<div id="minDiv" style="position:absolute; top:50%; left:50%; margin: -75px 0 0 -126px; width:252px; height:120px; background-color:blue; z-index:50;">
    <div style="width:250px; height:20px; text-align:right; border-bottom:1px solid #000000;"><a href="#" onclick="toggle('minDiv');return false;"><img src="kryds.gif" style="width:20px; height:20px; border:0;"></a></div>
    <div style="margin-top:2px; width:250px; height:100px; text-align:center;">Pop-up div</div>
</div>
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd
</body>
</html>

Sig til hvis jeg har misforstået dig.
Avatar billede lillebror Nybegynder
30. december 2005 - 22:10 #3
Jeg er ked af det apo, men såvidt jeg kan se var Mathias 16 sekunder hurtigere end dig :)

Efter jeg fik slettet left: 0; og top: 0; kører det jo helt som i forudsage, perfekt!
Avatar billede apo Praktikant
30. december 2005 - 22:18 #4
Det er i orden :-)
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