Screen resolution affecting my Position: absolute

HTML & CSS
1

hi all…my website looks fine with screen resolution 1366…: http://bluecrushdesign.co.za/imagin82/ But my client has a screen resolution of 1024 x 768and when i change my resolution down to this, my nav links and left & right arrows move all the way to the right.This code for nav links and left & right arrows are not available to edit in the HTML, the js spits it out…Anyhing i can do in the css for div #coda-nav-1 so that it looks good on both resolutions?appreciate the help!

2

Firstly, fixing a main menu 1080px to the right is not a good idea. As you’ve seen, it makes the site harder to use for anyone with a narrower viewport. The most usable position for a vertical menu is left.

#coda-nav-1 is set to position:absolute; which means that it is taken out of the flow of the document and positioned in relation to either a parent that has position:relative; or, if no such element exists as is the case here, the body element.

If you want the menu to hang with the rest of the content of #wrapper, which is centred within body with a fixed width of 1010px, you could give its immediate parent - .coda-slider-wrapper - position:relative; and remove the left properties (there are two currently set) from #coda-nav-1. The menu will then, due to the 10px left/right margins on .coda-slider, sit 10px to the left of the left edge of the slides. If you want the left edges to align, give #coda-nav-1 margin-left:10px;

Having done the above, you’ll notice that the left and right controls have vanished. This is due to their now being positioned in relation to.coda-slider-wrapper and further right than that elements fixed width. You’ll need to decide whether it is best for usability for the left and right controls to be on the right or left. Again, I would go for left, as it puts them in sight for far more users. For this, remove left: 1080px; on both .coda-nav-left and .coda-nav-right. As for the menu, give them margin-left:10px if you want them to align with the slide.

Here’s the result (at 50% size).

.coda-slider-wrapper {
    clear: both;
    overflow: auto;
    position: relative;
}

#coda-nav-1 {
    position: absolute;
    width: 100px!important;
    z-index: 10000;
    top: 40px;
    background-image: url(../images/content.png);
    height: 65px;
}

.coda-nav-left {
    position: absolute;
    top: 300px;
    z-index: 200;
}

.coda-nav-right {
    position: absolute;
    top: 350px;
    z-index: 200;
}
3

thanks ill have a read through!the client actually wants the menu and arrows on the right side though :wink: ps how did you put line breaks in your post?

4

So the client is happy as long as the navigation fits on their browser. :rolleyes:

I see you’ve followed the positioning suggestion but used left:900px; For aligning right edges right:0; is arguably more apt. You’ve still two declarations for left in #coda-nav-1. ie. left:100px; can go.

Line breaks? Just hitting enter, as usual. Do you mean in the CSS? I write and format posts in a text editor then paste them in, using the Syntax highlighter with the appropriate type for the code.

5

aaah it just seemed to work without taking those out so i just left it . true about right:0, bu its at client now dont want to change things for the mo…yeah line breaks in this post in sitepoint, hitting enter doesnt work for me… maybe its a firefox 7 thing…You wouldnt know how to change the right to actual images? its all in the javascript code… when i ever get proficient enough to post a JS slider or feature online ill def make sure most of it is in the HTML for designers to customise !!