2 replies [Last post]
demiurgen
Offline
Enthusiast
Last seen: 2 years 28 weeks ago
Timezone: GMT+2
Joined: 2005-04-13
Posts: 55
Points: 11

i have just started to learn about css... but now i am sort of stuck...

i have a logo in my top left corner
with <img> i can simply put a href inside and the logo is a link...

with css i found it to be a bit harder and a bit more code - and thats what i am trying to avoid.

do i really have to make for example all of this just to get a link on a picture??
#logo
bla bla bla...
#logo a
bla bla bla
#logo a:link, #logo a:active etc. etc.
link to logo.gif

if anyone knows please help me. as i said i am a newbie so i guess there is a very simple way to make a picture a link with css

crenner
Offline
Regular
Last seen: 13 years 23 weeks ago
Timezone: GMT-4
Joined: 2005-03-05
Posts: 34
Points: 0

&lt;img&gt; vs css

You can't include an a href="http..." inside a css file, if that's what you're asking. The old way you mentioned, using <a><img /></a> still works fine, but if you're using css to display the image as a background, then you'll need to create a link within the page and use css to give it that background image.

An example:

XHTML:
<a href="index.html" class="logoLink"><span>ABC Corp.</span></a>

CSS:

a.logoLink {
  display: block;
  width: width of image;
  height: height of image;
  background: url(logo.jpg);
}

a.logoLink span {
  display: none;
}

So, you use display: block and height, width to cause the entire area to be linked instead of just the words, then use the span display: none to disappear the words. This method has the added benefit of displaying to search engines or screen-readers as regular linked text (which google may pay more attention to than alt tags).

This is by no means the only only way to do it, and depending on your needs, maybe not even the best. I recommend you look at some pages that do similar things and examine their techniques. Try http://www.happycog.com/ or http://www.mezzoblue.com/, both of which use css to create linked images. My old site (still at http://rserv.info/mountainvalley) used this same technique: put a class in the link, use css for the image and link size, then use a span to hide the text. (not to put myself on the same level as zeldman and dave shea, but it's a clear example)

demiurgen
Offline
Enthusiast
Last seen: 2 years 28 weeks ago
Timezone: GMT+2
Joined: 2005-04-13
Posts: 55
Points: 11

&lt;img&gt; vs css

thanx!!!
that's much less code!
however, it is still a bit more code than the i am used to with regular html, but i guess i shouldn't complain
Laughing out loud