CSS image placement way off depending on screen resolution

If you navigate to http://magee.darkslidedesign.com you will see images on the main page in jQ开发者_高级运维uery Slides. On either side of the slide, there is a "previous" and "next" button.

I have these images placed in a certain location in the following CSS...

#slides .next,#slides .prev {
    position:absolute;
    margin-top: -215px;
    width:24px;
    height:43px;
    display:block;
    border: 0;
}

#slides .next {
    margin-left: 827px;
}

I need some help trying to figure out the best way to have these arrows stay at the same spot they are in 1600x900 resolution if a person has lower or higher resolution.

Help?

---

Hm... the layout is kinda funky... one thing you can do is remove margin-left: 100px; on .prev, remove the margin-left: 827px on .next, add right:0px; to .next, and lastly add position:relative to the 60% wide container that holds the slides div. You may also want to put a min-width: 750px; to that same 60% wide div.

if you always want them to stay in the same spot, give the 60% wide div a fixed width of 800px or so (width:800px).

---

It is very difficult to fix this as the html code is not valid as a first thing. Also, having position absolute on your arrows is not a wise thing to do, as it starts to very dependent of the header..while it should be depending on only the slider itself. It appears that when you change the position: absolute; inside #slides .next,#slides .prev, then the the slider stops working correctly. It almost feels, like the slider is being put wherever .prev sits. So the .prev is like a placeholder.

Based on those reasons, I strongly believe, that you cannot fix this problem from CSS point of view only. I recommend to optimize your HTML, make it valid. And possible use a different slider. Because, usually placing the arrows outside the slider looks something like this:

<style>
#hero_wrapper {float: left; border: 1px dotted blue; padding: 0px 60px;}
    #hero_images {border: 1px dotted red; width: 500px; height: 300px;}
    #hero_prev,
    #hero_next {position: relative; margin-top: 110px; padding: 20px; font-size: 30px; font-weight: bold; border: 1px dotted green; /* #hreo_next special: */ float: left; margin-left: -60px;}
    #hero_next {float: right; margin-right: -60px;}
</style>
<div id="hero_wrapper">
    <div id="hero_prev">&lt;</div>
    <div id="hero_next">&gt;</div>
    <div id="hero_images"></div>
</div>

^{[ View output ]}

I'm sorry that I cannot give you concrete answers, but I hope that when you understand how easy the basic concept is.. you will reconsider using that slider (as I'm assuming that the sliders DOM structure is not optimal.) Also, technically you simply find a slider that has stand-alone arrows (I personally like the jQuery Orbit Plugin) and simply use my basic concept of the slider structure. Because, in that case you only need to make the #hero_images slide and hook the prev and next functions to the arrows, and voila!

Some pointers:

• As I mentioned in the comment above, your menu images should be in a sprite, so the white background wouldn't get displayed on rollover.
• Meta tags should be ended with / in xhtml.
• Also google analytics strongly recommends to put their code before </body> in the footer.
• In modern website development nobody wants borders for images. And if they do, then they will set it manually anyways (.someimg {border: 1px solid black;}). So to avoid non-valid xhtml, then add predefined img value on the top of your css: img {border: 0px;}
• Also you got some other non-standard attributes. Use a validator!
• Normally in a slider the images are put inside a ul list..

---

Try something like this :

#slides {
    position:relative;
}

#slides .next,#slides .prev {
    position:absolute;
    top:30px; // use this instead of margins, of course change the value
    left: -30px // Try with this
    width:24px;
    height:43px;
    display:block;
    border: 0;
}

#slides .next {
    right: -30px; // Change the value
}