CSS Dropdown menu for the header- With Categories!

[chadderuski]

At first my reply was going to be: "Did I say I wanted a challenge?", LOL!

Well, I was kinda poking at Get Em Fast!

It's also QUITE simple to get the ENTIRE header's source at the end of the page, while having it display at the top. This would require some hacking into tpl_header.php and tpl_footer.php, though in reality I've hacked them up pretty good already. :) Think I ought to update the template to accomplish these things? So basically the SOURCE of the page is in this order: breadcrumbs, then content, then sideboxes, then header, while having the site look exactly the same? I'd love input on this... exciting!

THIS order: breadcrumbs, then content, then sideboxes, then header (with your drop menu)...

would be great from a Search Engine Optimization (SEO) point of view. I am a real novice at SEO, but in my readings, this is the best for getting good spider support. Spiders don't see the css, so all they see is the looooong (achem, my site) list of links. This is duplicated on EVERY page. Result? Spider thinks your a link site with endless duplicate content and penalizes you. Use Web Developer with Firefox. Disable all CSS and you'll see what I mean.

Source ordering the side boxes (and menu if any) is relatively easy as you pointed out, but getting the header's drop menu at the bottom? Would love to see your solution to this.

Cool stuff!

[jettrue]

Well, I was kinda poking at Get Em Fast!



THIS order: breadcrumbs, then content, then sideboxes, then header (with your drop menu)...

would be great from a Search Engine Optimization (SEO) point of view. I am a real novice at SEO, but in my readings, this is the best for getting good spider support. Spiders don't see the css, so all they see is the looooong (achem, my site) list of links. This is duplicated on EVERY page. Result? Spider thinks your a link site with endless duplicate content and penalizes you. Use Web Developer with Firefox. Disable all CSS and you'll see what I mean.

Source ordering the side boxes (and menu if any) is relatively easy as you pointed out, but getting the header's drop menu at the bottom? Would love to see your solution to this.

Cool stuff!

Heh heh, well, I forgot I wasn't replying to my Apple Zen thread. I get mixed up sometimes. But you happen to use the Apple Zen, right? (If you're referring to http://royalindustriesinc.com/) Though modified a good bit? I'm not sure if my method would work with your site right out of the box. You can see what I've done here:
http://www.zencart137.jadetrue.com

The entire header of the above site is enclosed in a <div> (including the drop down menu), so I simply moved that entire <div> down to the bottom of tpl_main_page.php, before the closing body tag. Then I absolutely positioned that div, like this:

#headerWrapper {position:absolute;top:0;}

Then, I set the #mainWrapper to be relatively positioned, and set it so that it started below the absolute one... I had to play around till I got the correct height:

#mainWrapper {
        position:relative;
	top:16em;
	}

So now it goes:
breadcrumbs, then content, then sideboxes, then header (with the drop menu).

I also readjusted so the sideboxes are after the content.

This could be done with your site too, just with some tweaks.

[creative]

So, after bugging both jettrue and Get Em Fast (thanks for answering my questions so promptly you two) about their CSS menu mods/contribs, I've figured out a way to combine the two. Now just my categories appear as items in a CSS dropdown menu across the top of my header.

HOWEVER, now I'm having issues centering the menu itself within the header. I know I can patch it quick by tweaking my margins, making one larger than the other, but would prefer not to. If a user would increase their font size, the quick fix would throw everything out of whack.

I tried using a combo of "text-align=center" for the body and "margin: 0 auto; width: XXXpx;" for the menu wrapper in my style-sheet, but it isn't working. I think the "display: block" and/or "float:left" from the menu is negating the effect.

Has anyone successfully centered this menu in the header? Possible solutions?

[jettrue]

So, after bugging both jettrue and Get Em Fast (thanks for answering my questions so promptly you two) about their CSS menu mods/contribs, I've figured out a way to combine the two. Now just my categories appear as items in a CSS dropdown menu across the top of my header.

HOWEVER, now I'm having issues centering the menu itself within the header. I know I can patch it quick by tweaking my margins, making one larger than the other, but would prefer not to. If a user would increase their font size, the quick fix would throw everything out of whack.

I tried using a combo of "text-align=center" for the body and "margin: 0 auto; width: XXXpx;" for the menu wrapper in my style-sheet, but it isn't working. I think the "display: block" and/or "float:left" from the menu is negating the effect.

Has anyone successfully centered this menu in the header? Possible solutions?

Link please?

[creative]

Would the style sheets and/or php files help? I am unable to supply a link since the site has not been released to the public.

[jettrue]

Would the style sheets and/or php files help? I am unable to supply a link since the site has not been released to the public.

It's a lot easier to do if I could see. You could PM the link if that would work. Did you try this:

#divName {
text-align:center;
margin:0 auto;
}

[creative]

Will do. Thanks.

[airtime]

This is a great contribution. I've it installed on a ZC site just fine. Had to change the .htaccess file vs the recommended additions in order to make it work in IE5, but working great now.

I've now installed it on a test site using phpwebsite, using a basic unordered list. It works fine in mozilla and ie7 but not ie6. I've installed the csshover.htc file as well. See: www.sierranvweb.com/mtp for the menu in place in the site and http://www.sierranvweb.com/mtp/body_files/header.html# for just the menu. Any help, much appreciated.
thanks,
Airtime

[jettrue]

This is a great contribution. I've it installed on a ZC site just fine. Had to change the .htaccess file vs the recommended additions in order to make it work in IE5, but working great now.

I've now installed it on a test site using phpwebsite, using a basic unordered list. It works fine in mozilla and ie7 but not ie6. I've installed the csshover.htc file as well. See: www.sierranvweb.com/mtp for the menu in place in the site and http://www.sierranvweb.com/mtp/body_files/header.html# for just the menu. Any help, much appreciated.
thanks,
Airtime

With a quick look, I'm not sure precisely, but it may be that it is enclosed in a table.... I didn't design or test it that way, so I'm not sure if it will work inside of a table with the same css?

[airtime]

With a quick look, I'm not sure precisely, but it may be that it is enclosed in a table.... I didn't design or test it that way, so I'm not sure if it will work inside of a table with the same css?

It is in a table on www.sierranvweb.com/mtp but in a div on the other link, which is just the menu. Neither works, so I don't think the table is the issue.
Airtime