Html-koden ser ut så här för att göra en box med skugga på.
<div class="outerpair1 textbox"> <br /> <div class="outerpair2"> <br /> <div class="shadowbox"> <br /> <div class="innerbox"> <br />This is a demo showing how to make drop shadows with transparent PNG images. <br /></div></div></div></div>
Hittade en intressant artikel på Stopdesign.com där 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.
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.
Nu verkar det närma sig det datum då Internet Explorer 7 kommer att släppas på marknaden. Idag meddelades det att IE7 Release Candidate 1 finns tillgänglig för nedladdning. Den officiella IEBloggen är het och det postas uppdateringar i stort sätt varje dag. Microsoft verkar ha lyssnat på webbutvecklarnas anmärkningar på brister och fixat en hel del buggar som har med CSS-rendereringen att göra. Bland annat 16 av de buggar som har rapporterats för IE6 på PositionisEverything.net.
I denna versionen har funktionalitet som avinstallerar föregående betaversioner automatiskt, lagts till. Det går dock fortfarande inte att köra IE6 parallellt med nya IE7. Som en eventuell lösning på detta verkar Microsoft ge bort Microsoft Virtual PC gratis. Tanken är att man ska installera IE6 i den virtuella datorn för att kunna testa hur webbsidor ser ut. Det kan ju vara en lösning på det problem jag skrivit om tidigare, men ska det inte kunna gå på något enklare sätt? Ett flexa-till-IE6-mode i själva läsaren eller andra lösningar efterlyses!
Det känns det som att IE7 bli ett stormsteg mot bättre stöd för CSS2-standarden på internet. Nu kommer det bli bra mycket enklare att skapa design som håller i alla moderna webbläsare.
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).
Jag testade beta 3 lite snabbt och det ser väldigt bra ut. Det är lite irriterande att man inte kan (så vitt jag vet) ha både IE6 och IE7 installerade parallellt på sin dator. Eftersom jag ständigt är i behov av att testa hemsidor på IE6, som de flesta fortfarande använder , avinstallerade jag IE7.
Nu väntar vi ivrigt på att den skarpa versionen kommer ut. Enligt senaste rykten kommer det ske tidigt i höst. Den stora frågan är hur bra denna nya webbläsare från Microsoft kommer följa webbstandarderna skapade av World Wide Web Consortium. Förshoppnings vis kommer det bli en hel del förbättringarna gentemot den gamla IE6.
<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.
Den som sysslat något med html och css-design vet att det är svårt att skapa design som fungerar i alla de vanligaste webbläsarna.
Speciellt höjden på ett element är svårt att hantera eftersom IE6 och lägre inte accapterar css-standard väljaren "min-height".
För att justera detta kan man använda det så kallade stjärn-hacket som jag visar ett exempel på nedan. Man tar helt enkelt användning i ett annat fel i IE som gör att css kod efter en stjärna accepteras. Övriga webbläsare som t ex Firefox ignorerar raden efter stjärnan och påverkas ej.
#wrapper {position: relative;min-height: 100%; } * html #wrapper {height: 100%;}
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")
