» CSS

CSS Valideridering, viktigt?

Nicklas — Sun, 10 May 2009 10:20:32 +0000

Som webbdesigner får man ständigt tänka på hur man kan förbättra sin kod. En bra sak att tänka på är att hålla sig till någon slags webbstandard.

Standarden bestäms av en organisation som kallar sig för w3 och utvecklas konstant. De viktigaste standardena att tänka på är:

CSS
HTML
Robots.txt

Jag försöker få mina webbsidor att validera till 100%, som till exempel nthdesign och durito.se. Men ibland kan det vara svårt och en mycket tidskrävande process.

Varför ska man validera?

Man försärkar sig om att sidan visas på rätt sätt i webbrowsers som inte är speciellt förlåtande, samtidigt som man får en viss garanti för att sidan kommer se bra ut i framtiden också.

Om man nu inte klarar av att lösa problem utan att använda ful-metoder så kan man få komplikationer i framtiden. Då kan det i alla fall vara värt att testa sin kod i olika webbläsare:

ie6+
ffx
chrome
safari
iPhone/android

CSS + wordpress = sant

Nicklas — Sun, 19 Apr 2009 20:35:16 +0000

Jag har fixat ihop en sprillans ny hemsida under påsklovet. Kolla in den här. Sidan bygger på ett wordpress-tema som jag knåpat ihop till min flickvän Madde. Hon ska börja blogga om sin passion, hästar.

Hennes häst durito (av duros, små mexikanska pastahjul el. en sorts gul lök) hamnar i rampljuset och hon ska berätta om hur det går för henne och hennes häst på olika träningar, tävlingar eller allmänna ridturer på gården där hon förtillfället bor.

Det som är bra med wordpress är att hon kan styra innehållet helt oberoende av en webbdesigner som jag, det kan du också om du bara hör av dig till mig. CSS styr hur utseendet ser ut. Som typ fonter, färger och allmän layout! CSS + wordpress makes it happen.

Snart kan ni också eventuellt vänta er en helt ny och fräsh design av Treplex, vi får se hur det blir.. spännande.

Imorn är det El och java för hela slanten, hare gött!!

Blinkfri bildhover

Nicklas — Wed, 25 Mar 2009 09:34:32 +0000

En alltför vanlig metod som många använder sig av när de skapar konst på internet är att göra en design i Photoshop, eller motsvarande programvara, som de delar upp i småbilder som i sin tur placeras i en tabell eller vad det nu kan vara. Den lösningen är varken flexibel eller sökmotorsvänlig. Du ska såklart använda dig av CSS!

Självklart kan man använda sig av bilder, men man bör till exempel använda sig av så många textrubriker som möjligt. Som ni kanske vet indexerar sökmotorer html-taggar som h1 och h2 för att kolla om det finns intressanta saker på din hemsida som passar olika sökningar.
Ett enligt mig mycket enerverande problem i dag är att det finns allt för få standardfonter. Man kan alltid surfa runt och ladda hem snygga fonter på hemsidor som DaFont, du kan dock inte applicera dessa fonter på texter på din hemsida utan att göra bilder.

Jag tänkte föreslå ett sätt att göra bilder lite mer sökmotorsvänliga mha css. Vi ska göra en bild med hovereffekt, som också innehåller en header-tag (som tex h1, h2 osv). Det kommer också att visa sig att hovertekniken som vi ska använda klarar av att laddas direkt, vi slipper fula blinkningar etc.

Följande är vad vi ska skapa:

HTML

Beställ här

..Dådå?

Vi använder oss av en länk med en rubrik i. Det skulle också kunna vara en länk med en span-tagg i, det är upp till dig att bestämma. I vissa situationer kan det kännas mer korrekt. Om vi skulle visa detta utan CSS skulle vi bara se en länkad rubrik. Nu ska vi införa bilder och göra så att texten inte längre syns mha CSS!

CSS

#bildklass,
#bildklass h2{
display:block;
width:120px;
height:40px;
position:relative;
overflow: hidden;
}
#bildklass h2{
margin:0px;
height:80px;
text-indent:-9000px;
background-image: url(Untitled-1.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#bildklass:hover h2{
top:-40px;
}

So..?

Du ska tolka CSS-koden på följande sätt… tänk dig att a-taggen (bildklass) är ett fönster mot det du ser. Vi sätter en storlek på fönstret och börjar sedan manipulera det vi ska visa (h2).

H2 har en margin som standard, den tar vi bort.
Vi skjuter bak texten på h2-taggen så att den inte syns men ändå finns där i html-koden.
Det som finns bakom fönstret (canvas) utökar vi till bildstorleken
På hover-state skjuter vi upp bakgrunden 40 px och visar vår andra bild
Doneanddone!

Clearfix ?

Nicklas — Tue, 17 Mar 2009 16:43:34 +0000

Ni kanske har hört talas om clearfix tidigare? Det är sätt att lösa ett vanligt förekommande CSS-problem som uppstår för de flesta som bygger hemsidor mha CSS. Jag hade tänkt reda ut vad detta clearfix löser för problem, det är troligt att ni kanske känner igen det.

Jag kommer att beskriva hur man tidigare löst problemet mha en extra html-tagg, idag använder man CSS istället.

Problemet

Till att börja med… det är egentligen ett ganska gammalt problem som har en ”rolig” historia bakom sig som jag tar upp här.

Om du vill använda dig av float för att placera olika element, såsom DIVs, kan ett välkänt problem uppstå. Om objektet du väljer att flyta (float) ligger i en annan

kommer inte floatens vertikala dimension att påverka DIV-objektet. Detta kan i sin tur medföra att flytobjektet ligger utanför DIV-objektet enligt bilden nedan.

Gammal lösning (HTML)

Random text i float

Text utanför float

Förklaring

Man löser problemet genom att lägga en DIV-tagg efter den DIV som flyter.
DIV-taggen drar ner botten på ”container” genom att man använder sig av css-koden clear:both. Detta är en lösning som W3 rekommenderat sedan länge, men usch så ful den är. Att lägga till en extra html-snutt för att lösa problemet är inte acceptabelt år 2009.

CSS lösning

Med bättre verktyg som CSS kan vi lösa problemet mycket snyggare.

Det finns egentligen flera olika lösningar att välja, det roliga är att det går att lösa såpass enkelt så att det nästan verkar absurt. Man (många många människor) höll på länge och kunde inte riktigt komma underfund med hur man skulle göra det på ett snyggt sätt.

Historien är ganska rolig… En kille som heter Tony Aslett skrev för några år sedan en snutt kod som gjorde att man kunde lösa clearing-problemet via CSS på ett ganska krångligt men smart sätt. Ett tag senare kom en annan kille på ett annat sätt man kunde göra det på (FnE) Float nearly Everything… också ganska klumpigt.

En vacker dag öppnade en kille vid namn Paul O´Brien munnen och sade att: ”Det är väl inte så svårt, det är ju bara att lägga till overflow:auto på den yttre innehållaren”. Det roliga var att en hel designvärld antingen hållit tyst om hur man löser problemet eller att det helt enkelt hade en såpass trivial lösning utan att någon visste om det. Hur sjukt är inte det, designers arbetar och krånglar med html-markup och seriös CSS-hacking för att lösa problemet när allt som egentligen krävs är en rad kod!

CSS: Pseudo-class

Nicklas — Sat, 28 Feb 2009 14:50:54 +0000

I detta tutorial ska jag visa lite av möjligheterna med pseudo-classer. De används för att lägga på specialeffekter på speciella element.

Som standard definieras länkar ofta som blå, fula och understrukna. Vi ska försöka hitta CSS verktyg som kan hjälpa oss att styra detta. Standardlösningen på problemet är ofta att man söker på internet och hittar en kodsnutt som klistras in i huvudet på html-dokumentet, utan att egentligen veta vad man gör.

De vanligaste pseudo-classerna är de som styr hur länkar ser ut. Jag ska gå igenom hur de och first-child typen fungerar.

Syntax

selector:pseudo-class {property:value}
selector.class:pseudo-class {property:value}

Exempel

p .text:first-child {font-family: monospace}
#rightcolumn a:hover {text-decoration:underline}

