Welcome to WebmasterWorld Guest from 54.224.17.208

Forum Moderators: incrediBILL

Message Too Old, No Replies

Centre menu on layer for wide screens

center on regular screen but too left on wide screen

     
1:30 pm on Feb 24, 2011 (gmt 0)

5+ Year Member



HI,

I have a dynamic menu on a page which shows up center on regular screens but really to the left on wide screens.

How can I centre this dynamic menu for the newer wide screens so it still shows centre as well as the regular screens?

See here [1300rentbuy.com...]

From source..

<div id="Layer1" style="position:absolute; left:120px; top:213px; width:600px; height:200px; z-index:2">

Thanks


oz
2:42 pm on Feb 24, 2011 (gmt 0)



Positioning of div's has still many secrets for me, so I am not the one with the problem-solving answer.
Since I'm interested in it, as I want to switch from table-layout to box-model, I was wondering if you could centre a absolute positioned element. Obviously this is possible, I found a thread on this forum, which might help you with your question: [webmasterworld.com...]

Generally spoken, I looked at your website and did an "inspect this element" using firebug. Despite your align="centre" at a lot of places, the elements I inspected were specified as to having no CSS rules. It might help to have a look at the way you use style-rules for your website and put it in a separate CSS file.
1:30 am on Feb 25, 2011 (gmt 0)

5+ Year Member



Thanks.

It seems I can approach this in two ways..

Which would be the best way to do it?

1. Re-ordering the code in html and applying css.
or
2. Applying javascript

Thanks
1:44 pm on Feb 26, 2011 (gmt 0)



My own rule is: if something can be done with html/css without using javascript, I don't use javascript. I tried some things with javascript myself and ran into certain problems. I have a brother, who is an experienced programmer and he is not very enthusiastic about javascript. He advised me not to use it unless I really can't do without it. This doesn't mean all is wrong with it, but I managed to do without it up till now.
Using javascript for centering things seems unnecessary to me, so in this case I'd take care of html/css. You can validate your code [validator.w3.org...] once you have reorganised it and see what happens. You used align=center in tables and td. I remember having problem with that too.
A div is a better place to give directions for centering. Give it a class or id and put the specifications in your style-sheet. By using firebugs inspection of an element, you can see if the style rules are working the way you want and if you still have problems you have good information as to what part is causing problems.
3:36 am on Mar 2, 2011 (gmt 0)

5+ Year Member



Yes finally got a javascript to center this for all screens with a line to change screen res if one comes along where it is not centered.
1:51 am on Mar 10, 2011 (gmt 0)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Happy there's a result, just realize that the growing number of visitors arriving with javascript turned OFF they won't see the "center" and, unless your page is coded to degrade gracefully, might not find the site usable at all.

Best bet is to find a standard HTML/CSS method if you want EVERYONE to use your site.
5:55 am on Jul 3, 2011 (gmt 0)

10+ Year Member



set the left position to 50% then a negative left margin of half the width of the menu: <div id="Layer1" style="position:absolute; left:50%; top:213px; width:600px; margin-left:-300px; height:200px; z-index:2">
4:52 pm on Jul 5, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Try setting position: relative on the parent container of the absolutely positioned menus. This should keep them contained wherever it is resized.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month