Hej!
Jag är allt mer nyfiken på vad kunderna vill ha gällande design. Tidigare har jag gjort mina designer direkt i Photoshop och därefter exporterat en smidig grund där bilderna placerats in i en tabell. Men är inte detta allt mer en utdöd teknik? Är det CSS kunden idag är ute efter?

Jag är inte så bekant ännu med CSS, men jag ser flera fördelar med det jämfört med just etc tabeller.

Därav min fråga, är det bara att sätta sig ner och gå ifrån en design till ren CSS? Är det detta som kunderna idag är ute efter?

Mvh
Johan

Ja, tabeller och transparanta gif-filer är utdött vid det här laget.
Möjligen att det kan finnas någon stackare som harvar på med sånt fortfarande... ;)

Då är jag lite nyfiken på varför inte etc Photoshop arbetat vidare på detta? Tänk en automatiserad teknik där man konverterar traditionella tabell-designer till ren CSS.

Kanske inte finns så stora pengar för just Adobe i detta, men jag tilltalas av idéen.

Men nu ska jag fördjupa mig inom CSS, tackar!

Mvh
Johan

Det där med Adobe förstod jag inte så det svarar jag inte på.

Kunden vet inte vad han vill ha. Oftast en fungerande sajt som ser bra ut i alla browsers.

Men ja, lära sig css är ingen dum idé. Men att hävda att tabeller skulle vara helt dött
är ju att ta i. Finns mängder av sajter som fortfarande väljer att köra med tabeller.

Adobe Photoshop har en funktion där man kan spara de utklippta bilderna i en bild till en html fil med tillhörande urklipp ur bilden. Dvs en funktion för att snabbt få ner bildmaterial till en html sida med bilder. Detta görs med hjälp av en tabell. Jag är lite nyfiken varför detta inte utvecklas och görs direkt med CSS.

Mvh
Johan

en (kanske önsketänkande) möjlighet är att Adobe har tagit ansvar för att folk slutar misshandla html/css ;) . Om inte programmet skapar din Html /Css åt dig så får man själv tänka till lite, dessutom så kanske man börjar tänka redan när man sitter o kluddar i PS.

Ett klassiskt exempel på vad jag menar är de layuoter som ibland kräver väldigt mycket bilder, oftast så såg man dessa sönderstyckade i lagom stora bitar och instoppade i en tabell. När man sedan ville gå över till CSS så körde man samma teknik, fast alla <td> var utbytta mot <div id="div_01_left">[img]bild.gif[/img]</div> .. ja ni fattar

min åsikt om en sida byggd med css är att så fort man tar bort css-filen så skall man enbart ha text,text,text och kanske en logotyp överst.

så en autogenererad HTML + CSS skulle troligen kräva en hel del manuellt pillande ändå, så då kan man lika gärna bygga en eller ett par uppsättningar html-filer med tillhörande css-skal som man återanvänder. för seriöst, hur stor variation har man i sina alster?
Logga
Meny
2-3 kolumner
sidfot

Jag håller med! Intressanta tankar. Nu erkänner jag att jag slarvat med påläsningen, men har CSS bättre förutsättningar gällande laddtider och sökordsoptimering?

Mvh
Johan

Den stackaren som utvecklade Sporttipset.se gör tydligen det. ;)
Kunde inte låta bli när det var öppet mål...

Jag trodde vi pratade design/layout? :)
Att tabeller används för tabelldata är väl alla överens om.

Pure CSS Data Tables, kanske?

http://rowdydata.com/Toolbox/CSS/Tables/

Första inlägget - Hurra för mig ;)

Ang. att tabeller = dött etc:
Jag brukar göra runt hälften av alla sidor i tabeller medans resten är CSS/Div's. Det skiljer ju ganska mycket beroende på layouten, är det stora fält där det mesta går parallellt så är CSS bästa alternativet men säg att vi har en layout där vi har både vertikal och en horisontell meny plus någon sidebar etc. etc. då skulle det bli ett himla trixande för att få det snyggt med CSS. Ser man en möjlighet att göra det med CSS så bör man köra på det men det är ingen katastrof med tabeller.

Kunden har ju oftast ingen aning utan vill som sagt ha en fungerande sida.

