Avatar billede bgo Nybegynder
26. september 2008 - 12:54 Der er 2 kommentarer

divs på samme position, men forskellig højde

Så er den gal igen med div-positioner, højde og bund. En eksempelkode med lidt af det jeg forsøger på:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Language" content="da" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Untitled 1</title>

<script type="text/javascript">
var current=1;

function change(page) {
    document.getElementById("p"+current).style.visibility="hidden";
    document.getElementById("p"+page).style.visibility="visible";
    current=page;
}

function viewdefault() {
    document.getElementById("p1").style.visibility="hidden";
    document.getElementById("p2").style.visibility="hidden";
    document.getElementById("p3").style.visibility="hidden";
    document.getElementById("p"+current).style.visibility="visible";
}
</script>

<style type="text/css">
.p {
top:0px;
position:absolute;
}

</style>
</head>

<body onload="viewdefault()">
<div id="outer" style="background-color:blue;">

<table style="width: 100%; color: #FFFFFF;">
    <tr>
        <td onclick="change(1)">dfg</td>
        <td onclick="change(2)">dgf</td>
        <td onclick="change(3)">dfgd</td>
    </tr>
</table>
<div id="inner" style="background-color:silver; clear:both;">
<div id="p1" class="p" style="background-color:fuchsia">dfg<br />
    fghf<br />
    fgh<br />
    dfgd<br />
    dfgdf<br />
    gdfg<br />
    dfgdfg</div>
<div id="p2" class="p" style="background-color:lime">dfg</div>
<div id="p3" class="p" style="background-color:aqua">dfg</div>

m</div>
<p style="color:#ffffff;">&nbsp;<br />&nbsp;bund</p>
</div>
</body>

</html>


Det jeg vil er at de tre divs (p1, p2, p3) altid placeres samme sted - som det sker nu. Nu er det jo så blot sådan, at den eneste måde jeg kender at gøre dét på er ved at bruge position:absolute - relative placerer dem jo blot under hinanden. Absolute bringer så blot div'ene ud af deres container-div - hvilket så bevirker at bunden er helt og aldeles ligeglad med højden af div'ene.

Og det er så hér jeg har brug for hjælp. Hvordan for jeg de tre divs til at blive vist på samme position, mens bunden rykkes ned, enten i forhold til den højeste, eller blot den div der vises?
Avatar billede olebole Juniormester
26. september 2008 - 15:11 #1
<ole>

Jeg forstår ikke rigtig, hvad det er, du vil - men et absolut positioneret element placerer sig efter det første omkransende element, som er positioneret relativt eller absolut.
Hvis et sådan ikke findes - og _kun_ da - vil elementet placere sig i forhold til body-elementet.

/mvh
</bole>
Avatar billede roenving Novice
27. september 2008 - 11:27 #2
I stedet for visibility skal du bruge display !-)
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