CSS Dropdown menu for the header- With Categories!

[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.

[chadderuski]

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.

Jade! That is awesome! Looks very good without the CSS. Page content is at top, and then new items... which is cool cause the spiders will think new content and visit more often.

I will have to see if I can get Royal's site to meet yours. Thanks for taking on my challenge! And be sure to say in your mod that it is source ordered ... to get page content at top of page!

Will be really interested to see how this affect our page rank once I get it working!

Chaddro.

[jettrue]

Jade! That is awesome! Looks very good without the CSS. Page content is at top, and then new items... which is cool cause the spiders will think new content and visit more often.

I will have to see if I can get Royal's site to meet yours. Thanks for taking on my challenge! And be sure to say in your mod that it is source ordered ... to get page content at top of page!

Will be really interested to see how this affect our page rank once I get it working!

Chaddro.

Thanks Chad,

The only issue, that is partially dissuading me from integrating this into the download, is that the top:16em will be different for just about every user. Depending on their logo height, whether or not they use the category tabs or ezpages in the header, etc. Just another thing I have to answer over and over again cause people don't read the readme.txt. Well, what's one more thing, anyway? This new layout is also very unforgiving, because if there's anything wrong, like a closing div missing, it gets very unhappy. Though it helped me realize an error in one of my contributions.

Though I was debating taming this down a bit, by trying to keep the logo section up top in the source, and just have the category tabs, ezpages section, and drop down menu at the bottom of the source. What do you think?

[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

[chadderuski]

Thanks Chad,

The only issue, that is partially dissuading me from integrating this into the download, is that the top:16em will be different for just about every user. Depending on their logo height, whether or not they use the category tabs or ezpages in the header, etc. Just another thing I have to answer over and over again cause people don't read the readme.txt. Well, what's one more thing, anyway? This new layout is also very unforgiving, because if there's anything wrong, like a closing div missing, it gets very unhappy. Though it helped me realize an error in one of my contributions.

Though I was debating taming this down a bit, by trying to keep the logo section up top in the source, and just have the category tabs, ezpages section, and drop down menu at the bottom of the source. What do you think?

Yes, I see what you mean. Perhaps not having the drop menu in the same div will solve that, and leaving the header more like it was. But don't minimize your accomplishment. Great solution, and goes to show the strength of CSS. Do THAT with a table!

Like I said, I have to get this working for Royal and see what happens with page rank.

[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