 Getting a div with a link around to validate, Well, a link with content in anyway... |
  |
 Sep 11 2008, 01:48 PM
Post
#1
|
|
 Crew member  Group: Root Admin Posts: 324 Joined: 29-May 08 From: London / UK Member No.: 61  |
Hi all,
Just so you know, I'm no expert with code or markup, but I get by. I have recently created a link with content inside: HTML <a href="work.html" id="work1" class="workfront"><img alt="work1" src="images/work.jpg" class="workfrontthumb" /><h4>Title</h4><p>Description</p></a> This is so that I can have a hover state and active link area in a rectangle with the image and text inside. I understand that this isn't semantically correct, but it seems to do what I need in all the browsers I can get my hands on. This will not validate due to having block elements within inline elements. I know you can do some javascript to have the same effect, but this works, so why bother? Does anyone know a way to do this so that it will validate? Or do you think that it will be understood as a valid way of doing it even though it doesn't validate? I will be using this on my portfolio page and am sure someone will complain it doesn't validate. -------------------- design-is.co.uk - freelance projects dougbarned.co.uk - personal site & blog - twitter feralinteractive.com - designer day job - twitter |
 |
 
|
|
Sep 11 2008, 02:03 PM
Post
#2
|
|
 Member Group: Members Posts: 11 Joined: 3-September 08 Member No.: 209 |
QUOTE (design-is @ Sep 11 2008, 03:48 PM)  Hi all, Just so you know, I'm no expert with code or markup, but I get by. I have recently created a link with content inside: HTML <a href="work.html" id="work1" class="workfront"><img alt="work1" src="images/work.jpg" class="workfrontthumb" /><h4>Title</h4><p>Description</p></a> This is so that I can have a hover state and active link area in a rectangle with the image and text inside. I understand that this isn't semantically correct, but it seems to do what I need in all the browsers I can get my hands on. This will not validate due to having block elements within inline elements. I know you can do some javascript to have the same effect, but this works, so why bother? Does anyone know a way to do this so that it will validate? Or do you think that it will be understood as a valid way of doing it even though it doesn't validate? I will be using this on my portfolio page and am sure someone will complain it doesn't validate. HTML <a href="work.html" id="work1" class="workfront">Title</a> and use CSS in order to format the link the way you want |
|
|
|
|
Sep 11 2008, 02:31 PM
Post
#3
|
|
|
Crew member Group: Root Admin Posts: 324 Joined: 29-May 08 From: London / UK Member No.: 61 |
But that doesn't allow me to have heading or paragraph values within the link... or am I missing something?
Desired result is to have a rectangle which has a border and background when hovered upon. The image, header, and paragraph text is to be within the rectangle. The rectangle it to function as the link rather than just the image and text. -------------------- design-is.co.uk - freelance projects dougbarned.co.uk - personal site & blog - twitter feralinteractive.com - designer day job - twitter |
|
|
|
|
Sep 11 2008, 03:59 PM
Post
#4
|
|
|
Member Group: Members Posts: 11 Joined: 3-September 08 Member No.: 209 |
QUOTE (design-is @ Sep 11 2008, 04:31 PM) But that doesn't allow me to have heading or paragraph values within the link... or am I missing something? Desired result is to have a rectangle which has a border and background when hovered upon. The image, header, and paragraph text is to be within the rectangle. The rectangle it to function as the link rather than just the image and text. you simulate the effects you want with CSS something like this HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>bla</title> <style type="text/css" media="all"> <!-- #test { display: block; background: url("108.JPG") grey no-repeat; color: white; width: 208px; height: 208px; border: 3px solid green; } #test:hover { border: 3px solid red; } #title { color: yellow; font-size: 30px; display: block; text-align: center; } #body { display: block; text-align: center; } --> </style> </head> <body> <div> <a href="" id="test"><span id="title">Title</span><span id="body">The body of the link XD</span></a> </div> </body> </html> you get something like this 
|
|
|
|
|
Sep 11 2008, 04:27 PM
Post
#5
|
|
|
Crew member Group: Root Admin Posts: 324 Joined: 29-May 08 From: London / UK Member No.: 61 |
Perfect, thank you. I understand now - example is great
 Cheers, Doug EDIT - All fixed up, cheers 
-------------------- design-is.co.uk - freelance projects dougbarned.co.uk - personal site & blog - twitter feralinteractive.com - designer day job - twitter |
|
|
|
|
Sep 11 2008, 10:41 PM
Post
#6
|
|
|
Administrator Group: Administrators Posts: 679 Joined: 24-April 08 From: Chesterfield, UK Member No.: 1 |
I totally understand your dilemma. I wanted to do a similar thing on the Scratchmedia home page, i.e. show a hover effect when the mouse enters a block-level div with a variety of other stuff inside it.
But I also wanted it to be correct & valid (not that I checked, just looking valid is good enough sometimes). And I wanted the blocks to be able to stretch in 2 dimensions. I ended up writing some DHTML JS code to do it, as the :hover CSS effect doesn't work well in all browsers. Here's the result.. If you're into JS & DHTML, have a poke at the code, cos there were some interesting hurdles I had to cross (like killing bubbling events, yugh!). Ben -------------------- |
|
|
|
|
Jan 15 2010, 08:44 AM
Post
#7
|
|
|
Member Group: Members Posts: 16 Joined: 8-January 10 Member No.: 5,940 |
Thanks a lot to all of you... I was searching for the same answer.
-------------------- |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 10th September 2010 - 05:50 PM |