Tvåkolumnslayout med CSS

Här är ett försök som jag dessvärre inser inte når ända fram....
http://supinum.com/2kolumn
Jag misslyckas bland annat med att få lite marginal mellan div'arna content och sidfot. Se bifogade filer (index.html och main.css)

/david

CSS

HTML

HA! nu vet jag varför! Jag kopierade ju in ditt inlägg, det som du startade den här tråden med. I det inlägget skriver du in tagen för DIV med vinkeljärn och allt. Det måste man nog escapa på nåt sätt....
Kolla in länken den här länken:
http://supinum.com/2kolumn/index2.html
så ser du skillnaden.

/David

Japp!

moahahahahaaaaa!

hm... jag menar jag ska se om jag inte kan uppfinna det hjulet också... ...igen... suck

Om du hade kunnat förutsätta att content alternativt meny ALLTID är högre än den andra hade ditt problem varit betydligt enklare... Exempelvis genom att ge menyn ett fast höjd och se till att content-delen aldrig är kortare än så... Då kan du komma förbi det är med bakgrundsbilder som simulerar bakgrundsfärger (vilket i min värld är en lika dålig nödlösning som att använda tabeller).

Ta en titt här:
http://alistapart.com/articles/fauxcolumns/

det jobbiga är att få det att fungera i IE i Windows. Det är i princip omöjligt att göra vissa snygga css-lösningar och få det att se bra ut i IE. Tabeller är den enda lösningen som alltid fungerar i alla webbläsare, tyvärr. :/
Det är inte värt all tid man lägger på det bara för att försöka få det att funka i IE. Lika bra att göra med tabeller direkt.
IE 7 blir förhoppningsvis bättre på att tolka standarden. Men sen kommer det ju dröja ett antal år innan 7:an tagit över 6:ans position. Tills dess är det lika bra att safea.

Nej, det är inte alls "ajabaja". Det är bara hard-core-semantisk-layout-separera-design-från-innehåll-för-det-säger-dom-stora-grabbarna-talibaner som säger så.
I verkliga livet så går det alldels förträffligt med tabeller (i måttliga mängder förstås), och webbläsare för handikappade läser innehållet i precis den ordning som man vill.
Du kan dessutom ha olika stilmallar för olika mediatyper om du känner dig bättre och kan då anpassa innehållet bättre:
http://www.w3.org/TR/CSS21/media.html
Semantisk markup betyder mest att man använder taggar som är förklarande (semantik= "betydelselära, teckenlära") som t.ex. "strong" istället för "bold" osv.
Så gör så gott du kan med CSS. Blir det inte bra, så använd lite vanlig html också. Det gör ingenting alls. Garanterat.

Det beror alldeles på vad du menar med "förträffligt". Om du vill pina besökare med skärmläsare till att lyssna på "table with seven columns and twelve rows" och så vidare, fine. Samma sak om du vill bygga en webbplats som går emot de råd som ges av alla tillgänglighetsriktlinjer, inklusive WCAG och Vägledningen 24-timmarswebben.

I verkliga livet går det alldeles utmärkt att bygga stora, avancerade och grafiskt tilltalade webbplatser helt och hållet utan tabeller för layout. Det handlar bara om att ha kunskaperna.

Om det är betoning man menar och inte fetstil, ja. Det betyder också att man använder tabeller för att märka upp tabulär data, inte för layout.

Jag är ledsen att göra dig besviken, men det är det inte.

För att återgå till ämnet. Vad menar du med att faux columns-tekniken inte skalas om du förstorar texten? Menar du att spaltindelningen hamnar snett eftersom hela bredden är satt med em? Något annat? Kika på Creating Liquid Faux Columns och se om inte det löser problemet.

En annan teknik du kan ta en titt på är One True Layout.

Precis som med allt annat här i livet måste man göra avvägningar. Om man vill ge majoriteten en hundraprocenting upplevelse på bekostnad av att en ytterst liten minoritet får "bara" en nittionioprocentig upplevelse, så är tabeller alldeles utmärkta.

Men om man vill kompromissa bort den hundraprocentiga upplevelsen för majoriteten och göra en webbplats som inte blir som man tänkt bara för att den där lilla minoriteten ska få en hundraprocentig upplevelse, så ska man givetvis göra som du säger.

