Horizontal Overflow

Started by Gryffin, October 23, 2011, 03:47:23 PM

Gryffin

Hello,
I just finished making a site, but there are a couple of things not working properly.
Most pressingly, my image gallery won't scroll horizontally, as it should.
I set the DIV to have x overflow, and y overflow hiddden. And the horizontal scroll bar appears, but there is nothing to scroll through, even though there are several images past the edge.

Here is my website:
http://www.finnhaverkamp.com


Below is my CSS sheet. The ID I'm using specifically is #Box2. I've spaced it for you.
Of course, you can see the HTML at the website itself.

body
{
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-position:center center;
background-repeat:no-repeat;
background-color: black;
}



#layoutouter {
width: 920px;
height: 500px;
margin: 20px auto;
border: 5px solid black;
position: relative;
background-repeat: no-repeat;
z-index:1;
}


#layoutinner {
background-repeat: no-repeat;
width: 854px;
height: 386px;
margin: 40px 0px 0px 40px;
border: 0px solid white;
position: relative;
z-index:2;

}

#left{
background: url(images/modified/treebox.jpg);
width: 150px;
height: 150px;
margin: 90px 0px 0px 0px;
border: 1px solid white;
position: relative;
filter:alpha(opacity=60);
opacity:0.6;
text-align:center;
cursor:pointer;
z-index:5;
}


#lefttext{
display: block;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
filter:alpha(opacity=0);
opacity:0.0;
text-align:center;
color:white;
font-family:"Rough_Typewriter";
font-size:25pt;
width: 155px;
height: 106px;
cursor:pointer;
z-index:6;
}


#box1
{
background:url(images/modified/createversion2.jpg);
width: 500px;
height: 450px;
margin: 20px 0px 0px 250px;
padding: 0px 0px 0px 0px;
border: 1px solid white;
position: absolute;
color:white;
bg-color:white;
background-color:white;
display: none;
text-align:center
filter:alpha(opacity=95);
opacity:0.95;
z-index:11;
}

#topmid{
background: url(images/modified/duomoboxframe.jpg);
width: 200px;
height: 100px;
margin: 0px 0px 0px 200px;
border: 1px solid white;
position: relative;
filter:alpha(opacity=60);
opacity:0.6;
text-align:center;
cursor:pointer;
z-index:3;
}


#topmidtext{
display: block;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
filter:alpha(opacity=0);
opacity:0.0;
text-align:center;
color:white;
font-family:"Rough_Typewriter";
font-size:20pt;
width: 201px;
height: 51px;
cursor:pointer;
z-index:4;
}










#box2
{
background:url();
width: 920px;
height: 510px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
border: 1px solid white;
position: absolute;
color:white;
bg-color:white;
background-color:white;
display: none;
text-align:center
filter:alpha(opacity=95);
opacity:0.95;
overflow-y:hidden;
overflow-x:scroll;
z-index:15;
}










#right{
background: url(images/modified/relaxingtall.jpg);
width: 115px;
height: 210px;
margin: 0px 0px 0px 650px;
padding: 0px 0px 0px 0px;
border: 1px solid white;
position: relative;
filter:alpha(opacity=60);
opacity:0.6;
text-align:center;
z-index:7;
overflow:visible;
}


#righttext{
display: block;
margin: 0px 0px 0px 0px;
padding:0px 0px 0px 0px;
filter:alpha(opacity=0);
opacity:0.0;
text-align:center;
color:white;
font-family:"Rough_Typewriter";
font-size:25pt;
width: 216px;
height: 111px;
z-index:8;
overflow:visible;
}

#box3
{
background:url();
width: 920px;
height: 500px;
margin: 25px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid white;
position: absolute;
bg-color:black;
background-color:black;
display: none;
text-align:center
filter:alpha(opacity=95);
opacity:0.95;
overflow:auto;
z-index:16;
}

#bottomright{
background: url(images/modified/heartdunetall.jpg);
width: 96px;
height: 210px;
padding: 0px 0px 0px 0px;
margin: -145px 0px 0px 600px;
border: 1px solid white;
position: relative;
filter:alpha(opacity=60);
opacity:0.6;
text-align:center;
z-index:9;
overflow:visible;
}

#bottomrighttext{
display: block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
filter:alpha(opacity=0);
opacity:0.0;
text-align:center;
color:white;
font-family:"Rough_Typewriter";
font-size:25pt;
width: 216px;
height: 111px;
z-index:8;
overflow:visible;
}
#box4
{
background:url();
width: 920px;
height: 450px;
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid white;
position: absolute;
color:white;
bg-color:black;
background-color:black;
display: none;
text-align:center
filter:alpha(opacity=95);
opacity:0.95;
z-index:18;
overflow:auto;
}


#logo
{
margin: 345px 0px 0px 29px;
color: white;
font-family:"Rough_Typewriter";
font-size: 45px;
z-index:10;
}

ul.gallery
{
list-style-type:none;
margin:0;
padding:0;
}

ul.div
{
list-style-type:none;
margin:0;
padding:0;
}

li.photo
{
float:left;
color:#FFF;
overflow:hidden;
}

li.divvisible
{
float:left;
color:#FFF;
overflow:visible;
}

li.divhidden
{
float:left;
color:#FFF;
overflow:hidden;
}

li.right
{
float: right;
}

p
{
color:white;
filter:alpha(opacity=100);
opacity:1.0;
text-align:center
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family:"Rough_Typewriter";
font-size: 25px;
z-index:20;
}
p.black
{
color:white;
filter:alpha(opacity=100);
opacity:1.0;
text-align:center
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family:"Rough_Typewriter";
font-size: 25px;
font-style: strong;
z-index:20;
}



.rollover:hover
{
filter:alpha(opacity=100);
opacity:1.0;
overflow:visible;

}

a:link {color:white;}    /* unvisited link */
a:visited {color:white;} /* visited link */
a:hover {color:white;}   /* mouse over link */
a:active {color:white;}  /* selected link */

.adbar_links
{
display:block;
height:100%;
width:100%;
background-color:transparent;
        text-decoration:none;
overflow:visible;
}

.adbar_links3
{
display:block;
height:100%;
width:100%;
background-color:black;
filter:alpha(opacity=100);
opacity:1.0;
        text-decoration:none;
overflow:visible;
}

a.adbar_links:active, a.adbar_links:visited
{
display:block;
height:100%;
width:100%;
background-color:transparent;
        text-decoration:none;
overflow:visible;
}


a.adbar_links:hover
{
display:block;
height:100%;
width:100%;
background-color:transparent;
        text-decoration:none;
overflow:visible;
}



.adbar_links2
{
display:block;
height:100%;
width:100%;
background-color:transparent;
        text-decoration:none;
overflow:visible;
}



In my earlier testings, if I set my overflow to auto or scroll, the div does scroll vertically. But it simply refuses to scroll horizontally. Any ideas? Thanks in advance.

Gryffin

This has been solved.
The answer was setting the width of the list, the ul.photo class.
I set the width to about 3000px, and all of the images fit inside.