Mon, 2004-07-19 16:43
Hi guys,
I am currently building a web site based on this design:
I am building it in transitional XHTML 1.0 and am looking to make it validate however I have come up against a problem.
If you look at the design you will see a list of new stories. My desire is that as you roll over each news story block it is clickable taking you to the story itself.
I have done this with the following code:
<a href="#">
<div>
<h4>Accessibility vs design</h4>
<p>Do accessible web sites have to look ugly as so many web designers claim?</p>
</div>
</a>
The problem is that this won't validate because you cant have any block level items within a href tag.
I have two choices as far as I can see it.
1. I can change the div, h4, and P tags to spans but then the whole thing runs together and looks a mess if it is viewed in a non css browser
2. I can remove the a href and wrap it around the individual items. However if you look at my mockup you will see that this will mean if the user rolls over the icon next to a story or the background it wont appear as a link.
Any bright ideas?
Thanks,
Paul
Mon, 2004-07-19 23:11
#1
Block level tags with a HREF
Hi boagworld,
If you just want it to pass validation you could use the spans and then display them as block.
Hope that helps
Tue, 2004-07-20 07:25
#2
Block level tags with a HREF
Yes I know I could but lets face it that is a bit of a crap solution which looks appalling on non css browsers. There has to be a better way but I am blown if i can think what it is.
Tue, 2004-07-20 08:09
#3
Block level tags with a HREF
Why not move the link inboard of the div?
<div> <a href="#"> <h4>Accessibility vs design</h4> <p>Do accessible web sites have to look ugly as so many web designers claim?</p> </a> </div>
You could set the link to be display:block; with the arrow as a background image and left padding to move the text away from the image.
In fact you could then do away with the div.
Tue, 2004-07-20 09:16
#4
Block level tags with a HREF
I see where you are going but that still wouldnt validate because the href still has a h3 tag and a p tag in it which are block level items
Tue, 2004-07-20 09:51
#5
Block level tags with a HREF
There are many ways to fool the validator and still get what you want 
<div> <a href="#"> <object> <h4>Accessibility vs design</h4> <p>Do accessible web sites have to look ugly as so many web designers claim?</p> </object> </a> </div>
Tue, 2004-07-20 09:53
#6
Block level tags with a HREF
You genius! Thank you so much. Cheating... but ill take it