Kom ihåg mig?

CSS som gäller idag?

 
 
Ämnesverktyg Visningsalternativ
Gammal 2008-04-21, 10:21 #11
_Michael_ _Michael_ är inte uppkopplad
Medlem
 
Reg.datum: Apr 2008
Inlägg: 57
_Michael_ _Michael_ är inte uppkopplad
Medlem
 
Reg.datum: Apr 2008
Inlägg: 57
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...
_Michael_ är inte uppkopplad   Svara med citatSvara med citat
Gammal 2008-04-21, 11:27 #12
grinditwp grinditwp är inte uppkopplad
Flitig postare
 
Reg.datum: Mar 2008
Inlägg: 320
grinditwp grinditwp är inte uppkopplad
Flitig postare
 
Reg.datum: Mar 2008
Inlägg: 320
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.
__________________
Hej!
grinditwp är inte uppkopplad   Svara med citatSvara med citat
Gammal 2008-04-21, 12:08 #13
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 119
Skicka ett meddelande via MSN till allstars
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 119
Skicka ett meddelande via MSN till allstars
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.
allstars är inte uppkopplad   Svara med citatSvara med citat
Gammal 2008-04-21, 12:38 #14
coredevs avatar
coredev coredev är inte uppkopplad
Bara ett inlägg till!
 
Reg.datum: Sep 2007
Inlägg: 1 553
Skicka ett meddelande via MSN till coredev
coredev coredev är inte uppkopplad
Bara ett inlägg till!
coredevs avatar
 
Reg.datum: Sep 2007
Inlägg: 1 553
Skicka ett meddelande via MSN till coredev
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.
__________________
/Robert @ Code Addiction
In omnibus requiem quaesivi, et nusquam inveni nisi in angulo cum libro
coredev är inte uppkopplad   Svara med citatSvara med citat
Gammal 2008-04-21, 13:08 #15
Johan_S Johan_S är inte uppkopplad
Medlem
 
Reg.datum: Aug 2006
Inlägg: 99
Skicka ett meddelande via MSN till Johan_S
Johan_S Johan_S är inte uppkopplad
Medlem
 
Reg.datum: Aug 2006
Inlägg: 99
Skicka ett meddelande via MSN till Johan_S
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
Johan_S är inte uppkopplad   Svara med citatSvara med citat
Gammal 2008-04-21, 15:09 #16
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 119
Skicka ett meddelande via MSN till allstars
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 119
Skicka ett meddelande via MSN till allstars
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
allstars är inte uppkopplad   Svara med citatSvara med citat
Gammal 2008-04-21, 16:42 #17
Johan_S Johan_S är inte uppkopplad
Medlem
 
Reg.datum: Aug 2006
Inlägg: 99
Skicka ett meddelande via MSN till Johan_S
Johan_S Johan_S är inte uppkopplad
Medlem
 
Reg.datum: Aug 2006
Inlägg: 99
Skicka ett meddelande via MSN till Johan_S
Stor tack!
Johan_S är inte uppkopplad   Svara med citatSvara med citat
Gammal 2008-04-21, 17:01 #18
Bjarne Bjarne är inte uppkopplad
Medlem
 
Reg.datum: Jun 2005
Inlägg: 103
Bjarne Bjarne är inte uppkopplad
Medlem
 
Reg.datum: Jun 2005
Inlägg: 103
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.
Bjarne är inte uppkopplad   Svara med citatSvara med citat
Gammal 2008-04-21, 19:44 #19
Syke Syke är inte uppkopplad
Medlem
 
Reg.datum: Mar 2008
Inlägg: 297
Syke Syke är inte uppkopplad
Medlem
 
Reg.datum: Mar 2008
Inlägg: 297
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
__________________
Klientsidan.se - Artiklar om HTML, XHTML, CSS, Javascript, DOM, Webbstandarder och Semantik. | Godisbiten.se - en site om godis | Hamburgare - en blogg om ... hamburgare!
Syke är inte uppkopplad   Svara med citatSvara med citat
Gammal 2008-04-21, 19:53 #20
martines avatar
martine martine är inte uppkopplad
Mycket flitig postare
 
Reg.datum: Mar 2005
Inlägg: 767
martine martine är inte uppkopplad
Mycket flitig postare
martines avatar
 
Reg.datum: Mar 2005
Inlägg: 767
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).
martine är inte uppkopplad   Svara med citatSvara med citat
Svara


Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)
 
Ämnesverktyg
Visningsalternativ

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


Alla tider är GMT +2. Klockan är nu 07:30.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson
 
Copyright © 2017