Ang. Photoshop => CSS, visst finns väl den funktionen i CS3? eller är det InDesign jag tänker på?
Hur som helst, i något av dem så går det att exportera till CSS men då är det uppbyggt med absoluta positioner på varenda liten bild så hur man ska få in text i det där vet jag inte...

JAg håller med _Michael_ här, visst ska man köra CSS i den mån det passar. Det viktigaste är trotts allt att sidan fungerar och följer standard. En sida byggd med tables, där man dock använder css för layout ser jag inga större fel i.

Det som dock känns föråldrat är att använda bgcolor="", border="" osv i tabeller. Jobbar man med css classer och styles så bör man vara på en ok sida.

CSS passar alltid!
Jag har alltid kunnat göra CSS-layout så som jag tidigare gjorde tabell-layout.

Annat är bara okunskap. Ibland är det lite problem med positionering pga att IE och FF renderar lite felaktigt ibland, men detta gäller även tabeller.

Du skall använda div:ar till allt förutom tabulerad data, där skall du använda tabeller.

Läs gärna mer här: http://www.communitymx.com/content/article...e.cfm?cid=0BEA6

Sedan är CSS != div:ar. CSS går lika bra att applicera på en table.

Jätte tacksam för era svar. Finns det några bra exempel på hur en bra CSS sida bör se ut och hur den bör vara upplagd? Någon i tråden nämnde tidigare att första sidan bara ska ha div taggar och text, dvs att i CSS-filen finns all information om bilder osv.

Men finns det några bra exempel? Jag har ett exempel som jag tror är bra men det är en sida som just nu finns under försäljningsförumet, känns lite dumt att hänvisa till en design som är under försäljning? Eller?

Mvh
Johan

Så här kan ett markup-upplägg se ut.
Sedan css-filen bör vara bra strukturerad så man hittar.
Först bör man reseta alla stilar för att sedan ange de generella stilarna.
Sedan lägger man in undantagen, dvs rubrikerna i footern eller headern kanske inte skall se likadant ut som i content?!

Lite länkar:
http://meyerweb.com/eric/thoughts/2008/01/...esetting-again/
http://www.erraticwisdom.com/2006/01/18/5-...nizing-your-css

Stor tack!

Ett allmänt tips för att arbeta med CSS är att börja med innehållet och liksom "arbeta utåt" med layouten därefter.

Många jobbar med en bas-css fil där man resettar stilarna för vissa element, eftersom det ofta är samma genom olika projekt. Men inte alla resettar: http://snook.ca/archives/html_and_css/no_css_reset/

Sen skrev nån att man ska använda div:ar till allt utom tabulär data, vilket inte riktigt är att rekommendera. T.ex menyer är oftast listor osv.

Som vissa redan har försökt påpeka så handlar det inte om att byta ut tabeller mot divvar. Inte heller att göra "hela sidor" i CSS. Det det handlar om är att skriva korrekt, semantisk html i så stor utsträckning som möjligt och sedan styra presentation / utseende med hjälp av CSS.

Tabeller är helt okej att använda, men inte för att styra layouten på en sida, utan för att presentera tabulär data (det vill säga data som kan ordnas i rader och kolumner).

Om inte moderatorerna misstycker postar jag en länk till min egen sida som tar upp just det du frågar om, http://www.klientsidan.se/artiklar/2...utan_tabeller/


/Mvh Stefan

Just det. Värt att understryka:
för listor använd ul, ol och dl
för tabelldata använd table med caption, thead, tfoot, tbody och th (och för all del gärna col som dock inte fungerar särskilt bra)
för formulär label, fieldset (istället för div) och legend
för rubriker givetvis h1, h2, h3, … och p för löptext

Om du gör detta så får du mycket lättare att "träffa" elementen i css (det finns många andra nyttiga element därutöver, t.ex. strong och em).

Personligen använder jag alltid en reset.css innan all annan CSS i mina projekt.
Reseten jag använder är utvecklad av Eric Meyer.

Rekommenderar starkt att arbeta med en reset på det sättet, det har underlättat för mig väldigt mycket när det gäller att "få det att funka i alla jävla webbläsare" :rolleyes:

Spännande, tack alla som bidragit. :)

