Hvordan oversætter jeg table til div

du kan se en vejledning her: http://www.e-tidsskrift.dk/dev/non_table_design.html

den giver dig principperne og så kan du nemt tilpasse det til din egen tabel

//mik

Her er et skelet. Har dog ikke testet...

#beholder {
  postition: absolute;
  top: 0px;
  left: 0px;
}
#topVenstre {
  float: left;
  border-bottom: 1px solid black;
}
#Box1 {
  float: left;
}
#Box2 {
  float: right;
  width: 180px;
}
#topHoejre {
  float: right;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
}
#Box3 {
  float: left;
  width: 520px;
}
#Box4 {
  float: right;
}
#bund {
  clear: both;
}
#Box5 {
  float: left;
}
#bundHoejre {
  float: right;
}
#Box6 {
  float: left;
  width: 701px;
}
#Box7 {
  float: right;
}

<div id="beholder">
  <div id="topVenstre">
    <div id="Box1">bla</div>
    <div id="Box2">bla</div>
  </div>
  <div id="topHoejre">
    <div id="Box3">bla</div>
    <div id="Box4>bla</div>
  </div>
  <div id="bund">
    <div id="Box5">bla</div>
    <div id="bundHøejre">
      <div id="Box6">bla</div>
      <div id="Box7">bla</div>
    </div>
  </div>
</div>

hvis du teste, så tjek lige for slåfejl og manglende "

-> mik

et fint link men jeg kan stadig ikke få det til at virke.

det er vigtigt at der er en width på 100% og at box6 altid har samme width og er centreret. box2 og box3 skal være centreret ligesom box6

nu har jeg testet

og her er resultatet
http://rambo.frac.dk/469610/469610_div.html

og her er hvordan det skulle se ud
http://rambo.frac.dk/469610/469610_table.html

det er ikke helt det samme :)

i første omgang er problemet nok at der kun er faste mål på bredderne af nogle, men ikke alle bokse. Her er en tabel med faste mål hvor det fungerer: http://www.e-tidsskrift.dk/dev/tabel_fast.html

ja, det er manglen på mål der er problemet. Prøv i stedet at bygge den op i tre søjler med to rækker ovenpå hinandenden i hver søjle:

<div id="beholder" style="position:absolute; top:0px; left:0px; height:auto; width:100%;">

<div id="venstre" style="float:left;">
  <div id="Box1">Box1</div>
  <div id="Box5">Box5</div>
</div>

<div id="midt_hoejre" style="float:right;">

<div id="midt" style="float:left;">
  <div id="Box2" style="float:left; width:180px;">Box2</div><div id="Box3" style="float:right; width:520px;">Box3</div>
  <div id="Box6" style="clear:both; width:700px;">Box6</div>
</div>

<div id="hoejre" style="float:right;">
  <div id="Box4">Box4</div>
  <div id="Box7">Box7</div>
</div>

</div>

</div>

men jeg tror nok jeg forlængst havde sagt f... tabelløst design: her er en tabel bare sagen ;-)

ja det er helt klart det største problem i denne opgave, måske er det slet ikke muligt, og så må jeg jo bare bruge tabellen.

Hvis du har andre forslag er du meget velkommen :)

jo, ser nu her... vi nærmer os:

http://www.e-tidsskrift.dk/dev/tabel_relativ.html

her har jeg lavet det med tre søjler der er positioneret absolut, med den midterste centreret og et højrere z-index. eneste problem nu er at når der resizes ned risikerer du at teksten i ydersøjlerne forsvinder bag den midterste søjle.

og en lille forbedring, hvis du vil have en baggrund for hele "tabellen", dvs. hvis du vil sikere dig at den udvider den omgivende box (f.eks. hvis den skal have en border eller en baggrundsfarve):

http://www.e-tidsskrift.dk/dev/tabel_relativ_2.html

Det er ihvertfald meget tæt på det jeg skal brug, jeg vil arbejde lidt videre på dit udkast.

Tusind tak for hjælpen, smid et svar så får du dine velfortjente point :)

ved ikke om du stadig hænger på, men for lige at samle sammen:

CSS2 giver faktisk mulighed for at lave et fuldstændigt tabeldesign uden tabeller, men brug af <div>. Nemlig ved de forskellige værdier for egenskaben display, f.eks. display: table-row og display: table-cell. Så i princippet kan man gøre præcis det du efterlyser på denne måde. Der er bare ét problem: IE understøtter det ikke. Derfor forsøgte jeg her med de andre alternativer. Ingen af dem opfylder kravene fuldstændigt. Og hvis man har at gøre med flere "rækker" af "celler" der skal flugte, er et traditionelt "rigtigt" tabel-design nok det eneste der dur.

nå, vi var i gang samtidig :-)
Som sagt, synes jeg ikke selv det er helt optimalt af to grunde: teksten i de yderste "kolonner" kan forsvinde bag midter"kolonnen"; cellerne flugter ikke i bunden. Det ville de gøre med display: table-cell - hvis altså bare IE understøttede dette. Men hvis du kan bruge den tilnærmelsesvise løsning, så er det da fint.

lige til denne opgave er det faktisk ok at de yderste bokse forsvinder, de skal kun indeholde forskellige farver og streger, så designet også er pænt ved høj skærmopløsning.

det eneste jeg mangler er faktisk bare at box5 og box7 ydvider sig automatisk i højden, så de følger den nederste box.

jeg vil lige bruge lidt mere tid på div designet, og hvis ikke jeg ikke kan få det til at virke optimalt går jeg tilbage til tabel designet :)

hmmm, jeg kan ikke acceptere dit svar???? Nå jeg trykker på Accepter knappen, så reloader den bare siden...

Jeg prøver igen senere, du skal nok få dine point :)

du skal først klikke på mig og dernæst på acceptér. du har nok bare klikket på acceptér. det er ikke nok. den du vil acceptere skal først være markereret. lidt lumsk... jeg har også kludret med det.