Kommentar

Man använder alltså kolon (:) för att specificera vad man vill applicera sina parametrar på.

Länkar

Pseudo-classer för länkar används oftast i följande varianter:

:link
:visited
:hover
:active

Exempel

a:link {color: #000000}
a:hover{color: #CCCCCC}

Alla ankarlänkar, dvs. kommer att vara svarta. När du drar musen över dem kommer de att ändra färg till ljusgrå.

Viktigt

hover ska komma efter :link och :visited
pseudo-classer är inte skriftlägeskänsliga (abcd = ABCD)

First-child

First-child används för att endast sätta parametrar för det första blocket av de som används. Detta kan ofta användas i listor som man vill ska vara symmetriska. Säg att du har en lista där du vill att varje list-objekt ska ha en border över och under texten.

Om du väljer att använda samma CSS på alla objekt i listan kommer den att bli assymetrisk. Detta eftersom du får dubbla borders mellan varje objekt, men enkla längst upp och längst ner i listan.

Du kan lösa ovanstående problem genom att använda first-child.

Exempel

HTML:

Ägg

Mjöl

Socker

CSS

li {
border-bottom: 1px solid #000;
}
li:first-child {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

Det övre listobjektet kommer nu ha border både uppe och nere, de övriga objekten kommer endast ha en nedre border.

Viktigt

För att first-child ska fungera i IE måste du deklarera dokumenttyp.

CSS tips

Nicklas — Thu, 19 Feb 2009 21:25:00 +0000

Det finns många olika sätt att lägga upp sin hemsida på ett tillfredsställande sätt. Med hjälp av CSS kommer din sida att vara dynamisk och lätt att reglera. Jag tänkte ge lite tips för hur du kan göra vissa saker på ett bra sätt, dvs. till exempel hur du gör för att ta din design från ritbordet (mockup) och börja skriva CSS-koden eller vad du kan använda för verktyg när du debuggar din hemsida.

1. Centrera innehållet med CSS

1.1 Metod 1

Det finns olika tekniker för att göra detta. Du kan till exempel välja att centrera texten i body/html för att få ditt content (förslagsvis en DIV) centrerat, sedan välja textposition vänster i content-DIVen.

1.2 Metod 2

Ett proffsigare sätt är att, på elementet som ska centreras, ange id för margin-left och margin-right till auto; samt sätta en bestämd width (bredd).

Ditt innehåll kommer sedan att hamna i DIV #content som centreras. Detta är ganska basic men det finns många bättre och sämre sätt att göra det på. Mitt sätt fungerar i alla moderna webläsare, iklusive ie6 etc.

1.3 Placera din logotyp, meny etc.

Jag går igenom metoden här. Du kan använda metoden för att placera din logga, en meny eller något annat som ska placeras absolut/relativt. Exempel på nthdesign är menyn, logotypen och rss-ikonen.

2. Tjugofem sätt att fixa runda hörn

Att fixa runda hörn är också en vetenskap i sig. Det finns många olika vägar att ta. Du kan använda dig av bilder, borders och javascript.

Jag hittade en bra hemsida som listar många bra metoder att göra detta.

3. Saker att tänka på vid styling med CSS

Min bror tipsade i en kommentar om en sida som innehåller lite intressant fakta om vad du kan tänka på när du lägger upp din CSS-planering, kolla in den sidan om du är intresserad av att skriva en korrekt CSS-fil.

Det kan vara att tänka på om du satsar på att få din sida validerad enl. w3 standarden.

4. ID eller Class?

Ni kanske ställt er frågan om vad skillnaden egentligen är mellan en klass och ett ID. Skillnaden funktionsmässigt är minimal, dock ska man veta att standarden säger annat. Ett ID är unikt för ett element som till exempel #top,#footer eller #content, det används endast på ett element. En klass är däremot till för att appliceras på flera element av samma typ.

Så varför valde man just namnen ID och klass?

ID = En individs identitet är unik.
Class = Det är många människor i en klass.

5. Debugga

Testa din sida i så många webläsare som möjligt. Det är många som fortfarande använder ie6, i januari i år låg andelen på ca 20 % världen över.

Det kan vara problematiskt att installera gamla ie versioner, använd därför gärna programmet IETester.

Big jump och jQuery

Nicklas — Sun, 01 Feb 2009 10:45:07 +0000

Igår var det Chalmers Big Jump tävling där 10000 kr stod på spel. En förening på Chalmers hade byggt ett big jump hopp ner på campus från en hög ramp. Kolla in eventet här CBJO. Grabbarna gör med enkelhet volter och 720 snurrar på det, riktigt häftigt.

Förövrigt har jag också lagt till lite jQuery kod på min sida så att loggan tonar in på första sidan.

jQuery

$("#Logga_start a").fadeIn(2300);

CSS

display:none;

Video från 2008:

jQuery: Del 3 – Dragspel

Nicklas — Wed, 21 Jan 2009 16:42:28 +0000

På senaste tiden har jag pysslat en hel del med jQuery. I mitt förra tutorial utlovade jag ett enkelt och dynamiskt dragspel (eng. accordion).
Följande tutorial är ett bra alternativ till den som vill göra något snyggt utan att behöva överarbeta.

Dragspelet kommer att vara fullständigt justerbart (bakgrunderna på panelerna, typsnitt etc.).

Dragspel

Demo

Exempel_dragspel.

CSS

.dragspel {
font-weight: bold;
width:300px;
border-width: 1px;
border-style: solid;
border-color: #000;}
h1 {
background-color:#666;
margin:0px;
padding:4px;
font-size:16px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000;}
h1:first-child {
border-style: none;}
.aktiv {
background-color:#CCC}
p {
padding:20px;}

Förklaring

Jag väljer att skapa några klasser som ska styra utseendet på dragspelet.
classen .dragspel ska innehålla headings och p-taggar.
.aktiv kommer att ändra bakgrundsfärg på den flik som är aktiv.

HTML

H1

jQuery

$(document).ready(function(){
$(”.dragspel h1:first”).addClass(”aktiv”);
$(”.dragspel p:not(:first)”).hide();

$(”.dragspel h1″).click(function(){
$(this).next(”p”).slideToggle(”fast”)
.siblings(”p:visible”).slideUp(”slow”);
$(this).toggleClass(”aktiv”);
$(this).siblings(”h1″).removeClass(”aktiv”);
});
});

Förklaring

Vid initiering, övre delen: vi lägger på aktiv-classen på det första h1-elementet och gömmer alla p-element, förrutom det första!

Vid klick, undre delen: vid klick på ett h1-element som ligger i .dragspel ska nästa p-element (i förhållande till det h1-element som klickas) slideToggla, dvs åka upp om det är nere och vise versa. Övriga synliga p-element (siblings) ska glida uppåt (därmed stänga en flik).
Det klickade h1-elementet ska också Toggla classen aktiv, och därmed byta bakgrund. Classer på övriga (siblings) h1-element ska raderas.

Modifiering

Ändra bakgrund lätt genom att ändra bakgrunden för h1 och för aktiv.
Storleken på dragspelet justerar du genom att ändra på .dragspel.
Ändra animeringshastigheter genom att ändra på ”fast” och ”slow”. Andra inställningar är ”normal” eller antalet millisekunder som till exempel en sekund, 1000 (OBS! utan fnuttar).

Kommentarer

Att skriva kod ovan från scratch kan givetvis vara både svårt och förvirrande i början, men det släpper efter ett tag. Läs hur andra gjort och försök förstå koden!

jQuery: Del 2 – Inledning

Nicklas — Tue, 20 Jan 2009 20:49:40 +0000

I föregående del gjorde vi de förberedelser som krävs för att börja använda jQuery. Om du inte läst igenom det, gör det här.

I denna del ska jag gå igenom lite grundläggande kodsnuttar så att du får en smak av hur koden ska byggas. Det är inte svårt och det går snabbt eftersom det mesta redan är inbyggt i .js filen du länkat som source.

Från och med nu skall all kod placeras mellan kommentarsraderna i ditt dokument (om inget annat specificeras). Gör alla exempel genom att klistra in koden och ladda upp till din server, observera vad som händer och läs vidare. Detta för att du ska få lite känsla för jQuery.

Exempel 1 – meddelande

Demo

Exempel_1.

Kod

$(”a”).click(function(event){
alert(”Tack för ditt besök!”);
});

Vad händer?

a anger vilket objekt som ska påverkas av kod, i detta fall standardtaggen a (länk).
.click berättar att funktionen som följer exekveras vid musklick (på givet objekt).
alert är ett event som visar en ruta med texten Tack för ditt besök!.

Exempel 2 – lägg till class

Demo

Exempel_2.

Kod

Börja om på nytt, rensa innehållet mellan kommentarstaggarna i din jQuery-kod.

Infoga följande i -delen av ditt dokument (som en vanlig klass):

Infoga nu detta innanför kommentarstaggarna:

$(”a”).addClass(”fet_text”);

Vad händer?

Vi pekar på adressen/objektet a.
.fet_text fungerar som en vanlig class
addClass lägger till classen fet_text till alla a-taggar.

Exempel 3 – filtrera classer

Demo

Exempel_3.

Kod

Lägg in detta i jQuery:

$(”a”)
.filter(”.filter_1″)
.click(function(){
alert(”You are now leaving the site.”);
})
.end()
.filter(”.filter_2″)
.click(function(){
$(this).hide();
return false;
})
.end()

Byt länkarna i html-koden mot följande:

nthDesign
Google!

Vad händer?

Vi arbetar på alla a-taggar.
.filter väljer ut vilka classer vi kodar för.

Resterande kod fungerar ungefär som tidigare. Notera att koden är uppdelad i två delar, där vi först anger egenskaper för a-taggar med classen filter_1, avslutar med .end() och repeterar för classen filter_2.

Sammanfattningsvis

Nu har du förhoppningsvis fått lite kött på benen vad gäller jQ, …

I nästa del av min jQuery-serie kommer jag att visa ett mer avancerat tutorial. Vad sägs om ett dynamiskt dragspel (accordion) i AJAX?

Slut: Del 2 – inledande kodning

Fortsättning: Del 3 – dragspel

CSS: Numrerade listor

Nicklas — Sat, 17 Jan 2009 17:45:06 +0000

Att lista upp fakta är alltid nödvändigt, nu ska jag visa hur du kan göra det på ett snyggt sätt med hjälp av CSS.

En ordnad lista (OL) börjar som standard alltid på ett (1.) och fortsätter för varje listelement (LI) du lägger till. Med CSS kan du enkelt ändra färger, storlekar, typsnitt med mera, på dina listor. Detta är smidigt om du till exempel vill placera länkar på ett snyggt sätt.

Html

Jag väljer att använda mig av tre listelement innehållandes en textsnutt med paragrafclassen p. Detta för att jag ska kunna skilja stilen på siffrorna från stilen på texten.

Hela listan ska omslutas av en

Tre ägg

Två liter vetemjöl

Fyra deciliter mjölk

CSS – OL

Jag börjar med att välja stil för hela min lista genom att ändra på ol-classens parametrar mha CSS. Detta kommer att slå igenom både på siffrorna samt texten.

Notera att jag inte behöver göra punkter innan classen, eftersom att ol är en standardtagg, precis som ul, p, img, a etc.

ol {
font-family: Verdana, Geneva, sans-serif;
font-size: 1em;
font-style: italic;
font-weight: bold;
color: #6C0;
}

Ser ut enl. följande bild,

CSS – OL P

För att ändra på texten i min lista lägger jag till classen ol p.

När jag lägger till classparametrar för ol p ändrar dessa endast p-elementen som ligger i min ol-lista.

ol p {
font-family: Tahoma, Geneva, sans-serif;
font-size: 0.8em;
font-weight: bold;
color: #333;
font-style: normal;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0.2em;
margin-left: 0px;
}

Ser ut enl. följande bild,

Prova att ändra typsnitt, färger, utformning, marginaler med mera för att få till din egna stil.

Kuriosa: Jag har använt em som måttstock, detta eftersom att det är ett dynamiskt mått som anpassar sig efter typsnittets storlek. (em = bredden av ett m).