The concept of grouping a collection of containers and applying a link to them all sounds easy. But in the sometimes frustrating world of web development, it still poses one of the most complicated scenarios. The core of the problem is that links are inline elements and containers are block elements - both go together about as well as water and electricity combined. Nesting multiple block elements inside a link simply doesn't work - both in regards to browser compatibility and validation. Javascript offers one solution to the age-old problem, but it is not a particularly pretty or flexible method (you can't provide attributes with links).

LinkBox is a stack which makes it possible to have multiple stack elements act as a link. Although this is a very simple idea, it has proven against competing stacks to be the most flexible and reliable method available to date.

Example

The entire block of text and the image below is set as a link through to www.google.com.


Setup

  1. Once installed, drag and drop a LinkBox stack into your page
  2. Within the placeholder shown, drag and drop in all the stacks and content you want to comprise of your link
  3. In the stack settings, specify a link for the LinkBox. Clicking the browse button opens the standard link dialogue window in RapidWeaver, where you can choose a page, resource or URL as a link. Optionally, other attributes like REL, title or classes can be applied to the link as well.
Note You can use an unlimited number of LinkBox stacks on the same page. The link overlay has a z-index of 100 applied - which should be enough to sit on top of most content types, without interfering with lightboxes.


Source Code

This is the source code you can use to create your own LinkBox containers in non-stack pages. In the code, the Hello World text should be replaced with your block containers:

<div class="linkBox">
<div class="linkBoxContent">Hello World!</div>
<div class="linkBoxLink"><a href="http://www.example.com/"></a></div>
</div>
This is the CSS code used to style the LinkBox, adjust the layering and stretch the link to fill the LinkBox container:

.linkBox {
display: block;
position: relative;
z-index: 1;
}

.linkBoxContent {
position: relative;
display: block;
z-index: 2;
}

.linkBoxLink a {
position: absolute;
top: 0;
left: 0;
display: block;
height: 100%;
width: 100%;
z-index: 100;
}
@import((Code Snippets))
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.