Hvordan laver jeg 3 kolonner med boks modellen?

Se her: www.hj-tech.dk

ka du ikke bare sætte width til f.eks. 30, 40 og 30%?

skal der være fast bredde på kolonnerne?

Her er den med tre kolonner i fast bredde:

#toplogo {

}
body {
    background-color: #999999;
}


#indhold {
    margin:10px 10px 10px 10px;
    width: 405px;
    float:left;
    padding-left:10px;
    background-color: #FFFFFF;
    border: 1px solid #ff9900;
  }

#leftcol {
    margin-top: 10px;
    float:left;
    width:180px;
    background-color: #FFFFFF;
    border: 1px solid #FF9900;
  }

#rightcol {
    margin-top: 10px;
    float: left;
    width:180px;
    background-color: #FFFFFF;
    border: 1px solid #FF9900;
  }

mccookie >> Du bör lige se din side hj-tech.dk i Firefox, det ser ikke godt ud.

fox> Har du set den i IE? De ser ens ud hos mig.

ja, www.hj-tech.dk ser ikke anderledes ud i Firefox.. den er fucked i både IE og Firefox ;)

http://www.alistapart.com/articles/holygrail/

#toplogo {
    top: 5px;
    height: 150px;
    left: 5px;
}
body {
    background-color: #999999;
}


#indhold {
    margin:10px 10px 10px 10px;
    left: 160px;
    top: 160px;
    width: 405px;
    padding-left:10px;
    background-color: #FFFFFF;
    border: 1px solid #ff9900;
    position: absolute;
  }

#leftcol {
    margin-top: 10px;
    left: 5px;
    top: 160px;
    width:150px;
    background-color: #FFFFFF;
    border: 1px solid #FF9900;
    positon: absolute;
  }

#rightcol {
    margin-top: 10px;
    left: 570px;
    top: 160px;
    width:150px;
    background-color: #FFFFFF;
    border: 1px solid #FF9900;
    position: absolute;
  }

Prøv det...

Undskyld, den lange svartid, påske og gæster og puha, en computer der har slukket i alt formange dage....

Jeg får kigget på det i aften og så er jeg sikker på det kommer til at virke ;)

Henning

Esben>> Jeg har forsøgt mig med dit forslag og det ser lidt underligt ud i IE 6.0 SP2

///Henning

#toplogo {
    top: 5px;
    height: 150px;
    left: 5px;
}
body {
    background-color: #999999;
}


#indhold {
    margin:10px 10px 10px 10px;
    float:left;
    top: 160px;
    width: 405px;
    padding-left:10px;
    background-color: #FFFFFF;
    border: 1px solid #ff9900;
    position: absolute;
  }

#leftcol {
    margin-top: 10px;
    float:left;
    top: 160px;
    width:150px;
    background-color: #FFFFFF;
    border: 1px solid #FF9900;
    positon: absolute;
  }

#rightcol {
    margin-top: 10px;
    float:left;
    top: 160px;
    width:150px;
    background-color: #FFFFFF;
    border: 1px solid #FF9900;
    position: absolute;
  }

prøv den.. :s

Mit forlsag til dig er at holde dig til tabeller. Det kan lade sig gøre med div's problemet er bare at det er svært at lave 100% cross browser compitabelt.

Og hvorfor ikke gøre det med tabeller? Det eneste ved tabeller der ikke er understøttet i CSS er cellspacing (cross browser i hvertfald). Den sætter du da bare på den 'gamle måde' <table cellspacing="0">. Dette er XHTML valid og samtlige browsere forstår det. cellpadding kan du fikse ved at sætte "table td { padding: 0; }" i dit css dokument.

Problemet er at CSS ikke har noget der ligner grid layout hvad angår box elementer så som divs. Det har dog ved brug af styled tables.

Jeg prøvede at lave et design hvor jeg havde brug for 3 kolonne modellen (de to i siderne udgjorde hver sin border), og fandt hurtigt ud af det var meget nemmere at bruge tabeller.
Se her:
http://www.eksperten.dk/spm/705258

Se også artiklen her hvor han diskuterer emnet:
http://meyerweb.com/eric/thoughts/2004/09/03/sliding-faux-columns/


Brug tables til denne type opgaver, det er mit forslag - håber du kan bruge det :)

@tjakobsen: Det blog-entry fra Eric Meyer er jo tilbage fra 2004, siden er der sket store fremskridt. Læs fx http://meyerweb.com/eric/thoughts/2005/11/01/layout-revolution/ -- og den artikel jeg linkede til tidl. i denne tråd, viste hvordan det kunne klares endnu nemmere og pænere. Den bruger stadigvæk floats til at klare jobbet, hvilket ikke er den ideelt pæneste måde, men i forhold til at bruge tabeller er den _klart_ at foretrække imo.

@stich
Jeg må indrømme jeg ikke havde set datoen på den artikel jeg henviste til.

Jeg kan dog stadig ikke se fordelen i at bruge en div frem for en tabel til denne type layout. Ved div's kræves der meget mere kode for at gøre det cross browser kombitabel. Fx workarounds for både IE og Opera.

Du skriver du klart foretrækker div's fremfor en tabel, kan du uddybe hvorfor? For jeg kan ikke se fordelen.

Mere kode pga. CSS'en, ja, men det er ikke særligt meget, og som regel vil stylesheet'et blive cached hos slutbrugerne, så det  er reelt uden betydning. Til gengæld er det semantisk forkert at anvende en tabel til dette formål; den vil først og fremmest være der af layoutmæssige grunde, og det bør man aldrig bruge (X)HTML til. Desuden lægger en tabel begrænsninger på hvad man kan gøre med designet -- men det er dog næppe noget problem i dette tilfælde.

Den bedste grund til at bruge div's er at det ganske enkelt er god skik, samt det er efterhånden hvad der forventes af et website.

Problemet ved en tabel med tre kolonner er, at hvis en bruger vælger at slå css fra, så har du stadig delt indholdet op i tre kolonner. Dette giver problemer for f.eks. klienter med en lille skærm (mobil, pda) og ikke mindst folk med. f.eks. synsproblemer, der klart foretrækker at få tingene listet op under hinanden, således at man kan læse siden, selv med magnaprint ;)

div's er vejen frem. Tabeller er ikke beregnet til at lave layout, men til at fremvise data som kræver rækker og kolonner. (Adresselister osv.)

Det er også W3C's anbefaling.

Det ser lidt spøs udstadig

Har du prøvet min løsning?

Sorry mortenbock>>
Det lader til at dit forslag virker ;)

Jeg har sat brede med % istedet, men den fejler hvis jeg siger 15+70+15. Den vil kun være med til 15+65+15

Nogen god forklaring?
Ville nemlig gerne forsøge at få det til at fylde det hele ;)

Pga. borders, padding og margin. Du ender op med 100% + 36px, hvilket selvfølgelig giver et overflow.

nu spørger jeg lige måske lidt dumt, men er ikke inde i forskellene.
er det bedre at gøre det uden tabeller og i ren css

Forresten synes jeg ikke hverken "god skik" og eller "forventes af et website" er særligt gode grunde til at anvende div-elementer frem for tabeller til design. God skik kan fx være altid at tilføje et semikolon efter en CSS-regel, og afslutte tags i HTML, men der er dog intet forkert i ikke at gøre nogen af delene. Til gengæld er det direkte forkert at anvende en tabel, med mindre den indeholder tabulære data. (X)HTML elementer bør altid vælges ud fra deres semantiske betydning.

ARgumentet mht. degradering kan jeg dog kun bifalde.

overflow siger du?

Kan man lave noget auto, så den ikke går amok eller??

Men det der overflow hvordan håndeterer jeg det uden at skulle sidde og regne og noterer hver eneste gang

ER der sådan en overflow komando?

Jeg har lavet et table design som jeg gerne vil omsætte til CSS

www.hj-tech.dk/design.php

Se Stich's fremragende link:

http://www.alistapart.com/articles/holygrail/

Den laver præcis det du søger.

Dinners serve ;)

Nice Moternbock....kigger på det i løbet af weekenden ;)

Alle der vil have del i pointene....smid et svar