Autosize swf to fit browser window

Hi,
I'm trying to make it so my site autosizes to fit the screen. I read somewhere that you just change the height and width in the html code to 100% but it doesn't work. Instead it appers to make it 100px and ingnores the %. I'm sure I'm doing something wrong whether it be with the html code or the publishing of the swf file tiself, I'm not sure...probably both. Any help would be appreciated!!
THANK YOU!

I should also note that this is my HTML code:
<script type="text/javascript">
   var so = new SWFObject("flashfile.swf", "1", "955", "640", "8", "#232323");
   so.addParam("align", "");
   so.write("flashcontent")
The "so.write" line is very important and needs to be incoporated into any solution invloving html code changes. Thanks!

Similar Messages

Scaling to fit browser window?

Hi Everyone; I'm new to Captivate (specifically Captivate 4) , and I have what I know must be a rather dumb question, but I've spent two hours looking for the answer, and I can't find it. I have my project scaled to a custom width of 768 wide by 576 tall. How in the heck do I set the publish settings so that the output HTML knows to scale the darned browser window to exactly fit my output (no empty space around it)? I know I can go in through HTML and probably fix it there, butI'm just not that old school anymore. I expect the darned app to do that for me in the publishing process. Help.

Hi there
Although it isn't exactly recommended, one way to make things always fit the browser window is to simply link to the SWF and not the associated HTML page.
If you open the SWF it will simply scale to whatever dimension is largest to fit the browser. (If it's taller than wide, it will always fill the browser from top to bottom but not left to right. Or if it's wider than tall, the opposite. There isn't a way I'm aware of to coax it to simply fill the entire space.)
Cheers... Rick
Click here for Adobe Authorized Captivate and RoboHelp HTML Training
Click here for the SorcerStone Blog
Click here for RoboHelp and Captivate eBooks

Resize to fit browser window

does anyone know how i can set my Flex app to scale to fit
the browser window . I tried setting the html parameters and
stage.scaleMode = "exactFit" etc.. but neither seems to work
An example would be nice.
kimb

