[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 253
  • Last Modified:

overflow x instead of y

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
StewSupport
Asked:
StewSupport
  • 2
  • 2
  • 2
1 Solution
 
Tom BeckCommented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
Can you post a link to the page you're referring to? Is the image rotated the wrong way?
0
 
StewSupportAuthor Commented:
@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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
Tom BeckCommented:
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
 
StewSupportAuthor Commented:
thank you that was good
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now