CSS - Css Navigation With Image Rollovers And Dropdown

Hi,

I am trying to create a menu, and I would like to try to do it without using Javascript.

I a number of menu items, that each has three states - first state is just white text, second state needs to fade from white to blue text when mouse is rolled over. Third state needs to fade from blue to white text when mouse is taken off each menu item. I have the three images for that (white, white-blue, blue-white).

I have read up on a few image rollover guides using CSS, but they all involve putting outlines around an existing image etc. As the images need to be links, they can't be background images (can they?), they have to be just images.

So, can anyone point me in the right direction on how to swap an image with another when one a) an image is rolled over, and also b) when the mouse is removed from over the image.

Thanks

Using either CSS, or JavaScript, or a combination of both; is it possible to do this without using frames?:

image1 and image2 are laid out horizontally across the top of the page.

When the mouse hovers over image1, a formatted body of text (lets call it "text1") is displayed beneath the layout of images. As the mouse leaves image1, the text disappears.

When the mouse hovers overs over image2, a different body of text ("text2") appears in the same area where text1 was displayed. It also disappears as the mouse leaves.

I am probably very obviously a newbie. I have read examples that show how to do similar things with frames, and I can script simple image rollovers, but I am a little lost here, so even if this is too basic a question, if you can point me in the right direction to learn how, I would appreciate it much. Thanks in advance for any help or suggestions!

So I have 5 image rollovers onmouseover() all in a row with the following css and javascript. Currently, the left-most image rollsover just fine, but when I try to rollover the others, the image that comes to replace the rolledover one gets put in the left-most spot instead of right on top of the image that was rolledover. I can't use absolute positioning because the whole webpage is centered according to window size. Help is greatly appreciated. Here's the link: create.byu.edu/newsite

CSS:
Code:

div.info 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.team 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.work 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.sites 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
} 
div.news 
{ float:left; 
display:inline; 
margin-left:0px; 
margin-top:35px; 
}

javascript:
Code:

var image1 = new Image(); 
image1.src = "images/info.jpg"; 
var image2 = new Image(); 
image2.src = "images/infoblue.jpg"; 
var image3 = new Image(); 
image3.src = "images/team.jpg"; 
var image4 = new Image(); 
image4.src = "images/teamblue.jpg"; 
var image5 = new Image(); 
image5.src = "images/work.jpg"; 
var image6 = new Image(); 
image6.src = "images/workblue.jpg"; 
var image7 = new Image(); 
image7.src = "images/sites.jpg"; 
var image8 = new Image(); 
image8.src = "images/sitesblue.jpg"; 
var image9 = new Image(); 
image9.src = "images/news.jpg"; 
var image0 = new Image(); 
image0.src = "images/newsblue.jpg";  

function roll(img_name, img_src)    {
    document[img_name].src = img_src;    
}

HTML:
Code:

	<div class="info">
 		<a href="info.php" onmouseover="roll('info', 'images/infoblue.jpg')" onmouseout="roll('info', 'images/info.jpg')">
 			<img src="images/info.jpg" border="0" alt="infogray" name="info">
 		</a>
 	</div><!--info-->
                <div class="team">
 		<a href="team.php" onmouseover="roll('info', 'images/teamblue.jpg')" onmouseout="roll('info', 'images/team.jpg')">
 			<img src="images/team.jpg" border="0" alt="teamgray" name="team">
 		</a>
 	</div><!--team-->
 	 	<div class="work">
 		<a href="work.php" onmouseover="roll('info', 'images/workblue.jpg')" onmouseout="roll('info', 'images/work.jpg')">
 			<img src="images/work.jpg" border="0" alt="workgray" name="work">
 		</a>
 	</div><!--work-->
 	 	<div class="sites">
 		<a href="sites.php" onmouseover="roll('info', 'images/sitesblue.jpg')" onmouseout="roll('info', 'images/sites.jpg')">
 			<img src="images/sites.jpg" border="0" alt="sitesgray" name="sites">
 		</a>
 	</div><!--sites-->
 	 	<div class="news">
 		<a href="news.php" onmouseover="roll('info', 'images/newsblue.jpg')" onmouseout="roll('info', 'images/news.jpg')">
 			<img src="images/news.jpg" border="0" alt="newsgray" name="news">
 		</a>
 	</div><!--news-->

