I started this morning learning something I should have known for ages. I have been coding HTML for well over a decade, and CSS for nearly a decade. I have even taught HTML and CSS both at the University of Bergen and for student groups at Bergen University College.
Of course, that’s no guarantee of how much I actually know about the subject, but I think I have a pretty good knowledge of HTML and CSS. Even then, how position:relative actually works has managed to slip completely under my radar. I find this rather embarrassing, but I write about it here, because if I haven’t managed to get this before now, there is probably several other webdevelopers that also don’t know this (I hope).
The functionality of position:relative is not complicated, it’s actually very simple, you just have to know this.
Read the rest of this entry »
De observante der ute (og som ikke bare leser bloggen min fra rss-leseren sin) kan ha oppdaget at merkelappene på bloggpostene har fått et nytt utseende.
Det begynte egentlig med at jeg så på en post jeg hadde skrevet og tenkte “Hm, de taggene der ser ikke ut som om de egentlig hører hjemme der”. Videre tenkte jeg, hva skal jeg gjøre for å få dem mer inn i det visuelle uttrykket på bloggen. Det hadde vært fint med noen bilder, men da må jeg vedlikeholde en haug med bilder for alle taggene. Det har jeg forsøkt før, da bare for kategoriene, og det er nesten ti ganger så mange tagger som kategoriene.
Hva om jeg kunne lage en bakgrunn som fikk merkelappene til å se mer ut som merkelapper? Vel.. min assosiasjon til merkelapper i denne sammenhengen er slike brune lapper som brukes på postsekker. Jeg kunne alltids lage en bakgrunn som så slik ut, men jeg syntes det ville være rart om de bare gikk rett horisontalt.
Her kommer vi til en av de tingene som jeg har savnet i CSS. En mulighet til å rotere objekter.
Velvel. vi kan jo alltids generere bilder på serveren, og bruke det… Og det var akkurat det jeg endte opp med også. Ikke bare får jeg da generert merkelappene slik jeg vil ha dem, men jeg kan velge den fonten jeg vil ha også, selv om webfonts ikke er støttet i nettleserene enda.
Resultatet er merkelappene nedenfor, og php-koden som genererer dem finner du her
Og her er det jeg brukte for å putte det inn i wordpress-temaet
Foilsett med notater til CSS-foredraget avholdt for Bergen Teknikersamfund 2. Februar 2009 er tilgjengelig her.
Jeg glemte å nevne hvordan en faktisk kobler sammen stilarket og html-dokumentet. En kan enten putte stilarket i head-delen av HTML-dokumentet, inni en <style> blokk.
For eksempel:
<style type="text/css">
a {
text-decoration:none;
color:#FF0000;
}
</style>
Eller, dere kan (helst) ha stilarket i en fil, da refererer dere til stilarket med en tag som denne:
<link rel="stylesheet" type="text/css" href="adresse til stilarket">
Sett inn adressen til stilarket der det står adresse til stilarket.
Til dere som lurte på hvilken editor jeg brukte på mandag: Editoren jeg brukte heter Komodo Edit eller Open Komodo, og er tilgjengelig for Mac, Linux og Windows
Lykke til.
Foilsett med notater til HTML-foredraget avholdt for Bergen Teknikersamfund 19. januar 2009 er tilgjengelig her.
I just discovered this fine article series on CSS positioning via del.icio.us. It should be a good read for everyone interested in the subject, from total CSS newbies to people that has a great understanding of CSS already.
- Part 1 – Covers “display” and “position”
- Part 2 – Covers more “display”, “overflow” and “float/clear”
- Part 3 – some CSS3 stuff…
Kevin Gerich have released another set of nice widgets for Mozilla. It is a continued version of the last set, wich now also has radio-buttons and checkboxes in mac-style.
If you have a mac, grab them at his blog
I have made a modified version of the previous set of widgets for Linux, and I will try to make a linux-set of these too, and publish them here (if I’m allowed to to so)
Kevin Gerich have posted a custom stylesheet for content in Mozilla firefox (known as chrome/userContent.css. It looks really neat, its made for MacOSX (those spoiled mac-users) but works on Linux too. I have not tested it on Windows.
There is one thing wrong with it when you uses it on Linux, the focus rings is in black and are annoyingly bold. I will maybe create a modified version of it where this is fixed.
meanwhile, get the stylesheet at Kevins blog
I have been struggling against one big problem the last few weeks: how do I get things vertically aligned to middle?. It turns out that the css-property vertical-align works in all browsers except Mozilla Firefox. Even IE does this right, but mozilla doesnt seem to understand it at all…
For de som har lyst til å lese W3C sine spesifikasjoner av HTML, CSS og XHTML finner dere dem her:
Save on delicious
