Rollover behaviour applying to whole div-HELP

This is a discussion on "Rollover behaviour applying to whole div-HELP" within the Web Page Design section. This forum, and the thread "Rollover behaviour applying to whole div-HELP are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design

Notices


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Apr 10th, 2007, 17:18
Junior Member
Join Date: Apr 2007
Location: England
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts
Rollover behaviour applying to whole div-HELP

Dear all

I am trying to create a navigation bar similar to the one at the top of this site, where the links change color when rolled over. All my links are defined in a div tag:

Code: Select all
<div class="style3" id="navigation">
Home | Calendar | Photo Gallery | Applications | For Sale/ Wanted | Contact Us | Links</div>
with an external style sheet, and then when I add a rollover behaviour to that style sheet:

Code: Select all
#navigation:hover {
    font-weight: bolder;
    color: #FF0000;
}
but that makes the whole div go red when I roll over it, rather than just an individual bit of text. How do I apply individual hover behaviours to different pieces of text in 1 div?????



PLEASE HELP!!


Thanks

Tobmeister

Last edited by karinne; Apr 10th, 2007 at 17:20. Reason: Please use [code]...[/code] tags when displaying code!
Reply With Quote

  #2 (permalink)  
Old Apr 10th, 2007, 17:20
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rollover behaviour applying to whole div-HELP

Apply the :hover to a instead since :hover won't work in IE anyways.

So ... something like this

Code: Select all
#navigation a:hover {
    font-weight: bolder;
    color: #FF0000;
}
Reply With Quote
  #3 (permalink)  
Old Apr 10th, 2007, 17:28
Junior Member
Join Date: Apr 2007
Location: England
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rollover behaviour applying to whole div-HELP

I put that in but then the rollover stopped all together!! Please help everybody...
Reply With Quote
  #4 (permalink)  
Old Apr 10th, 2007, 17:35
karinne's Avatar
SuperMember

SuperMember
Join Date: Jan 2007
Location: You know where
Age: 31
Posts: 4,617
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rollover behaviour applying to whole div-HELP

Well ... you need to create the links in that navigation.

Code: Select all
<div class="style3" id="navigation">
<a href="">Home</a> | <a href="">Calendar</a> | Photo Gallery | Applications | For Sale/ Wanted | Contact Us | Links</div>
etc...
Reply With Quote
  #5 (permalink)  
Old Apr 10th, 2007, 17:38
SuperMember

SuperMember
Join Date: May 2006
Location: North West, UK
Age: 22
Posts: 1,173
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rollover behaviour applying to whole div-HELP

If what you have posted is your actual code then it won't work. Make sure you links are merked up properly. Like this:

Code: Select all
<a href="#">link</a>
If your code and stylseeht don't match up then it won't work. If that wasn't your exact code that you posted earlier then could you post the code again, withou any alterations.

Pete.
Reply With Quote
  #6 (permalink)  
Old Apr 10th, 2007, 17:48
Junior Member
Join Date: Apr 2007
Location: England
Posts: 22
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rollover behaviour applying to whole div-HELP

thanks very much that's working now.
Reply With Quote
  #7 (permalink)  
Old Apr 11th, 2007, 15:28
moojoo's Avatar
Moderator
Join Date: Aug 2005
Location: Texas
Age: 31
Posts: 1,761
Blog Entries: 1
Thanks: 0
Thanked 18 Times in 18 Posts
Send a message via AIM to moojoo Send a message via MSN to moojoo Send a message via Yahoo to moojoo
Re: Rollover behaviour applying to whole div-HELP

Just for reference if you do need to use :hover on a non link element this will make it work in IE

http://www.xs4all.nl/~peterned/csshover.html
__________________
The internet is just a fad.
http://www.mevans76.com
Last Blog Entry: Apps every Mac based web dev should consider (Jul 10th, 2008)
Reply With Quote
  #8 (permalink)  
Old Apr 13th, 2007, 23:52
Ryan Fait's Avatar
SuperMember

SuperMember
Join Date: May 2006
Location: Las Vegas
Posts: 3,786
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Rollover behaviour applying to whole div-HELP

That's a nice link too. I'm still a fan of just regular old JavaScript for that stuff, though.
Reply With Quote
Reply

Tags
behaviour, css, div, rollover

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
OnClick Behaviour Monie JavaScript Forum 3 Oct 23rd, 2007 02:13
Bizarre IE behaviour wmike Web Page Design 2 Apr 23rd, 2007 14:16
Font Color Not Applying! Please Help!! tobymather Web Page Design 9 Apr 13th, 2007 23:59
Applying style to first para only Tino Web Page Design 6 Feb 28th, 2007 10:28
Strange behaviour ukgeoff Web Page Design 3 Sep 22nd, 2006 09:43


All times are GMT. The time now is 07:51.


Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43