CSS - Navigation Button Rollover With Z-index

I am going to heck right now trying to get this navigation to work.

Here is what it is

A horizontal list based navigation that has a unique background for each of the 6 choices. It will also have a rollover effect on the background and the text when the user is on that item. The links will be text but the background will be an image. How do I set each item's background to the correct width and height pixel wise?

Hi,

Could someone please help me to fix this error in my code.

I created this website for my school,
http://www.rit.edu/~cie/
but for some reason the navigation menu rollover does not work in IE. Could someone please point me to the errors as I have been spending so much time and still couldn't see what cause this.

Thanks in advance

I am trying to create a Horizontal Multilevel Drop Down Navigation Menu, but instead of the css creating text i would like them to be images and when you hover over the links they rollover into a new image.

I would really like your help on this been trying to do it for weeks now!!

Cheers

i ahve seen sites, using one image rollover that has one image one on top of the other...

can someone give me a clue on the syntax thanks

i was able to have the image button links hover and change colors using 2 different image buttons, however i came to realize that i want to have the hovered image stay active once the button is clicked. can someone assist me with this?

this is what my code looks like:

Code:

a:hover#index {
	background: url("./images/home-red.png") 0 0 no-repeat;
}
a:hover#howto {
    background: url("./images/howtobuild-red.png") 0 0 no-repeat;
}
a:hover#installation {
    background: url("./images/installation-red.png") 0 0 no-repeat;
}
a:hover#design {
    background: url("./images/dande-red.png") 0 0 no-repeat;
}
a:hover#dean {
    background: url("./images/deansblog-red.png") 0 0 no-repeat;
}
a:hover#forum {
    background: url("./images/userforum-red.png") 0 0 no-repeat;
}
a:hover#plan {
    background: url("./images/planbike-red.png") 0 0 no-repeat;
}
a:hover#search {
    background: url("./images/search-red.png") 0 0 no-repeat;
}

a#index, a#design, a#howto, a#installation, a#dean, a#forum, a#plan, a#search   {
	width: 86px;
	height: 27px;
	float: left;
	margin-top:6px;
	position:relative;
	left: 115px;

}

a#index {
	background: url("./images/home-grey.png");
}
a#design {
	background: url("./images/dande-grey.png");
}
a#howto {
	background: url("./images/howtobuild-grey.png");
}
a#installation {
    background: url("./images/installation-grey.png");
}
a#dean {
    background: url("./images/deansblog-grey.png");
}
a#forum {
    background: url("./images/userforum-grey.png");
}
a#plan {
    background: url("./images/planbike-grey.png");
}
a#search {
    background: url("./images/search-grey.png");
}

Hi,

I have a problem, I can make a rollover on a link with the hover pseudo class easily, and it will work in IE and FF, but I cant do one over a table cell in IE. My code is below, it works as I want in FF, but not IE.

Dom.

Quote:

.nav-cell-main-nonsel {

font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva;
font-size: 10px;
font-weight: normal;
color: #333333;

vertical-align: middle;
text-align: left;
padding: 0px 0px 0px 5px;

background-image: url(../../images/[ps]triangle1.gif);
background-position: left;
background-repeat: no-repeat;

border-bottom: 1px solid #EDEDED;

padding: 0px 0px 0px 20px;

}
.nav-cell-main-sel, .nav-cell-main-nonsel:hover {

font-family: "Comic Sans MS", Tahoma, Tunga, Verdana, Arial, Geneva;
font-size: 10px;
font-weight: normal;
color: #333333;

vertical-align: middle;
text-align: left;
padding: 0px 0px 0px 5px;

background-image: url(../../images/[ps]triangle2.gif);
background-position: left;
background-repeat: no-repeat;

border-bottom: 1px solid #EDEDED;

padding: 0px 0px 0px 20px;

}




Cheers, Dom.

Hi,

q) In css, can you rollover an link in a navigation bar that is replaced by another image instead of text.

q)With a dropdown menu eg suckerfish example, can you also use a rollover effect on the drop own choices either with text or an image?

My website is warriorquest.co.nr and for some odd reason, the css rollovers are working in the latest IE, but not in the latest Firefox. THis is something i never expected, here is my css:
Code:
css

a { text-decoration: none; }
a:link { color:  #0000FF; }
a:active { color:  #C0C0C0; }
a:visited { color: #0000FF; }
a:hover
{
  color:  #0000FF;
  border: 1px solid #0000FF;
  padding: 5px;
  width: 190px;
  background-color: #ffffff;
}
body
{
 color: #ffffff;
 background-color: #2F4F4F;
}
div
{
  margin-top: 50px;
  margin-bottom: 50px;
}

Thx for your help =)

EDIT: it seams i had to completely reload the page, but now they dont display right. THey are supposed to look like in IE, any suggestions?

Hey folks,

I'm having issues with a dropdown menu in IE 6 to the tune of it not showing up when it's rolled over.

Here's the page in question.

Here's the CSS I"ve used for it:
Code:

/* LANDING PAGE MENU LAYOUT */
#landingMenu {
width:960px;
height:450px;
position:relative;
background:transparent none;
}

#landingMenu li  {
float:left;
font-size:14px;
font-weight:bold;
}

#landingMenu li a {
width:192px;
float:left;
background:#ffc000 url(images/landingMenu_bg.jpg) no-repeat top;
display:block;
text-align:center;
min-height:255px; 
padding-top:15px;
}

/* ENTER TOP PADDING AND ACCORDING HEIGHT FOR EACH DIVISION (NORMAL HEIGHT IS 360PX, ADJUSTED FOR FOOTER HEIGHT CLEARANCE) 
#landingMenu li#CDS_menu a { min-height:255px; padding-top:35px;}
*/

#landingMenu li li {
background:transparent none;
float:none;
padding:0;
height:auto;
text-transform:none;
list-style:disc;
margin-left:40px;
margin-top:5px;
font-size:14px;
color:#0f1190;
font-weight:bold;
}

* html #landingMenu li li { margin-left:20px; }

#landingMenu li li.landingCaption { list-style:none;margin-top:10px;margin-left:25px; }

* + html #landingMenu li li { margin-left:-160px;width:150px;}

* + html #landingMenu li li.landingCaption { width:150px;display:block;margin-left:-160px; }

#landingMenu li ul {
display: none;
position: absolute; 
margin-top:125px;
background:transparent none;
z-index:600;
width:192px;
}

#landingMenu li > ul { top: auto; left: auto; }

#landingMenu li:hover ul, li.over ul { display: block; }

/* END LANDING MENU */

Main issue is that I don't even have a copy of IE 6 to fix for, and I've been going off of screen shots from the client.

Any thoughts?

I am trying build a bottom bucket with two different links, that when you rollover either one of the images a different image is shown. Well I have all of that working but if you rollover the first image and while the li ul image is being shown take your mouse and move to the right. The hover state of the second ul is now shown. But if you go backwards and start moving your mouse to the left, nothing happens, which is great! I have tired all sorts of things. Right now I have a link that has a very stripped down version of what it is suppose to be. I have tired different z-index's but still nothing. Thanks for the help!
http:// www. movementinteractive. com/ clients/ ParkAve_web/web/tab_test.html

I have this code which changes text into a image, but how do I have an image instead of text? I mean so everythings images and no text.

<style type="text/css">

#nav a:hover {
background: url("arrow_hover.png") no-repeat;
}


#nav a img {
width: 88px;
height: 67px;
position: absolute;
top: 200px;
left: 500px;
border: 1px solid black;
visibility: hidden;
}

#nav a:hover img {
visibility:visible;
}
</style>

<div id="nav">


<ul>


<li><a href="#">Link1<img src="camera.jpg" alt="" /></a>


<li><a href="#">Link2<<img src="home.png" alt="" /></a></li>


<li><a href="#">Link3<<img src="camera.jpg" alt="" /></a></li>


<li><a href="#">Link4<<img src="johnpotter.jpg" alt="" /></a></li>


</ul>
</div>

Hi everyone, I'm having a rollover image problem in IE6. The problem isn't that the rollover isn't working - it's that the initial image before the rollover isn't displaying. You can see what I mean at:

http://www.francesli.myubertor.com/


Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML for Menu:

Code:

<!-- ---------------  main menu --------------- -->

<div id='menu_outer'>
  <div id='menu_inner'>
<ul>
<li id="up_menu1" class="sel">
	<a class="sel" href="/" title="" target="" rel="">Home</a>
			</li>
<li id="up_menu2" class="unsel">
	<a class="unsel" href="/Properties.php" title="" target="" rel="">Properties</a>
		<ul>
<li id="up_menu2_1" class="unsel">

	<a class="unsel" href="/ActiveListings.php" title="" target="" rel="">Active Listings</a>
			</li>
</ul>
	</li>
<li id="up_menu3" class="unsel">
	<a class="unsel" href="/ForBuyers.php" title="" target="" rel="">For Buyers</a>
		<ul>
<li id="up_menu3_1" class="unsel">
	<a class="unsel" href="/FirstTimeBuyers.ubr" title="" target="" rel="">First Time Buyers</a>

			</li>
</ul>
	</li>
<li id="up_menu4" class="unsel">
	<a class="unsel" href="/ForSellers.php" title="" target="" rel="">For Sellers</a>
		<ul>
<li id="up_menu4_1" class="unsel">
	<a class="unsel" href="/20TipsforSellingYourHome.ubr" title="" target="" rel="">20 Tips for Selling Your Home</a>
			</li>

</ul>
	</li>
<li id="up_menu5" class="unsel">
	<a class="unsel" href="/Blog.php" title="" target="" rel="">Blog</a>
			</li>
<li id="up_menu6" class="unsel">
	<a class="unsel" href="/Links.php" title="" target="" rel="">Links</a>
			</li>
<li id="up_menu7" class="unsel">
	<a class="unsel" href="/Contact.php" title="" target="" rel="">Contact</a>

		<ul>
<li id="up_menu7_1" class="unsel">
	<a class="unsel" href="/AboutMe.ubr" title="" target="" rel="">About Me</a>
			</li>
</ul>
	</li>
</ul>
</div>
</div>

CSS for Menu:

Code:

/* Navigation Menu */

#menu_outer {
  top: 77px;
  background: transparent url(../../content/image/287.png) repeat-x scroll 0% 0%;
  height: 42px;
  padding-top: 7px;
  text-transform: uppercase;
}

#ubertor #menu_outer li a {
  color: #FFFFFF;
  font-weight: bold;
}



/* Home */
#up_menu1.sel a{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 60px;
height: 27px;
}

#up_menu1.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/307.png) #6fcee4 no-repeat bottom;
width: 60px;
height: 27px;
}


#up_menu1.unsel{
  background: url(http://storage.ubertor.com/cl9438/content/image/307.png)#6fcee4 no-repeat top;
  text-indent: -1000em;
  width: 60px;
  height: 27px;
}



/* Properties */

#up_menu2.sel a, #up_menu2.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/309.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 90px;
height: 27px;
}


#up_menu2.unsel a{
  background: url(http://storage.ubertor.com/cl9438/content/image/309.png)#6fcee4 no-repeat top;
  text-indent: -1000em;
  width: 90px;
  height: 27px;
}


#up_menu2.unsel ul li a:hover {
  background-color: #CCCCCC;
  background-image: none;
  text-indent: 0;
  width: 90px;
  height: 27px;
}


/* For Buyers */

#up_menu3.sel a, #up_menu3.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/311.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 99px;
height: 27px;
}


#up_menu3.unsel a{
  background: url(http://storage.ubertor.com/cl9438/content/image/311.png)#6fcee4 no-repeat top;
  text-indent: -1000em;
  width: 99px;
  height: 27px;
}


#up_menu3.unsel ul li a:hover {
  background-color: #CCCCCC;
  background-image: none;
  text-indent: 0;
  width: 99px;
  height: 27px;
}

/* For Sellers */

#up_menu4.sel a, #up_menu4.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/313.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 101px;
height: 27px;

}


#up_menu4.unsel a{
  background: url(http://storage.ubertor.com/cl9438/content/image/313.png)#6fcee4 no-repeat top;
  text-indent: -1000em;
  width: 101px;
  height: 27px;

}


#up_menu4.unsel ul li a:hover {
  background-color: #CCCCCC;
  background-image: none;
  text-indent: 0;
  width: 101px;
  height: 27px;
}

/* Blog */

#up_menu5.sel a, #up_menu5.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/317.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 58px;
height: 27px;
}


#up_menu5.unsel a{
  background: url(http://storage.ubertor.com/cl9438/content/image/317.png)#6fcee4 no-repeat top;
  text-indent: -1000em;
  width: 58px;
  height: 27px;
}


#up_menu5.unsel ul li a:hover {
  background-color: #CCCCCC;
  background-image: none;
  text-indent: 0;
  width: 58px;
  height: 27px;
}

/* Links */

#up_menu6.sela, #up_menu6.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/319.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 65px;
height: 27px;
}


#up_menu6.unsel a{
  background: url(http://storage.ubertor.com/cl9438/content/image/319.png)#6fcee4 no-repeat top;
  text-indent: -1000em;
  width: 65px;
  height: 27px;
}


#up_menu6.unsel ul li a:hover {
  background-color: #CCCCCC;
  background-image: none;
  text-indent: 0;
  width: 65px;
  height: 27px;
}

/* Contact */

#up_menu7.sel a, #up_menu7.unsel a:hover{
background: url(http://storage.ubertor.com/cl9438/content/image/315.png) #6fcee4 no-repeat bottom;
text-indent: -1000em;
width: 82px;
height: 27px;
}


#up_menu7.unsel a{
  background: url(http://storage.ubertor.com/cl9438/content/image/315.png)#6fcee4 no-repeat top;
  text-indent: -1000em;
  width: 82px;
  height: 27px;
}


#up_menu7.unsel ul li a:hover {
  background-color: #CCCCCC;
  background-image: none;
  text-indent: 0;
  width: 82px;
  height: 27px;
}

#ubertor #menu_outer li li a {
text-transform: none;
background-color:#CCCCCC;
background-image:none;
color:#222222;
display:block;
float:none;
padding:2px 10px;
text-indent:0;
width:auto;
height: auto;
}

#menu_inner ul li a, #menu_inner ul li a:hover {padding: 0px 0px} 

Help will be very appreciated, I'm supposed to have this done today. :/

Hi,

I have a button as follow:

Code:

#memberlogin .login{
	background:url(/images/memberlogin_btn.gif) no-repeat left top;
	display:block;		
	width:130px;
	height:31px;
	border:0; 
}

I need to make a rollover. This is one image, same as this method:
http://www.nowcss.com/links/image-rollover-with-css

I tried it this way
Code:

#memberlogin a.login span { 
        display: none; 
}

#memberlogin a.login:hover { 
        background: url(/images/memberlogin_btn.gif) repeat 0px -31px; 
}

but it's not working, do you know what I'm doing wrong here?

Thanks in advance.

hi, been trying to do this for a few hours now and pretty much struggling a bit. basically I have a <ul> and when I hover the mouse over one of the list links, I wantt a sub menu to appear which can also be clicked.

I have trawled around abit to see if I could get anything but have come up empty handed.

can someone point me in the right direction here.

thanks!!