JQuery & scrollTo: how to specify content location (resizing browser issue)
Hello, I'm wondering if you can help me.
I'm trying to build a horizontal scrolling website following this tutorial on Queness using "jquery-1.3.1.min.js" and "jquery.scrollTo.js". My website sample: http://www.staystylish.com/test/test.html
It looks fine if you have a 1280px wide resolution. But if you resize the window (bigger or smaller), the content box auto centre itself. I want to specify a location for the content box so that it remains the same place all the time.
How can I make the content remain at the same place when I resize window (instead of auto centre)?
Is it something to do with one of the jQuery scripts used? If so, which one and how do i change?
or is it my CSS?
This is my CSS:
- #wrapper {
width:100%;
height:100%;
position:absolute;
top:0;left:0;
overflow:hidden;
}
#mask {
width:500%;
height:100%;
}
.item {
width:20%;
height:100%;
float:left;
}
.content {
width:940px;
height:400px;
top:240px;
margin:0 auto;
position:relative;
display: block;
border: 1px solid #000;
z-index:0 !important;
}