6 replies [Last post]
boagworld
Offline
newbie
Portsmouth UK
Last seen: 16 years 43 weeks ago
Portsmouth UK
Joined: 2004-07-19
Posts: 5
Points: 0

Hi guys,
I am currently building a web site based on this design:

www.boagworld.com/headscape

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

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

boagworld
Offline
newbie
Portsmouth UK
Last seen: 16 years 43 weeks ago
Portsmouth UK
Joined: 2004-07-19
Posts: 5
Points: 0

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.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 16 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

boagworld
Offline
newbie
Portsmouth UK
Last seen: 16 years 43 weeks ago
Portsmouth UK
Joined: 2004-07-19
Posts: 5
Points: 0

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

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 16 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Block level tags with a HREF

There are many ways to fool the validator and still get what you want Smile

<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>

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

boagworld
Offline
newbie
Portsmouth UK
Last seen: 16 years 43 weeks ago
Portsmouth UK
Joined: 2004-07-19
Posts: 5
Points: 0

Block level tags with a HREF

You genius! Thank you so much. Cheating... but ill take it