PDA

View Full Version : Menu issue - links not lining up in different resolutions



LearningCoder
Feb 22nd, 2012, 10:23 PM
Hello I am making a gaming clan website and have been working on the menu.

I have, what it seems, the desired result in terms of positioning my menu, as you can see from this image: menu issue (http://abjava.host22.com/menuissue.jpg). As you can see, I pretty much have it aligned as i want but once asking one of my friends to view it for me, they have sent me back screenshots where the menu is totally mis-aligned. I have set all the margins with percentages along with div boxes and the one image. I am using screen res: 1024x600 as I am on a netbook which is not very capable at the best of times.

I am wondering if anyone could possibly give me any tips regarding creating a solid robust menu.

The site url is: Index/Home page (http://abjava.host22.com/AttitudeBrothazSite/index.htm)

I could provide images which my friend has sent back to show you exactly what I mean, but I am guessing if you are using a screen resolution bigger than mine, it will be mis-aligned for you also. Please check between my image provided and the actual site display for yourselves and you will know exaclty what I mean.

Thank you once again for any information or advice you can give to me as I seem to have this issue with most of the sites i've locally completed.

kind regards,

LC.:thumbsup:

SB65
Feb 23rd, 2012, 10:59 AM
Well, the menu looks OK to me at 1616px wide (FF10). If I drop the resolution it's Ok down to 867px, below which the "Links" link drops - is that what you are seeing (doesn't sound like it...).

If that is your issue then you could prevent this happening by setting a min-width on your page.

LearningCoder
Feb 23rd, 2012, 11:52 AM
For instance my friend viewed the site and changed his resolution to view the site. This is what he has sent back to me:

Shot 1 (http://abjava.host22.com/1.png)
Shot 2 (http://abjava.host22.com/2.png)
Shot 3 (http://abjava.host22.com/3.png)
Shot 4 (http://abjava.host22.com/4.png)

I hope this can explain better than I have. As you can see, the menu ends up all over the place. In some shots he changed screen res etc to test it.

Kind regards,

LC.

SB65
Feb 23rd, 2012, 12:12 PM
That looks like it's not screen resolution, but zoomed text.

With your site at the moment - looks like you've changed since I viewed it this morning - I have to zoom out five times before the text falls out of the header, by which time it's unreadably small. Similarly I have to zoom in 6 times before the "Links" link drops. That's a lot of zooming...

However, you could look at setting the height of #logoDiv using ems rather than px (try 20em for starters), similarly with your absolutely positioned menu top (try 10em) so this will then zoom with your text.

LearningCoder
Feb 23rd, 2012, 12:38 PM
I have set the height of the #logoDiv to 20em.

Also I have re-set the position values of #menuDiv to have a top of 9em's and left value of 6.5 em's which (on my screen) puts the menu exactly where it needs to be.

I have just re-uploaded the site to the domain. I changed my screen resolution to 1152x864
and as you can see from this shot--->http://abjava.host22.com/menuscreenres.jpg the menu has already started to get mis-aligned. One friend was in a very high res so that's why i think in his screenshots, the menu was WAY off.

Regards,

LC.

SB65
Feb 23rd, 2012, 12:43 PM
Ah right, set position:relative on #logoDiv so the menu is absolutely positioned with regard to that div rather than the viewport. At the moment it will be positioned with respect to the top left of the screen, rather than the containing div.

I'm not really seeing a major problem myself, but the above should help.

EDIT: You'll need to change your top and left settings to accommodate this change. Try:


#menuDiv {
height: 70px;
left: 0;
position: absolute;
top: 18%;
width: 100%;
}

LearningCoder
Feb 25th, 2012, 12:34 AM
Thank you very much indeed. I have applied this to my other site and everything looks perfect now when I zoom in/out fully. I have set everything with em's and positioned everything as you said and it is exactly what I wanted. I guess my first mistake was setting everything with percentages. I thought to myself, for example, well 20% of 1024px width would surely be the same as 20% of 1616px for instance so I presumed everything would stay in the same place. In regards to say 'div' containers, this would be correct, because I have viewed my site on the family laptop (which has a bigger screen and higher screen res) and the div's for example were spanning the same width as they were on my comp, yet I have always had trouble with menu's/links for some reason.

Am I correct in saying that I should always set menu links using em's rather than percentage, or should I use em's? For your personal opinion, which value do you use and why? px, em, pt, %?

Thank you very much indeed though, you have been a big help for me.

Kind regards,

LC.

LearningCoder
Feb 26th, 2012, 11:45 AM
Just a question relating to this issue again. On my band site, I have set width/heights of images/div's using em's. When I zoom in and out, my paragraph, the band image and also the author div within the footer are moving out towards the edges of the window, yet anything which is center aligned using margin: auto is moving to the center of the page when I zoom out. Initially, my paragraph was floated left so that the image would sit to the right of it. I took the float off thinking this could be the problem with the elements moving out towards the edges.

Ideally, what I want is for all my content to 'move' together when I zoom out, as this is causing resolution problems again.

Here is a live example: Homepage (http://abjava.host22.com/Site2/template.htm).

Please note that I have only set the width/heights of elements within the !template.htm page so all the other pages are void for this example.

Could anyone enlighten me? Or even point me to a link which could explain in detail these issues and how to solve them. This is a real issue I cannot seem to provide an answer for.

Regards,

LC.