Welcome to WebmasterWorld Guest from 54.226.22.192

Forum Moderators: not2easy

Message Too Old, No Replies

Box as URL

Text container entirely as a link

     
12:07 pm on Jan 9, 2014 (gmt 0)

New User

joined:May 23, 2013
posts: 7
votes: 0


Hi all,

I am developing my first web site. Within the main page I have three boxes containing text describing what services we aim to provide and each box has a background image. I want to have the entire box as a link to another page. How do I acheive this?

Thanks in advance

Regards

Alano
12:16 pm on Jan 9, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts: 1240
votes: 0


can you post a markup sample?
12:25 pm on Jan 9, 2014 (gmt 0)

Senior Member from LK 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 16, 2005
posts:2477
votes: 30


Put the image in the foreground, and put the text above it - put the text in the same div as the image, relatively position that div, and wrap an absolutely positioned div around the text.
1:32 pm on Jan 9, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts: 1240
votes: 0


or something like - CSS:

a {
display:block;
border:1px solid #333;
padding:12px 24px; /* top-bottom left-right */
background:#fff url(background.jpg) top left no-repeat;
}
2:53 pm on Jan 9, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


You can now wrap any(?) element in an anchor tag now.

<a><div></div></a>
4:06 pm on Jan 9, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts: 1240
votes: 0


but there is very rarely a need to.
7:38 pm on Jan 9, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13000
votes: 289


You can now wrap any(?) element in an anchor tag now.

Mechanically it's been possible for a long time-- that is, browsers will render the link as intended. I remember seeing it in a document made in 2011 with an XHTML DTD.

:: detour to dig up archived copy ::

Yup, <div>s inside the <a>. The difference is that the html (5) validator doesn't kick up a fuss if you treat <a> as anything other than an inline element.
4:21 am on Jan 10, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


@benihana I wouldn't say that. Take what we have in a menu where an image of a person on the left and their description on the right but you want the whole thing to link to their bio and you want anyone to click anywhere on that element to do so. Wrapping the whole thing in an anchor is easy.
10:14 am on Jan 10, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 13, 2003
posts: 1240
votes: 0


@drhowarddrfine personally id approach something like:

<li>
<p>
<a>
<img>
</a>
</p>
</li>

I guess i meant there isn't often a need to wrap a <div> specifically in an <a>, but I see your point.
10:54 am on Jan 13, 2014 (gmt 0)

New User

joined:May 23, 2013
posts: 7
votes: 0


Thanks everyone, some useful responses. Benihana I have attempted this the way you have advised and it works. However, one strange thing happens. The text in the box has a header and then a list of bullet list but the space between the header and the bullet list is NOT a hyperlink, but the rest of the box is. What am I doing wrong please?
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members