Avatar billede mccookie Seniormester
18. april 2006 - 23:32 Der er 25 kommentarer og
3 løsninger

Hvordan laver jeg 3 kolonner med boks modellen?

Hejsa

Tanken er at lave 3 kolonner og som i ser er den 3. kolonne helt på afveje......

Og nej, jeg gider ikke bruge tabeller.......

Hvordan gør jeg?

Nu vil jeg 100% kører CSS
Avatar billede mccookie Seniormester
18. april 2006 - 23:33 #1
Se her: www.hj-tech.dk
Avatar billede twotimes Nybegynder
18. april 2006 - 23:47 #2
ka du ikke bare sætte width til f.eks. 30, 40 og 30%?
Avatar billede mortenbock Nybegynder
19. april 2006 - 00:34 #3
skal der være fast bredde på kolonnerne?
Avatar billede mortenbock Nybegynder
19. april 2006 - 00:42 #4
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;
  }
Avatar billede foxmulder58 Praktikant
19. april 2006 - 09:51 #5
mccookie >> Du bör lige se din side hj-tech.dk i Firefox, det ser ikke godt ud.
Avatar billede mortenbock Nybegynder
19. april 2006 - 11:17 #6
fox> Har du set den i IE? De ser ens ud hos mig.
Avatar billede milandt Nybegynder
19. april 2006 - 11:55 #7
ja, www.hj-tech.dk ser ikke anderledes ud i Firefox.. den er fucked i både IE og Firefox ;)
Avatar billede stich Nybegynder
19. april 2006 - 11:58 #8
Avatar billede esbenn Nybegynder
20. april 2006 - 14:37 #9
#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...
Avatar billede mccookie Seniormester
24. april 2006 - 07:35 #10
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
Avatar billede mccookie Seniormester
24. april 2006 - 19:38 #11
Esben>> Jeg har forsøgt mig med dit forslag og det ser lidt underligt ud i IE 6.0 SP2

///Henning
Avatar billede esbenn Nybegynder
25. april 2006 - 09:52 #12
#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
Avatar billede tjakobsen Nybegynder
26. april 2006 - 09:29 #13
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 :)
Avatar billede stich Nybegynder
26. april 2006 - 10:25 #14
@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.
Avatar billede tjakobsen Nybegynder
26. april 2006 - 10:48 #15
@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.
Avatar billede stich Nybegynder
26. april 2006 - 13:19 #16
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.
Avatar billede mortenbock Nybegynder
26. april 2006 - 17:16 #17
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.
Avatar billede mccookie Seniormester
26. april 2006 - 17:56 #18
Det ser lidt spøs udstadig
Avatar billede mortenbock Nybegynder
26. april 2006 - 18:04 #19
Har du prøvet min løsning?
Avatar billede mccookie Seniormester
26. april 2006 - 20:38 #20
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 ;)
Avatar billede stich Nybegynder
26. april 2006 - 20:49 #21
Pga. borders, padding og margin. Du ender op med 100% + 36px, hvilket selvfølgelig giver et overflow.
Avatar billede michaeltryl Seniormester
26. april 2006 - 20:56 #22
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
Avatar billede stich Nybegynder
26. april 2006 - 20:57 #23
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.
Avatar billede mccookie Seniormester
27. april 2006 - 21:21 #24
overflow siger du?

Kan man lave noget auto, så den ikke går amok eller??
Avatar billede mccookie Seniormester
05. maj 2006 - 06:45 #25
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?
Avatar billede mccookie Seniormester
05. maj 2006 - 07:02 #26
Jeg har lavet et table design som jeg gerne vil omsætte til CSS

www.hj-tech.dk/design.php
Avatar billede mortenbock Nybegynder
05. maj 2006 - 09:26 #27
Se Stich's fremragende link:

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

Den laver præcis det du søger.
Avatar billede mccookie Seniormester
05. maj 2006 - 20:40 #28
Dinners serve ;)

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

Alle der vil have del i pointene....smid et svar
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