JS menu x,y positioning on vertically/horizontally centered page

[jgurley]

I'm using a JS menu for navigation throughout a site I'm developing. The homepage of the site, unlike the rest of the site, is perfectly centered horizontally and vertically. Because of this, the content of the page changes its position depending on the size of the browser window.

And because of *that*, I can't select a permanent x and y-axis position for the menus to reside at.

Does anybody know of another way to anchor the menus to the necessary position on a centered layout?

Jg

[pyro]

Doesn't positioning with css like this position: absolute; top: 0px; left: 0px; work?

[jgurley]

Absolute positioning probably wouldn't work, since you have to know that the page will be in the same position all the time. Since this page is centered vertically and horizontally, all elements will be moving depending on the browser window's size.

Someone else mentioned relative CSS positioning -- how would this work, if at all?

Jg

[pyro]

Can you post a link where this problem can be seen? I don't really understand what the problem is, I think... :(

[jgurley]

Sure thing.

Here's a page where you can see the menus at work:

http://www.deeplyshallow.com/mesh/cgi_test/testing/index.shtml

And here's the homepage, which is centered:

http://www.deeplyshallow.com/mesh/cgi_test/index.shtml

As you can see, the homepage can't have the menus fixed to an absolute position, because the content of the page changes its position depending on the browser window size.

Thanks for the help. Any ideas?

Jg

[pyro]

Yeah, I think what you need to do is use relative positioning with css. Do you know any css?

Also, your homepage doesn't vertically center itself for me in IE6... I don't see any code that would make me think it would work in any browser, though...

[jgurley]

It doesn't vertically center? Odd -- it vertically centers in IE/Mac; am I missing something in the code that would make it vertically center?

Anyway, I do know CSS, but I use it mostly for textwork -- how would I use relative positioning to place the JS menus?

[pyro]

Oh wait. Are you using CSS to vertically center? If so, no wonder IE doesn't do it. IE pretty much just sucks at CSS interpretation. To see how to do it with javascript, visit http://www.infinitypages.com/research

To position relatively, use something like style="position: relative; top: 0px; left: 0px"

[jgurley]

I'm not using JS or CSS to center the content, but a table-based workaround -- the content table is embedded in an empty table with a width and height of 100%.

If you know of a better or more reliable way to center the layout, I'm open to it.

I'm not sure I understand relative positioning, though -- isn't that still just declaring a position in the page that the element should attach itself to? If the centered design shifts when the browser is resized, wouldn't the element remain in a certain place while the layout moves?

Jg

[pyro]

View this page: http://www.infinitypages.com/research/verticalcentereddiv.htm

[jgurley]

Excellent, that helps immensely.

So in that context, would the relative positioning place a JS menu element properly and consistently even when the browser is resized?

Jg

[pyro]

If coded correctly, yes, it should. :D

[jgurley]

Which is where I get lost -- how do I reference the positioning in the JS if I'm using CSS to position it?

[pyro]

You shouldn't need to. If you do it like I did in the example and put all your content inside of the <div> you should just need to add another <div> and position accordingly.

[jgurley]

Thanks, pyro -- I'll post to this thread again if I have difficulties. Appreciate the help.

[jgurley]

Hey, I have one more question for you, and since we were talking CSS anyway, I figured maybe you could help.

Totally different subject:

I'm launching a site today at 5pm PST; a test version is online now, and I'm finding that I have one small problem with CSS link styles.

Take a look at www.tmh2o.com/landscape_guide/index_new.php. When you get there, click on 'Planting' and then move around in the sublinks on that page. The visited link style should be underlined and colored #666666.

However, while the vlink style works on IE5.5/PC, it seems to be sporadic on other browsers. IE5/Mac refuses to show it; NN6/Mac refuses to show it. And for a short time they actually interpreted it properly.

I'm not at all sure what's wrong, and I'm under a crunch to figure this out -- would you mind taking a look and telling me what you find?

Jg

[jgurley]

Sorry, I forgot to add:

When you go to that link, click the Flash animation that announces the Interactive Landscape Guide. Then follow the instructions I gave in the last post.

Jg

[pyro]

The links work as described for me in WinXP IE6...

[pyro]

Nice site, BTW... :D

[jgurley]

Oddly enough, right after I posted that last message all of the links began working again. I'm not sure what the problem was.

But thanks! I didn't design it, though I did build it.

Jg

[pyro]

Originally posted by jgurley
I didn't design it, though I did build it.What does that mean? :confused:

[khalidali63]

lol

I think it means the lay out and the way it looks( like where the tables are ,where images are) is sone by some one else and the actual coding is done by some one else..

I guess this is what he meant..

Khalid

[jgurley]

That's right -- I built the site from someone else's layout. Make sense?

My job was coding it; someone else designed it; someone else programmed it.

[pyro]

Yup, I got it now...a template.. :D

[jgurley]

Essentially, yes.

[jgurley]

Pyro, if you happen to see this, please reply.

I'm using the code you specified in an early post to center content on a web page within a div.

What I need to do now is figure out how to lock Javascript drop-down menus to certain places within this div so that the menus never become misplaced.

You can see the page (with the improperly placed JS menus) here:

http://www.deeplyshallow.com/mesh/cgi_test/index_test.shtml

Anybody who knows how I can accomplish this will be my personal hero for at least 72 hours.

Jg