Link Block


  • I don't know if there is a way to do this but if anyone has any ideas that would be great.


    Make the area that 'div - booknow' takes up, a link instead of the text 'Book Now' (in the blue box to the right).

    I would like customers to be able to click anywhere on the blue instead of just the text.

    Cheers, Ben

    • Edited by ViralStepUp Thursday, June 28, 2012 8:52 AM
    Thursday, June 28, 2012 8:50 AM


All replies

  • You need to style your link as a block. Heer's a simple example using an inline style. (Use a separate style in your style sheet)

    <a href="" style="display:block; width:150px; height:150px; background-color:blue; padding:20px;">
    Book Now<br><br>limited places

    Remove the divs and style the links as required.

    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web

    • Marked as answer by ViralStepUp Thursday, June 28, 2012 9:48 PM
    Thursday, June 28, 2012 12:18 PM
  • You've got some serious accessibility issues with that layout. This will happen any time that you put heights on text containers. In IE, select View|Text Size|Largest" and watch that blue box overflow its bounds. Even worse, in Firefox, select "View|Zoom|Zoom Text Only," then press "Ctrl-+" a few times and watch the whole layout go down the toilet.

    You cannot presume that your visitors will view your site at the same resolution you do. Unlike print, the Web is mutable, and vision-impaired users, and those using small, high-res screens, will make their displays more readable by increasing the size of their system fonts and/or by using their browser controls as described above, and you have NO control over that.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Thursday, June 28, 2012 9:26 PM
  • Thank you Ian,

    I used your idea partially as I didn't want to get rid of the div.

    Made an extra anchor with the same link outside and before the div - booknow.

    I styled it as display:block (answered my question) and moved it into the correct spot by using floats, margins, mimicking the shape of the div and using z-index's.

    Cheers, Ben

    Thursday, June 28, 2012 9:47 PM