looks like it requires this javascript file: AC_OETags.js
// Flash Player Version Detection - Rev 1.5
// Detect Client Browser type
// Copyright(c) 2005-2006 Adobe Macromedia Software, LLC. All
rights reserved.
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ?
true : false;
var isWin =
(navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true :
false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ?
true : false;
function ControlVersion()
var version;
var axo;
var e;
// NOTE : new ActiveXObject(strFoo) throws an exception if
strFoo isn't in the registry
try {
// version will be set for 7.X or greater players
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
version = axo.GetVariable("$version");
} catch (e) {
if (!version)
try {
// version will be set for 6.X players only
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");
// installed player is some revision of 6.0
// GetVariable("$version") crashes for versions 6.0.22
through 6.0.29,
// so we have to be careful.
// default to the first public version
version = "WIN 6,0,21,0";
// throws if AllowScripAccess does not exist (introduced in
6.0r47)
axo.AllowScriptAccess = "always";
// safe to call for 6.0r47 or greater
version = axo.GetVariable("$version");
} catch (e) {
if (!version)
try {
// version will be set for 4.X or 5.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = axo.GetVariable("$version");
} catch (e) {
if (!version)
try {
// version will be set for 3.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = "WIN 3,0,18,0";
} catch (e) {
if (!version)
try {
// version will be set for 2.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
version = "WIN 2,0,0,11";
} catch (e) {
version = -1;
return version;
// JavaScript helper required to detect Flash Player PlugIn
version information
function GetSwfVer(){
// NS/Opera version >= 3 check for Flash plugin in plugin
array
var flashVer = -1;
if (navigator.plugins != null &&
navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"] ||
navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? "
2.0" : "";
var flashDescription = navigator.plugins["Shockwave Flash" +
swVer2].description;
var descArray = flashDescription.split(" ");
var tempArrayMajor = descArray[2].split(".");
var versionMajor = tempArrayMajor[0];
var versionMinor = tempArrayMajor[1];
if ( descArray[3] != "" ) {
tempArrayMinor = descArray[3].split("r");
} else {
tempArrayMinor = descArray[4].split("r");
var versionRevision = tempArrayMinor[1] > 0 ?
tempArrayMinor[1] : 0;
var flashVer = versionMajor + "." + versionMinor + "." +
versionRevision;
// MSN/WebTV 2.6 supports Flash 4
else if
(navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1)
flashVer = 4;
// WebTV 2.5 supports Flash 3
else if
(navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1)
flashVer = 3;
// older WebTV supports Flash 2
else if (navigator.userAgent.toLowerCase().indexOf("webtv")
!= -1) flashVer = 2;
else if ( isIE && isWin && !isOpera ) {
flashVer = ControlVersion();
return flashVer;
// When called with reqMajorVer, reqMinorVer, reqRevision
returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer,
reqRevision)
versionStr = GetSwfVer();
if (versionStr == -1 ) {
return false;
} else if (versionStr != 0) {
if(isIE && isWin && !isOpera) {
// Given "WIN 2,0,0,11"
tempArray = versionStr.split(" "); // ["WIN", "2,0,0,11"]
tempString = tempArray[1]; // "2,0,0,11"
versionArray = tempString.split(","); // ['2', '0', '0',
'11']
} else {
versionArray = versionStr.split(".");
var versionMajor = versionArray[0];
var versionMinor = versionArray[1];
var versionRevision = versionArray[2];
// is the major.revision >= requested major.revision AND
the minor version >= requested minor
if (versionMajor > parseFloat(reqMajorVer)) {
return true;
} else if (versionMajor == parseFloat(reqMajorVer)) {
if (versionMinor > parseFloat(reqMinorVer))
return true;
else if (versionMinor == parseFloat(reqMinorVer)) {
if (versionRevision >= parseFloat(reqRevision))
return true;
return false;
function AC_AddExtension(src, ext)
if (src.indexOf('?') != -1)
return src.replace(/\?/, ext+'?');
else
return src + ext;
function AC_Generateobj(objAttrs, params, embedAttrs)
var str = '';
if (isIE && isWin && !isOpera)
str += '<object ';
for (var i in objAttrs)
str += i + '="' + objAttrs
+ '" ';
for (var i in params)
str += '><param name="' + i + '" value="' + params
+ '" /> ';
str += '></object>';
} else {
str += '<embed ';
for (var i in embedAttrs)
str += i + '="' + embedAttrs
+ '" ';
str += '> </embed>';
document.write(str);
function AC_FL_RunContent(){
var ret =
AC_GetArgs
( arguments, ".swf", "movie",
"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
, "application/x-shockwave-flash"
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
function AC_GetArgs(args, ext, srcParamName, classid,
mimeType){
var ret = new Object();
ret.embedAttrs = new Object();
ret.params = new Object();
ret.objAttrs = new Object();
for (var i=0; i < args.length; i=i+2){
var currArg = args.toLowerCase();
switch (currArg){
case "classid":
break;
case "pluginspage":
ret.embedAttrs[args
] = args[i+1];
break;
case "src":
case "movie":
args[i+1] = AC_AddExtension(args[i+1], ext);
ret.embedAttrs["src"] = args[i+1];
ret.params[srcParamName] = args[i+1];
break;
case "onafterupdate":
case "onbeforeupdate":
case "onblur":
case "oncellchange":
case "onclick":
case "ondblClick":
case "ondrag":
case "ondragend":
case "ondragenter":
case "ondragleave":
case "ondragover":
case "ondrop":
case "onfinish":
case "onfocus":
case "onhelp":
case "onmousedown":
case "onmouseup":
case "onmouseover":
case "onmousemove":
case "onmouseout":
case "onkeypress":
case "onkeydown":
case "onkeyup":
case "onload":
case "onlosecapture":
case "onpropertychange":
case "onreadystatechange":
case "onrowsdelete":
case "onrowenter":
case "onrowexit":
case "onrowsinserted":
case "onstart":
case "onscroll":
case "onbeforeeditfocus":
case "onactivate":
case "onbeforedeactivate":
case "ondeactivate":
case "type":
case "codebase":
case "id":
ret.objAttrs[args] = args[i+1];
break;
case "width":
case "height":
case "align":
case "vspace":
case "hspace":
case "class":
case "title":
case "accesskey":
case "name":
case "tabindex":
ret.embedAttrs[args
] = ret.objAttrs[args] = args[i+1];
break;
default:
ret.embedAttrs[args
] = ret.params[args] = args[i+1];
ret.objAttrs["classid"] = classid;
if (mimeType) ret.embedAttrs["type"] = mimeType;
return ret;
I couldn't put them both in the same post as it went over
10000 Bytes.
--Andy

Can't Flex apps scale to fit browser window?

This has been brought up a couple of times, but seems to be a
mystery: How does one scale all content to fit the browser window,
preserving aspect ratio, and centering the content vertically or
horizontally (depending on whether the window aspect ratio is less
than or greater than the content aspect ratio)?
Since Flash is vector-based, I would have thought this would
be straightforward and encouraged!
Some information in an earlier post, plus experimentation on
my part, has yielded a bizarre and inflexible partial solution -
using StageScaleMode, and sizing the app's base container to
exactly 500x375 pixels, I can get content that scales with
the window size and doesn't have mismatched margins (though I
haven't figured out how to center it yet). In addition, there are
ugly scaling artifacts (look at the drop-shadows as you change the
browser window size).
Again, not being a Flash programmer, I baffled that this
isn't better supported, but I have to admit, most of the Flash apps
I've seen in the wild seem to all be fixed at some ridiculous size
like 640x480 or something. Are there some serious bugs here, or am
I missing something? Is there a better approach?
Here's a simple, complete, example (based on an example from
an earlier thread, but simplified a good bit):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx='
http://www.adobe.com/2006/mxml'
pageTitle="Resize Test"
layout="absolute" autoLayout="false"
addedToStage="event.currentTarget.stage.scaleMode =
StageScaleMode.SHOW_ALL"
>
<mx:Style>
VBox {
cornerRadius: 4;
borderStyle: solid; border-color: #000000; borderSize: 1;
horizontalAlign: center; verticalAlign: middle;
dropShadowEnabled: true;
</mx:Style>
<mx:VBox width="500" height="375"
backgroundColor="#808080"
paddingTop="20" paddingBottom="20" paddingLeft="20"
paddingRight="20">
<mx:VBox width="100%" height="100%"
backgroundColor="#808000">
<mx:Label text="This is some text" fontSize="12"
width="128" textAlign="center"/>
<mx:Button label="Button"/>
</mx:VBox>
</mx:VBox>
</mx:Application>

quote:
Originally posted by:
jpwrunyan
Not bitmaps. Externally loaded images that get converted to
bitmaps. What I said is that 90%+ are online catalogues. Logically
it would be safe to assume they display external images of a set
size. Sorry that was unclear. It would interesting to see an
official survey.
Yeah, I was using "bitmap" to mean raster graphics, whether
the actual source be jpg, png or what have you.
quote:
Originally posted by:
jpwrunyan
And good luck getting anyone from Adobe to pay attention to
this forum let alone comment. Better to contact their support if
you're ever really stuck.
Another reason I'm thinking MS is going to win this war - my
colleague is having great luck in the WPF forums.
quote:
Originally posted by:
jpwrunyan
Another reason I thought of why resizing does not result in
rescaling by default:
HTML and JSP applications don't rescale when you change the
browser size. Just go to hotmail or msn and check. They reposition.
Flex applications are intended to behave the same way but with RIA
capabilities. That is probably the more likely explanation than
bitmaps merely not scaling well. Anyway, this behaviour was a
thought-out decision and I happen to agree with it. By the way,
older Flash applications
do rescale to fit the window by default.
Exactly! That's the big problem, in my view, with the
HTML/JPG based web, and is what a vector-based solution
(discounting raster graphics) should solve.
Firefox, and now IE7, have features to allow you to scale web
pages to overcome, in a stop-gap way, this problem. IE even scales
images and Flash apps, though some Flash suffers problems when
scaled. Firefox does not (yet?) scale images or Flash along with
the other content. Flash-based Elmo games at sesamestree.org, at
640x480, look pretty stupid on my 42" 1920x1080 LCD (played by my
3-year old, not me!), but at least I can now (try) to scale them up
with IE7 for him.
I do not believe this was a thought-out decision, it's just
inertia from the bad old ways of doing things. There should be a
working option to easily scale content to the browser window, and
if Flex doesn't provide one, Microsoft certainly is going to (with
WPF/E) as they have with WPF. I'm not a big MS fan, but I think
they get the way things are going with the proliferation in the
range of screen resolutions and sizes that web content is being
displayed on.
That said, I realize there is more to dealing with different
screen sizes than just scaling - you may have to change the amount
of content on the screen, dependent on what the subject is.
quote:
Originally posted by:
jpwrunyan
Now if you want the Flash Player to be able to import huge
.jpg files with 1000px+ resolution and selectively only load enough
information to make a smaller size bitmap image so you can rescale
with impunity, more power to you. Sounds great. I would love this.
But it still doesn't address what should happen when the image goes
beyond the original size. I know you're only using vector graphics
so it's not an issue for you.
Yep, raster graphics are troublesome. Worst case, a beautiful
picture frame grows to surround the image as one zooms beyond its
original size (insert smiley icon of choice here)
quote:
Originally posted by:
jpwrunyan
Finally to get back on the main topic:
if SWFLoader isn't working well, you could programatically do
the same thing. Have a sub-contaier inside the application
container which adjusts its scale accordingly to the size of the
parent application container. I have done this myself with the
Image class for zooming in and out from images (ironically 1000px+
images which were displayed at much smaller sizes).
<Application resize="adjustSize()"
creationComplete="adjustSize()" paddingLeft="0" paddingRight="0"
paddingTop="0" paddingBottom="0">
<Script>
private function adjustSize():void {
var newScaleX = this.width/content.width
var newScaleY = this.height/content.height
content.scaleX = newScaleX;
content.scaleY = newScaleY;
</Script>
<Box id="content" borderStyle="none" width=400 height=300
/> 
</Application>
Something along the lines of the above should definitely
work. I am just basing it off my own previous code. You may have to
be careful of borders and padding if you decide to add them.
Whether it works better than the other suggestions you'll have to
decide.
Thanks for the code, and I'll try it. I'm new to Flex, and so
I'm still struggling with some things (such as when objects are
available for manipulation).

Generated RH output wraps to fit browser window

Hello All,
Is there a way in which generated RoboHelp output, after it
is applied to a piece of software, can be altered or
“fixed” so that it does not wrap text?
For example, in my particular case, when a user selects the
Help icon from the company software, the help appears in a separate
browser window. Depending on the default size of an individual
user's browser window, the content of the help will be
“wrapped” accordingly.
However, if a user has a smaller default browser window , the
text is “smushed” to fit the window, but the graphicn
will go off the screen. A similar result occurs if the window
larger or is maximized. The text will just go on and on and on and
tear apart the formatting.
So my question is this: is there a way to make the help
window open to a default size, specifically one that is capable of
maintaining the formatting so the user does not have to resize his
or her browser window in order to see the help content clearly?
Also, does anyone know if RH is just an inherently bad fit
with browsers other than IE? For users on non-windows based
computers, all RH output looks atrocious. All formatting is pushed
to the left margine, all styles are suddenly null and void. I
assume there is no way around this issue, but if anyone has any
ideas, they would be much appreciated!
Thanks in advance,
Diane
P.S. I wanted to attach pictures to this post to illustrate
what I am talking about, but I saw no obvious way to do so.
Hopefully my text is clear enough.

Hi All,
I apologize for unearthing this old topic, but now seamless
RH Firefox output has become a priority for the company.
Elisa (or anyone that may know); you mentioned a workaround
between the .css I created and the RH generated ns.css:
“Workaround - take a copy of projectX_ns.css. Compare
it with projectX.css, paying special attention to indent settings.
Fix any left indents that don't look right. Copy the adjusted
projectX_ns.css into your output folder. Take a look under some
different browser combinations.”
I am hardly savvy when it comes to the “behind the
scenes” workings of RH and the coding. I have found and
accessed the .css files in question, but what exactly, am I looking
for on terms of “indent settings?” I see
“margin” mentioned multiple times, but beyond that I
have no clue what I should be looking for.
My goal is to see if I can determine the cause, and thusly
remedy the issue, behind my RH WebHelp output left-justifying all
my bullets and numbering. I am using the latest version of RH with
applicable updates, and I am testing the Firfox output with the
latest versions and updates as well.
Also, I noticed while researching this problem, that some of
the topics within my project that share the same .css file as all
the others, do not manifest the left-justify issue in Firefox
output. I am still in the process of deciphering this mystery.
Any input would be much appreciated!
Thanks,
Diane

Add option to open swf in new browser window

Hello,
I have a small animation on a webpage. The properties are to
small to view all details. Can I add functionality to this swf that
the user can open the swf file into a new browser window. This
allows then for scaling to what ever size is appropriate.
Any suggestions??
Thanks!

Hi,
I hope I understood your question correctly, if so my suggestion may be helpful. Otherwise I think it's nearly the same what paul writes, I only made clear my proposal in a website for you, first a photo:
and here is the link: http://www.goldschmiede-blumberg.de/pdf/adob_pdf.php.
Note 1: "Ausgabe 9" und "ein Mausklick hier genügt" are links!!
Note 2: " Um pdf-Dateien ...." Means: To read pdf files, you need the free Adobe Reader. The current version you can download from the Adobe website.
Look at it's source code.
Viel Erfolg
Hans-G.

Swf title on browser window

I load up my swf file but it has the file name at the top of
the browser window. Can I change this to what I want it to say? Is
this a flash or dreamweaver topic?

If you're talking about viewing the flash movie ina
browser,it's most likely
an HTML issue - you control it with the <title> tag.
If you're talking about an independent flash viewer, then
it's likely th
etitle of your flash movie.
HTH,
Jon
"stephdog" <[email protected]> wrote in
message
news:en0sjd$osq$[email protected]..
> I load up my swf file but it has the file name at the
top of the browser
window. Can I change this to what I want it to say? Is this a
flash or
dreamweaver topic?

Fit browser window???

Hello. Im new to muse and working on making a website with vertical scrolling. If you take a look at the site (http://mainequarterly.com/thoreau/) you can see that the original frame that you see on the page fully fills the browser window. How can I do this in muse. Thank you.

Hello,
You can use that image as a browser fill for the page. you just need to select correct options in browser fill tab depending of the image size and quality.
Look at the screenshot below.
You can also check the links below for more detail.
Add an image to the background of the page or browser | Adobe Muse CC tutorials
Adobe Muse Help | Using Fill and Browser Fill options
Regards
Vivek

Open swf in new browser window

Hello,
I want a feature in a swf file(e.g. a button) that will open
the animation in a new browser allowing for fullscreen or at least
resizable view to the viewers liking.
Any suggestions??
Thanks!

Visit...
http://www.flash-db.com/PopUp/
Create the window with the features you want or don't want!,
generate the
code, and simply copy & paste the generated code on your
Flash button. No
html stuff envolved here. Everything's in the Flash movie.

Div Background Image...Resize To Fit Browser Window...???

[b]hello again[/b]...
I would like to have a background image (.jpg) automatically resize to fit any browser's window...& I read somewhere on the web it should be accomplished by placing the image in a layer (as a background image); & then set the layer size to 100%.
can someone please tell me how the coding goes for this...?
[or...if that [i]is[/i] in fact the correct approach? I don't care if it's html or css...I just want it to work. (&...I'm starting off w/ a larger image (so resolution doesn't get lost when going bigger)]
thanks very much,
[b]mark4man[/b]
btw - I should add that it's the image's [i]WIDTH[/i] I'm interested in resizing...while it's aspect ration remains in tact.

http://css-tricks.com/how-to-resizeable-background-image/
For the record, I'm not a big fan of huge background images on web pages. They take forever to load on slow connections. And some mobile devices won't display them at all. So all that weight just for eye candy is kind of a waste IMO.
I think the safest, most practical way to achieve backgrounds that fill available viewport is to use a small, seemless tile and repeat horizontally, vertically or both.
More on background-images:
http://alt-web.com/Backgrounds.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Fitting browser window & "home" state

Hey,
So I have these two questions:
     1. Is there a way to make my flash content, when viewed in a browser, either prohibit the expansion of a window it is in or somehow make it so when the browser's window is expanded, the border surrounding my flash content expands with the window without having my flash content expand as well?
     (Ex: I have flash content in the middle of the page. A 100 pixel wide border is on the edge of the screen, about 200 pixels away from the flash content. When I expand the window, I want just the border to follow the window but keep the flash content centered.)
     2. I have been working on this project only for a couple days and all of a sudden the "home" state, the one which displays first when I run the project, is now the third state in my timeline on the top. It was always the first state on the top which showed first, but now it has changed. I have tried dragging the states but nothing has worked. Any suggestions?
If any of this requires Dreamweaver I do not mind.
Thanks.

Hey,
I have solved the "home" state problem. But the other one is still unsolved.

Make object fit browser window when scaling it up and down?

I want to add a flip book on my page. But i want it to scale up and down, so it will fit both a 13" screen as well as a 27" screen. Is this even possible?

Hi,
Please take a look at this for a similar discussion : https://forums.adobe.com/message/6264647#6264647
Regards,
Aish

Open .swf in full-screen browser window?

Hi there! I would appreciate if someone could help me with this:
I have a .swf that I embed in an .html file. When loaded, the html file opens up in a window with the application taking up only 50% of the window. I'd like to have the application open in a window that's full screen. Is that possible at all?
The .html file I'm using is a standard one generated by Captivate and looks like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Title</title>
<script src="standard.js" type="text/javascript"></script>
</head>
<body   bgcolor="#ffffff">
<center>
    <div id="CaptivateContent"> </div>
    <script type="text/javascript">
       var so = new SWFObject("myfile.swf", "Captivate", "891", "551", "10", "#ffffff");
        so.addParam("quality", "high");
        so.addParam("name", "Captivate");
        so.addParam("id", "Captivate");
        so.addParam("wmode", "window");
        so.addParam("bgcolor","#ffffff");
        so.addParam("menu", "false");
        so.addVariable("variable1", "value1");
        so.setAttribute("redirectUrl", "http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash");
        so.write("CaptivateContent");
    </script>
    <script type="text/javascript">
        document.getElementById('Captivate').focus();
        document.Captivate.focus();
    </script>
</center>
</body>
</html>

Hi,
What do mean by browser window?
If you mean the File>Open dialog, double click on the Title bar to get it back to a smaller size.

Site automatically scale to fit the browser window

hello all!
i'm working on a site that i'd like to automatically scale to fit the browser window, without any scrolling and while preserving its aspect ratio.
my client is very particular about the design & does not want the width & height of the images & text to change like they do in a responsive site- he just wants the site to scale to fit in a browser window. Yikes!!!
could anyone give me a hand with this please?
thanks so very much!
-sharon

Hi Andreas
I'm really looking forward to hearing about your tests tonight. As I said to Elaine (above) I will be delighted if someone proves me wrong. I'm just looking for a solution.
I've just had another quick go on Edge Animate to try out your suggestions:
My findings are that it doesn't matter whether a graphic is wrapped in a div or not. If the graphic has L, T , W & H pixel values and the surrounding div group is set to L, T , W & H % values, the L & T will scale down but the W & H will not - the graphic will just stay the same size when the browser is shrunk. The only way to get the graphic to scale down is to change its L, T , W & H to % - but, as I've said it won't retain its aspect ratio.
As soon as images are imported, the situation changes. The layout preset offers 4 more options including 'Scale background image'. And Background image settings now appear offering W 100%, H Auto by default. These both seem essential to achieving scale-to-fit. I've tried images with and without being wrapped in a div. Just as with graphics, I find that if I add the % to the div then the image doesn't scale. But if I add the % to the image it scales perfectly.
As far as I can see the problem is that, with graphics, the link width and height feature doesn't seem to work properly. I would expect that if I create a graphic 100px square then change W & H to %, then both W & H would be the same %. But I get all sorts of results. It doesn't seem to make a difference if I fix the percentages so W & H are both 100%. Changing from Global to Applied doesn't seem to affect anything either. Surely if W & H are set to 100% (and linked) then a graphic should remain square regardless of browser size? I can't find any combination that will allow this. Is it just me? Am I doing something stupid?
Good luck tonight.
Cheers

How do I make my website fit in all size browser windows?

Hi there,
I should start off by saying that I am very new to web design, and have very limited knowledge of CSS and HTML. I understand what they are and the nature of what they do, I'm just not code savvy.
Now that that's out of the way, I've been designing/attempting to build a website using Dreamweaver. I have all of the components and layout that I want designed and ready to go, but I desperately need help with translating that into Dreamweaver. I've been researching information all over the web, but with one person suggesting one thing and another suggesting something completely different I'm afraid my brain is about to melt.
Here's what I've done so far:
Because I want everything fully customized and to use a less common font style, I saved everything from the graphics, photos, and links as .png files. I then inserted each of those images into an AP Div Tag in Dreamweaver and arranged them appropriately. That's absolutely all I've done. It works great, except I have no idea how to configure everything so the site layout shows up centered in any size browser window, instead of sitting awkwardly in the corner.
Here's a link to what currently exists: http://ikikatawares.com
I've read dozens of articles and forum responses about building tables, but I'd like to avoid that since to me they seem clunky and kind of a hassle to deal with. Can anyone please help me? Thanks.
Beth

You need to put only the bold part into your code.
Immediately after your starting <body> tag add in
<div id="wrapper">
and immediately before your ending </body> tag add in
</div>
Then at the end of your css, you currently have...
#apDiv10 .navBarLinks .navBarLinks {
font-weight: bold;
Change that to...
#apDiv10 .navBarLinks .navBarLinks {
font-weight: bold;
#wrapper {
     position:relative;
     width:1005px;
     margin:0 auto;

Autosize swf to fit browser window

Similar Messages

Maybe you are looking for