CSS Overflow Hidden not working

I am trying to add a scrolling photo banner to an HTML site and cannot seem to get the CSS overflow property to work. I am using the logic from this tutorial to create the photo banner, http://designshack.net/articles/css/infinitephotobanner/.

Based on the advice of this method I have set my div class width to 3550, line 25 in attached CSS file. I have added the overflow: hidden; property to both the div class, line 25, and the div id, line 24, but I cannot get the property to work.

Can somebody tell me what I have wrong that is preventing the overflow property from working? The primary lines of code in the attached HTML file are lines 75-88. The primary lines in the CSS file are 13, 24 & 25.home.htmlstyle.css
gactoAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi Gacto,
I checked the tutorial link you have given and then checked your code...  I guess you have made mistake in assigning the width...

if you see here below, the photobanner is 3550px wide... BUT the CONTAINER is 1000px wide with AUTO margin to right and left... it means that only the central 1000 px is visible to you.only central 1000px are visible
your .photobanner DIV is inside these DIVS
<div id="featured_area" class="full_width">
          <div id="page_wrapper">
            <div class="featured_title">

none of these classes have any width specified... so as a first step, you can add the below class (its same as the #container in tutorial) and then check if its working and let me know.
.featured_title {
    width: 1000px;
    overflow: hidden;
    margin: 50px auto;
    background: white;
}

Open in new window

Thanks,
Prasadh
gactoAuthor Commented:
Prasadh,

I am checking my code to be sure but .photobanner should only be inside these two divs:

<div id="featured_area" class="full_width">
          <div id="page_wrapper">

div class featured_title is closed out on line 80.

I have #page_wrapper width set to 65% (line 14 of CSS) and that is being inherited properly by .photobanner. I have changed several things but still cannot get the overflow_hidden property to work. Here are the changes I made in CSS line 14:

#page_wrapper { width: 1000px; margin:0 auto; display: table; background: #ffffff; }

That did not change the results so I added the overflow property to see if that would work.

#page_wrapper { width: 1000px; margin:0 auto; display: table; background: #ffffff; overflow: hidden; }

Both of those scenarios produced the same result so I have changed the CSS for both #featured_area and .photobanner to include set widths, no percentage, and also added the overflow property. None of those changes have resolved the problem.
Prasadh BaapaatWeb Designer & DeveloperCommented:
can you share a link so I can look at the page... its easier for me to check that way. we can sort the problem faster.

thanks,
Prasadh
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

gactoAuthor Commented:
I just dropped it into a directory on another site. I haven't put this on a dev server yet. I only dropped in the home.html page so none of the other navs will work.

http://www.spivey.farm/photobanner/home.html
Prasadh BaapaatWeb Designer & DeveloperCommented:
ok cool... now I can see the page.... the 3 images are the slider you want...
gactoAuthor Commented:
Yes there are for total and that is what I am trying to generate the slider with.
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi Gacto,
I have made some changes in CSS and HTML file.... now the slider is working and featured text is center aligned.

backup your files and add these files and see how it looks.

I have repeated the images so there is a longer scroll...

let me know if you have any questions.

thanks,
Prasadh
style.css
index.html

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Prasadh BaapaatWeb Designer & DeveloperCommented:
Add this below code to the style.css and the photos will zoom on mouseover.

/* photo zoom */
.photobanner {
    height: 233px;
    width: 3550px;
    margin-bottom: 80px;
}
 
.photobanner img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
 
.photobanner img:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer;
 
    -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}

Open in new window

gactoAuthor Commented:
Prasadh - Sorry I have gotten sidetracked on another project and have not had a chance to review this solution. Hopefully I will get to this today and can provide you with some feedback.
gactoAuthor Commented:
Prasadh - the changes you made did get the photo banner to scroll. Some of the other style elements are out of line now but I can get them back in place.

Can you tell me what about your solution made this work? I would like to know how to avoid this problem in the future if possible.
Prasadh BaapaatWeb Designer & DeveloperCommented:
Well What I did was to add a width to the container in which the slideshow is there... means as per the tutorial, the container is 1000px wide and it shows a part (1000px) out of the very long slider div.

I also noticed that your HTML had a DIV ID repeated, you cannot have same name DIV ID repeated, so I changed it to a CLASS with same name.

the only DIV ID I kept was for slider I guess. Hope this helps.

Thanks,
Prasadh
gactoAuthor Commented:
ok this all makes sense. i did not notice the div id that was repeating, that was probably causing me other problems that i had not yet encountered. thanks again for the help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.