Zen Cart Logo
trapezoid-twopenny
Open navigation menu
Home Community Forum Plugins
Documentation
For Developers For Storeowners
Services Donate Get Started
Forums / Templates, Stylesheets, Page Layout / Nav Bar and Link Problems

Nav Bar and Link Problems

Locked
Results 1 to 20 of 31
This thread is locked. New replies are disabled.
26 Aug 2006, 05:09
#1
chemdata avatar

chemdata

New Zenner

Join Date:
Aug 2005
Posts:
27
Plugin Contributions:
0

Nav Bar and Link Problems

I have my nav bars at the top and also the one below the logo set as follows:

#navMainWrapper {
FONT-WEIGHT: bold;
MARGIN: 0em;
WIDTH: 100%;
COLOR: #ffffff;
HEIGHT: 1%;
BACKGROUND-COLOR: #426B9C
}


#navCatTabsWrapper {
FONT-WEIGHT: bold;
MARGIN-BOTTOM: 1px;
WIDTH: 100%;
COLOR: #ffffff;
HEIGHT: 1%;
BACKGROUND-COLOR: #426B9C
}

In spite of this the separator "|" between each of the links is not visible having taken on the background color.

I am also having a problem with the following two links which are aon the left and right side of the page. These are "new products (more)" and "shipping cart (more)" respectively. Although I was able to set the hover color to what I wanted it just accepts the color of all the otgher links on the page and not to what I want.

I seem to be at a standstill. Any help is appreciated. Thanks.
26 Aug 2006, 05:52
#2
kobra avatar

kobra

Black Belt

Join Date:
Aug 2005
Posts:
31,500
Plugin Contributions:
4

Re: Nav Bar and Link Problems

Post a url so we do not have to guess...
26 Aug 2006, 07:20
#3
chemdata avatar

chemdata

New Zenner

Join Date:
Aug 2005
Posts:
27
Plugin Contributions:
0

Re: Nav Bar and Link Problems

Sorry. The url is:
http://www.fotopoet.com/zencart/

Thanks.
26 Aug 2006, 08:45
#4
sketchy avatar

sketchy

Totally Zenned

Join Date:
Aug 2006
Posts:
940
Plugin Contributions:
2

Re: Nav Bar and Link Problems

I think the popular misconception is that using the template overrides will have the separators in place, but that's a thing of the 'Classic' tabled header. However, you can add the separators in optionally.

To change the color of the sidebox header/title links;
h3.leftBoxHeading a:hover {
	color: #insertyourcolorhere;
	text-decoration: underline;
	}

h3.rightBoxHeading a:hover {
	color: #insertyourcolorhere;
	text-decoration: underline;
	}
26 Aug 2006, 08:54
#5
chemdata avatar

chemdata

New Zenner

Join Date:
Aug 2005
Posts:
27
Plugin Contributions:
0

Re: Nav Bar and Link Problems

Thanks. The separators are in place. Its just that they took on the color of the background and therefore cannot be seen.
26 Aug 2006, 09:01
#6
sketchy avatar

sketchy

Totally Zenned

Join Date:
Aug 2006
Posts:
940
Plugin Contributions:
2

Re: Nav Bar and Link Problems

Odd, I can't see any seperators even in your page source. :unsure:

Anyways, I forgot to mention that you forgot the semicolons following your last color codes in the codes you supplied. It's a good idea to validate as it lessens parse errors. :yes:
26 Aug 2006, 09:09
#7
chemdata avatar

chemdata

New Zenner

Join Date:
Aug 2005
Posts:
27
Plugin Contributions:
0

Re: Nav Bar and Link Problems

Thank again. If you highlight those areas where the separators are supposed to be you will see that they show. Its just that they have taken on the color of the background there and thus cannot be seen.

As for the omission of the semi-colon in the code you will note that its the last entry in each and consequently I don't believe you need a semi-colon since nothing follows after each.
26 Aug 2006, 14:30
#8
tinas avatar

tinas

Totally Zenned

Join Date:
Jan 2005
Posts:
1,090
Plugin Contributions:
0

Re: Nav Bar and Link Problems

Hi Chemdata

First, you are right - you do not need a closing ; on the final declaration of a style, just like you don't need it when it's the only declaratioin in a statement. Your css validates just fine - I just ran it ;)

