css & horizontal scrolling
- by zen
One of my most favorite websites is that of the Oxford Hotel in Romania.
I like the simplicity of the site and how it flows. I am trying to create a similar scrolling effect using jquery and I've been somewhat successful to a point. My trouble is with css... I am not a wizard in that department.
Anyway,...my questions!
1. How can I first make sure that the ".box" class will be in the center of the page when the corresponding link is clicked? Right now it positions itself on the left.
2. Then, how can I tweak this code so that the user only can see the width of the screen and not the browser scroller/the rest of my ".box" divs?
Refer to the oxford link if you need to see an example of what I'd like to achieve.
This is a portion of my current CSS.
body {
background: #f2f2f2;
text-align:left;
color:#666;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
}
#menu {
background: #333333;
position: fixed;
top: 0px;
left: 0;
border: 1px solid #000;
clear: both;
float: left;
font-family: helvetica, sans-serif;
font-size: 18px;
text-transform: uppercase;
margin: 0;
padding: 18px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#menu ul li{
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0 10px 0 10px;
}
#menu ul li a{
text-decoration: none;
list-style-type: none;
color: #777;
display: inline;
margin: 0;
padding: 0;
}
#menu ul li a:hover{
text-decoration: none;
list-style-type: none;
color: #fff;
display: inline;
margin: 0;
padding: 0;
}
#container {
position: absolute;
top: 120px;
width: 70000px;
margin: 0;
padding: 0;
}
.box {
background: white;
border: 3px dashed #f2f2f2;
width: 600px;
float: left;
font-size: 10px;
line-height: 15px;
margin: 0;
padding: 5px 30px 30px 30px;
}
