CSS Forum

**artjunkie** · 12-14-2008, 07:42 PM

Hello all! This is my first post here so bear with me.

I am working on a HTML/CSS navigation bar that has rollover/active states, the problem is the images are not properly displaying. If you look at the beginning and end edge the image cuts off to early.

At the bottom of the post is a link to the source code and how i intended it to look.

The area of the li that changes its background image needs to be larger to include the overlay of the tabs, but if i do so the alignment gets all messed up.

This is probably relatively simple, I just cant seem to find any good literature online regarding this. I am stumped!

The Navigation Bar as is: http://isaacmurray.com/demo/nav2.html

How I want it to look: http://isaacmurray.com/demo/images/example.png

Thank you very much!
Isaac

**LadynRed** · 12-14-2008, 09:17 PM

We cannot possibly debug without seeing the code.

**artjunkie** · 12-14-2008, 09:34 PM

**stevej** · 12-18-2008, 06:07 PM

Well, if I were in your situation, I would make a quick little header using flash. But I don't suppose you have that option.

I would use a combination of JavaScript and CSS. I'm not too good with either of the languages, so this is most likely not the best solution. I don't usually use the whole one-image thing, but in this case It might be the fastest way to get the job done. Oh well, here you go:

CSS

Code:

/* For what the user mouses over */
.mouseover {
width: 680px;
padding-left: 134px;
}
.mouseover a {
padding-right: 134px;
height: 27px;
}
/* For the actual display */
.navigation {
width: 680px;
height: 27px;
}
#home {
background: url("nav.png");
height: 27px;
margin-bottom: -27px;
}
#design {
background: url("nav.png");
height: 27px;
background-position: -0px -27px;
}
#photography {
background: url("nav.png");
height: 27px;
background-position: -0px -54px;
}
#about {
background: url("nav.png");
height: 27px;
background-position: -0px -81px;
}
#services {
background: url("nav.png");
height: 27px;
background-position: -0px -108px;
}

JavaScript

Code:

function switchto(obj) {
    var el = document.getElementById(obj);
    if ( el.style.display != "" ) {
        el.style.display = '';
    }
    else {
        el.style.display = 'none';
    }
}
function remove(obj) {
    var el = document.getElementById(obj);
    el.style.display = 'none'; 
}

HTML Code:

<div class="navigation">
<div id="home"></div>
<div id="design" style="display: none;"></div>
<div id="photography" style="display: none;"></div>
<div id="about" style="display: none;"></div>
<div id="services" style="display: none;"></div>
</div>

<div class="mouseover" style="margin-top: -27px;">
<a onmouseover="switchto('design');" onmouseout="remove('design');" href="deviantart.com"></a>
<a onmouseover="switchto('photography');" onmouseout="remove('photography');" href="msn.com"></a>
<a onmouseover="switchto('about');" onmouseout="remove('about');" href="behance.net"></a>
<a onmouseover="switchto('services');" onmouseout="remove('services');" href="isaacmurray.com"></a>
</div>

Tell me if it works!
- Steve

**jim.thornton** · 12-22-2008, 07:55 AM

I didn't change a thing and it works fine. All I did was place the code within a proper page structure including the doctype.

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>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
    <style type="text/css">
<!--

#Navbar {
	
	margin:0;
	padding:0;
	width:729px;
	height:27px;
}

/*--NAV--*/	
#nav	{width:729px; height: 27px;}
#nav ul	{list-style:none; width: 729px;	height: 27px;}
#nav li	{list-style: none; display: inline; text-align: center;}
#nav li a {text-decoration: none; display:block; float:left; background: url(http://isaacmurray.com/demo/images/navbar/nav.png) no-repeat; text-indent:-9999px;}

/*--NAV A--*/
li#home a {width:134px;	height:27px;}
li#design a {width:134px; height:27px;}
li#photography a {width:134px;	height:27px;}
li#about a {width:134px; height:27px;}
li#services a {width:144px; height:27px; }

/*--NAV POSITION--*/
li#home a:link, li#home a:visited {background-position: -0px -0px;}	
li#home a:hover, li#home a:focus {background-position: -0px -0px;}	
li#design a:link, li#design a:visited {background-position: -134px -0px;}	
li#design a:hover, li#design a:focus {background-position: -134px -27px;	width: 134px; margin-left: -0px;}	
li#photography a:link, li#photography a:visited {background-position: -268px 0px;}	
li#photography a:hover, li#photography a:focus {background-position: -268px -54px; width: 134px; margin-left: -0px;}		
li#about a:link, li#about a:visited {background-position: -402px 0px;}	
li#about a:hover, li#about a:focus {background-position: -402px -81px;	width: 134px; margin-left: -0px;}
li#services a:link, li#services a:visited {background-position: -536px 0px;}	
li#services a:hover, li#services a:focus {background-position: -536px -108px; width: 134px; margin-left: -0px;}


-->
</style>
</head>

 <body>
<div id="Navbar">
    <div id="home-page">
        <div id="nav">
        <ul>
           <li id="home"><a href="google.com"><span>Home</span></a></li>
          <li id="design"><a href="deviantart.com"><span>Design</span></a></li>

          <li id="photography"><a href="msn.com"><span>Photography</span></a></li>
          <li id="about"><a href="behance.net"><span>About</span></a></li>
          <li id="services"><a href="isaacmurray.com"><span>Hire/Services</span></a></li>
        </ul>
        </div>
    </div>
</div>
 </body>
</html>

**stevej** · 02:20 PM

I see what you're getting at zincoxide, only his problem isn't some bug in the code that's preventing it from working, it's the structure of the whole thing and how it's written. Take the code I wrote and paste it in an html editor (with nav.png, of course) and I think you'll see what he's getting at.

Tell me if it works!
- Steve

**jim.thornton** · 12-22-2008, 12:32 PM

Yes but my solution also works. My understanding of the problem was that the end (the curved tail at the end of the menu) was being cut off. As soon as you put the whole thing in a valid page it works. No need for a flash menu or javascript.

From everything that I have read on the subject, it seems that it is best for SEO if you use ONLY CSS and no javascript/flash. I might be wrong on that, but it seems to be the consensus.

**chrishirst** · 12-22-2008, 07:24 PM

Quote:

From everything that I have read on the subject, it seems that it is best for SEO if you use ONLY CSS and no javascript/flash. I might be wrong on that, but it seems to be the consensus.

Provided the pages are not using javascript to actually generate the content (AJAX) or menus, it's fine, same with Flash.