Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Need help with Tabbed CSS Navigation Rollover
Old 12-14-2008, 07:42 PM Need help with Tabbed CSS Navigation Rollover
Novice Talker

Posts: 5
Trades: 0
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
artjunkie is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 12-14-2008, 09:17 PM Re: Need help with Tabbed CSS Navigation Rollover
LadynRed's Avatar
Defies a Status

Posts: 10,017
Location: Tennessee
Trades: 0
We cannot possibly debug without seeing the code.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 12-14-2008, 09:34 PM Re: Need help with Tabbed CSS Navigation Rollover
Novice Talker

Posts: 5
Trades: 0
<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(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:134px; 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>


<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>
artjunkie is offline
Reply With Quote
View Public Profile
 
Old 12-18-2008, 06:07 PM Re: Need help with Tabbed CSS Navigation Rollover
stevej's Avatar
Professional Multitasker

Posts: 996
Location: Not positive
Trades: 0
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
stevej is offline
Reply With Quote
View Public Profile
 
Old 12-22-2008, 07:55 AM Re: Need help with Tabbed CSS Navigation Rollover
Webmaster Talker

Posts: 626
Trades: 0
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>
jim.thornton is offline
Reply With Quote
View Public Profile
 
Old 12-22-2008, 11:33 AM Re: Need help with Tabbed CSS Navigation Rollover
stevej's Avatar
Professional Multitasker

Posts: 996
Location: Not positive
Trades: 0
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

Last edited by stevej; 12-22-2008 at 02:20 PM..
stevej is offline
Reply With Quote
View Public Profile
 
Old 12-22-2008, 12:32 PM Re: Need help with Tabbed CSS Navigation Rollover
Webmaster Talker

Posts: 626
Trades: 0
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.
jim.thornton is offline
Reply With Quote
View Public Profile
 
Old 12-22-2008, 07:24 PM Re: Need help with Tabbed CSS Navigation Rollover
chrishirst's Avatar
Missing! presumed drunk.

Posts: 42,371
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
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.
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
<<-

A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 12-22-2008, 08:14 PM Re: Need help with Tabbed CSS Navigation Rollover
Webmaster Talker

Posts: 626
Trades: 0
Quote:
Originally Posted by chrishirst View Post
Provided the pages are not using javascript to actually generate the content (AJAX) or menus, it's fine, same with Flash.
Oh... I thought that the bots couldn't *read* the flash files and ignored links with javascript.
jim.thornton is offline
Reply With Quote
View Public Profile
 
Old 01-13-2009, 05:24 PM Re: Need help with Tabbed CSS Navigation Rollover
Novice Talker

Posts: 5
Trades: 0
Thanks stevej and zincoxide for all the help!
artjunkie is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Need help with Tabbed CSS Navigation Rollover
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

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 Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.99498 seconds with 12 queries