Now to fix your problem. You need to declare the color of the font in those declarations. The reason those | are the same color is that it is picking up the common text color declaration on those elements. They aren't links.... you follow?

Simply add your font color ( color: #ffffff ) for exmple to your declaration of the colors and they should be fine.

BTW - you need to put back the clearboth on your header - your layout is completely wonked in Firefox.

Hope that helps!
26 Aug 2006, 14:37
#9
tinas avatar

tinas

Totally Zenned

Join Date:
Jan 2005
Posts:
1,090
Plugin Contributions:
0

Re: Nav Bar and Link Problems

Hi Chemdata -

First, in your defense, you are correct and Sketchy is wrong. Your css validates just fine ;)

The closing ; in css is ONLY needed to seperate multiple style elements applied in a single definition. You need not close the last statement nor any single statement with the closing semi colon and your css will validate just fine ;)

Now onto the question at hand.

Your problem lies in what you have defined - you have defined the WRAPPER of those areas which are id's - though the fonts use the classes of the id's - therefore what you need is to add / change these elements :

#navCatTabs and #navMain so that you have your white font within them.

How this has anything at all to do with the sidebars I have no idea, but if you try my suggestion I bet you get the results you are wishing.

Hope that helps.
26 Aug 2006, 21:06
#10
chemdata avatar

chemdata

New Zenner

Join Date:
Aug 2005
Posts:
27
Plugin Contributions:
0

Re: Nav Bar and Link Problems

Tina once again thanks. I am still trying to implements your suggestions but with no success. Its not your instructions but my ineptness at this. I guess I should not have retired and stayed with chemistry and math. That was easier.

I will keep on trying. I put back the clearboth however it created new problems. In Firefox it left an area after the image where it did not pick up the background color. In MSIE I was not able to get rid of the space betwwen the image and the category nav bar.

Forrest Gump was correct ---"**** happens".

Once again thanks for the help and btw I did not name the site after you ;-).
26 Aug 2006, 21:45
#11
tinas avatar

tinas

Totally Zenned

Join Date:
Jan 2005
Posts:
1,090
Plugin Contributions:
0

Re: Nav Bar and Link Problems

That was an oops - the double post - sorry - my connection timed out when I entered my first reply and so I typed it again :(

Try doing this ...

at the end of your stylesheet add this :

#navCatTabs { color: #ffffff }

In order to clear the blank issue in IE change the <br class="clearboth /> to
<div class="clearboth"></div>

As for the background - do you have a background set for the header background ?

Hope that helps a lil more - and I promise I won't post the same thing twice this time :)
26 Aug 2006, 22:51
#12
chemdata avatar

chemdata

New Zenner

Join Date:
Aug 2005
Posts:
27
Plugin Contributions:
0

Re: Nav Bar and Link Problems

Thanks again. I guess you figured out that "double posts" confuse old people like myself since we can only do one thing at a time. No multitasking for us.

Seriously I had tried the #navCatTabs { color: #ffffff } with no sucess.

The blank issue in IE was resolved by changing the <br class="clearboth /> to
<div class="clearboth"></div> as you instructed.
However it didn't help FireFox. It seems that there the category nav bar follows right next to the logo image and spills over into the next line.
26 Aug 2006, 23:05
#13
sketchy avatar

sketchy

Totally Zenned

Join Date:
Aug 2006
Posts:
940
Plugin Contributions:
2

Re: Nav Bar and Link Problems

True, it's 'only' good practise to end the final with a semicolon. The reasoning is for possible added declarations in the future, to avoid parsing problems due to a forgotten semicolon... It's just my coding habit. Yeah, the statement came across the wrong way and Chemdata... I apologise for that and not bringing these three FF errors to light;
INPUT:unknown {
	BACKGROUND: #f0f8ff
}
SELECT:unknown {
	BACKGROUND: #f0f8ff
}
TEXTAREA:unknown {
	BACKGROUND: #f0f8ff
}

~Via Firefox "Unknown pseudo-class or pseudo-element 'unknown'. Ruleset ignored due to bad selector."

TinaS:

Sketchy is wrong.
I just tell it as it is, blame FF. :dontgetit
26 Aug 2006, 23:22
#14
chemdata avatar

chemdata

New Zenner

Join Date:
Aug 2005
Posts:
27
Plugin Contributions:
0

Re: Nav Bar and Link Problems

Sketchy there is no need to apologize. I was only glad that you were trying to help me and took it in that vein. BTW if you look at the stylesheet.css that comes with the ZenCart that none of the ending declarations end with a semi colon. Once again thanks.
26 Aug 2006, 23:24
#15
kim avatar

kim

Obaa-san

Join Date:
Jun 2003
Posts:
26,564
Plugin Contributions:
0

Re: Nav Bar and Link Problems

BTW if you look at the stylesheet.css that comes with the ZenCart that none of the ending declarations end with a semi colon.


Excuse me? I believe they do all have a semi-colon at the end.
26 Aug 2006, 23:30
#16
chemdata avatar

chemdata

New Zenner

Join Date:
Aug 2005
Posts:
27
Plugin Contributions:
0

Re: Nav Bar and Link Problems

Kim:

Here are a few of the declarations taken from the top of the stylesheet.css. I don't see any of ending declarations ending with the semi-colon just the preceeding ones.

BODY {
FONT-SIZE: 62.5%;
MARGIN: 10px; COLOR: #3b3b39;
FONT-FAMILY: verdana, arial, helvetica, sans-serif;
BACKGROUND-COLOR: #d1d1d1
}

A IMG {
BORDER-TOP-STYLE: none;
BORDER-RIGHT-STYLE: none;
BORDER-LEFT-STYLE: none;
BORDER-BOTTOM-STYLE: none
}

A:link {
COLOR: #0000ff;
TEXT-DECORATION: none
}

#navEZPagesTOC UL LI A {
COLOR: #4e4f45;
TEXT-DECORATION: none
}

