OutFront Forums
     Home    Register     Search      Help      Login    

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
 

Clickable Div

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Clickable Div 		Page: [1]
 
carrie

 

Posts: 253
From: Port Orange, FL Volusia
Status: offline

  		Clickable Div - 9/9/2008 9:12:18   
Hi all,

This is related to another post of mine, but not quite the same. I have the following code:


<a href="searchlink.asp?f=1" class="linkstyle" style="display:block;cursor:hand;">
<div class="linkblock">
<img src="../images/listings/image.jpg">
<div class="linkblockheader"> Homes</div>
<div style="clear:left;"></div>
</div></a>

When I mouseover the image within the linkblock div, although the cursor displays a hand (because I've told it to), I cannot activate the link. Everywhere else in the linkblock div, the link works except for over the image. Is there anyway to accomplish what I'm trying to do (which is basically make the whole linkblock div highlight on rollover, and also click on anywhere within the linkblock div - including the image - to advance to the next page)? I obviously can't add a link to the image, because it would create overlapping <a> tags. :)

Carrie
TexasWebDevelopers

 

Posts: 722
Joined: 2/22/2002
From: Dallas, TX
Status: offline

  		RE: Clickable Div - 9/9/2008 9:35:01   
Yucky code alert (although the earth will not part nor the world end)...
First of all a DIV is already a block element, so no need to use display:block; since it is already exactly that.
Secondly, a DIV cannot validly go inside the A element. <A> is an inline element that cannot legally contain a block element. And the only way to make a link is with the A element.
A DIV has no semantic meaning and is used for grouping where there is no other logical semantic meaning implied by the content.
What are you trying to do visually? Did you see an example of what you are trying to accomplish somewhere?

Maybe something like this? 

<style type="text/css">
<!--

#linkblock{ 
height:150px; /*or whatever you need*/ 
width:700px; 
} 
h1{ 
height:150px; /*match to #linkblock height*/ 
text-indent: -100.0em; 
overflow: hidden; 
background: url(path/to/image.gif); 
} 
h1 a{ 
display:block; 
line-height:150px; /*match to h1 height*/ 
} 

-->
</style> 

<div id="linkblock"> 
<h1><a href="#">Link</a></h1> 
</div>



< Message edited by TexasWebDevelopers -- 9/9/2008 9:43:47 >

_____________________________

:)

Follow us on TWITTER

(in reply to carrie)
carrie

 

Posts: 253
From: Port Orange, FL Volusia
Status: offline

  		RE: Clickable Div - 9/9/2008 9:44:50   
Thanks Texas,

Yes, I see that I should take the display:block out - I may have moved it from somewhere else while testing. If viewed in IE7 you can see the effect - I don't know about other browsers yet. Anyhow, view the link and mouseover the image - can't click, can you? http://www.cbcoastrealty.com/search/listings3.asp

I want the whole div block to be a link with rollover effects, basically. I have seen the effect before, but can't recall exactly where at the moment, and can't recall if an image was included within the highlighted area.

Is what I'm trying to do possible? If not, is ther another way to accomplish this?

Carrie

(in reply to TexasWebDevelopers)
TexasWebDevelopers

 

Posts: 722
Joined: 2/22/2002
From: Dallas, TX
Status: offline

  		RE: Clickable Div - 9/9/2008 10:43:07   
http://www.texaswebdevelopers.com/examples/frontpagewebmaster/cbcoastrealty.htm

The second "homes" listing is the one using the code very similar to what I posted above. view source

_____________________________

:)

Follow us on TWITTER

(in reply to carrie)
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: Clickable Div - 9/9/2008 13:14:58   
This is what I do:

TEST PAGE

Have a look at the source code but basically it uses: 

.hoverdiv {background-color:#ccc;padding:10px;margin:10px;float:left;width:200px;}
.hoverdiv:hover {background-color:pink;}
.hoverdiv a:link {color:red;text-decoration:underline;}
.hoverdiv a:visited  {color:black;text-decoration:underline;}
.hoverdiv a:focus, .hoverdiv a:hover, .hoverdiv a:active {color:blue;text-decoration:underline;}


for modern browsers and the whatever hover script for IE

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to TexasWebDevelopers)
carrie

 

Posts: 253
From: Port Orange, FL Volusia
Status: offline

  		RE: Clickable Div - 9/9/2008 13:29:15   
Texas,

Sorry I didn't see the code in your first post. Use the image as a background image - good idea. I should probably try to use that inline since I have 8 different images. I'll let you know how it goes.

Thanks,
Carrie

< Message edited by carrie -- 9/9/2008 13:52:36 >

(in reply to TexasWebDevelopers)
TexasWebDevelopers

 

