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 treated as inline elements and containers are block elements. Nesting block elements inside a link simply does not work. The completed webpage will fail HTML validation / accessibility tests and there is a good chance the page layout will be totally broken in some web browsers.

LinkBox is a stack which makes it possible to have one or more 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. For example, LinkBox not only allows you to apply a simple weblink to your content, but you can also add additional attributes to the link; which are useful for using LinkBox in conjunction with other stacks like TopBox.

Example

The entire block of text and the image below is set as a link through to www.example.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="https://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;
}
 

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.