Making a set of nested div’s clickable like a link or href element

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.

You can see a working test demo of the preview here.

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!

View the test and view source to see the code.

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>

Be Sociable, Share!

• 

Related posts:

1. Layout Generator The CSS Layout generator generates tableless CSS only layouts or grids that have A-grade browser support. Unlike Yahoo Grids it...
2. Widgetized headers and footers? Dynamic (widgetized) Sidebars are great, but would you not like to have a dynamic header and footer in your theme...