Hear hear..

Började här,

http://www.w3schools.com/ - givetvis
http://www.mezzoblue.com/zengarden/alldesigns/
http://www.csszengarden.com/

Sedan googlade jag följande under tiden jag lärde mig.

CSS Naming Conventions
CSS Hacks
Semantic Code
CSS top 10/15/20/50/100 tips
CSS tips and tricks

Och tagit det bästa och utvecklat en egen "standard".



Lite exempel på vad jag har tagit från det jag läst.


#1 Namnge element efter vad de innehåller inte var de är positionerade eller hur de ser ut

#2 Använder och uppdaterar min reset.css från http://developer.yahoo.com/yui/reset/

#3 Använda font-size: 62.5% och hålla mig till em mått istället för pixel mått. I vissa fall måste jag använda pixlar dock.

#4 Endast använda tabeller för tabulär data, i vissa fall använder jag tabeller till annat för att undvika en massa hack.

En bra bok för övergången är:
Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
http://www.456bereastreet.com/archive/2006...gn_book_review/

Har nyligen kommit i en andra utgåva.

Ruskigt bra bok: http://astore.amazon.com/456bereastr...744528-0467156

Håller helt och hållet med, mycket bra information.

Däremot är Bulletproof-booken mycket bättre för dem som går över från tabeller till css eftersom den både förklarar hur och varför man genomgående ska använda css och lämpliga element.

Jo, visst.
En annan väldigt bra övergångsbok är Zeldmans Designing with Web Standards: http://astore.amazon.com/456bereastr...744528-0467156

Har bara läst första editionen men den är verkligen bra just som övergångsbok.

Andra måste-ha-böcker, när vi ändå är inne på ämnet :) :

Transcending CSS: The Fine Art of Web Design (http://astore.amazon.com/456bereastr...744528-0467156)
Don't make me think (http://astore.amazon.com/456bereastr...744528-0467156) - Ingen CSS bok, men ändå.
Web standard creativity (http://www.amazon.com/exec/obidos/AS...6bereastree-20)

Om jag får säga min åsikt:

Tabeller är/har aldrig varit till för att göra design av utan tabeller är till för att strukturera upp data.

t.ex. Om någon kan php + MySQL så är det oftast lättast att skriva ut allt från databasen i en tabell, alltså strukturera upp det.

Många tycker det är enklare att använda en hel tabell för att göra en design till, visst det är mycket lättare men skulle jag sett koden skulle jag inte tagit det så jätte seriöst.

Med CSS kan du göra en likadan design som du gjord med tabellen även bättre + så ser det mycket mer professionellt ut. Även att formatera texten med CSS är mycket bättre än att skriva allt i HTML koden. HTML koden blir mer lättlöst och du kan göra mer med CSS.

Så jag föredrar CSS som ni kanske förstår, jag kan säga att 90% av dom JAG vet, föredrar också CSS

//WebbHelp

CSS är jättebra för det mesta, dock har den en del problem som snubbarna på w3c aldrig åtgärdar. Tabeller funkar mycket bättre än CSS för att få upp den första strukturen på en design, sedan funkar div fint. Ett annat problem är centrering i höjdled...

w3c är extremt sega... CSS 3 räknas väl som vaporware numera...

Jag tycker CSS-baserade layouter fungerar finfint, oavsett om det är första strukturen eller inte. Det blir ju bara dubbeljobb att först göra layouten med tabeller och sen gå över till CSS. Dessutom lär semantiken inte bli så .. eh .. semantisk.

Givetvis använder du CSS med tabellerna, men float är ett helsike och andra problem gör att jag tycker det funkar bäst att göra den första, grundlägande strukturen med tabeller. Ser inget större problem med det hela. Det sägs att man inte skall använda tabeller pga att det blir segare, men strukturen rör sig ju bara om några få rader så jag tror inte att det påverkar något nämnvärt.

Att inte använda tabeller för att det blir segare ser jag inte som något problem. Dagens renderingsmotorer i kombination med snabba datorer gör att klienterna knappast kan ha några märkbara prestandaproblem såvida det inte gäller gigantiska tabeller.

Det det handlar om i dagens läge är snarare att skriva semantiskt korrekt kod för att förenkla och förbättra för sökmotorer och andra verktyg, samt separera de olika lagrena som gör en hemsida. Tabeller bör användas till tabulerande data och andra element till vad dom nu är tänkta att användas till.

Visst kan man tycka att det är bekvämare att göra en struktur med tabeller från första början, men om man ändå kommer att göra om den till "divvar" (huga) kan man ju ändå göra det från början?

Float är inte ett helsike om man lär sig boxmodellen och visual formatting model ordentligt, då är det snarare ett nöje att arbeta med så kraftfulla verktyg :)

Varför skulle man vilja göra om till divar?

Nej, vad jag menar är att man använder tabeller i strukturen. Typ header, tre spalter och en footer. Med div blir det en massa problem, med table funkar det fint.

Då är det ännu mer uppåt väggarna tokigt .. header, tre spalter och en footer går alldeles utmärkt att göra semantiskt korrekt utan tabeller.

Sen måste jag dock påpeka att det finns tillfällen (dock väldigt få) där tabeller klarar saker som inte semantiskt korrekt kod klarar av.

Jag har nolltollerans mot tabeller, om man inte använder det för till tabullär data.

Åh då kanske du kan hjälpa mig att lösa ett problem jag hade när jag kodade en sida. Om du tar en titt på följande galleri:
http://www.minnebergs.se/index.php?p...06&timegroup=1

Sidan med bilder består då bevisligen av en lista med bilder, uppdelad på flera rader. Därför skulle jag velat ha det hela i en lista, men jag blev tvungen att använda tabeller. Jag hittade inget sätt att:

På en rad med enbart liggande bilder, ha en viss höjd på raden med bilderna centrerade i mitten (vertikalt).
På en rad med enbart stående bilder, ha en viss höjd på raden med bilderna centrerade i mitten (vertikalt).
På en rad med både stående och liggande bilder, ha en konstant höjd på raden (samma höjd som de stående bilderna + lite mellan rum). Samtidigt ha de liggande bilderna centrerade i mitten (vertikalt).

Det går ju heller inte att känna av på serversidan huruvida bilderna är stående eller liggande och sedan skicka med rätt information, eftersom all CSS ligger i en separat fil (som inte genereras dynamiskt). Och javascript bör ej heller användas för att styra layouten.

Jag tror det definierar hela problemet. Kan du lösa det skulle jag bli mycket glad, annars får detta räknas till undantaget som bekräftar regeln :)

