CSS link from image
Posted: Thu Mar 06, 2008 7:48 pm
Hi, just a quick quest to see if anyone knows the best way to add a link to a static image through css.
the html code is:
and my css code is
Would i be best changing this to a table? That way the images could be used as links?
cheers
stu
the html code is:
Code: Select all
<div id="colorButtons">
<p class="p1"><span></span></p>
<p class="p2"><span></span></p>
<p class="p3"><span></span></p>
</div>Code: Select all
#colorButtons {
height:92px;
width:780px;
background-color:#FFF;
position:relative;
}
#colorButtons p {
margin:0;
padding:0;
}
#colorButtons .p1 {
position:absolute;
top:0;
left:0;
width:260px;
height:92px;
background:#FFF url(images/button_orange.gif) no-repeat top left;
}
#colorButtons .p1 span { display:none; }
#colorButtons .p2 {
position:absolute;
top:0;
left:260px;
width:260px;
height:92px;
background:#FFF url(images/button_green.gif) no-repeat top left;
overflow:hidden;
}
#colorButtons .p2 span {
visibility:hidden;
white-space:nowrap;
}
#colorButtons .p3 {
position:absolute;
top:0;
left:520px;
width:260px;
height:92px;
background:#FFF url(images/button_blue.gif) no-repeat top left;
overflow:hidden;
}
cheers
stu