Cutting off content instead of scrollbars [Archive]

Ansari

Sep 25, 2008, 07:29 PM

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?

angelwatt

Sep 25, 2008, 07:42 PM

CSS to work with

div {
width: 100%; height: 100%;
overflow: hidden;
}

Ansari

Sep 25, 2008, 07:52 PM

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.

angelwatt

Sep 25, 2008, 08:00 PM

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.

You can also try overflow-y: hidden;

Ansari

Sep 25, 2008, 08:18 PM

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.

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;
}

<body>

<div id="container">

<div id="flash">
[1200x800px flash file in here]
</div>

</div>

</body>

angelneo

Sep 25, 2008, 11:36 PM

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.

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;
}

<body>

<div id="container">

<div id="flash">
[1200x800px flash file in here]
</div>

</div>

</body>

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.