CSS: Når list style type blir list style image
Eller kanskje enklere sagt, når man bytter ut den normale punktmerkingen (normalt kuler eller firkanter) med punktmerking ved bilder. Dette gjør mange ganger at innholdet både virker mer livaktig, mer profesjonelt og kanskje også mer interessant…
Dette er i prinsippet ganske grunnleggende css, men det er mange hobby css-brukere der ute (som meg) som bare har lært seg bits and pieces av hva css kan gjøre for oss. En innføring av list style image (som punktmerking ved bilder kalles på css-språket) kan endre inntrykket dine besøkende får av nettsiden eller bloggen din i positiv retning.
Så, hva gjør man for å fikse dette hvis det er så enkelt? Vel, det første du gjør er nødvendigvis å finne bildet du ønsker å erstatte punktmerkingen med. Det finnes mange slike ute på nettet, men her kan vi eksempelvis bruke dette: 
Når du har lagret bildet på din maskin, og lastet dette opp til ønsket sted på serveren til hjemmesiden din, er neste skritt å legge inn css-koden. Dette kan gjøres i HEAD-seksjonen i html-dokumentet som representerer nettsiden du ønsker å bruke bilde punktmerking, eller i et eksternt css style sheet som det linkes til i det aktuelle html-dokumentet. Følgende kode legges inn:
#listebilde { list-style-image: url(UrlTilDittBilde); }UrlTilDittBilde betyr nettadressen adressen til stedet du har lagret bildet ditt, enten det er lokalt på nettsidens egen server eller på en ekstern server som du må linke til.
Når du har gjort dette kan du velge når du har tenkt å bruke bilde for punktmerking. Det er kanskje ikke alltid du ønsker å benytte det, eller kanskje du ønsker å bruke forkjellige bildepunktmerkinger til forskjellige anledninger. Hvis det siste er tilfellet, er det bare å legge inn samme kode under forrige css-koden, forandre UrlTilDittBilde til å passe adressen til det nye bildet, samt å endre identifikatoren #listebilde til noe annet (eksempelvis #listebilde2 ). Hvis du har tenkt å bruke bilde som punktmerking i en liste gjør du imidlertid følgende:
<ul id="listebilde">
<li>ListeInnhold1</li>
<li>ListeInnhold2</li>
<li>Osv...</li>
</ul>Som du ser har jeg satt < ul >, som er indikatoren på at jeg ønsker å lage en unumrert liste, til å kalle på indikatoren listebilde, og da hentes opplysninger frem om at jeg ønsker å bruke mitt valgte bilde som punktmerking i stedet for den normale punktmerkingen.
Til slutt skal jeg kort vise forskjellen mellom vanlig bruk av punktmerking og punktmerking ved bruk av egenvalgt bilde:
- Slik det det ut med vanlig punktmerking…
- …og slik ser det ut når man bruker det valgte bildet til punktmerking
Grad av popularitet: 15% [?]
|
Skriv ut artikkelen
rss eller 
e-post. Ellers må du gjerne ta en titt innom bloggens eget arkiv hvor du finner en oversikt over alle posterte innlegg.
Hvis du har noen synspunkter, tips eller generelt bare vil si hei, kan du gjøre det via bloggens kontaktskjema eller legge igjen en kommentar, så skal jeg svare deg så raskt jeg kan.
I tillegg til denne bloggen skriver jeg også jevnlig for Win-XP.no, hvor jeg også sitter i redaksjonen. Du kan også finne spor etter meg på ITavisens blogg, ITbloggen, samt ITpro.no hvor jeg har skrevet en rekke innlegg, noe jeg også fortsatt gjør fra tid til annen.
- Leif