Ja och nej. CSS är fortfarande inte tillräckligt stabilt, lite äldre webbläsare (W3C DOM) klarar inte komplex layout så bra, ju mer komplex layouten är desto fler browserspecifika hacks måste in, och slutligen tvingas man anpassa layouten till tekniken i avsevärt högre grad än om du använder tabeller.

En myt som odlats av CSS-fanatiker: Att tabeller är gjorda för tabulär data och inte för layout.
1. Definera "tabulär data". Det är faktiskt precis vad du själv bestämmer att det ska vara, inget annat.
2. Surprise: När tabellerna såg dagens ljus i html3.2 anno 1997 var dom uttryckligen avsedda för tabulär data och layout. http://www.w3.org/TR/REC-html32#table

Vad jag menar är:

Vill somliga jobba med CSS och aldrig i livet använda tabeller, så ska dom självklart göra det. Jättebra. Men om andra föredrar en annan teknik som är enklare, mer stabil (eftersom CSS-kunskaperna är lite svajiga), som är alldeles jättegodkänd av W3C, som inte alls generar några större problem i någon form av läsare, osv, så ska dom inte behöva bli pekpinnade av CSS-talibaner som varken har tekniska eller andra skäl att hävda deras teknik som den enda, rätta och av W3C och världssamfundet sanktionerade tekniken.

Live and let live. CSS OCH tabeller går alldeles, totalt, jättebra.

Då föreslår jag att du läser på lite mer. Det du säger är typiska motargument från personer som inte har lärt sig hantera CSS fullt ut. Det är faktiskt tvärtom, att genom att använda tabeller för layout blir man helt fastlåst i den layout man har byggt in i sin HTML-struktur.

1. Data som är logiskt strukturerad i rader och kolumner, med förklarande rad- och/eller kolumnöverskrifter.
2. Det är mer relevant att ta en titt i rekommendationen för HTML 4.01: "Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.".

1. Nu missar du poängen. Du förutsätter att man måste lära sig CSS "fullt ut". Finessen är just det att man inte alls behöver det för att bygga webbsidor som validerar och fungerar till 99,99% lika bra som CSS/divvar.

2. Jag har ofta hört just det där argumentet om att man enkel kan ändra layouten med CSS. Jag håller med. I teorin är det så. Jag "umgås" med en hop folk som är jäkligt duktiga på CSS och aldrig använder tabeller. Alla jobbar på heltid med webbutvcekling. Jag frågade dom häromåret exakt den frågan: "Hur många av er har någon gång faktiskt ändrat en layout på det sätt man hävdar är så enkelt med CSS?" Minns ej svaret exakt, men kommer ihåg att det var typ två sajter av sammanlagt 500 eller nåt som hade ändrats.

Och om jag nu ändå accepterar den eventuella nackdelen eftersom jag anser att den uppvägs av fördelarna jag nämnt tidigare och att jag slipper börja lära mig CSS för att bygga en eller ett par sajter, är inte det MITT val som du bara har att acceptera? Vad har CSS-fantomer över huvud taget med det att göra?

OK. Och om jag har text och bilder som är logiskt strukturerad i kolumner med förklarande rad och/eller kolumnöverskrifter, så är det alltså "tabulär data", eller hur?

Jajamänsan. Och om du läser lite bättre, så är texten väldigt vag. Faktiskt extremt lös för att vara teknisk. ("Dispositiv" skulle jurister säga). "..should not be used purely...", "...may present problems...", "...may force users to scroll...".
Det finns inte en bokstav i den texten som kategoriskt och slutgiltigt dömer ut tabeller som layoutverktyg. Tvärtom. Läser man mellan raderna så anar man att W3C gärna vill att folk börjar jobba mer med CSS, men dom kan inte gå så långt att dom dömer ut tabeller, eftersom tabeller fungerar alldeles galant.

Jag gör inte mer är 3-6 sajter/år. Men jag anstränger mig för att får dom så visuellt attraktiva som möjligt, och jag är mycket noga med att får borders där jag vill ha dom (inte 10 pixlar upp eller ner), att bilder och texter hamnar exakt, osv.

För att lösa detta har jag till sist tvingats använda tabeller eftersom CSS helt enkelt inte klarar av det jag vill åstadkomma. Vid flera tillfällen har jag bett dom där CSS-användarna jag nämnde tidigare om hjälp. Ingen har klarat uppgiften med CSS (inte ens Eric Meyer som försökt några gånger). Men med några tabeller har jag själlv grejat jobbet på en kvart.

