Sæt billeder eller tegn på automatisk før eller efter tekst på din hjemmesid
Sat på siden 11-09-2003
Som du nok er ved at få indtryk af, så holder jeg af at finde metoder, der gør tingene nemmere eller hurtigere. På den måde kan jeg bruge min tid til ting, der virkelig interesserer mig.
Det gælder selvfølgelig også, når jeg laver eller vedligeholder hjemmesider. Jo mere, der kan automatiseres, desto bedre.
Hvis du fx ofte sætter en tekst på din hjemmeside, hvor du har det samme billede og/eller tegn før og/eller efter teksten, så er her lige et tip for dig. Dette kan nemlig automatisere jobbet, og minimere dit arbejde.
Skriver du fx ofte "Tip!" og har en lille el-pære forrest, så er det et større arbejde hver gang at skulle indsætte billedet og skrive et udråbstegn efter. HTML-koden kommer til at se sådan ud:
(få evt. tilsendt mit temmelig gamle kursus i HTML helt gratis ved at sende en mail til britt@malka.it?subject=html-kursus)
<img src="images/elpaere.gif" alt="tips">Tips!
I stedet for at skrive koden hver gang - eller klikke dig igennem den i et WYSIWYG hjemmesideprogram - kan du oprette et stylesheet én gang for alle og så henvise til dette, hver gang du vil have en el-pære foran en sætning og et udråbstegn efter.
Tips!
I Stylesheetet kan du lave en ny klasse (class) ved navn tips, og du behøver blot at skrive:
.tips:before
{content:url(images/elpaere.gif)}
.tips:after
{content:"!"}
Når du skal bruge din automatiske pære og udråbstegn, er det nok at ændre en smule på den html-kode, du ellers ville bruge, hvis du ikke skulle have tilføjet disse to ting.
Normalt:
<p>Tips</p>
Med pære og !:
<p class="tips">Tips</p>
Husk,
at du kan læse om, hvordan du forbinder din hjemmeside med stylesheetet i dette
tip: www.tips-og-tricks.com/redirect?tip=2
Smart, ikke? Dette er godkendt CSS (se www.w3.org), men desværre virker det ikke på alle
browsere. Sådan er det jo altid. De, som overholder reglerne, der er udstukket
af W3C (mere om dem i en anden mail), er: Netscape 6 og højere, Opera 6 og
højere og Mozilla. Internet Explorer kan ikke læse denne kode, men der sker ikke
det store ved det. Dine gæster, der bruger denne browser, vil bare se teksten,
fx "Tips" i stedet for el-pæren og udråbstegnet efter
teksten.
Se her, om din browser overholder standarden. Det gør den, hvis du kan se pæren og udråbstegnet.
Tips