CSS: Flyte blokk-elementer uten clearfix

Unngå bruk av ekstra HTML-kode for å få blokk-elementer til å strekke seg rundt blokk-elementer inni seg selv, hvor blokk-elementene på innsiden flyter, ved en enkel regel i stilarket (CSS-filen). Jeg har tidligere brukt noe sånt som dette

<div class="clearBoth"></div>

hver gang jeg har blokk-elementer som flyter inni et annet blokk-element. Men ved bruk av :after

:after { content: "."; display: block; height: 1%; clear: both; visibility: hidden; }

er dette en saga blott! Oppdatert: Dette virker til og med i IE 6 :) (iallefalll i min multiple IP IE 6)

Her er et lite eksempel

20 CSS finurligheter du garantert kan

webhostingsearch.com har en artikkel som beskriver 20 CSS "short hands" teknikker du vil elske. Vel, alle er ikke CSS forkortelser, og de fleste er selvølgeligheter. Men har du, som meg, gullfiskhukommelse, og har vært borte fra HTML og CSS en liten stund, er det kanskje en grei liste å ha. Du finner CSS forkortelsene her.

Flytende bilder

Unstoppable Robot Ninja har laget en metode for å få til variabel bildestørrelse. Fancy metode for å unngå at bilder går over sine bredder :)

Alterner bakgrunnsfarge i tabell med jQuery

Med noen ytterst få linjer kan man få alternerende farger på rader i en tabell. Det eneste man trenger er en tabell med en klasse som inneholder mer enn en rad (ellers vil det være meningsløst i de fleste tilfeller med alterende farger), inkludering av jquery, og en liten kodesnutt. La oss se på tabellen først:

CSS tooltip tegneserieboble uten grafikk

filamentgroup.com har en artikkel på hvordan en kan bruke CSS til å lage en tooltip boks formet som en snakkeboble men uten bruk av grafikk. Fantastisk smart syns nå jeg :) Ved å bruke denne koden:

div {
   width:0;
   height:0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   border-top: 30px solid red;
   border-bottom: 0;
}

lager du en trekant. Snedig :)

En liten huskelapp til meg selv

All in the head har en liten post om supersleight, et jQuery plugin for å fikse gjennomsiktig png i IE 6. Har ikke testet denne ut, men må huske å gjøre det snart, så derfor poster jeg linken her :) Supersleight - for gjennomsiktig png i IE 6.

En footer i bunn

For å få en footer til å holde seg i bunnen av en side selv om det er lite innhold på siden, og samtidig få den til å forskyve seg når det er mye innhold på siden har krevd offring av levende geiter for å virke i alle de store nettleserne. Nå har Stickyfooter.com kommet med en mye mer human løsning som kun krever noen få linjer html og css. Sjekk ut hvordan du kan få en stickyfooter her!

Ramme på tr-elementer i IE med CSS

Den eneste måten jeg har klart å få ramme rundt tr-elementer i IE er å lure det til med å sette border-collapse på tabellen, og så sette ramme på td (og ev. th) elementene.

table { border-collapse: collapse; }
table th { border-bottom: 1px solid #e9e9e9; }
table td { border-bottom: 1px solid #e9e9e9; }

Ved å sette border-collapse: collapse vil td- og th-elementene se sømløse ut, og på den måten vil det se ut som om at det er tr-elementet som har ramme.

test

Sette stiler på linker

Det å sette stiler på linker skulle være en grei og rett frem sak å gjøre i CSS, og det er det jo i og for seg så lenge man skriver :link :hover :active og :visited i riktig rekkefølge. Problemet ligger i at prioritet på stiler i CSS bestemmes av graden av spesifikasjon. Jo mer en regel er spesifisert, jo høyere prioritet har den.

For eksempel:

1. p { color: red; font-size: 75%; }
2. p.velgmeg { color: blue; font-size: 100%; }

Her vil enhver paragraf som er satt til klassen velgmeg ha blå skrift i 100% størrelse mens paragrafer uten spesifisert klasse velgmeg vil få rød tekstfarge og en fontstørrelse på 75%.

Dette får konsekvenser for når vi skal sette stiler på linker hvor a:link, a:hover, a:visited og a:active har samme grad av spesifikasjon, og dermed vil siste regel i CSS-filen bli den som nettleseren følger.