CSS utan tabeller klarar ju inte ens av en så grundläggande sak som att få en footer att stanna längst ner även om sidan innehåll inte pressar ner den.

Nä du. Jobba gärna i CSS och med divvar och var nöjd med det. Låt andra använda den teknik som dom finner lämplig, och låt bli att försöka få den att framstå som "fel" av den enkla anledningen att den inte är det.

EDIT: Som staed skriver - det var ju inte meningen att det skulle bli diskussion om CSS vs. tabeller (som om det är en motsats...),. men han släppte nog ut katten själv tror jag.

Förresten är väl en stimulerande diskussion i ämnet bara bra så länge hans andra frågor besvaras också?

Jodå, det går alldeles utmärkt. position:fixed; kallas det. Problemet är i vanlig ordning Internet Explorer... så när staed säger

...så är det rätt om man tolkar det som: "css är ett utmärkt verktyg för layout, men den dominerande browsern är på ett mycket tidigt stadie för tillfället".

Nå, religionskrig är ju alltid kul, men nu är det ju bara att gilla läget och lösa problemet! Det finns massor av vänliga själar som redan löst problemet och dessutom publicerat lösningen. En av de bättre (i mina ögon) står Stu Nicholls för: http://www.cssplay.co.uk/layouts/index.html. Den sidan är väl värd några minuters studie!

/Dan

P.S. det är nog dags att uppdatera Godwins lag till att inkludera talibaner. Eller vad säger du DanneV

"Det går utmärkt. Men inte i Explorer." är ju en ganska rejäl motsägelse, tyvärr. Jodå, jag testade för flera år sedan, men funkar det inte i IE/Win så är det ju ganska värdelös "lösning".

Haha...nä du, det är en bit kvar. "Taliban" är ett nytt, jättebra ord som jag använder på lite halvskämt för folk som anser att deras idé är den enda rätta, att alla ska göra likadant, och att alla andra lösningar är helt enkelt är F-E-L.

<Jättemycket UÄ>
Funderar på att starta en tråd med rubriken ""Fanatiker". INTE "Taliban". Snällaaaaaa!"
</UÄ>

Fast så sa jag ju inte... jag sa att css har fullt stöd för fixerade sidfötter, men att det blir problem i IE (miscredit where miscredit is due). Jag sade inte att det blir omöjligt att använda css i ie för sidfötter.

Jag har gjort flera sajter som med framgång baserats på de tekniker som Stu Nicholls har publicerat. Inklusive fasta sidfötter, fasta vänstermenyer, skrollande innehåll etc. Dessutom kan jag som strukturfascist, css-taliban, spaghettiprogrammeringshatare och vän av separation av innehåll/form och funktion glädjas i mitt inre åt strukturerad html för sig, layout för sig, ie-hack för sig, javaskript för sig. Det är ju inget som direkt ger användarnytta, men som gör min tillvaro mer tillfredsställande.

Njae....så skrev du ju inte heller direkt. Men det spelar väl ingen roll hur du skrev egentligen. Frågan var ju om kan använda css för t.ex. en sidfot i praktiken. Det är ju liksom det som räknas.

(Sen kan man ju undra vad som rör sig i skallen på W3C-medlemmen Microsft som ena dagen är med och godkänner kod som dom sedan skiter i att implementera i sina egna webbläsare. Med det är en annan fråga)

Javisst! Jag säger ju att det är kanonbra! Har aldrig någonsin sagt något annat.

Visst, ok. Då utgår jag ifrån att du endast använder den benämningen när du har belägg för det!

Det är klart att det inte blir så snyggt om man blåser upp den här designen med Faux Columns men nog funkar det.
http://www.supinum.com/2kolumn/index3.html
En variant skulle väl isåfall vara att göra en separat CSS ämnad för just folk med nedsatt syn (om det nu var det handikappet gällde). Det är ju en av de stora poängerna med webstandards att du inte behöver skriva om innehållet för varje ny design. Skalbarheten blir ju inte äkta men upplevelsen för användaren torde ändå vara det primära.
Så rimligen borde man kunna lägga in en CSS-switch på sidan. Det borde gå å lösa med lite php eller nåt.

Faux columns är både enklare att implementera och stabilare än One True Layout. Billigt med bakgrundsbild? Tja, kanske. Men inte lika billigt som att fuska med en tabell ;).

OK, respekteras.