...

View Full Version : Horizontal Overflow



Gryffin
10-23-2011, 08:55 PM
SOLVED: See following two posts.

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.

Excavator
10-23-2011, 09:34 PM
Hello Gryffin,
You have .adbarlinks set to 100% width but that's not really what contains your images.
Try giving the ul a width that will fit the images you have instead:


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

Gryffin
10-23-2011, 10:40 PM
Hello Gryffin,
You have .adbarlinks set to 100% width but that's not really what contains your images.
Try giving the ul a width that will fit the images you have instead:


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

Aha! That was completely it. It works perfectly now. Thank you for the help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum