Hvordan erstatte table's med div's/css her?

[Falkers]

Noe eg har lenge fundert på er hvordan erstatte table's med div's og css når det er snakk om et design som ikke har en fast vidde og en del "grafikk" i bruk?

 

Se denne linken (eller denne) for et eksempel på typisk design hvor det eg tenker på er tatt i bruk.

 

Litt enklere forklart her:

 

Ved bruk av tabbeler er det jo rimelig enkelt(for dem som kan det) å sette opp en slik "box" som dere kan se på bilde/eksempel over,men hvordan få til det samme ved kun å bruke div's/css ?

[Haraldson]

Det der er enkelt.

 

Man lar det blåe være bakgrunnsbildet i hver overskrift-linje/whatever, og har de andre bildene i HTML-en, og bruker float for å sidestille de.

 

Videre har divene som alt dette er inni en bredde som nok tilsvarer 90% el.

 

 

Og nei - det er da ikke lettere å få til dette med tabeller.

[Falkers]

Det der er enkelt.

 

Man lar det blåe være bakgrunnsbildet i hver overskrift-linje/whatever, og har de andre bildene i HTML-en, og bruker float for å sidestille de.

 

Videre har divene som alt dette er inni en bredde som nok tilsvarer 90% el.

 

 

Og nei - det er da ikke lettere å få til dette med tabeller.

Hva blå er det du tenker på når du sier det "blåe" ?

 

"Og nei - det er da ikke lettere å få til dette med tabeller",var det en kommentar til noe av det eg sa i mitt innlegg ?

 

Uansett det du sier hjalp meg ikke så mye,kansje du kan forklare litt mer i detalj?,..eller kansje det finnest noen eksempler der ute på hvordan dette gjøres med div's/css slik at eg kan se der hvordan man går fram?

[Haraldson]

Tenk deg at du har en nyhetsboks med en topplinje og en innholdsboks.

 

Det blir noe sånt:

 

<div class="newscontainer">
<div class="newsheader">overskrift og masse dilldall inni her</div>
<div class="newscontent">Nyheten og masse dilldall</div>
</div>

 

I <div class="newsheader"> setter du bakgrunnsbilde i CSS:

 

.newsheader {
background-image:url(nhback.gif) repeat-x;
height:20px; /* Det samme som høyden på bildet */
}

 

Videre legger du bildene som er til venstre og høyre i HTML-koden, gir de klasser og floater dem til høyre og venstre:

 

.nhright {
float:right;
}

.nhleft {
float:left;
}

 

Til <div class="newscontainer"> angir du en bredde i prosent.

 

 

 

Nå tenker jeg på nyhetsboksene, men det er vel kanskje det eneste som ikke skal løses med divs. Innholdet i boksene er så vidt jeg kan se tabulær data, og det fikk jeg inntrykk av at du kunne.

Endret 4. september 2004 av Mr.Berg