Det är det här det handlar om.... frustrationen som uppstår av folk som inte förstår hur box-modellen fungerar fullt ut, och inte "orkar" lära sig. De kör på gamla vanor för det har alltid "fungerat", jag har ärligt talat slutat bry mig om de som fortfarande så hopplöst håller sig till att göra layout med tabeller, det är till deras egen nackdel.

Ja... jag är bitter...

:P

edit: Jag satt också en gång i tiden och gjorde layout med tabeller, och tyckte det fungerade hur bra som helst, tills jag upptäckte att CSS för mig var ett mycket effektivare och bättre sätt att utveckla, men det tog ett tag innan jag insåg detta, dvs tills jag lärde mig CSS på riktigt.

Använder du PHP så kan du med hjälp av GD biblioteket räkna ut hur hög, samt bred en bild är, och därefter avgöra om den är i porträtt eller landskap.

Läs:

http://se.php.net/manual/en/function.getimagesize.php

Jo, att man kan kolla det med GD är jag medveten om (siten kör php). Tyvärr hjälper det inte om man på serversidan vet att bilden är ståendes eller liggandes, eftersom det enda man kan göra då är att skicka med inline-css i HTML-koden, och det vill jag inte.

Ett annat alternativ är att ha en css-fil som genereras dynamiskt beroende på vad HTML-sidan innehåller, men det har jag inte gjort på denna site (har aldrig funderat på hur det skulle gå till överhuvudtaget).

På denna site är CSS:en en separat, statisk fil och där i behöver man lösa problemet.

Men för att sluta OT:a i den här tråden mottas förslag på lösningar tacksamt i PM..

Det jag ville påvisa med problemet var att man ibland blir tvungen att använda tabeller för saker som inte är tabulär data.