Cutting off content instead of scrollbars

Discussion in 'Web Design and Development' started by Ansari, Sep 25, 2008.

  1. Ansari macrumors newbie

    Joined:
    Jun 6, 2008
    Location:
    Cambridge, Ontario
    #1
    I've inherited maintenance duties on a flash site that was developed to be 1200px wide by 800px high. Needless to say, it goes off screen for many users and incurs unwanted scrollbars. With the design of the site, it wouldn't harm it should it become cutoff an all four sides.

    I will be centering the flash file vertically and horizontally via css. My question is, is there a way I can modify the page to allow the flash file to go off the page without bringing on the scrollbars?
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    CSS to work with

    Code:
    div {
     width: 100%; height: 100%;
     overflow: hidden;
    }
     
  3. Ansari thread starter macrumors newbie

    Joined:
    Jun 6, 2008
    Location:
    Cambridge, Ontario
    #3
    That is the exact same thing I had tried originally. My problem was keeping the flash animation centered vertically and horizontally. Also with that method, it still brings on a vertical scrollbar when the window is too small for the animation.
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    You can also try overflow-y: hidden;
     
  5. Ansari thread starter macrumors newbie

    Joined:
    Jun 6, 2008
    Location:
    Cambridge, Ontario
    #5
    OK here is the solution I came up with by playing around. Haven't tested it in all browsers just yet but so far so good in Firefox. If anyone can think of a better way of doing it, please share.

    Code:
    body {
    background-image: url(BG_blank.jpg);
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    }
    
    #container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position:absolute;
    left: 0;
    top: 0;
    }
    
    #flash {
    position:absolute;
    top: 50%;
    left: 50%;
    width: 1200px;
    height: 800px;
    margin-left: -600px;
    margin-top: -400px;
    }
    HTML:
    <body>
    
    
    <div id="container">
    
    
    <div id="flash">
    [1200x800px flash file in here]
    </div>
    
    </div>
    
    
    </body>
    
     
  6. angelneo macrumors 68000

    Joined:
    Jun 13, 2004
    Location:
    afk
    #6
    Personally, I'm not a big fan of absolute positioning, you might want to reconsider that if you require your flash element to be position vertically and horizontally centered.
     

Share This Page