Gå till innehåll
Just nu i M3-nätverket

En fråga ang. webbstandards


Devvan

Rekommendera Poster

Jag trodde (och hoppades faktiskt) att du skulle ha rätt och att exemplen skulle motsvara mitt lilla tabellexempel. Tyvärr kollade du inte inte koden till sidan http://themaninblue.com/experiment/footerS...ample_short.htm (den som du speciellt lovordade). Det är inga borders alls som du ser runt layouten, utan en bakgrundsbild till bdy som repeterar vertikalt som ger sken av att det finns nån slags borders och därigenom intrycket avv att du kan sträcka divvarna vertikalt 100%. Jag bifogar bakgrundsbilden.

 

Du skojar va!? Du säger ju själv att tabeller är bättre därför att då kan man få utseendet som man vill det, att det är utseendet som är viktigt och inte koden bakom. Varför är det helt plötsligt fel att vara pragmatisk och ta till en fullösning med en bakgrundsbild?

 

/Dan

Länk till kommentar
Dela på andra webbplatser

  • Svars 110
  • Created
  • Senaste svar
Om jag använder html 4.0.1, så kodar jag enligt standard jag också. Häpp!

 

Jag citerar specen för den standard du kodar efter:

 

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.

 

 

I alla fall klarar inte jag av det. Och om du vill ha vertikala ramar som löper längs hela sidans höjd ner till den där footern (ganska vanligt önskemål), så är du helt rökt. Såvitt jag vet i alla fall....

 

Vi har haft den här diskussionen på 99mac.se också (ordet "talibaner" kom upp där, det saknar jag här ;-), i september. Se http://www.99mac.se/internet/104595-tvakol...ut-med-css.html. Där talade jag om för dig att det är löst, bl.a. av Stu Nicholls på http://www.cssplay.co.uk/layouts/index.html (det är samma trick som nämnts tidigare här med max-height och height).

 

Så, du vet visst att det går! Varför du hävdar att det inte går tänker jag inte spekulera i (här utgår jag ifrån att du orkade kolla upp länken i september och tog till dig av informationen...)

 

/Dan

Länk till kommentar
Dela på andra webbplatser

Du skojar va!? Du säger ju själv att tabeller är bättre därför att då kan man få utseendet som man vill det, att det är utseendet som är viktigt och inte koden bakom. Varför är det helt plötsligt fel att vara pragmatisk och ta till en fullösning med en bakgrundsbild?

 

/Dan

440565[/snapback]

Då har du inte läst vad jag skrivit. Eller totalt missförstått, vilket är ganska otroligt eftersom jag verkligen lagt ner mig på att det INTE ska missförstås....

 

Alltså: Jag har ALDRIG påstått att tabeller är bättre än divvar/CSS. Så det ska du ta tillbaka direkt.

 

Beträffande en bakgrundsbild: Jodå, det skulle jag kunna tänka mig om det knep. Men exemplet med en bakgrundsbild är inte på långa vägar likt mitt tabellexempel. Svårare än så är det inte.

 

Men annars är jag mycket pragmatisk.

Länk till kommentar
Dela på andra webbplatser

Då har du inte läst vad jag skrivit. Eller totalt missförstått, vilket är ganska otroligt eftersom jag verkligen lagt ner mig på att det INTE ska missförstås....

 

Alltså: Jag har ALDRIG påstått att tabeller är bättre än divvar/CSS. Så det ska du ta tillbaka direkt.

 

Beträffande en bakgrundsbild: Jodå, det skulle jag kunna tänka mig om det knep. Men exemplet med en bakgrundsbild är inte på långa vägar likt mitt tabellexempel. Svårare än så är det inte.

 

Men annars är jag mycket pragmatisk.

440587[/snapback]

 

Nä, ok, du har aldrig explicit sagt att det ena är bättre än det andra. Fel av mig! Jag tar tillbaka direkt!

 

