Breaking the rules

[audiopro]

The following code displays an item picked at random from a database.
The container div is split into 3 sections:- Product Name, Product Image and price. The container div has a background image over which the 3 items appear.

[red]
<a href='link'>
[/red]
<div class='ProductContainer'>
<div class='prod'>
 Product Name
</div>
<div class='im'>
 Product Image
</div>
<div class='price'>
 Price
</div>
</div>
[red]
</a>
[/red]

This works OK but I want to make this into a single hyperlink but of course I cannot enclose divs inside a hyperlink as this code breaks the rules.
I can't just put all three items into the container div as the product name can take up 1,2 or 3 lines, which will vary the overal length.
I could do it with 3 separate hyperlinks but I would like the whole container div to be the link, how do I do this and keep within the rules?

Keith

http://www.studiosoft.co.uk

 

[feherke]

Hi

Personally I would not do that, as I hate such practices. But if I would have a gun pointed to my head, I would probably do it like this :

span[purple].prod[/purple][teal],[/teal] span[purple].im[/purple][teal],[/teal] span[purple].price[/purple] [teal]{[/teal]
  [blue]display:[/blue] [green]block[/green];
[teal]}[/teal]

[b]<div[/b] [maroon]class[/maroon][teal]=[/teal][green][i]'ProductContainer'[/i][/green][b]>[/b]
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]'link'[/i][/green][b]>[/b]
[b]<span[/b] [maroon]class[/maroon][teal]=[/teal][green][i]'prod'[/i][/green][b]>[/b]
 Product Name
[b]</span>[/b]
[b]<span[/b] [maroon]class[/maroon][teal]=[/teal][green][i]'im'[/i][/green][b]>[/b]
 Product Image
[b]</span>[/b]
[b]<span[/b] [maroon]class[/maroon][teal]=[/teal][green][i]'price'[/i][/green][b]>[/b]
 Price
[b]</span>[/b]
[b]</a>[/b]
[b]</div>[/b]

Feherke.

http://free.rootshell.be/~feherke/

 

[Vragabond]

Expanding on Feherke's code, you could opt not to use generic spans, but other elements that might be more semantically correct but are still "regarded" as inline elements and can exist inside a link element. Then you would still display them as blocks in your CSS.

<div class="ProductContainer">
  <a href="link">
    <dfn>
      Product Name
    </dfn>
    <img src="path/to/image.jpg" alt="Product Image" />
    <strong>
      Price
    </strong>
  </a>
</div>

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[BillyRayPreachersSon]

I guess whether to display inline elements as block-level is a very contentious subject... but my two pence worth is if you're going with the code above, I'd also style the anchor as block-level.

Personally, I don't have a problem with block-level anchors, nor inline content inside them styled as block-level, as long as it doesn't look rubbish, and actually serves a purpose that couldn't be got around in a more elegant way.



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/