Top Category Navigation Bar

[TheDean]

I am trying to add a button image behind the category words in the Top navigation bar.

In the stylesheet.css, I have changed the #navCatTabs ul li a code to this:

#navCatTabs ul li a  { color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; white-space: nowrap; margin: 0; padding: 0 0.5em; background-image: url("../images/Nav-Buttons.gif");background-repeat: no-repeat; }

Right now the image is not stretching/spanning the length of the category name. Take a look at www.learn2scrap.com/Shop . I am also losing the right side rounded corner.

How can I make this work?

[gjh42]

CSS doesn't work like tables with regard to background images. The image is what it is, and can be positioned and repeated as desired, but will not stretch or shrink. If it is larger than its container, it will be cut off.

The way to make expandable buttons is called the sliding door method (google for a complete tutorial).
Essentially, you use two divs or other elements for each button, one inside the other, and attach a left-edge image to the left side of the first one, making it longer than any button you expect to have, and attach a right-edge image to the right side of the second one, making it just wide enough to give the profile, and with the background outside the button profile solid-colored to blend with the page background and hide the square right end of the first image.

[TheDean]

I found the article on how to do the sliding doors - thanks.

Now I have one button that is text wrapping so it is a taller tab than the rest. When I increase the height of the tab image, it doesn't equal out.

Here is the new code I have:

 
#navCatTabs {
    float:center;
    width:100%;
    background:white;
    font-size:9pt;
    line-height:normal;
    }
  #navCatTabs ul {
    margin:0;
    padding:0;
    list-style:none;
    }
  #navCatTabs li {
    float:left;
    margin:0;
    padding:0;
    }
 #navCatTabs a {
    display:block;
    }
 #navCatTabs li {
    float:left;
    background:url("../images/RightSide.gif")
      no-repeat right top;
    margin:0;
    padding:0;
    }
 #navCatTabs a {
    display:block;
    background:url("../images/LeftSide.gif")
      no-repeat left top;
    padding:5px 15px;
    }

I noticed in Firefox that the tab moves entirely to the next line which I don't like either. (Seems I have a bigger issue to work out with Firefox with the columns anyway)

How can I control this to make the tab sizes equal and to have the text wrapping instead of the line wrapping?

[gjh42]

You have a bunch of duplicate code which is useless at best. Get rid of the extras, fix one error and add a line, so it looks like this:

#navCatTabs {
    text-align:center;//no such thing as float: center
    width:100%;
    background:white;
    font-size:9pt;
    line-height:normal;
    }
  #navCatTabs ul {
    margin:0;
    padding:0;
    list-style:none;
    }
 #navCatTabs li {
    float:left;
    background:url("../images/RightSide.gif")
      no-repeat right top;
    margin:0;
    padding:0;
    }
 #navCatTabs a {
    display:block;
    height:25px; //adjust height to suit, so all will be constant
    background:url("../images/LeftSide.gif")
      no-repeat left top;
    padding:5px 15px;
    }

You have a logo image that is 300x282px, which, even though you can't see it, is sticking down from the logoWrapper and keeping the tabs from sliding left. That seems to be the default size for this template, as I saw another one with the exact same problem a few days ago.

[TheDean]

I almost have the tabs correct.

Just wanted to correct a piece of the code. The left image needs to be before the right image for it to show so the new code looks like this:

 
#navCatTabs {
    float:left;
    width:100%;
    background:url("../images/bg.gif")
       repeat-x bottom;
    height:38px;
    font-size:9pt;
    line-height:normal;
    }
  #navCatTabs ul {
    margin:0;
    padding:0;
    list-style:none;
    }
#navCatTabs a {
  display:block;
  height:25px; 
  background:url("../images/LeftSide.gif")
    no-repeat left top;
  padding:5px 15px;
  }
 #navCatTabs li {
    float:left;
    background:url("../images/RightSide.gif")
      no-repeat right top;
    margin:0;
    padding:0;
    }

I am working on having the current tab be a different color but can't find a color that looks good yet. If you have a suggestion, I'm open to hearing it. I tried to have the normal tabs be black and the selected tab be gray but it didn't look good and I thought it would be too much red to have the tabs be red too.

I also added a background image to create a line at the bottom of the tabs.

I'm still trying to locate the logo dimensions that you mentioned is causing the shift in FireFox. It isn't in the stylesheet.css so I'm going to look in the other files.

Now is there a way to have the words on the tabs be in the middle of the tab instead of the top?

Also what is creating the white space between the red bar and the tabs? I thought it was padding from the red bar but there isn't any.

I also have the problem of when I go to one of the categories, the breadcrumb trail is overlapping the tabs.

[TheDean]

I created my own template based on the classic one of Zencart which uses a logo.gif image. I found the image information in the includes/languages/english/header.php file and fixed both the dimensions there and with the actual image. Now in Firefox, the columns all sit completely off the page.