<hårklyverier>Däremot använder du ju (vad det verkar på dina inlägg) tabeller snarare än div/css för layout i ditt arbete (hoppas att jag inte har fel igen...). Jag antar att det inte beror på att du slagit tärning om vad du skall välja. Jag antar att det är rätt att säga att du väljer tabeller därför att de gör ditt arbete lättare? Vilket ju på intet sätt är samma sak som att de är bättre i absolut universell mening... Själv är jag nog inne på att ordet "bättre" är ett bättre(!) ord än många andra för att beskriva detta faktum att du väljer tabeller... ;) </hårklyverier>

 

Fast angående "ramarna" i det specifika exemplet, tycker jag faktiskt att du kör lite med skygglappar, då du inte vill inse att en bakgrundsbild skulle kunna användas för att komma mycket nära ditt tabellexempel!

Länk till kommentar
Dela på andra webbplatser

Nä, ok, du har aldrig explicit sagt att det ena är bättre än det andra. Fel av mig! Jag tar tillbaka direkt!

Tack. ;)

 

<hårklyverier>Däremot använder du ju (vad det verkar på dina inlägg) tabeller snarare än div/css för layout i ditt arbete (hoppas att jag inte har fel igen...). Jag antar att det inte beror på att du slagit tärning om vad du skall välja. Jag antar att det är rätt att säga att du väljer tabeller därför att de gör ditt arbete lättare? Vilket ju på intet sätt är samma sak som att de är bättre i absolut universell mening... Själv är jag nog inne på att ordet "bättre" är ett bättre(!) ord än många andra för att beskriva detta faktum att du väljer tabeller...  ;) </hårklyverier>

Jamen det är ju detta jag sagt hela tiden! Du behöver alltså inte alls "anta" något alls. Jag har upprepade gånger skrivit att man ska använda den teknik som passar bäst och väga in alla parametrar, bl.a. det sätt man själv föredrar att jobba på. Vill man använda divvar och CSS, så ska man naturligtvis göra det. Men om man, som jag, gärna använder tabeller (ofta i kombination med divvar) när en layout blir lite mer komplex, så ska man göra det och inte skämmas ett dugg, lika lite som att anhängare av divvar/CSS har något enda skäl att påstå att det är "fel".

 

Visst, tabeller är gammalmodiga, o-coola ocha allt möjligt. Men dom är inte "fel". Och eftersom jag som sagt är en pragmatiker och har ganska hyfsad integritet, så tillåter jag mig att strunta fullkomligt i att försöka vara "cool" eller "modern" eftersom det inte är något självändamål alls. Jag har en tidsram att följa och ett ansvar inför kunden att hålla kostnader nere så mycket som möjligt. Då väljer jag det (för mig) enklaste, snabbaste och säkraste arbetssättet.

 

Jag fnular en hel del med CSS utan att på något sätt vara en expert, och jag tycker inte att CSS blivit tillräckligt bra och "användarvänligt" än. Dels hävdar jag fortfarande att en del saker (väldigt få, det erkänner jag) inte kan göras med CSS ännu (se nedan). Dels uppleveler jag det som obehagligt att divvar är så "beroende" av varandra, dvs att om man råkar ge en div en pixel för mycket padding eller nåt, så brakar hela sidan ihop. Kanske överdrivet, men jag hoppas och tror du förstår vad jag menar.

 

Fast angående "ramarna" i det specifika exemplet, tycker jag faktiskt att du kör lite med skygglappar, då du inte vill inse att en bakgrundsbild skulle kunna användas för att komma mycket nära ditt tabellexempel!

 

Menar du den där bakgrundsbilden som repeterade vertikalt i body? I så fall:

 

Jag tänker självklart inte acceptera en "lösning" som inte alls motsvarar exemplet jag ställde upp med tabeller. För det kan du i ärlighetens namn inte påstå att den gör. Givetvis letar jag efter en lösning som helt bygger på kod och inga ditlagda bilder.

 

Men å andra sidan så skrev jag ju att jag visst skulle kunna tänka mig att dra till med något sådant om det knep. Så medan den "!lösningen" inte motsvara min tabell, så är den säkert användbar ändå, i något sammanhang. Det är väl inte att använda skygglappar, eller?

 

Jag tittade förresten närmare på CSS-lösningen som pal-8 visade igår. Den såg ju ut att nå hela vägen fram och jag blev ju både glad och impad.

 

Men tyvärr visade det sig att den inte heller lyckades till 100%. I vart fall klarade inte jag av att få rätsida på den så att resultatet blev en kopia av "min tabell". Kanske nån annan fixar det bättre?

 

Efter en timmes idogt testande så klara jag inte av att få en top border på footern - eller rättare sagt; mellan "main" och "footer". Och en annan sak: I koden ligger divvarna i ganska besynnerlig ordning. Det gör iofs inget att bakgrunder kommer väldigt tidigt eftersom dom inte innehåller någon text eller några bilder. Men footern ligger ju direkt efter "head" och före de båda kolumnerna. Eftersom ett av skälen att använda CSS/divvar är bl.a. användbarhet för folk med handikapp eller "hand held devices", så är det väl inte så lyckat om footer kommer före innehållet? (Även om jag personligen skulle kunna bestämma mig för att strunta i en sån sak om det verkligen knep).

 

Det grämer mig faktiskt. Skulle varit skitkul om det hade funkat till 100%....

 

Kul att "snacka" med dig förresten. Du är en klipsk jäkel, och det är stimulerande att diskutera med dig, precis som med pal-8! Det gillar jag!

Länk till kommentar
Dela på andra webbplatser

Jag tittade förresten närmare på CSS-lösningen som pal-8 visade igår. Den såg ju ut att nå hela vägen fram och jag blev ju både glad och impad.

 

Men tyvärr visade det sig att den inte heller lyckades till 100%. I vart fall klarade inte jag av att få rätsida på den så att resultatet blev en kopia av "min tabell". Kanske nån annan fixar det bättre?

 

Efter en timmes idogt testande så klara jag inte av att få en top border på footern - eller rättare sagt; mellan "main" och "footer". Och en annan sak: I koden ligger divvarna i ganska besynnerlig ordning. Det gör iofs inget att bakgrunder kommer väldigt tidigt eftersom dom inte innehåller någon text eller några bilder. Men footern ligger ju direkt efter "head" och före de båda kolumnerna. Eftersom ett av skälen att använda CSS/divvar är bl.a. användbarhet för folk med handikapp eller "hand held devices", så är det väl inte så lyckat om footer kommer före innehållet? (Även om jag personligen skulle kunna bestämma mig för att strunta i en sån sak om det verkligen knep).

 

Det grämer mig faktiskt. Skulle varit skitkul om det hade funkat till 100%....

 

Kul att "snacka" med dig förresten. Du är en klipsk jäkel, och det är stimulerande att diskutera med dig, precis som med pal-8! Det gillar jag!

440825[/snapback]

 

Tack. :-)

 

Det borde gå att få en kopia av din tabell.

 

Det ska gå att få en topborder där. Grejen är att både footer och head ligger överst med hjälp av z-index, så man måste tänka på det också. Prova med t ex "border-top: 1px solid white" på footern.

 

Ordningen ska inte spela någon roll. Jag la bkg först eftersom jag vill ha dom i "bakgrunden" och veta att bkg alltid kommer först (när koden blir mer komplex). Dom är ju absoluta så dom kan ju ligga var som helst (en av fördelarna med div och icke-tabell-design). Men hur det är med "handikapp-grejen" vet jag inte. Det måste jag undersöka.

 

Jag vet inte om det funkar i IE PC mindre än 6an. Sedan såg lite konstgheter med IE 6 när jag la in en div i textflöden (på den grå sidan). Det är alltid något med IE som ställer till det :-) Men det ska väl gå att lösa.

 

Om ditt behov inte är dhtml eller sådant som jag uppskattar med css och divar så ser jag egentligen ingen anledningen att frångå tabellen. Åtminstone tills det kommer en mer given lösningen än mitt "hack".

Länk till kommentar
Dela på andra webbplatser

Och en annan sak: I koden ligger divvarna i ganska besynnerlig ordning. Det gör iofs inget att bakgrunder kommer väldigt tidigt eftersom dom inte innehåller någon text eller några bilder. Men footern ligger ju direkt efter "head" och före de båda kolumnerna. Eftersom ett av skälen att använda CSS/divvar är bl.a. användbarhet för folk med handikapp eller "hand held devices", så är det väl inte så lyckat om footer kommer före innehållet? (Även om jag personligen skulle kunna bestämma mig för att strunta i en sån sak om det verklige

 

Här har vi nog det jag tycker är den största begränsningen med tabeller. Att dom "tvingar en att tänka layout". Folk som döper sina divvar till <div id="header"> och <div id="footer"> (det brukar jag göra...) är faktiskt lika illa ute som tabelltalibaner (...bortse från det ordet, jag tyckte bara att alliterationen blev så rolig :))

 

Divvar borde namnges efter den information dom är tänkta att innehålla, snarare än deras placering i en visuell layout. T.ex. <div id="logotype"> och <div id="contact-information">. Att logotypen sen ofta hamnar i sidhuvudet och kontaktinformationen i sidfoten (i Safari och IE o dylika program), det är ju faktiskt en helt annan sak!

 

Exempelvis är kontaktinformationen bland det viktigaste som finns på en webbsida (anser jag). Det implicerar ju att den informationen borde vara lättillgänglig och komma tidigt i koden, så att blinda inte behöver höra hela sagan om lorem ipsum (här kan vi snacka de facto-standard!) för att få reda på vart man ska mejla för att köpa boken med sagda saga i punktskrift...

 

För en visuell layout däremot är det ju väldigt tydligt att ha kontaktinformationen i sidfoten! Speciellt om sidfoten är fast och orubblig oavsett sidans innehåll ;)

 

Alltså: det är stor skillnad på informationsstruktur och layout! Och det största felet med tabeller är att de tvingar en att tänka på layout.

 

Kul att "snacka" med dig förresten. Du är en klipsk jäkel, och det är stimulerande att diskutera med dig, precis som med pal-8! Det gillar jag!

440825[/snapback]

Dito :)

Länk till kommentar
Dela på andra webbplatser

Danne V, vad anser du om mitt facit på http://waltin.com/layout/ ?

 

Och ja, det är uppenbarligen ytterligare ett exempel som inte på pricken efterliknar ditt tabell-facit (att vi aldrig lär oss ;)). T.ex. så är layouten inte centrerad, det är ett fult mellanrum mellan sidhuvud och innehåll och det är ingen ram till höger om navigeringen *).

 

Men, jag vill att du höjer blicken över "pixelprecisionsnivå" och ser principerna:

 

Det tog mig 3 minuter och 47 sekunder att smälla upp exemplet, sidfoten är fast och har en "border-top", inga bilder används, menyn till vänster har en ram som följer fönstrets storlek i safari. Och det funkar i IE 6 på Windows.

 

Grundidén till layouten kommer från Stu Nicholls, http://www.cssplay.co.uk/. Har du tittat där?

 

Om inte detta övertygar dig om att css klarar av att bygga en layout med fast sidfot, så är det ingen i universum som kan göra något åt den saken. I verkligheten så är det dock möjligt!

 

/Dan

 

*) Det är en layout jag plankat från ett riktigt projekt jag gjorde, jag har inte anpassat den till "dina krav"...

Länk till kommentar
Dela på andra webbplatser

Divvar borde namnges efter den information dom är tänkta att innehålla, snarare än deras placering i en visuell layout. T.ex. <div id="logotype"> och <div id="contact-information">. Att logotypen sen ofta hamnar i sidhuvudet och kontaktinformationen i sidfoten (i Safari och IE o dylika program), det är ju faktiskt en helt annan sak!

440885[/snapback]

 

