Cutting off content instead of scrollbars

Ansari · Sep 25, 2008

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

CSS to work with

Code:

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

Ansari · Sep 25, 2008

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

Ansari said:
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

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>

angelneo · Sep 25, 2008

Ansari said:
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>

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.

Search

Search

Cutting off content instead of scrollbars

Ansari

macrumors newbie

angelwatt

Moderator emeritus

Ansari

macrumors newbie

angelwatt

Moderator emeritus

Ansari

macrumors newbie

angelneo

macrumors 68000

Our Staff