Header Navigation Help with CSS

[toddo]

Hi all,

Since this is my first post let me tell you a little about me and the project I'm working on. It's been about 2 weeks since I first decided to go with ZC instead of OSC. Having used OSC in the past, let me tell you what a joy the admin area is to work with. Great job ZC devs!

Custom configuration of the cart is well.. it is what it is. I'm no developer and it's been some years since I played with CSS, XHTML and PHP. Thanks to the forums and all the help from the likes of Kobra, DrByte, Merlinpa and Glenn, I have been able to come up with a close ZC version of the main site I am trying to match.

Main site: http://share.dobucki.com
ZenCart: http://shop2.dobucki.com

I am trying to get the PHP generated main navigation into the CSS buttons and am stuck. Since I'm not really advanced with CSS enough to know exactly what I'm doing, everything to this point has been many hours of trial and error. I know it must be fairly easy but just cant seem to get it. Any help would be greatly appreciated.

Also, any ideas on how to remove all the extra blackspace in the header between the tagline and the buttons? I spent about a day playing with the stylesheet to get the background, logo and tagline to display right and the extra space was an unwanted byproduct. I know it's in the stylesheet somewhere but can't find it. I am attaching the stylesheet if anybody wants to look.

Thanks in advance for any help and Zen Cart and the development team ROCK!

[HumDaddy]

I don't know how exactly to do what you're asking but I can tell you that the firefox browser along with the web developer plugin have been of great help to me.

I would like to know how you created the hover effect with your navigation drop down menu.

Jason

[clydejones]

Also, any ideas on how to remove all the extra blackspace in the header between the tagline and the buttons? I spent about a day playing with the stylesheet to get the background, logo and tagline to display right and the extra space was an unwanted byproduct. I know it's in the stylesheet somewhere but can't find it. I am attaching the stylesheet if anybody wants to look.

Your logo image is 125px high If you don't need that much space then you can do either of two things:

1) redo the graphic so that it is only say 80px high.

OR

2) find the #logoWrapper declaration in your stylesheet.css and adjust the height element to say 80px.

[toddo]

Ahh, Mr. ClydeJones, your reputation precedes you! Thanks for the reply.

If you look at the main site , you'll see what effect I am trying to achieve with both the header and footer. For some reason unknown to me, ZC seems to handle the CSS for the nav bar different than the main site.

I think you are right about adjusting the height of the logo wrapper but I haven't tried it yet.

Any ideas about how to incorporate the nav bar with Home, Log In, Shopping Cart, Checkout? I tried Jettrues horizontal nav bar with CSS buttons but couldn't get the desired effect.

[clydejones]

Ahh, Mr. ClydeJones, your reputation precedes you! Thanks for the reply.

If you look at the main site , you'll see what effect I am trying to achieve with both the header and footer. For some reason unknown to me, ZC seems to handle the CSS for the nav bar different than the main site.

I think you are right about adjusting the height of the logo wrapper but I haven't tried it yet.

Any ideas about how to incorporate the nav bar with Home, Log In, Shopping Cart, Checkout? I tried Jettrues horizontal nav bar with CSS buttons but couldn't get the desired effect.

You should be able to employ the same "sliding door" technique for the buttons on the shop as you are using on your main site.

Take a look at the CSS section that handles your navigation on your main site and try to adapt it to the "navMain" section of your shop's stylesheet.css

[toddo]

Thanks Clyde,

I'm going to try swaping code from the main site to the navMain section and see what happens. I've played around with it a bit but hit the frustration limit and figured it would be good to take a break for a day or two.

[toddo]

OK, I am pretty happy with the header layout but have an issue with FireFox displaying the navMain background color behind the CSS buttons and I dont know why. I tried changing background colors to black but that didn't work. Other than that it it looks great in IE, isn't it supposed to be the other way around?

Can somebody take a look at the stylesheet and see where I went wrong?

Also, anybody have any ideas on how to get the footer to display the navigation and siteinfo on one line? I'm trying to match the look of the main site. I found a couple of relevant posts that worked for the header but no luck on the footer.

HELP!

[kobra]

Try this and adjust height as required - change background color from white to black

#navMainWrapper {
	margin: 0em;
        height: 21px;
        padding: .60em 0em 0.1em 0em;
        background-color: #000000;
        font-weight: bold;
        font-size: 10px;
	color: #000000;
	width: 100%;
	}

[toddo]

Hi Kobra,

Thanks for the quick reply. I had tried changing the color here but didn't specify a height. I'll tryworking with this and see what I can do.

Thanks again!

[toddo]

Ha! I got the header navigation buttons to display properly. I had to move the div "navMain Wrapper" down towards the bottom in the tpl_header.php file.

Now if I can get the footer figured out we'll be all set!