Links on divs with backgrounds

[MrBaseball34]

I have a few divs, setup this way:

div#AMLLogo {
  background:url(AMLsmall.gif) no-repeat center;
  width: 79px;
  height:100px;
  position:absolute;
  left: 90%;
  top: 2px;
}

div#BRLogo {
  background:url(BRsmall.gif) no-repeat center;
  width: 90px;
  height:100px;
  position:absolute;
  left: 81%;
  top: 2px;
}

div#LLLogo {
  background:url(LLsmall.gif) no-repeat center;
  width: 72px;
  height:100px;
  position:absolute;
  left: 73%;
  top: 2px;
}

in the HTML:

     
<div id="header">
  <div id="AMBLLogo"></div>
  <div id="LLLogo"></div>
  <div id="BRLogo"></div>
  <div id="AMLLogo"></div>
</div>

How could I make the LLLogo, BRLogo, and AMLLogo have clickable links?
I've tried a span with an anchor but it doesn't work.

[Centauri]

Instead of using unnecessary divs, style the links themselves. I would also advise against the absolute positioning, especially when combining fixed pixel sizes (the link size0 and percentages (the location) as this can cause overlap at different screen sizes - try floating them right (that seems to be where you want them)

<div id="header">
  <a href="#" id="AMLLogo">AM link</a>
  <a href="#" id="BRLogo">BR link</a>
  <a href="#" id="LLLogo">LL link</a>
</div>

#header a {
	float: right;
	height: 100px;
	margin: 2px;
	background-position: center;
	background-repeat: no-repeat;
	font-size: 1px;
	color: #FFFFFF;
}
#AMLLogo {
	background-image: url(AMLsmall.gif);
	width: 79px;
}
#BRLogo {
	background-image: url(BRsmall.gif);
	width: 90px;
}
#LLLogo {
	background-image: url(LLsmall.gif);
	width: 72px;
}

[MrBaseball34]

I can't float it right because it is dynamic. here is the link to the page:
http://www.theshipmanfamily.com/2005/index.html

I want the links on the images at the top right.

The logo on the left will be replaced. I am modifying this
site for another league.

Is there a way to combine them into one image and then
use an image map, yet still have it as a background image of a DIV? I can see the images begin to overlap when I resize
< 1032 px.

Any other ideas?

[Centauri]

I can't float it right because it is dynamic.

Not sure what you mean here - if you can position, why not float?

I want the links on the images at the top right.

Floating achieves that quite easily

Is there a way to combine them into one image and then
use an image map, yet still have it as a background image of a DIV?

An image map is not a good idea as the links within are innaccessible to various non-visual browsers. Best to keep the link explicity associated with the graphic.

PS: I tried pasting my code above into your page and it works fine.

[MrBaseball34]

Thanks. I finally got it working correctly.

[Centauri]

Very good - except the links are not valid - the url must contain the full http syntax otherwise it references to your site

<div id="header">
        <a href="http://www.baseball.legion.org/" id="AMLLogo">AM link</a>
        <a href="http://www.baberuthleague.org/" id="BRLogo">BR link</a>
        <a href="http://www.littleleague.org/" id="LLLogo">LL link</a>
        <a href="http://www.crnorthhampton.com/" id="CRNHLogo">AM link</a>
      </div>