homepage Welcome to WebmasterWorld Guest from 23.23.12.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Box as URL
Text container entirely as a link
Alano



 
Msg#: 4636151 posted 12:07 pm on Jan 9, 2014 (gmt 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

 

benihana

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4636151 posted 12:16 pm on Jan 9, 2014 (gmt 0)

can you post a markup sample?

graeme_p

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4636151 posted 12:25 pm on Jan 9, 2014 (gmt 0)

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.

benihana

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4636151 posted 1:32 pm on Jan 9, 2014 (gmt 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;
}

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4636151 posted 2:53 pm on Jan 9, 2014 (gmt 0)

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

<a><div></div></a>

benihana

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4636151 posted 4:06 pm on Jan 9, 2014 (gmt 0)

but there is very rarely a need to.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4636151 posted 7:38 pm on Jan 9, 2014 (gmt 0)

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.

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4636151 posted 4:21 am on Jan 10, 2014 (gmt 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.

benihana

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4636151 posted 10:14 am on Jan 10, 2014 (gmt 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.

Alano



 
Msg#: 4636151 posted 10:54 am on Jan 13, 2014 (gmt 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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved