Avatar billede graugart Nybegynder
16. januar 2002 - 09:11 Der er 2 kommentarer og
1 løsning

Forskelligt referencepunkt for absolut positionering? (SVÆR)

Jeg har et ret svært og indviklet problem angående positionering af div elementer som jeg virkelig håber her er nogen der kan hjælpe mig med.

Sagen er den, at jeg har nogle \"templates\" der består af et antal div elementer hvert specificeret med positioner, højde og bredde. Disse templates kan fx bruges til at fylde en artikel ind i - altså et element med overskrift, et med tekst og et med billede. Elementerne kan placeres fuldstændig frit, da brugeren jo blot opgiver x, y, højde og bredde.

Jeg skal så lave et \"view\" hvor der fx skal vises 5 templates under hinanden med forskellige artikler i hver template. Dette er intet problem hvis teksten i de forskellige elementer ikke fylder mere end den definerede størrelse af elementet. Hvis der er mere tekst end der kan være i elementet, vil det automatisk udvidde sig i højden så teksten kan være der (det er en div).

Og så kommer det store problem... Hvordan placerer jeg korrekt den næste template neden under, når jeg ikke ved om templaten oven over er blevet udviddet fordi den indeholdt for meget tekst?

Er det muligt at placerer hver template i større div/span elementer der er relativt positioneret, så at elementerne i hver template er absolute positioneret i forhold til den \"store\" div/span de ligger i? Altså give den absolutte positionering et andet referencepunkt end browserens 0,0? Jeg har også forsøgt at lægge hver template ind i en td, men den positionerer stadig i forhold til 0,0.

Kan man måske gruppere en samling div elementer og udregne deres samlede højde?

Relativ positionering af elementerne i templates virker ikke - de kan ikke placeres på deres korrekte positioner.

Måske er den eneste løsning at jeg laver scrollbars på div elementerne? Det ser bare lidt for åndssvagt ud :,(
Avatar billede ras2000 Nybegynder
18. januar 2002 - 15:46 #1
Kan du ikke bruge position:relative?
Avatar billede ras2000 Nybegynder
18. januar 2002 - 16:00 #2
<html>
<head>
<script type=\"text/javascript\">
function sette(){
document.all.id2.style.top = document.all.id0.offsetTop + 21;
}
</script>
<body onload=\"sette()\">
<div style=\"position:absolute;left:0;top:0;height:200;width:200;border-style:solid\" id=\"id1\">
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
<div id=\"id0\"></div>
</div>
<div style=\"position:absolute;left:0;top:200;height:200;width:200;border-style:solid\" id=\"id2\"></div>
Avatar billede ras2000 Nybegynder
18. januar 2002 - 16:25 #3
Her er det vist lidt klarere:
<html>
<head>
<script type=\"text/javascript\">
function sette(){
document.all.id2.style.top = document.all.id0.offsetTop + document.all.id1.offsetTop + 10;
document.all.id3.style.top = document.all.id20.offsetTop + document.all.id2.offsetTop + 10;
document.all.id4.style.top = document.all.id30.offsetTop + document.all.id3.offsetTop + 10;
}
</script>
<body onload=\"sette()\">
<div style=\"position:absolute;left:0;width:200;border-style:solid\" id=\"id1\">
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
bla<br>
<div id=\"id0\"></div>
</div>
<div style=\"position:absolute;left:0;width:200;border-style:solid\" id=\"id2\">
bla<br>
bla<br>
bla<br>
<div id=\"id20\"></div>
</div>
<div style=\"position:absolute;left:0;width:200;border-style:solid\" id=\"id3\">
bla<br>
bla<br>
bla<br>
<div id=\"id30\"></div>
</div>
<div style=\"position:absolute;left:0;width:200;border-style:solid\" id=\"id4\">
bla<br>
bla<br>
bla<br>
<div id=\"id40\"></div>
</div>

</body>
</html>
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