Posts: 722
Joined: 2/22/2002
From: Dallas, TX
Status: offline

  		RE: Clickable Div - 9/9/2008 14:10:32   
quote:

TEST PAGE

http://www.littleblueplane.com/test/hoverdivtest.html
Doesn't work in IE8 Beta 2

_____________________________

:)

Follow us on TWITTER

(in reply to carrie)
carrie

 

Posts: 253
From: Port Orange, FL Volusia
Status: offline

  		RE: Clickable Div - 9/9/2008 14:23:19   
Texas,

Thanks - it worked and actually simplified the code. One question: I read to use ids in css once, and classes several times, but the code you sent had the linkblock as an id. Does it matter?

Thanks,
Carrie

(in reply to TexasWebDevelopers)
d a v e

 

Posts: 4348
Joined: 7/24/2002
From: England (but live in Finland now)
Status: online

  		RE: Clickable Div - 9/9/2008 14:30:14   

quote:

ORIGINAL: TexasWebDevelopers

quote:

TEST PAGE

http://www.littleblueplane.com/test/hoverdivtest.html
Doesn't work in IE8 Beta 2

works for me in ie8 beta 2 maybe the British version is superior? :)

_____________________________

David Prescott
Gekko web design

(in reply to TexasWebDevelopers)
TexasWebDevelopers

 

Posts: 722
Joined: 2/22/2002
From: Dallas, TX
Status: offline

  		RE: Clickable Div - 9/9/2008 14:41:19   
quote:

works for me in ie8 beta 2 maybe the British version is superior? :)

Of course--for God's sake, George Bush is from Texas, how much more proof do the Europeans need that EVERYTHING is better "on the east side of the pond" (even the Monarchy in GB is less disfunctional!)

quote:

the code you sent had the linkblock as an id. Does it matter?

You can certainly re-name it...I was just trying to keep the naming conventions the same as your original in case you needed it that way.
Is that what you are asking?

David--I've been peeking at your Charger web site---very nice!

_____________________________

:)

Follow us on TWITTER

(in reply to d a v e)
carrie

 

Posts: 253
From: Port Orange, FL Volusia
Status: offline

  		RE: Clickable Div - 9/9/2008 16:47:55   
Tex,

Sort of, I was asking should it be # or . -- id or class. I thought you use class if you have many instances, and id for only one instance - just wanted your thoughts on that. Seems to be working as id even though it's repeated 8 different times.

Carrie

(in reply to TexasWebDevelopers)
TexasWebDevelopers

 

Posts: 722
Joined: 2/22/2002
From: Dallas, TX
Status: offline

  		RE: Clickable Div - 9/9/2008 18:27:39   
Got it...and you are correct.
An ID selector is created with an octothorpe (the technical term for the hash mark #) followed by the custom ID name like this:
#linkblock
So we now have an ID called "linkblock".
This ID name should be used only once per document. Because of that, it will almost always be a structural division for styling an item section:
<div id="linkblock">
<h1><a href="#">Link</a></h1>
</div>
As with classes, you can limit the ID name to a specific element:
div#linkblock
In your case you can do this:
<div id="linkblock">
<h1><a href="searchres.asp?f=1" >Homes</a></h1>
<h1><a href="searchres.asp?f=2" >Townhomes</a></h1>
<h1><a href="searchres.asp?f=3" >Condos</a></h1>
<h1><a href="searchres.asp?f=3" >Duplexes</a></h1>
</div>
Then you would change the h1 tags to reflect the new background image for each link.
Probably better to make a new div id for each link and reference a class for the h1:
#linkblock1 h1 a
#linkblock1 h1 a:hover
#linkblock2 h1 a
#linkblock2 h1 a:hover

http://www.texaswebdevelopers.com/examples/frontpagewebmaster/linkblock.htm

< Message edited by TexasWebDevelopers -- 9/9/2008 18:43:39 >

_____________________________

:)

Follow us on TWITTER

(in reply to carrie)
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: Clickable Div - 9/10/2008 2:20:04   
You don't want a whole pile of H1 tags though!

You should only ever have one H1 per page. What you've got there is a list so you should use a normal list.



_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to TexasWebDevelopers)
carrie

 

Posts: 253
From: Port Orange, FL Volusia
Status: offline

  		RE: Clickable Div - 9/10/2008 8:57:41   
Tailslide,

No, I know it looks like a list in the post, but it's not quite like that. Here's the page:
http://www.cbcoastrealty.com/search/listings.asp I'm going to change the #linkblock to .linkblock, since there are multiple instances - and then look for something to use in place of the h1 tags in light of your post.

Thanks,
Carrie

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Clickable Div 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Copyright © 2009 Thomas Brunt's OutFront Inc. All Rights Reserved.