A:visited {
COLOR: #0000ff;
TEXT-DECORATION: none
}

A:hover {
COLOR: #426B9C
}
26 Aug 2006, 23:36
#17
kim avatar

kim

Obaa-san

Join Date:
Jun 2003
Posts:
26,564
Plugin Contributions:
0

Re: Nav Bar and Link Problems

Sorry, but is not a stock template.

Below is the first few lines of the template default CSS

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #000000;
	background-color: #e5edf5;
	}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #3300FF;
	text-decoration: none;
	}
 
a:visited {
	color: #3300FF;
	text-decoration: none;
26 Aug 2006, 23:43
#18
chemdata avatar

chemdata

New Zenner

Join Date:
Aug 2005
Posts:
27
Plugin Contributions:
0

Re: Nav Bar and Link Problems

Kim:

You are correct and I stand corrected. The stylesheet.css that I was using as you pointed out was not the template default css. And I can see the value of using the semi-colon after each and every declaration so as to prevent the possible errors that can occur when adding further declarations.
27 Aug 2006, 00:03
#19
kim avatar

kim

Obaa-san

Join Date:
Jun 2003
Posts:
26,564
Plugin Contributions:
0

Re: Nav Bar and Link Problems

:D Knew I didn't mess that up.
27 Aug 2006, 00:51
#20
seethrou avatar

seethrou

Totally Zenned

Join Date:
May 2004
Posts:
1,156
Plugin Contributions:
0

Re: Nav Bar and Link Problems

I think you should insert the separators for yourself.

chemdata:

Thank again. If you highlight those areas where the separators are supposed to be you will see that they show. Its just that they have taken on the color of the background there and thus cannot be seen.

It may be the spaces between the lists. :smile:

In another discussion Layout/Nav Problems!! 1 step forward - 2 steps back,
I had tried to modify the code and changed to different separator for the navigation bar, it worked in my fast test and waiting for the poster's feed back.

For your reference, the below code is related to your problem and it use  ::  for the separator.

And for test, also added the <div id="navMainMySeparator"> ... </div> to highlight the sparator with another color added to the stylesheet.
If you don't want it just take it out.

[php]<!--bof-navigation display-->
<div id="navMainWrapper">
<div id="navMain">
<div id="navMainMySeparator">
<ul class="back">
<li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li> :: 
<?php if ($_SESSION['customer_id']) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li> :: 
<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li> :: 
<?php
} else {
if (STORE_STATUS == '0') {
?>
<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION['cart']->count_contents() != 0) { ?>
<li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li> :: 
<li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
</ul>
</div>
</div>
[/php]