Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

overflow x instead of y

Posted on 2012-03-16
6
Medium Priority
?
242 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 2000 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

670 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