WN - CSS som gäller idag?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - CSS som gäller idag? (https://www.wn.se/forum/showthread.php?t=28783)

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.

Kod:

<!DOCTYPE html 

   PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 <head>

 <title> new document </title> 

 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

 <meta name="content" content="editplus" />

 <meta name="generator" content="editplus" />

 <meta name="author" content="" />

 <meta name="keywords" content="" />

 <meta name="description" content="" /> 

 <link rel="stylesheet" href="master.css" type="text/css"/>

 </head>

 <body>  

        <div id="page">

 <div class="wrapper">

         <div id="header">

  <h1>Donec ut augue et volutpat</h1>

         </div><!-- #header end -->

         <div id="content" class="content-left">

  <h2>Etiam vestibulum nibh amet<br/>

  rubrik på flera rader</h2>

  <p>Morbi et nulla. Ut faucibus. Suspendisse potenti. Donec vestibulum enim. Cras id dolor sed ligula lacinia vehicula. Fusce ligula. Nunc condimentum ipsum ut dolor. Etiam malesuada. Nulla dictum congue nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur pretium quam a massa.</p>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam egestas metus vitae leo. Morbi elementum vulputate sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam in mi at libero dignissim molestie. In malesuada lacinia nisi. Praesent placerat consequat nisl. Praesent mi nulla, pellentesque quis, mattis vel, iaculis quis, sem. Etiam congue mauris at massa. Nunc massa quam, commodo quis, malesuada non, elementum at, nibh. Nulla erat libero, malesuada id, vestibulum quis, nonummy in, dolor. Ut sapien nunc, placerat vel, faucibus sed, accumsan at, tellus.</p>



  <h3>Nam lobortis viverra fusce</h3>

  <p>Donec ornare ante semper nisl <a href="http://" title=""><span>sollicitudin vulputate</span></a>. Proin lobortis elementum arcu. Vestibulum porta neque. Integer ut sem. Sed felis erat, egestas a, venenatis ac, posuere eget, lectus. Etiam lobortis metus sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque placerat, tellus et porttitor sodales, metus urna blandit nibh, a ullamcorper felis sem in velit. Sed nonummy. Quisque eget eros et turpis adipiscing consequat.</p>



  <h4>Cras vulputate mollis amet</h4>

  <p>Morbi placerat odio eu turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In tempor. Donec non lectus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur odio purus, posuere sit amet, porttitor ut, convallis sed, massa. Donec consequat lobortis ipsum. Sed imperdiet ipsum at elit. Integer eu metus. Duis sit amet magna. Nullam lacinia leo et est. Nam pretium. Duis et nisl. Etiam volutpat ante eget lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque urna neque, mattis non, euismod eget, hendrerit et, metus. Quisque tincidunt neque id libero laoreet placerat.</p>

  

         </div>

         <div id="secondary-content" class="content-right">

  <div class="boxes">

          <h3>Etiam vestibulum nibh amet</h3>

          <p>Morbi et nulla. Ut faucibus. Suspendisse potenti. Donec vestibulum enim. Cras id dolor sed ligula lacinia vehicula. Fusce ligula. Nunc condimentum ipsum ut dolor. Etiam malesuada. Nulla dictum congue nisl. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur pretium quam a massa.</p>

  </div>

  <div class="boxes">

          <h3>Nam lobortis viverra fusce</h3>

          <p>Donec ornare ante semper nisl <a href="http://" title=""><span>sollicitudin vulputate</span></a>. Proin lobortis elementum arcu. Vestibulum porta neque. Integer ut sem. Sed felis erat, egestas a, venenatis ac, posuere eget, lectus. Etiam lobortis metus sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque placerat, tellus et porttitor sodales, metus urna blandit nibh, a ullamcorper felis sem in velit. Sed nonummy. Quisque eget eros et turpis adipiscing consequat.</p>

  </div>

         </div>

         <div class="clearall"></div>

 </div> 

        </div>

        <div id="footer">

 <div class="wrapper">

         <h3>Nam lobortis viverra fusce</h3>

         <p>Donec ornare ante semper nisl <a href="http://" title=""><span>sollicitudin vulputate</span></a>. Proin lobortis elementum arcu. Vestibulum porta neque. Integer ut sem. Sed felis erat, egestas a, venenatis ac, posuere eget, lectus. Etiam lobortis metus sit amet nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque placerat, tellus et porttitor sodales, metus urna blandit nibh, a ullamcorper felis sem in velit. Sed nonummy. Quisque eget eros et turpis adipiscing consequat.</p>

 </div>

        </div>

 </body>

</html>

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

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

Citat:

Originally posted by Bjarne@Apr 21 2008, 16:01

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.

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).