Solved

overflow x instead of y

Posted on 2012-03-16
6
207 Views
Last Modified: 2012-06-27
why does it keep putting the image vertically instead of horizontally. look simple but i can't figure it out. please help. thanks

.thumbs_list_container{
      float:inherit;
      height:100px;
      overflow-x:scroll;
      margin-left:5px;
      background-color:#FFFFFF;
      display:inline-block;
      width:210px;
      overflow-y:hidden;
}
.thumb{
      padding:6px;
      padding-left:0px;
      padding-right:1px;
      background:#FFFFFF;
      margin:3px;
      filter:alpha(opacity=50);
      opacity: 0.50;
      -moz-opacity:0.50;
      width:105px;
      display:inline-block;
      overflow-y:hidden;
      height:62px;
      padding-left:12px;
      background:#ffffff;
      cursor:pointer;
}



<div class="thumbs_list_container"/>
    <div id="thumb_0" class="thumb" src="'images/09AmericanRedCross.jpg'"><img width="100" height="60" src="images/09AmericanRedCross.jpg"></div>
    <div id="thumb_1" class="thumb" src="'images/09BlueFish.jpg'"><img width="100"
height="60" src="images/09BlueFish.jpg"></div>
    <div id="thumb_2" class="thumb" src="'images/09DuckRace1.jpg'"><img width="100" height="60" src="images/09DuckRace1.jpg"></div>
    <div id="thumb_3" class="thumb" src="'images/09JanetEvans1.jpg'"><img width="100" height="60" src="images/09JanetEvans1.jpg"></div>
    <div id="thumb_4" class="thumb thumb_selected" src="'images/09JanetEvans1.jpg'"><img width="100" height="60" src="images/09JanetEvans1.jpg"></div>
</div>
0
Comment
Question by:StewSupport
  • 2
  • 2
  • 2
6 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37731201
I think you misunderstand the use of overflow in css. It is meant to tell the browser what to do with content that does not fit in the container. It has nothing to do with the orientation of your image. They will be whatever orientation the original is to start with.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 37731209
Can you post a link to the page you're referring to? Is the image rotated the wrong way?
0
 

Author Comment

by:StewSupport
ID: 37742222
@xmediaman, just copy and paste the code above and change it to any image you want on your machine and save it as html file.
0
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 22

Expert Comment

by:Kim Walker
ID: 37742417
There are several errors in your html that may be handled differently by different browsers. But this code produces a wide, vertically oriented, image in Firefox, Chrome, and IE7. I must assume that your own page has more to it which may be interfering with this code. I'm also assuming that you mean a wider-than-tall image when you say it's not putting the image "horizontally."

The errors I mentioned, though I don't believe they are related to the problem, are:

In the code above, the line <div class="thumbs_list_container"/> is a self-terminating div because it ends with a />. Some browsers could interpret the divs that follow as sibling divs rather than child divs.

There is no src attribute for div elements.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 37742519
Ok, I get what you are trying to do. You will need to have the images in a container that is wide enough to hold them all horizontally. Then you need to float them all left. Put all of that inside your div with overflow-x:scroll.

B.T.W., "src" is not a valid attribute for a div.

Test code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
    .thumbs_list_container{
      float:inherit;
      height:100px;
      overflow-x:scroll;
      margin-left:5px;
      background-color:#FFFFFF;
      display:inline-block;
      width:210px;
      overflow-y:hidden;
    }
    .thumbs_container{
      width:650px;
      height:100px 
    }
    .thumb{
      padding:6px;
      padding-left:0px;
      padding-right:1px;
      background:#FFFFFF;
      margin:3px;
      filter:alpha(opacity=50);
      opacity: 0.50;
      -moz-opacity:0.50;
      width:105px;
      display:inline-block;
      overflow-y:hidden;
      height:62px;
      padding-left:12px;
      background:#ffffff;
      cursor:pointer;
      float:left
}
    </style>
</head>
<body>
<div class="thumbs_list_container">
    <div class="thumbs_container">
        <div id="thumb_0" class="thumb"><img width="100" height="60" src="http://www.aa-fishing.com/gfx/fish-hdr-crappie.gif" /></div>
        <div id="thumb_1" class="thumb"><img width="100" height="60" src="http://static.ddmcdn.com/gif/buffalo-fish-100x60.jpg" /></div>
        <div id="thumb_2" class="thumb"><img width="100" height="60" src="http://www.aa-fishing.com/gfx/fish-hdr-steelhead.gif" /></div>
        <div id="thumb_3" class="thumb"><img width="100" height="60" src="http://www.whoi.edu/cms/images/fish_kills_100_47911.jpg" /></div>
        <div id="thumb_4" class="thumb thumb_selected"><img width="100" height="60" src="http://www.mcwdn.org/Animals/fisheatCLR.gif" /></div>
    </div>
</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:StewSupport
ID: 37742533
thank you that was good
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question