CSS Dropdown menu for the header- With Categories!

jettrue:

Your logo is 96px tall. Your stylesheet is telling the browser it is only 75px tall:

#logoWrapper{
/background-image: url(../images/bback.gif);/
background-repeat: repeat-x;
background-color: #ffffff;
height:75px;
}

Jettrue;

That did the trick and thank you so much for the wonderful mod!!! it makes our site sooooooooo much cleaner already.

Sincerely,

0be1

Ok. I actually have 2 problems.
Sort of a Ying Yang Situation.

At the Top Level. One of the sections doesn't show the image button I made.
(Because it doesn't have a level below it ) of which I want to show a button.

Then the opposite problem... When I have Sub Categories The button shows up again... (Because there is another level down. ) Here I do not want the button.

This menu is not really designed for buttons. You're going to need to fight with the css, and have combined css tags to get this to work.

:frusty::frusty::frusty::frusty::frusty::frusty

I have installed this dropdown on a few sites, works like a charm.

I am currently working on a site but i just noticed that the cPath is not being written correctly. From the drop-down, for example, the menu takes me to:

index.php?main_page=index&cPath=8

but it should be:

index.php?main_page=index&cPath=2_8

This causes problems with navigation and indexing. Other sites that I installed this to do not have this issue.

Things to consider

• I attempted an install of Magic SEO URLS that was unsuccessful because my test server does not include zend optimizer, so i removed it.

• I have reinstalled the menu since discovering this.

• I have disabled the stylesheet and the problem persists.

To see what I mean please visit: 72 47 237 83

Just wondering if there are any known conflicts that I should consider or if there is a fix/override. Of course, there's a good chance I have blatantly overlooked something. :lookaroun

update:

looked at the other sites that i used this mod on. they all use ultimate seo url's, and when ultimate seo's mod is switched off, the problem that I am having on this project is duplicated on those sites too; however, when enabled its all ok.

this site never had ultimate seo urls but i did try an install of magic urls (as mentioned above in my previous post). could there be a conflict with url rewriting when the url rewrite mod is turned off or disabled or maybe the way url mods change the database?

Sorry for the somewhat OT

Jettrue;

I was going to PM you, but it says your box is full, soooooooo....

I could not really find the answer and did not want to yet start a post until some things were figured out. I have enjoyed alot of the works you have done with the cherry and apple templates and more so the nifty zen and that is what I am writing to you about.

I have found the home source for nifty (now nifty cube) at:

http://www.html.it/articoli/niftycube/index.html

I am not sure if that is where you received your information from or not. I would like to incorporate some of these ideas from this site into zc, however, I do not have a strong enough knowledge of css and JavaScript to do so (as of yet ;o) and I was wondering if you might be able to give some insight basics. A lot of what is contained on the above mentioned site appears to be the same in your posts, just with certain files renamed and the appropriate code inserted into the appropriate places.

Any help you can give me on this would be greatly appreciated and I believe if one can come up with an easy to follow tutorial on many of the wonderful things one could do with css in zc, many sites would become wonderful and aesthetically pleasing :smile:

tia...

0be1
a.k.a - Shawn

I installed the dropdown menu on my site. In firefox, it created a white space between the top and bottom of my image and in IE, the white space just shows up at the bottom of the image. How do I push the menu up against the picture. My site is located here: http://thejubileemarket.infostampede.com/catalog if you want to have a look. Thanks.

oceanturqiri:

I installed the dropdown menu on my site. In firefox, it created a white space between the top and bottom of my image and in IE, the white space just shows up at the bottom of the image. How do I push the menu up against the picture. My site is located here: http://thejubileemarket.infostampede.com/catalog if you want to have a look. Thanks.

Oceanturqiri;

You will see throughout this thread that many people had the same problem maybe just worded differently. By looking at your site I see your header image is at 251px. If you look for the section below in your stylesheet you will notice the height of the logo wrapper is the same px setting as your image. Try backing the height down a bit in the #logoWraper section, say to 200, save the changes and reupload your stylesheet.css file.

#logoWrapper{
background-image: url(../images/painting-banner-jm.jpg);
background-repeat: repeat-x;
background-color: #ffffff;
height:251px;
}

Be sure to do a backup of that file first of course. If that does not work, please post back here and we'll try something else.

Good luck :cool:

0be1

Hello,

Thank you for your help. I am still having problems, though. In firefox, it fixed the bottom part, however, the white strip above the image remains. It seems as though it is pushing up the purple strip. IE behaves differently: When I change the size of the logo wrapper, it pushes the menu, a small white strip, and the image up and under the purple strip on the top of the page.

Thanks,

Ocean