I'm editing a CSS drop down navigation that uses <ul> and <li>.

Is there a way to change the background color & rollover in just one of the dropdowns? The code is below in two sections. I've highlighted the list that I'd like to change the background color of.

Thanks for your help!


Code:

<div id="wrap">
		<ul id="navbar">
		<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
			<li><a href="#"><IMG SRC="d_images/navigation_01.gif" border="0"></a>
			</li>
			<li><a href="#"><IMG SRC="d_images/navigation_02.gif" border="0"></a>
				<ul>
				<li><a href="summit_09registration.cfm">Register</a></li><li>
				<a href="summit_09scholarship.cfm">Scholarships</a></li></ul>


			<li><a href="#"><IMG SRC="d_images/navigation_03.gif" border="0"></a>
				<ul>
					<li><a href="summit_09awards.cfm">Leadership Awards</a></li><li>
					<a href="summit_09party.cfm">Anniversary Party</a></li><li>
					<a href="summit_09work.cfm">Work Project</a></li><li>
					<a href="summit_09dine.cfm">Dine Arounds</a></li><li>
					<a href="summit_09jazz.cfm">Jazz Fesitval</a></li><li>
					<a href="summit_09networking.cfm">Networking</a></li></ul>
					</li>
			<li><a href="#"><IMG SRC="d_images/navigation_04.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

			<li><a href="#"><IMG SRC="d_images/navigation_05.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

			<li><a href="#"><IMG SRC="d_images/navigation_06.gif" border="0"></a>
				<ul>
					<li><a href="summit_09sponsors.cfm">Conference Sponsors</a></li><li>
					<li><a href="summit_09exhibit.cfm">Ad/Exhibit</a></li></ul>
			</li>

	<li><a href="#"><IMG SRC="d_images/navigation_07.gif" border="0"></a>
				<ul>
					<li><a href="summit_09hotel.cfm">Conference Hotel</a></li><li>
					<a href="summit_09travel.cfm">Travel</a></li><li>
					<a href="summit_09neworleans.cfm">New Orleans</a></li></ul>
			</li>



</ul></div>

Code:

<style type="text/css">

#navbar {
	margin: 0;
	padding: 0;
	height: 0;}
#navbar li {
	list-style: none;
	float: left; }
#navbar li a {
	display: block;
	padding-bottom:0px;
	padding-left: 0px;
	padding-right:0px;
	padding-top:0px;
	border: 0px;
	color: #fff;
	font-family: helvetica;
	font-size: 8pt;
	font-style: bold;
	font-color: #ffffff;
	text-decoration: none;}
#navbar li ul {
	display: none;
	width: 10em; /* Width to help Opera out */
	background-image: url(../images/summit_nav_back.gif);}

#navbar li:hover ul, #navbar li.hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }
#navbar li:hover li, #navbar li.hover li {
	float: none; }
#navbar li:hover li a, #navbar li.hover li a {
	background-image: url(../images/summit_nav_back.gif);
	border-bottom: 1px solid #fff;
	color: #000; }
#navbar li li a:hover {
	background-image: url(../images/summit_nav_red.gif); }
</style>


<script language="JavaScript">
<!--

function SymError()
{
  return true;
}

window.onerror = SymError;

var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
  return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script>
// Javascript originally by Patrick Griffiths and Dan Webb.
// http://htmldog.com/articles/suckerfish/dropdowns/
sfHover = function() {
	var sfEls = document.getElementById("navbar").getElementsByTagName("li");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" hover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" hover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

I have a bit of an issue with a drop down script I'm working on. It's a CSS menu built from ul/li/a tags with an iframe thrown in for IE6 sake.

My problem is 2 fold. The first problem is in firefox. There is 2-3px of mystery padding/margining on my tags. I didn't put it there, nor does it show up in browsers other than firefox.

My second problem is a safari 2 issue. The dropdowns appear to be hidden behind some kind of container, very weird if you ask me.

I'm using jQuery for my script manipulation (if you don't know about it, learn about it. Its laziness is astounding!)

[Edit: link updated]
http://programmer .whipplehill .com/wes/newDD/list/getPageList.asp

Any help would be great! Thanks
--Wes

I've seen the link that Kravitz has linked to http://www.dynamicsitesolutions.com...mage_switching/ and while helpful, I think I'm becoming more confused. Part of the problem is that in those examples (and even there I'm getting confused over which example is supposed to be the one to use) the images are assumed to be the same width, so the property is set for 120px. But my images are different widths. Now I can make the rollovers work by for example:

Code:

.item1 a {
background-image : url(menuoffa.jpg);
float:left;
height:28px;
width:103px;
}

.item1 a:hover {
background-image : url(menuona.jpg);
float:left;
height:28px;
width:103px;
}

and then using html in the following way:
Code:

<div class="item1"><a href="pagelink.htm"></a></div>

My problem is that I can't center the items relative to the page If I were going to use 'tables' to do this, then I'd put all the items in one centered cell, but the whole point is not to use tables so what am I doing wrong?!?! Probably more like, what am I doing right, but anyway... And I've tried reading up on going the horizontal unordered list way http://www.webreference.com/program...ists/index.html but I'm using images instead of text so same problems still

OMG I'm going insane

Originally, I used <DIV> as containers for background images which swap when you hover over them. I enclosed the <DIV> tags with <A> tags to make them 'links'. Older versions of IE didn't want to work with this though and I found it this is invalid CSS, so I explored some more...

The best solution I have found so far is to use <A> itself as a container. This solved the IE5 problems, but now IE4 SP2 doesn't show them at all. I'm okay with leaving IE4 behind, but I discovered that using <A> tags as containers was an invalid technique.

If I can't use <A><DIV> and I can't use <A>, then what can I use to make valid, preloaded CSS image rollovers that work? I'm not considering Javascript an option. Is it possible?

Here's a random, simliar example of what I've done with the <A> tags.
http:// www. findmotive. com /2006/10/31/simple-css-image-rollover/

I was working on a site today and I noticed a weird bug in IE 7. Couldn't find anything similar on the net, so I'll post here.
PseudoCSS:

Code:

#topdiv{
width:960px;
}

#bottomdiv{
float: left;
margin-left:15px;
width: 300px;
}

.previous a{
background: url('images/previous.png') no-repeat;
}

.previous a:hover {
background-position:0 -62px;
}

PseudoHTML:
Code:

<div id="topdiv"><a href="" class="previous">Link</a></div>
<div id="bottomdiv">Content</div>

When rolling over the image in topdiv, bottomdiv loses it's 15px margin-left and butts up against the left border of the parent div (Only in IE7). I removed the margin-left of bottomdiv and replaced it with relative positioning, left:15px. This fixed the issue and works cross browser. I guess my question is: is relative positioning "safer" than margins on floated elements?

I aim to create my own wordpress theme eventually, but for now I have been trying to customize free open source themes made by others.

I have a test one set up at http://www.theepicnetwork.com/gfn

My query here is that I am trying to make that navigation menu function as a dropdown menu, but I can't seem to do it.

I managed to make it Wordpress 3.0 compatible so I can edit the menu items through the wp admin cp.

But i just need to successfully give it a drop down function. Here is all my code.

-------
NAV MENU CSS

Code:

 /* Navigations*/       #nav { position:relative; padding:0; margin:0 auto; height:68px; width:1002px; background:url(images/nav_bg.png) no-repeat center top; }       #nav ul { position:absolute; z-index:1; top:0; left:50px; width:900px; height:65px; padding:0; margin:0; list-style:none; }       #nav li { float:left; margin:0; padding:0; list-style:none; }       #nav a { display:block; padding:27px 20px; float:left; border:none; font:bold 12px Myriad Pro, Helvetica, Arial, sans-serif; color:#fff; text-transform:uppercase; }       #nav a:hover{ color:#f0ff21; background:url(images/nav_over.gif) repeat-x center top; }

INTENDED DROPDOWN CSS - I copied this from one of my other sites.

Code:

#dropmenu, #dropmenu ul {margin-top:0px; margin-left:3px;padding:0px; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; z-index:300; width:100%; background:#0A7B05; font-weight:bold;} #dropmenu a {display:block; padding:6px 1em; color:#000; border-right:0px solid #000; text-decoration:none; background:transparent url(images/menu-button.png);font-weight:bold;} #dropmenu a:hover {background:transparent url(images/menu-button-hover.png); color:#fff;} #dropmenu li {float:left; position:relative;} #dropmenu ul {position:absolute; display:none; width:12em; top:1.9em; left:-1px;} #dropmenu ul a {border:1px solid #000;} #dropmenu li ul {border-top:0px solid #000; width:14.1em;} #dropmenu li ul a {width:12em; height:auto; float:left;  border-bottom:1px solid #000;} #dropmenu ul ul {top:auto;} #dropmenu li ul ul {left:12em; margin:0px 0 0 10px;} #dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;} #dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;}

HEADER.PHP MENU LAYOUT

Code:

 <div id="nav"> <ul id="dropdown"><li><a href="<?php echo get_option('home'); ?>">Home</a></li>  <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'nav' ) ); ?> </ul>          </div>

-----

any help will be appreciated

I'm currently working on a website and trying to setup two types of navigation. I don't know what happened with it, and I am by no means a expert with CSS... I'd barely say I am a beginner.. I merely took the code I am using from a different layout and am trying to tweak it. When originally designing the layout I had messed up on the slicing and the navigation worked fine. Upon reslicing the website and replacing the navigation code into the layout, I started noticing that the backgrounds for both sections are spanning wider then they are suppose to and do not know what I am over seeing or over looking. This problem has been bloody pissing me off for hours, and with all problems I have had with coding, it is probably something really simple, that I just have overlooked.

Here is the link.

xquizitewarfare dot com/website/index.html

(it isn't allowing me to post a direct link with me being a new member. This is something I'm trying to get finished, and don't want to proceed with coding the rest of the site until i have the nav figured out.)

Like I said I am just barely a beginner at CSS.. I spent about a hour getting the Validators to like my code. Only one error and that is to do with a background, and i'm not sure how to fix it. If anybody is able to respond, I would greatly appreciate it.

hey.

not sure If i can complete this in CSS, I know how to do a singular image scroll over change, but I have a navigation bar i am creating, with about 9 links across is.

I want to have the image change as the mouse scrolls over each link option, so an image map navigation bar with multiple scroll over changes....

how is this possible... it must be some how... I'm currently using Dreamweaver cs4 for my site, although I do have a medium to basic knowledge of html and CSS, so I can adapt coding.

any help or pointers would be great.

I am very new to web design. I had an old friend of mine design this website for me: directdevelopmentinternational.org

I am now trying to use what he did for that website you put together my bands website: throughtheconcreterecords.com

I am trying to get the navigation bar to sit inside of the blank white box I have created in my header image. I also just want the text to be black and maybe when highlighted change to a different color. I also am trying to make it so when you click the burning book logo in the upper left corner it brings you back to the main page.

I am having a terrible time figuring out how to do this as I am not sure what all of the different techniques are referred to. Any help at all would be much appreciated!

Hey guys,

Can someone help me with the following code? I've attempted two fixes, one that alters caching with JavaScript, and another fix with apache, but the server admin is restricting access to the config file. Does anyone know a work around besides these two methods (even if it's semantically incorrect)?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/*- Menu Tabs I--------------------------- */

    #tabsI {
      float:left;
      width:100%;
      /*background:#EFF4FA;*/
      font-size:93%;
      line-height:normal;
	  border-bottom:1px solid #DD740B;
      }
    #tabsI ul {
	  margin:0;
	  padding:10px 10px 0 50px;
	  list-style:none;
	  padding-bottom: 1px; 
      }
    #tabsI li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabsI a {
      float:left;
      background:url("http://exploding-boy.com/images/cssmenus/tableftI.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 5px;
      text-decoration:none;
      }
    #tabsI a span {
      float:left;
      display:block;
      background:url("http://exploding-boy.com/images/cssmenus/tabrightI.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsI a span {float:none;}
    /* End IE5-Mac hack */
    #tabsI a:hover span {
      color:#FFF;
      }
    #tabsI a:hover {
      background-position:0% -42px;
      }
    #tabsI a:hover span {
      background-position:100% -42px;
      }
</style>
</head>
<body>
<ul>
<div id="tabsI">
<ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
</ul>
</div>
</body>
</html>

I have been searching on the level world wide web for a tutorial about how to get CSS down for a horizontal navigation bar that uses different images for each individual button's off and on states?

Many of the tutorials I have found use some sort of background or two state images, and then write text on top the the images.

What if the buttons are designed in a non-arial/verdana/times/san serif font? I assume it would be best to just use images for the nav bar, but then, how do I write the CSS for a nav bar that's using a specific image as it's off stage, and then switches to another image when you scroll over it?