5 replies to this topic

[hobulus]

Hi All,

Seems to be the bane of my life at the moment... CSS rollovers....

I thought I had it all down to a T - yet it won't do the rollover....

Yes I know its my second thread about the same thing... but it is a different website!

Can someone please explain where I have gone Wrong....

CSS

div#navwrap {margin: 0, 0, 0, 0; width:440px; height:143px; padding-left: 330px;}
div#navwrap li {padding-top:120px; color:#FFFFFF; font-family:arial; font-size:14px; font-weight:bold; list-style:none;}

/*Mouseover for Navigation */
.sun a {background: url(../site_images/nav_buttons/sun_frames.png);}
.sun a:hover{background: url(../site_images/nav_buttons/sun_frames_on.png);}

.rain a {background: url(../site_images/nav_buttons/rain_frames.png);}
.rain a:hover{background: url(../site_images/nav_buttons/rain_frames_on.png);}

.golf a {background: url(../site_images/nav_buttons/golf_frames.png);}
.golf a:hover{background: url(../site_images/nav_buttons/golf_frames_on.png);}

.contact a {background: url(../site_images/nav_buttons/contact.png);}
.contact a:hover{background: url(../site_images/nav_buttons/contact_on.png);}
/*End of Mouseover for Navigation */


div#sun {float:left; width:107px; height:143px; background-image:url(../site_images/sun_frames.png);}
div#rain {float:left; width:110px; height:143px; background-image:url(../site_images/rain_frames.png);}
div#golf {float:left; width:107px; height:143px; background-image:url(../site_images/golf_frames.png);}
div#contact {float:left; width:108px; height:143px; background-image:url(../site_images/contact.png);}

HTML

		<div id="navwrap">
			<div id="sun">
			<li class="sun"><a href="">Sun Frames</a></li>
			</div>
			<div id="rain">
			  <li class="rain"><a href="">Rain Frames</a></li>
			</div>
			<div id="golf">
			  <li class="golf"><a href="">Golf Frames</a></li>
			</div>
			<div id="contact">
			  <li class="contact"><a href="">Contact Us</a></li>
			</div>
		</div>

[austen]

You have a bunch of <li> elements without parent elements. For example you can't have a <li> tag (stands for list item) without it being within a <ul> or <ol> tag. (unordered and ordered list) try removing the <li> tags and apply the class to the <a> tag. See what happens then. In the article about sprites I posted on the other post, the author outlines proper use of lists as menus. (which is much more degradable and efficient than a separate div for each link)

Hope this helps.

-austen

[Ghost]

Yeah, that format isn't right...

Like austen said, you need to have them in lists.

Read up on some html tutorials so you understand what each tag does, and then give it another go

<ul>
<li><a href="#">Link</li>
<li><a href="#">Link</li>
</ul>

That would be more appropriate.

Take a look here for more ideas.

[Not Dan]

I'm not sure if this is right but try putting the css class in the link:

Quote

<a href="blah" class="sun">

[Ghost]

Putting the class in the link isn't going to fix it or make it right. Read austen's post - the layout of your code is wrong.

[hobulus]

Thanks for the comments guys. Seems I have a load to learn still. Will be working on getting it all worked out.