Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Div be a link 1

Status
Not open for further replies.

zbphill

Technical User
Jan 30, 2007
40
US
Is there a way to make a div a link.
I want a picture in the background with text over the picture and you rollover or click on the picture.

Thanks
 
Code:
<div style="yourstyle"><a href="URL"><img src="Img" /></a></div>
 
not quite;

Code:
<div style="yourstyle"><a [red][b]style="display:block" [/b][/red] href="URL"><img src="Img" /></a></div>
You have to make the anchor display as a block element to fill the div

Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
People Counting Systems

So long, and thanks for all the fish.
 
All though re reading it....
Code:
yourstyle { background-image: url(image.jpg); }

<div style="yourstyle"><a style="display:block"  href="URL">Text Here</a></div>

May be more of what he's looking for.
 
Here is what I was thinking, Is with the div had a picture for a background, with type over it. and div is the link.


<html xmlns="
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
#box{ width: 100px; height: 100px; background-image: url(MyImage.jpg); border: 1px solid black;}
.type {color: #5b5b5b; font-size: 11px; font-family: verdana; display: block;}
</style>
</head>

<body>
<div id="box"><a href="#" class="type">Click Here</a></div>
</body>

</html>
 
Actually, you don't even need the div.
Code:
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <style type="text/css">
        #box{ width: 100px; height: 100px; background-image: url(MyImage.jpg); border: 1px solid black; color: #5b5b5b; font-size: 11px; font-family: verdana; display: block;}
        </style>
    </head>

    <body>
        <a href="#" id="box">Click Here</a>
    </body>

</html>
 
That is what I was looking for Vragabond, Thanks
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top