Rubrik:
Senast redigerad : 2007-09-04 klockan 23.12 av c-5961e455.017-436-6c6b701.cust.bredbandsbolaget.se
Lite tips för den som vill använda CSS och samtidigt skapa en websida som är kompatibel ner till hedenhös (äldre versioner av webbläsare). *http://www.w3schools.com/css/css_examples.asp* - kika här först.. *http://www.autisticcuckoo.net/archive.php?id=2004/12/10/floating* - och här om du någon gång tänker använda css float tagg. *http://www.alistapart.com/articles/imagemap* - imagemaps med css CSS är ganska trevligt eftersom om en webbläsare saknar CSS stöd så försinner bara vissa delar en en websidas design men inte inehållet! Sidor designade med CSS går ofta utmärt att surfa med simpla textbaserade webbläsare som lynx eftersom HTML koden inte innehåller någon speciell layoutkod som kan visas fel. !Problem med CSS och hur man löser dem <i>Men det finns vissa probem med att använda CSS fullt ut och det beror på att vissa webbläsare har havt implementerat CSS vilket gör vissa CSS designer odugliga i dessa webbläsare. IE5 är speciellt underutvecklad på CSS fronten.</i> !Grunder -Sätt grundfärger i den vanliga HTML BODY taggen så att dina websidor får åtminstonde rätt färger i webbläsare som inte stödjer CSS alls. Din HTML kod ska se ut som en lång löpande text utan inbakad layout. Tabled är ok att ha kvar, dom funkar i regel med alla webbläsare men sätt inga färger! -För all unik design: Använd två CSS filer! --Den ena CSS filen ska inkluderas med LINK och ska innehålla CSS 1 kompatibel kod som sätter grundlayouten för en sida. Grundlayouten ska vara kompatibel med Netscape 4. E <CODE><LINK REL="STYLESHEET" TYPE="text/css" HREF="http://www.gudinna.com/style.css"></CODE> --Den sndra CSS filen ska innehålla CCS 2 kod och transperans effekter. Om en tag redan finns i CSS 1 filen så byts den ut mot taggen i CSS 2 filen när CSS 2 filen laddas! CSS 2 filen ska inkluderas såhär! Eftersom äldre webbkäsare bara förstår LINK taggen så kommer dom enbart ladda CSS 1 filen! <CODE><style type="text/css"> <!-- @import url("http://www.gudinna.com/style2.css"); --> </style></CODE> Alla inkluderingar ska ske innom HEAD. !Hur man ordnar så att inte det dyker upp en scrollbar längst ned på sidan om man använder width: 100% Använd inte <b>width: 100%</b> utan sätt <b>right: 0px</b> istället! Vill man få kompatiblitet med NN4 så sätt <b>width:</b> till <b>90%</b> i din CSS 1 fil och ändra <b>width:</b> till <b>auto</b> i din CSS 2 fil samt sätt <b>right: 0px</b>. ( har man ine satt width på en bakgrund i NN4 så klipps bakgrunden där texten ovanpå bakgrunden tar slut, tyvärr kan man inte få samma effekt om man sätte höjden, i NN4 klipps alltid höjden ett par pixlar över och under en text. !Transperans, bäst att undvika eller? Transperans är vackert men inte problemfritt att implementera. Netscape 4 stödjer inte transparenta bilder i CSS design men om man trots allt vill ha transperans i nyare webbläsare, tänk på att alltid hålla koden kompatibel med NN4 användare! IE 5.5 och 6 för windows stödjer inte transperanta PNG bilder i CSS. Även Netscape 7.01 för windows har vissa problem med transperanta PNG. Transperans effekter kan man skapa genom att lägga en CSS box över ett områda och ha en bakgrundsbild med transperans, med GIF bilds filformatet kan man skapa en transperans perforerad bild som släpper igenom vissa pixlar av underlaget vilket ger en grynig tranperans effekt. Med PNG kan man skapa äkta transperans som ser mycket imponerande ut men som enbart är kompatibel med Mozilla,Netscape,Safari och Opera. IE brukar rendrera transperanta PNG filer antigen som helt genomskinliga eller som solidt fyllda ofta med heltäckande bakgrundsfärg. Vi rekommenderar GIF lösningen för fill kompatiblitet. Alla transperans effekter ska ligga i CSS 2 filen eftersom all transperans blir svart i Netscape4. Om transperanta PNG bilder används måste ett tredje styleshett skapas som fixxar buggar med IE 5.5 och IE 6 för windows! .. Jobbigt... Gör det lätt för dig och använd bara transparenta GIF bilder! !Allting buggar i Internet Explorer Det finns två lösningar antigen så får man applicera all trick som finns för att få det att fungera i IE med hjälp av 3st stylesheets eller så får man hindra IE att läsa in dom mer avancerade stylesheet effekterna.. Det går trots allt att få en sida att se rätt bra ut med bara CSS 1 taggar om man undviker absolut och relativ possitionering. fixed possitionering är bara att glömma i IE.. !CSS taggar som bör undvikas. Sätt inte CSS kod infogat i HTML filen, det kommer bli fel med äldre webbläsare! Undvik att använda possition:fixed; som CSS attribut Det funkar dåligt i många webbläsare och under utskrift. Om fixed ska användas inkludera i CSS 2 filen. !För pixel perfektion mellan webbläsare <strong>sätt standardvärden som marginaler för BODY</strong> i CSS 1 filen! <CODE> BODY { margin: 10px 10px 10px 10px; /* sätter alla marginaler runt en sida till 10 pixels. /* Högra marginalen spelar viss roll eftersom man kan få extra scrollbars om den är satt för lågt*/ /* vill man inte sätta en marginal så kan man använda auto istället för antar pixlar.. */ } </CODE> !Trix som fungerar bra Bakgrundsbilder kan läggas till bakom ALLA HTML taggar med hjälp av att lägga in en background: attribut! Se bara upp med transperanta bakgrundsbilder! Rubrikerna på gudinna wiki är skapade såhär: <code> /* width: är satt till 100% för att ändra NN4's standardvärde till standard, färgen som är satt i background: visas när rubrikbakgrundsbilden tar slut. */ H2 { background: #FFFFFF url(http://www.gudinna.com/style/gudinnatitle.gif) repeat-y top left; font-family: "new century schoolbook", "times new roman", times, serif; font-size: 180%; color: #000000; width: 100%; padding: 2px 0px 0px 9px; } </code> Vill man byta ut listknappar går även det bra i nyare webbläsare *http://css.maxdesign.com.au/listutorial/07.htm* !länkar *http://www.dcjt.demon.co.uk/dc/web/2002/hidecss.html* *http://www.mako4css.com/index.htm* - Informativt! CSS löser inte alla problem och dom mest effektfulla designerna kan åstakommas genom att kombinera tekniker.. *http://www.serve.com/apg/workshop/* - Många tekniker som är kompatibla med NN4 !Webdesignsresurser -För den som vill fördjupa sig i webdesign, låt dig inspireras! --*http://www.webpagesthatsuck.com* - Visar hur man inte ska göra. --*Howto make an annoying webpage>http://www.users.nac.net/falken/annoying/main.html* - Så ska man inte heller göra! --*Graphic garden - Mallar för pixelperfekta webbsidor* - Så kan man göra -Förstå hur besökare kommer till din site och förbättra dom delarna som är välbesökta --*Studera din webaccesslog!>Lustiga webblogsrapporter och webbstatistik@VisitorHabits* -Lär dig standard tekniker som fungerar för de flesta webläsare, vi har valt att fokucera på CSS tekniker. --*http://www.csszengarden.com/* - Visar hur man använder CSS för att förvandla simpla hemsidor till designade mästervek. ---*http://www.meyerweb.com/eric/css/edge/* - Visar hur CSS kan användas istället för javascript i många situationer. Interessant men inte helt kompatibelt med alla webbläsare. Speciellt inte Internet Explorer. ---*http://www.alistapart.com/articles/slidingdoors/* - Snygga till listor till tabbar med CSS, del 1 ---*http://www.alistapart.com/articles/slidingdoors2/* - Snygga till listor till tabbar med CSS, del 2 ---*http://www.strangebanana.com/generator.aspx* - Extremt randomiserad CSS generator! --*http://www.glish.com/css/* CSS Tekniker och layout tips. --*http://www.w3schools.com/css/* - CSS Skola -*http://www.w3.org/QA/Tips/* - Läs tipsen från w3.org, det är trots allt w3 som sätter standarden! Medans man designar kan en *html referens och färglista>HTML-taggar samt webfärger* komma till användning. !Användbara website-test -*http://www.websiteoptimization.com/services/analyze/* - Ger en analys på hur snabbt din sie kommer laddas för besökare med modem och ger förslag på förbättringar. -*http://validator.w3.org/* - Kontrollerar din html syntax efter fel. -*http://www.htmlhelp.com/tools/csscheck/* - Kontrollerar CSS filer och ger förslag.
