homepage Welcome to WebmasterWorld Guest from 54.161.185.244
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Centre menu on layer for wide screens
center on regular screen but too left on wide screen
ozstar



 
Msg#: 4271452 posted 1:30 pm on Feb 24, 2011 (gmt 0)

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

 

webprutser



 
Msg#: 4271452 posted 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.

ozstar



 
Msg#: 4271452 posted 1:30 am on Feb 25, 2011 (gmt 0)

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

webprutser



 
Msg#: 4271452 posted 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.

ozstar



 
Msg#: 4271452 posted 3:36 am on Mar 2, 2011 (gmt 0)

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.

tangor

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



 
Msg#: 4271452 posted 1:51 am on Mar 10, 2011 (gmt 0)

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.

TenTonJim

10+ Year Member



 
Msg#: 4271452 posted 5:55 am on Jul 3, 2011 (gmt 0)

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">

rocknbil

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



 
Msg#: 4271452 posted 4:52 pm on Jul 5, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved