Monday, July 25, 2005

Adorning links in HTML with images

Not really linux - more HTML+CSS stuff :-) I always wondered if it would be too painful to get images next to links like the way they have in some wikis. Seems for every HTML problem, there's a CSS solution lurking, just waiting to jump out :-) You need to do something like this:
<style>
.whatever {
background-color: transparent;
background-image: url(imgfilename);
background-attachment: scroll;
background-repeat: no-repeat;
/* Change following to 'right' instead of 'left' if you need it right aligned. */
background-position: left;
/* Change following to 'right' instead of 'left' if you need it right aligned. */
padding-left: 18px;
}
</style>
<body>
... Testing <a class="whatever" href="...">links</a>
</body>

I'll probably separate out the HTML stuff from this blog if there are too many of these HTML tips.

No comments: