SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
Thread: Using block elements as links.
-
Mar 17, 2009, 15:59 #1
- 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>
Code:#how { width: 750px; border: 8px double blue; margin: 10px auto; padding-bottom: 10px; } #how p { padding: 0 10px; line-height: 1.2em; }
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?
-
Mar 17, 2009, 17:02 #2
- 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%; top:0; left:0; } a span {display:none}
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.
-
Mar 17, 2009, 19:28 #3
- 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>
-
Mar 18, 2009, 02:24 #4
- 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.
-
Mar 18, 2009, 02:51 #5
- 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%; height: 100%; text-indent: -9999px; background:url(' '); /* space empty ' ' or 'fake.gif' */ }
Happy ADD/ADHD with Asperger's
-
Mar 18, 2009, 04:35 #6
- Join Date
- Sep 2007
- Location
- Wiltshire, UK.
- Posts
- 106
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Mar 18, 2009, 05:26 #7
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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}
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
-
Mar 18, 2009, 09:06 #8
- Join Date
- Jul 2008
- Location
- New York, NY
- Posts
- 1,432
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Mar 18, 2009, 10:10 #9
- 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