Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Horizontal Overflow

    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.

    Code:
    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.
    Last edited by Gryffin; 10-23-2011 at 10:44 PM. Reason: Solved!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •