SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using block elements as links.

    I've had a bit of a search around and have found the thread regarding the W3c standards on not using inline elements (e.g. <a>) around block elements (e.g. <h2>, <p>) but it doesn't explain how one can get round the problem of not being 'allowed' to use a block element as a link.
    I have the following HTML code:
    Code:
    <div id="how">
    <a href="how.html">
    <h2>Heading</h2>
    <p>content</p>
    </a>
    </div>
    with the following css to style the 'box' created.
    Code:
    #how {
    width: 750px;
    border: 8px double blue;
    margin: 10px auto;
    padding-bottom: 10px;
    }
    #how p {
    padding: 0 10px;
    line-height: 1.2em;
    }
    This won't validate due to the <h2> and <p> tags being inside the <a> tag.

    Any thoughts as to how I can 'legally' achieve using the whole box as a link?

    A thought strikes me - should I be looking at the <button> tag?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    This is a tricky one. You can either take the JavaScript route (by making the h2 and p "clickable" and look like links - Gmail does this sort of thing extensively) or you can replace the H2 and P elements with SPANS that are given block display. The downside to the latter method is that it is less semantic.

    One other solution is to have something like this:
    HTML Code:
    <div>
      <h2>heading</h2>
      <p>content. <a href="how.html"><span>Plus a link to how.html</span></a></p>
    </div>
    Code CSS:
    div {
      position:relative;
      height:3em;
    }
    a {
      position:absolute;
      height:3em;
      width:100&#37;;
      top:0;
      left:0;
    }
    a span {display:none}
    You have your nice semantic content and then simply overlay a transparent anchor over it to make it all "clickable". This can cause issues in IE6, but there's a way to fix it (see solution to CSS Quiz no. 16, quiz B).
    A drawback is that it doesn't allow the text in the P or H2 to be selectable and that it may pllace constraints on styling, particularly cross-browser.

    Using the BUTTON element would be non-semantic and could cause other problems, so not a good idea.

  3. #3
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    div {
    	position: relative;
    	width: 200px;
    	height: 100px;
    }
    	div a {
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		text-indent: -9999px;
    	}
    Code HTML4Strict:
    <div>
      <h2>heading</h2>
      <p>content. <a href="how.html">Plus a link to how.html</a></p>
    </div>

  4. #4
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you both.

    A query to cooper.semantics: Why the text indent?

    And how do either solution work with screen readers? Ok, I know, go play and find out. But not needing a screenreader myself, although I always run my sites through Thunder, I find it difficult to understand how those with sight problems actually use them.

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you add an empty or non existent background-image represented by a space or a fake.gif you make IE paint the area transparent and then also hover over the div's text content:
    Code:
    div {
        position: relative;
        width: 200px;
        height: 100px;
    }
        div a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100&#37;;
            height: 100%;
            text-indent: -9999px;
            background:url(' ');  /* space empty ' ' or 'fake.gif' */
        }
    Happy ADD/ADHD with Asperger's

  6. #6
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    If you add an empty or non existent background-image represented by a space or a fake.gif you make IE paint the area transparent and then also hover over the div's text content:
    Code:
    div {
        position: relative;
        width: 200px;
        height: 100px;
    }
        div a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-indent: -9999px;
            background:url(' ');  /* space empty ' ' or 'fake.gif' */
        }
    Thanks, I had just been wondering about using a transparent image as the link. It could be coded outside of the block elements (<h2> & <p>) but within the containing <div> and fixed and sized within the <div> using absolute positioning. The title style can be used for screen-readers. Any thoughts anyone?

    I don't know if the following is for here or the CSS forum;
    If one sets height and width to inline elements is one not making them block elements? And is that 'allowed' by the W3c validation service?

  7. #7
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SRD View Post
    If one sets height and width to inline elements is one not making them block elements? And is that 'allowed' by the W3c validation service?
    Height and width of inline boxes are ignored, but if you change the generated box type to a block-level box you can set the dimensions of elements that are semantically inline, e.g.,
    Code CSS:
    a {display:block; width:10em}
    Some other properties will automatically convert the generated box type to block-level, e.g., float other than none, and position with the values absolute or fixed.

    It's 'allowed' to set those properties anyway, but it won't make any difference. It's like saying that snakes should have blue legs.
    Birnam wood is come to Dunsinane

  8. #8
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SRD View Post
    Thank you both.

    A query to cooper.semantics: Why the text indent?

    And how do either solution work with screen readers? Ok, I know, go play and find out. But not needing a screenreader myself, although I always run my sites through Thunder, I find it difficult to understand how those with sight problems actually use them.
    Using text-indent is screen reader friendly.

  9. #9
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    div {
    	position: relative;
    	width: 200px;
    	height: 100px;
    	border: 1px solid blue;
    }
    .parent { 
    	background: blue; 
    	color: #fff; 
    }
    	div a {
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		text-indent: -9999px;
    		background: url(" ");
    	}
    Code JavaScript:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    <script type="text/javascript">
    	$(function() {
    		$("div a").hover(
    			function() { $(this).parent().parent().addClass("parent"); },
    			function() { $("div").removeClass("parent"); }
    		);
    	});
    </script>
    Code HTML4Strict:
    <div>
    	<h2>heading</h2>
    	<p>content. <a href="how.html">Plus a link to how.html</a></p>
    </div>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •