The need: make a set of nested div’s clickable, like one big image
The Auto CSS Layout generator has preview pages. In these we wanted the real html templates and the real tableless CSS required for each particular layout to be used, rather than screen dumps. this seemed like a more ethical approach and also allowed one to “test” all the layouts in one go. We also wanted the user to be able to “click’ on the preview to choose the layout style, just like a normal link.
The problem: Link elements are empty
However we had no images to use and a link element is by definition empty – it may not contain div’s – let alone a set of nested divs.
The problem2: No content
In a multi layout situation, we did not want the screen to be too busy, so we did not want superfluous “content” for our clickable links.
The answer: Clickable space links that are displayed as blocks
Since some “content” is needed to make sure that the div’s do not collapse, we use the old space ” ” – in each div that needed content. We made each space a link to the same “chosen layout” page. In the CSS we then made the links in the nested div’s display as block elements and that seemed to do the trick!
css:
div.container a {display: block; text-decoration: none;}
html:
<div class="container">
<div class="header">
<a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
title="The header or branding div" > </a>
</div>
<div class="wrapper">
<div class="content">
<a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
title="The content div"> </a>
</div>
</div>
<div class="nav"><a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
title="The navigation div"> </a></div>
<div class="extra"><a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
title="The extra or sidebar div"> </a></div>
<div class="footer"><a href="http://www.webdesign.anmari.com/web-tools/layout-generator/"
title="The footer div"> </a></div>
</div>