Jag har tidigare skrivit om hur man kan göra rundade hörn på html objekt utan att använda bilder. I den posten hänvisade jag till Nifty Corners.
Nu har Alessandro Fulciniti som ligger bakom tekniken släppt en ny uppdaterad version som han kallar Nifty Corners Tube. Nu kan man även skapa kolumner knappar och hela layouter med scriptet. Funktionaliteten finns i ett javascript som man kan ladda ner gratis och är släppt under GNU GPL licens.
Jag tycker Nifty Corners Tube är ett väldigt bra skript som jag själv har testat. Det finns dock mängder av andra tekniker och SmileCat.com har sammanställt en fin lista på andra sätt att göra rundade hörn.
Så här gör man för att få fram scrollbars på ett visst element i html.
<div id="d1" style="overflow: auto; width: 300px; height: 300px; text-align: left" align="center"> This content will be scrollable when filled with too much content. </div>
När man gör html design och anger vilka typsnitt man vill använda brukar man ange några olika alternativ. Alla plattformar som PC, Mac, Linux och Unix har ju alla olika standardfonter installerade. Man anger fonter i CSS enligt följande. Sans-serif är ett generellt samlingsnamn för att ett typsnitt utan "fötter" ska väljas.
body { font:0.75em/1.3em Arial, Helvetica, sans-serif; }
Om man vill att samma font ska visas för alla besökare blir man väldigt begränsad. Hittade en sida på nätet som skriver att de följande är de vanligaste webb-säkra fonterna.
* Arial / Helvetica * Times New Roman / Times * Courier New / Courier
Andra alternativ som brukar fungera bra är:
* Palatino * Garamond * Bookman * Avant Garde
Några fonter som fungerar bra på Windows and MacOS men inte Unix+X är:
* Verdana * Georgia * Comic Sans MS * Trebuchet MS * Arial Black * Impact
Under de senaste sju åren har webbdesign kört fast i en visst spår. Det hela började med upptäckten att man kunde använda tabeller för att skapa layouter för hemsidor. Man använder rader och celler för att placera elementen på sidorna. Detta sätt fungerar ju fortfarande bra men resulterar i svårhanterlig kod som är svår att uppdatera. Tabellerna med sina celler har blivit ett fängelse och gjort oss att fastna i ett visst tänkande hur man bygger upp layouten.
Några började drömma om ett nytt sätt att placera objekten med hjälp av <div> och <span> taggarna. CSS Zen Garden är en webbplats helt dedikerad åt detta nya sätt att skapa design.
Ett problem med det nya sättet att göra design är ju att den mest använda webbläsaren idag, IE6, inte stödjer CSS 2.1 standarderna. Men med IE7 kommer situationen bli mycket bättre och det känns som man på allvar kan anamma de nya teknikerna. Microsoft har gjort en egen "Zen Garden"-design för att visa hur bra IE7 kommer att stödja CSS. Läs mer om exprimentet i artikeln The Zen in 7: Enhanced Styles In Internet Explorer 7.
Eric meyer är en man som forskar mycket i nya CSS ideer och driver en webbplats som heter css/edge. Där visas många exempel på nytänkande tekniker. Där visar han bland annat hur man kan göra effekter genom fixerade bakgrundbilder, popupmenyer i ren CSS och mycket mer.
På Stopdesign.com finns en post som handlar om hur en webbsida görs om för att använda ordnade listor istället för tabeller. Lägre laddningstider och renare kod blir resultatet.
Att se till att en hemsida följer webbstandarderna från W3C är väldigt viktigt ifall man vill att designen ska fungerar bra på alla olika läsare. Annars förlitar man sig på hur bra (och hur) läsaren hanterar felen. Resultatet kan då variera stort.
Måste erkänna att jag aldrig direkt har kämpat för detta tidigare. Webben har helt enkelt känts för "trasig" för att man ska orka bry sig. Men när nu IE7 är på gång och Microsoft verkar ta webbstandarderna på allvar, så känns det värt att börja rensa sina egna alster från icke-validerad kod. Okej då kör vi!
1. Validera som XHMTL Transitional Nu lyckade jag för första gången skapa en webbsida (den här bloggen) som validerar som XHTML 1.0 Transitional.
Min startsida som innehåller flash blev dock lite svårare att få att validera som XHTML pågrund av att den innehåller en flashfilm. Hittade en bra artikel på ämnet men den hjälpte mig tyvärr inte hela vägen.
2. Validera som giltig CSS Nästa steg blir CSS validering, detta gick ju fint också.
Fick dock en hel del varningar - bland annat som säger "You have no color with your background-color" och liknade. Detta beror på de nya W3C reglerna som introducerades nyligen. Att följa dessa kan dock skapa en del oväntade effekter. Så jag väljer att ha kvar varningarna - de är du endå bara varningar.
3. Validera ett RSS-flöde RSS-flödet i min blogg är också riktig. Fick en varning på kodningen:
"Your feed appears to be encoded as "iso-8859-1", but your server is reporting "US-ASCII""
Detta såg jag många som haft problem med men hittade ingen lösning.
Standardknapparna i html kan vara lite tråkiga. Jag finner mig ofta att använda länkar istället eftersom de vanliga <input type="submit" /> och <Button /> elementen. Det har helt enkelt för dåligt CSS-stöd för att kunna designas i någon större utsträckning. Ett alternativ är ju att använda en bild som knapp. Nackdelen är då att man måste skapa en ny bild för varje ny text man vill ha.
Jag bestämde mig istället för att försöka ändra utseendet på länkarna för att de ska likna knappar och här nedan ser du resultatet. Jag använder en tonad bild bakgrund och vänder på denna när man för markören över (hover).
<div id="leftColumn" style="float:left;"> Innehåll i vänster cell </div> <div id="rightColumn" style="float:right;"> Innehåll i höger cell </div> <div style="clear:both;"> </div> </div>
Att avsluta med en ny div som rensar båda kanter kan vara bra ide. Ibland sträcker sig omgivande cellen inte tillräckligt långt ner på sidan (den jag har kallat "container" i exemplet). Det är framförallt om man bara har bilder inuti cellerna som den omgivande cellen inte går ända ner. Det finns även en bugg i IE6 som löser sig om man har en div längst ner som rensar båda kanter.
Ni som jobbar med html-design vet att det är lättast att göra fyrkantiga rutor. Det finns helt enkelt inget direkt stöd för att göra rundade linjer och kanter.
Vill man tex göra en ruta med rundade hörn brukar man lösa det genom att skapa alla hörnen som bilder och länka in dessa på rätt ställen. En minst sagt tidsödslande process och vad händer om man vill byta färg på rutan? Bara till att köra igång bildredigeringsprogrammet och ändra alla bilder.
En lättare lösning Idag hittade jag en artikel om hur man kan göra det mycket enklare med hjälp av ett gratis javascript och lite medföljande CSS. Har precis provat det och det fungerar utmärkt. Läs artikeln på följande address: http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html
Uppdatering: Sedan detta skrevs har Nifty Corners Tube släpps, som är den bästa tekniken för att göra rundade hörn som jag har provat. Väldigt lätt att använda.
![[Valid RSS]](http://validator.w3.org/feed/images/valid-rss.png "Validate my RSS feed")