Css, Html, Mootools, PHP och Smarty » css

Tandblekning

Erik Andersson — Mon, 26 Apr 2010 09:07:25 +0000

Vi har byggt en ny site till Dentway som säljer tandblekning på den nordiska marknaden. Vi börjar med att lansera svenska siten idag, under veckan kommer norska sidan ut. Dentway startades 2005 och har 4 anställda. De produkter Dentway säljer är exakt samma som du kan köpa hos tandläkaren. Då kostar dock behandlingen ett par tusen kronor extra.

Ta bort prickad linje runt länkar i firefox med outline

Erik Andersson — Tue, 07 Apr 2009 19:54:45 +0000

Majoriteten av användare på internet använder Internet Explorer. Det är i sig synd om dessa användare och i förlängningen en synd för internetutvecklingen. Men det finns punkter som ie är bra på.. Hur jobbigt tycker du inte det är när du har länkar som innan sidorna laddas får en prickad ram runt sig. Och när du på senare tid börjat använda ajax så är denna ram kvar tills användaren klickar på nästa länk.

Men det finns ett enkelt sätt att slippa detta, css deklarationen ”outline:0″ löser effektivt problemet. Du sätter den enklast på a:active classen. Och ofta räcker det, i någon version av Firefox behövs det dock en liten deklaration till. Det gäller deklarationen ”-moz-outline-style:none” och detta görs enklast i a:focus.

Totalt blir css deklarationen såhär:

a:active{outline: none;}
a:focus{-moz-outline-style: none;}

Hoppas nu att ni slipper dessa (antagligen de mest hatade prickarna i världen).

Google-optimerade bildlänkar

Erik Andersson — Mon, 16 Mar 2009 08:47:50 +0000

Att göra snygga menyobjekt är ofta lite krångligt om man vill ha med Google-optimeringen ner i sidstrukturen. Dessutom brukar bildmenyer leda till extremt många request från servern. Om menyobjekten skall innefattas av 3 olika bilder: link, hover och active och det dessutom finns 6 menyobjekt leder detta till 18 förfrågningar mot servern vilket är onödigt och blir slött.

För att slippa det mesta av dessa problem har vi löst det lite annorlunda. Vi utgår från en bild där vi placerar in alla menyobjekts olika faser och sedan använder vi css för att aligna bakgrunderna i de olika faserna. Vi har lagt upp ett exempel på www.meny.welcom.se dock har vi inte gjort mootools funktionen för att aktivera funktionern i IE6. Men alla normala webbläsare klarar av att hantera menyn med bara css. Mootools funktionen som gör detta kommer publiceras snarg här på bloggen.

Css koden för att skapa ett av objekten i menyn ser ut som följande:

li.gaos_top_menu_1 {background-position:0px 0;}
li.gaos_top_menu_1:hover, li.gaos_top_menu_1_over {background-position:0 -23px;}
li.gaos_top_menu_1 a.nav_item, li.gaos_top_menu_1_over a.nav_item {width:90px; height:24px;}
li.gaos_top_menu_1 .menu {left:0; min-width:140px}

För att kunna göra html koden så bra som möjligt så att vi får med indexeringen på texten så lägger vi in en förskjutning på alla som i sin tur ligger innanför länkarna. Förskjutningen görs såhär:

ul#gaos_top_menu a.nav_item span {position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden;}

Resterande kod får ni hämta från meny.welcom.se om ni vill använda den.

Bilden som vi använder i exemplet ser ut såhär: (bilden är 8k)

Dock använder vi denna på en site som är tvåspråkig så det är därför vi har fler rader med i den.

Table är bra, men inte till allt!

Erik Andersson — Sun, 08 Mar 2009 18:57:53 +0000

är en fantastisk html tag som är extremt bra på att hantera just tabeller. Problemet med taggen är att taggen fungerar lite för bra, detta har gjort att många använder den för att åstadkomma andra effekter. Ni som känner er slagna av anklagelsen skall veta att felaktigt användande av table ofta genererar andra problem. T.ex.

-Sidor vars design är kodad med tables ofta väldiga problem när det kommer till att skrivas ut.
-Tables är långsamma och genererar mängder av html kod.
-CSS stödet från tabeller är krångligt och generar ännu mer kod.

Och till alla er som inte tror att det går att centrera en sida utan tables. DET GÅR..! För er som inte tror mig gällande det sista påståendet kommer här koden för att göra det..

Text i mitten

Text i mitten fast vänsterjusterat.

En liten utläggning till krävs i detta kapitel.. Ni som håller på med emailutskick i html kan glömma allt jag skrivit här.. Satt för ett par veckor sedan och skulle formatera lite html för lotus notes.. det var inte helt enkelt. Nästa gång jag gör något liknande kommer det upp här på bloggen!

Smått och gott för webbutvecklare – Ajaxian.com

Mattias Ekberg — Fri, 06 Mar 2009 22:32:49 +0000

Ajaxian.com håller koll på det senaste inom webbutveckling åt dig! Några besök i veckan och du håller dig à jour!

css – clear:both,left,right och none

Erik Andersson — Thu, 05 Mar 2009 12:24:56 +0000

Här kommer en helgonförklaring till mitt nya favoritkommando i css!

Under många år har jag suttit och slitit med placeringa av divar. Vi har alltid fått till det så som vi tänkt, men ibland har det varit mycket slit för att lyckas. En dag för några månader sedan sitter jag och surfar runt och ser några killar som har byggt upp en väldigt fin divstruktur och börjar titta lite på koden.

Insåg att jag aldrig lärt mig hantera ”clear” på riktigt och började exprimentera lite.. Nu är det som sagt det komando som sparar mig mest tid i utvecklingsarbete. Oj va smidigt det gör det att placera ut flytande divar!

Förklaring till vad ”clear” gör:

Clear definerar vilka sidor av ett element som inte skall tillåtas ha flytande element runt sig. Clear kan ha attributen left, right, none och both.

Exempel: (den röda diven har inte definerat clear)

float:left

float:right

clear: inte definerat

Exempel: (den röda diven använder clear:both)

float:left

float:right

clear:both