I cannot make changes to the stylesheet.css file and save it and then view it in IE. I can only make changes (and not save it) in firefox using the webdeveloper tools. It is definitely a night a day difference between the two browsers (I hate IE and Microsoft (sorry for the rant :smile: )

Is it the border 1px in the main wrapper section causing your problem? You can try that and see what you get. If you are not using firefox and the webdeveloper and firebug plugins I suggest you give it a try. With the webdeveloper plugins you can see the div layout (which helps alot!!!) edit your css files in real time and so much more.

Try changing the 1px under #mainWrapper and post back if you are still having problems.

thanks...

0be1

Hello Obe1

When I change the 1px in the main wrapper, it just changes the border around the entire page. I don't know anything about web developer plugins or div layouts - but I guess I'll be learning. I am going to go crazy and throw the computer out the window. Just kidding, sort of.

It actually looks better in IE except for the little white line. I firefox, there is a huge white at the top between the purple bit and the picture.

Any other suggestions?

Thanks,

Ocean

Learning is a good thing :o)

The only other thing I can (take a stab at) is in your header_menu.css look for:

div#dropMenu li a {
display: block;
/* Hides from IE5-mac */
height: 1%;
/* End hide from IE5-mac */
padding: .6em 0;
text-decoration: none;
text-transform:uppercase;
color:#ffffff;
text-align:center;
border-right:1px solid #ffffff;
}

Not sure what that height: 1%; controls. Other than that you may have to either do the things I suggest with Firefox in my previous post or maybe jettrue will check in in a couple of days.

Sincerely,

0be1

Maybe the problem is that the image is set as a background and not just an image. I don't know enough about CSS to fix the problem.

Ocean

oceanturqiri:

I would take a look at what that pesky '.back' style element is doing to your header but take note that if you change it, it will change other nav elements in in the footer and possibly other areas so keep an organized backup of your style sheet.

try searching for "ie whitespace bug" in google if you have gaps and spaces above or below the menu in ie but not in firefox. usually the fix involves a negative margin or padding value to be added somewhere like {padding-top: -3px} . try not to get used to that hack in regular style sheet building, there's usually a proper solution although this menu does cause ie to have this this issue often enough.
**
I have a question for the forum.**

Has anyone added a timeout on this menu so your mouse doesn't miss the sub-categories? When the drop-down rows are skinny, you have to be nimble and quick with the pointer. I've seen some javascript stuff out there but maybe someone has already done the edits already? :mellow:

Thank you for all of the responses. I hate to be a pain, but the problem isn't with IE, it is with firefox. There is an annoying white space that shows up in firefox, but not in IE, above the image and I don't know how to get rid of it.

http://thejubileemarket.infostampede.com/catalog

Thanks,

Ocean

yup, try temporarily disabling that 'back' element for the firefox issue and see where you go from there.

Ocean;

Go down to the #headerWrapper, #contentMainWrapper, #logoWrapper,etc. section and breakout the #headerWrapper section like so. Change the color to anything you like other than #ffffff (as that is white) save, and reupload your css file.

#headerWrapper {

background-color: #000000;

}

Again, be sure to make a back up first. Again I hope this helps.

Sincerely,

0be1

Hello Obe1,

I am sorry, but that did not help.

I changed the mainWrapper background-color to #FFECB3 so that you can see what is happening.

I also changed the #navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
color to #000000; (it used to be white).
**
I greatly appreciate your time and your help.**

Ocean

http://thejubileemarket.infostampede.com/catalog

Ocean;

That actually looks pretty good, I like it!!! (but hey, it's not my site ;o)

If you actually noticed my last post though it said to modify the #headerWrapper only which controlled the white part at the top.

Either way and whatever works for you :o)

Sincerely,

Shawn

Hello Shawn,

I should have mentioned that I did change the #headerWrapper... to 990099 to match the nav buttons. So it did work to eliminate the white space at the bottom of the buttons. I am so focused on that blasted space at the top of the image that I didn't give you credit for fixing the bottom bit. Anyway, I changed it to 000000, so that you can see the effect.

I also wanted to mention that I wasn't having this problem until I installed the dropdown menu, so it changed something.

Thank you for liking the new color scheme: ) I am putting this site together for a friend who is starting this ministry. She likes white, but I'll mention it to her.

Thanks again.

Ocean

Ocean;

What about this to stay consistent with the rest of the color scheme:

Search for h2.centerBox in your stylesheet.css

h2.centerBoxHeading {
font-size: 1.3em;
color: #000000;
background-color: #990099; // I added this line and matches your other color purple.
}

Just a thought ;o)

Keep up the good work!!!!

Sincerely,

0be1