using an image as a link using CSS 1

[jakeyg]

I'm trying to use CSS to it's fullest as everyone keeps telling me to ;-)

I've got a menu on the left with 5 buttons in a vertical block, with an image in the background of each "cell". The text in each "cell" acts as the hyperlink at the moment, but i want the whole "cell" to act as the hyperlink.

The CSS is
#menuitem{
position:absolute;
background: url(egg2.jpg);
}

the html is
<div id="menuitem">
<a href="

http://www.hello.com/">

Home </a>
</div>

If anybody can point me in the direction of a sample page or can tell me how to do this, that'ld be lovely

thanks

 

[jemminger]

try

#menuitem{
position:absolute;
background: url(egg2.jpg);
}
#menuitem a {
width:100%;
}

not sure if position:absolute is necessary in your #menuitem, or if it will result in some wackiness with a being width:100%

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[rpgfan3233]

Might want to add "display: block" to the '#menuitem a' declaration. This will allow for the entire image to be the link, though without some sort of positioning (absolute positioning, floats, et cetera) it will just look like this if you add the "display: block" -
Link 1
Link 2
Link 3
etc.

Be careful with it. ;-)

 

[ChrisHunt]

What's the [tt]position:absolute[/tt] in there for? It doesn't seem to serve any purpose. Is the "image in the background of each cell" the same for all options, or different for each? Assuming it's the same, this his how I'd do it:

First the HTML:

<ul id="menu">
<li><a href="somepage.htm">Option 1</a></li>
<li><a href="otherpage.htm">Option 2</a></li>
<li><a href="another.htm">Option 3</a></li>
</ul>

then the CSS:

ul#menu {
   list-style: none;
   margin: 0;
   padding: 0;
}

#menu li {
   list-style: none;
   padding: 0;
   margin: 0;
}

#menu a {
   display: block;
   text-align: center;
   text-decoration: none;
   background: #ccc url(egg2.jpg) no-repeat;
}

Note that I've given the links a background colour as well as the image, for use when images are switched off. You should pick a colour similar to that of your image.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[jakeyg]

the position:absolute is there cause it was in the sample i nicked the code from

a few mods to make the link area a but bigger and that's got it nicely cheerz