Skapa rutor med CSS
2008-04-21 - atlas, css, design, tutorial
0
Som jag skrev om innan så är det ibland väldigt svårt att ersätta tabeller med CSS även om man skulle vilja. Här är ännu ett exempel som jag tänkte ta upp. Jag skrev för en stund sen om att jag tyckte att trenden om att byta ut tabeller mot CSS har lett till att sidor som är CSS-baserade må se rena och fina ut men är i regel bra mycket mer primitiva. Det har förekommit hundratals tips och tricks för att åstadkomma resultat som påminner om sådant som är väldigt enkelt med tabeller.

Rundade hörn

Ett sådant exempel är rutor som man vill ha runt text. Medan det är enkelt att lägga en bakgrundsfärg och en border på en DIV i CSS så är det desto svårare att få till rundade hörn på ett snyggt sätt. Då jag är grafiker så har jag ju rätt mycket krav på exakt hur dessa rutor ska se ut, och jag nöjer mig inte med något så simpelt som bara rundade hörn utan vill ha möjligheten att skapa något som ser snyggt ut och passar ihop med en etablerad stil i resten av sidan.
Detta är grundexemplet. En enkel ruta med en yttre kant och yttre skugga runt hela.
Så här är denna skapad, med en tabell som har bilderna i celler eller som bakgrund i celler som gör att dom repeteras korrekt. Den kan alltså växa och bli hur stor som helst. Jag har en PHP-funktion som heter square() som tar bilderna och lägger dom rätt och returnerar tabell-HTML för detta. Men resultatet är alltså en hel del HTML-kod samt att nio stycken bilder måsta laddas. Små bilder visserligen, men ändå nio stycken.

CSS?

Så, hur kan man skapa denna i CSS då? Ja, den mest populära tekniken är att ha så kallade "wrapper DIV's" med olika bakgrunder, som positioneras så att dom hamnar rätt i förhållande till innehållet.
Så detta är delarna vi måste ha. Istället för nio delar så har vi bara fyra, varav en är väldigt stor, och egentligen ska vara större än här på bilden då den ska vara lika stor som rutan kan förväntas bli. Så, trots att vi har färre delar så tar dom alltså mer tid att ladda över till webbläsaren då dom måste vara stora nog att rymma olika sorters innehåll.
Och här är tanken bakom systemet. Rutan är av en viss, dynamisk, storlek och bilderna fungerar som bakgrunden som försvinner under dom andra "wrap" DIV:arna som då pusslar ihop hela rutan.
För att göra detta så måste vi alltså ha fyra stycken "wrappers", en för varje bakgrundsbit som ska ligga ovanpå varandra med bakgrunden korrekt positionerad så att delarna skapar alla hörnen korrekt. och vår kod ser då ut så här:
<div class='ruta'> <div class='overleft'> <div class='underright'> <div class='underleft'> <span class='mrubrik'>Hejsan</span><br> Det här är min söta lilla ruta </div> </div> </div> </div>
Ok, kanske inte den snyggaste koden man har sett, men dock mer lättläst än HTML-koden för tabellerna ovan. Här är ordningen på DIV:arna väldigt viktiga eftersom vi bygger upp rutan genom att lägga bilder ovanpå varandra. Ok, vad börjar vi med? Jo, vi ska ju ha "overright"-bilden som grundbakgrund, eftersom det är den som ska ligga underst så att säga, så vi lägger till den här CSS-koden:
DIV.ruta { background-image: url(overright.png); background-repeat: no-repeat; background-position: top right; }
Ok, så det där såg kanske inte så himla snyggt ut... Vi får lov att lägga på lite fler bakgrundsbilder.
DIV.ruta DIV { background-repeat: no-repeat; } DIV.ruta DIV.overleft { background-image: url(overleft.png); background-position: top left; } DIV.ruta DIV.underleft { background-image: url(underleft.png); background-position: bottom left; } DIV.ruta DIV.underright { background-image: url(underright.png); background-position: bottom right; }
Aha, det där såg ju genast mycket bättre ut! Men texten ligger ju över bakgrundsbilden så vi måste ha lite lut kring den, något vi alltså sätter på den innersta DIV:en för annars flyttar vi ju bakgrundsbilderna
DIV.ruta DIV.underleft { background-image: url(underleft.png); background-position: bottom left; padding: 10px; }
Ja men hallå, nu är den ju klar, vad klagar du på? Den ser ju exakt likadan ut som den första bilden som var gjord med tabeller, eller hur? Ja, det är sant, det ser så ut. Men det är en kritisk skillnad.
Som ni ser, med tabellen kan jag använda mig utav transparens i bilderna, och oavsett bakgrund så ser den lika bra ut. Det är viktigt för mig när jag utvecklar Atlas eftersom jag inte i förhand vet om exakt vilken bakgrund rutorna kommer användas på, men med tabelltricket så spelar det ingen roll, som ser likadana ut överallt. Med CSS så liggr ju bilderna ÖVER varandra, och därför kan vi inte använda transparensen, eftersom det då skulle visa underliggande bakgrundsbild, inta bakgrunden som plattan ligger på, tyvärr.
Så, CSS fungerar så länge man inte har så stora krav på hur det ska se ut överallt, eller om man vet exakt vilka förutsättningar man jobbar efter. Men som man kan se i det här exemplet så även om man vet det så är det inte alltid man kan genomföra det med CSS, tyvärr.
Mer i Tutorials
Rkna tid med PHP
Dlj emailadresser fr spamrobotar
Skuggor med CSS
Skapa rutor med CSS
Erstta tabeller med CSS
Frilgg bilder i Photoshop
Pimp my Sensor Bar
Mer i Webblog
R2D2 Projektor
Ny layout
Times
Skapa rutor med CSS
Yin  Yang
Sandmania theme fr din Playstation 3
Spke
Nyckelord: atlas, css, design eller design
Miljvnliga Maccar
Flersprkigt websystem
jQuery
Skapa rutor med CSS
Atlas versionerat
Raid installerad
Coca Colas nya design
Två månader med Keto
Spelbord v3
Mechanical Age map
More shading and water
Första månaden med Keto
Keto
Fotosession: Tabitha
Utebelysning
Återvinningsskåp
Måla om huset
Byggt hylla till vintunnorna
Dodge RAM
Inline-redigering
Drömmen om ett spa
Dags för carport
Survey Island, what is happening?
Golvprov
Gillestugan uppdaterad!
Spelbord v2
Tre billyhyllor blir två
Gymkort
You can't take the sky from me
Högtalare klara!
eklundh.com tar ned skylten
Högtalare bestämda!
Uppgraderingar biorum
Lord of the Rings-maraton
Ergonomiskt som tusan!
Lego Storm Trooper
Fågel Fenix
Två hyllor på badrummet
Hobbyhörna fixad
Hylla bakom soffan
Modellbygge igen!
Porträtt av u/Flattie-Ratty
Porträtt av u/DangDoood
Buy prints of my maps
Hero Dashboard för Descent
3D-printer
Fältsjukhus 616
Ny kaffemaskin
Porträtt av u/elizabeeeef
Jämförelse 135 mm
Nya objektiv
Porträtt av kompis mamma
Använda utrymmet under trappen
Spelbord
Pimpning av köks-ön
Jag saknar min Dodge!
Acrylic drip