Det var ju smart tänkt. En idé värd att sno. :-)

Länk till kommentar
Dela på andra webbplatser

(...) det är ingen ram till höger om navigeringen

 

(...) menyn till vänster har en ram som följer fönstrets storlek i safari

440899[/snapback]

 

Hur ska jag ha det egentligen :blushing: Det är ingen ram!

 

/Dan

 

(Hur redigerar man sina egna inlägg?)

Länk till kommentar
Dela på andra webbplatser

  • 4 weeks later...

Oj, det var ju tur att man inte tittat på den här tråden ett bra tag. Det var ju en eldig diskussion. Jag återkommer nu i alla fall med ett exempel på:

Jag har försökt beskriva i ord vad CSS inte klarar, men det verkar inte gå hem. Så här är ett exempel:

http://proformica.com/test.html

 

Jag tror inte CSS och divvar fixar detta.

439466[/snapback]

 

Att det ena eller andra inte skulle gå med css köper jag fortfarande inte. Ett litet motexempel:

http://www.tannenberg.tk/tbl.html

(en bugg i Safari gör att den inte uppdateras riktigt när man ändrar fönsterstorlek – men poängen var ju att visa vad man kan göra med css och inget annat.)

 

En viktig del av mer standarmässig design är också använda html korrekt och inte bara att smälla in allt i divvar (ofta beskrives tabelldesign och div/css-design som de två alternativen, jag skulle hellre kalla det tabelldesign och css-baserad design eller något liknande) överallt. Att använda semantiskt korrekta element för rätt saker gör koden mer översiktlig och lättare att bearbeta än om allt ligger inneslutet i tr/td eller div för den delen. Rätt element ska användas för rätt sak.

 

Visst kan det hända att om man är invand vid att göra tabeller så fixar man det på ett kick men det finns fortfarande åtskilliga fördelar att använda html/css korrekt (jag håller heller inte med om att w3c gör korkade rekommendationer även om inte ens w3c är perfekta – målet är en mer genomtänkt web).

 

En css-design med genomtänkta html-element har en rad fördelar framför tabeller:

1. Ger ett mer översiktligt html-dokument. Man behöver inte leta sig fram mellan tr/td:ar som utvecklare. Innehåll finns i element som beskriver deras funktion.

2. flexiblare, en float left kan ändras till en float right i hela siten.

3. desigen kan anpassas efter webläsarens kapacitet (kika på länken i Explorer 6 på pc för en överaskning)

4. man kan presentera innehållet olika på olika medier, oerhört praktiskt för utskrifter. Websidor har oftast en större bredd än stående A4.

5. Eftersom html-elementen använts semantiskt (adressen finns i ett adress-element, citatet i ett blockquote-element t ex) så kan t ex synskadade med specialläsare lätt få en överblick över sidan. Semantiska element lär också få mer betydelse för sökmaskiner vartefter de används mer korrekt.

6. även om man kan knappa in en tabellstruktur snabbare ibland så kan det väl knappast sägas vara ett kriterium för en bra design.

 

Även om det möjligen just nu finns begränsningar vad man kan göra med css på grund av webläsarnas dåliga implementation så lär det inte vara något förblir – bra uppdelning mellan utseende och innehåll kommer bara bli viktigare och viktigare med allt som är på gång med XML, SVG, XSLT, SOAP, WSDL och bättre implementering av DOM. Att göra dynamiska förändringar av sidor med AJAX är betydligt mer komplicerat om man måste ta hänsyn dokumentstruktur med tabeller och celler för designen.

 

Att tänka på design i form av tabeller leder också till att man ser hela sidan som ett antal rutor. Med css-baserad design har man friheten att ha överlappande, fritt positionerade och fixerade element vilket gör att man i princip kan sätta sig och fritt skissa på en design på papper och sedan genomföra den utan behöva börja med ett rutnät à la table.

 

Så, nu lär man väl få vänta sig att debatten brakar igång igen… :w00t:

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.




×
×
  • Skapa nytt...