SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "overflow:hidden" not working...

    Hi everyone,
    My web page is consisted of 3 images located on one row. Here is the code:
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Attention !</title>
    <style type="text/css">
      * {margin:0;padding:0;} 
      #title_wrapper {overflow:hidden;}
      #logo2 {float:left;}
      #title
       { 
        float:left;
       }
      #logo {float:left;}
    </style>
    </head>
    
    <body>
      <div id="title_wrapper">
        <div id="logo2"><img src="logo2.gif"/></div>
        <div id="title"><img src="attention.gif"/></div>
        <div id="logo"><img src="logo_small.gif"/></div>
      </div>
    </body>
    </html>
    Its' web address is: http://avirot.bravehost.com/to_forum.html. I'd like those 3 images to remain on one row even when the user diminishs the browser's window. any redundant image should disappear when there is not enough space. Thats why i added the following style:
    Code:
    #title_wrapper {overflow:hidden;}
    But this is not helpful: When i diminish my "Google Chrome" window, all 3 images are located one beneath its preceding image.
    Any suggestion ?
    Thanks

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Create a surrounding div with width = width(img1) + width(img2) + width(img3) + width(paddings) + width(margins).

    HTML Code:
    <div id="images">
      <img src="img1.jpg"/> <!-- Let's say this one is 100px wide -->
      <img src="img2.jpg"/> <!-- Let's say this one is 200px wide -->
      <img src="img3.jpg"/> <!-- Let's say this one is 400px wide -->
    </div>
    Code CSS:
    #images {
      width: 700px;  /* 100 + 200 + 400 = 700 */
    }
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, he doesn't need an extra element. Since #title_wrapper is only containig those 3 div/image elements, he can just set the width on the #title_wrapper
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, he doesn't need an extra element. Since #title_wrapper is only containig those 3 div/image elements, he can just set the width on the #title_wrapper
    True, I missed that one
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    He could actually lose the 3 <div>'s containing each image and just apply the styles onto the direct <img>'s.

    Noone likes divitis .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Both solutions you suggested obtained the goal of images fading away from screen when diminishing browser's window.
    I had a problem applying RyanReese conseille to cancel 3 images divs because the left image has height greater than second's thus causing the second image to be placed lower then it should. Applying "float:left" to all three images keeps 3 images at the same top level. 2 screenshots added. Hence, I'll use initial ScallioXTX's suggestion, not omitting the 3 images divs. Unless you can give me another idea...
    Thanks a lot to you both !
    Attached Images Attached Images

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    In my solution did you clear the parent? Add overflow:hidden; to #title_wrapper in my suggestion and hopefully that will work
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didnt apply : "float:left" to img. This code:
    Code:
    <style type="text/css">
      * {margin:0;padding:0;} 
      #title_wrapper {width:1010px; overflow:hidden}
      img {float:left;padding:4px;}
    </style>
    </head>
    
    <body>
      <div id="title_wrapper">
        <img src="logo2.gif"/>
        <img src="attention.gif"/>
        <img src="logo_small.gif"/>
      </div>
    </body>
    </html>
    Worked excactly as you suggested. I didnt apply it excactly...
    Thanks again...

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @deotpit, You did want the images fade away from screen, but they are just scrolled off screen. And the "overflow: hidden" has no effect at all, so I can't see that your problem is yet solved.

    To hide the overflow and take control over fading/scrolling, you could do something like this:
    Code CSS:
    #title_wrapper{
      overflow:hidden; /* hides overflow that goes outside screen */
    /* uncomment if you want to protect the centre image 
      margin:auto;
      min-width:700px;
    */
    }
    #title_wrapper div{
      margin:0 -552px 0 -526px; /* To keep the middle image centred: give the side margins the same length-difference as of the outer images, the additional length is arbitrary */
      text-align:center;
    }
    #title_wrapper img{
      vertical-align:top; /* top, middle, bottom, aligns the images according to the tallest image */
    }
    HTML Code:
    <div id="title_wrapper">
      <div>
        <img src="logo2.gif"/>
        <img src="attention.gif"/>
        <img src="logo_small.gif"/>
      </div>
    </div>
    Happy ADD/ADHD with Asperger's

  11. #11
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Eric,
    Thanks for your post. I wouldn't want to delay my response for too long so i can only say that your code works very nice but my understanding it may take some extra time. By the meantime i'll just thank you for an intersting code, not yet understood on my side.
    Thanks.

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,266
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Huh, I've never seen equal negative sidemargins.

    Where the hell'd you come up with that, Erik? Looks cool.

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I believe he used the same thing on the float:center quiz Stomme if you want to look at that.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Eric,
    As I understand it is the "text-align:center" That centers the 3 images on the page and "vertical-align:top" that keeps them at the top of the page as desired.
    Why is the right margin of the images' div assigned a smaller value than the left margin (margin:0 -552px 0 -526px; ) and why those values are less zero and why the difference between those 2 values is arbitrary is beyond my understanding...
    Thanks

  15. #15
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi deotpit, you are right, it is the text-align vertical-align that does the image positioning.

    My margin-comment was unclear in what was arbitrary, I think:
    Code:
    #title_wrapper div{
      margin:0 -552px 0 -526px; /* To keep the middle image centred: give the side margins the same length-difference as of the outer images, the additional length is arbitrary */
      text-align:center;
    What I tried to say was; In order to make the image-container wide enough to not wrap the images when the #title_wrapper gets narrow, the negative side margins extends its width by an arbitrary length enough to keep the images on the same line.

    I also thought the middle image should be in the exact centre of the window, but as the center-align applies to the group of images it would be off centre due to the different width of the two adjacent images.

    So, to keep the middle image in the exact centre, the margin on the wider image's side needs to soak up the difference. (The "arbitrary" extended margin-values' was meant to reflect the different width of the two images. )

    There are other ways to achieve the same result, but this was the easiest cross-browser I thought.
    Happy ADD/ADHD with Asperger's

  16. #16
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Erik for your efforts,
    With where i am now with CSS (and other utilities) i'll have to be satisfied with less sophisticated solutions i was kindly supplied here. I'll keep in mind the possibility you suggested and once i feel i can handle it i'll give it another chance in my page...
    Thanks again.


Tags for this Thread

Bookmarks

Posting Permissions

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