We help IT Professionals succeed at work.

Using a Fixed Size for a Website

kaemac21
kaemac21 asked
on
Is there any way to set a maximum width on a website in dreamweaver, so that the user cannot enlarge the screen past 1000x800px? However I still need to maintain the scrollbars. I am having trouble with viewing the same site in different browsers, but if I could ensure that the page could not be viewed in widescreen, items would not shift around in IE as they are currently.

Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>Yogli Mogli - Self Serve Frozen Yogurt</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

		<style type="text/css" media="screen">
		html, body { height:150%; background-color: #ffffff;}
		body {
	margin:0;
	padding:0;
	overflow:scroll;
	background-color: #c7de42;
	text-align: center;
}

		#flashContent {
	height:auto;
	width: 100%;
	position: inherit;
}

		</style>
        
                  <iframe src="http://www.facebook.com/plugins/like.php?href=www.yoglimogli.com&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; position:relative; top:560px; left:450px; width:400px; height:35px;" allowTransparency="true"></iframe>

	<body bgcolor="#c7de42">
  
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="600" id="FlashID" title="yogli mogli">
      <param name="movie" value="index.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
      <param name="expressinstall" value="Scripts/expressInstall.swf" />

      <object type="application/x-shockwave-flash" data="index.swf" width="1000" height="600">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>

	</head>
        </div>

      </object>
      <!--<![endif]-->
    </object>
    <script type="text/javascript">
swfobject.registerObject("FlashID");

    </script>
	</body>
</html>

Open in new window

Comment
Watch Question

View Solution Only

remorina
Top Expert 2010

Commented:
Why don't you use max-width and max-height CSS for the main content wrapper?

For example wrap your page content inside a div <div id="wrapper"> and add the below css class
remorina
Top Expert 2010

Commented:
For some reason the css code didn't attach in the previous post, here it is
#wrapper {
max-width:1000px;
max-height:800px;
}

Open in new window

kaemac21

Author

Commented:
I know this is probably a dumb question, and I might figure it out by the time you are able to get back to me (through trial and error of course) but does it matter exactly where I put that code?
Top Expert 2010
Commented:
The CSS code should be either in an external CSS file which is referenced in the <head> section or within the <style> tag you already have on your page.

I have also noticed your code is invalid and would probably give you some troubles, your </head> closing tag is coming after the body opening tag and before a closing div while you have an iframe before the body.
This is completely invalid, the <head> should be closed right before the <body>

It's a good practice to validate your HTML documents in W3 validator here http://validator.w3.org/#validate-by-input and fix all errors, currently your code reported 21 errors, and a valid code should look like below, I've also added the CSS and code from my above post.

Also you shouldn't be using XHTML strict doctype with iframes



<!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" lang="en" xml:lang="en">
<head>
    <title>Yogli Mogli - Self Serve Frozen Yogurt</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css" media="screen">
        html, body
        {
            height: 150%;
            background-color: #ffffff;
        }
        body
        {
            margin: 0;
            padding: 0;
            overflow: scroll;
            background-color: #c7de42;
            text-align: center;
        }
        #wrapper 
        {
            max-width:1000px;
            max-height:800px;
        }
        #flashContent
        {
            height: auto;
            width: 100%;
            position: inherit;
        }
    </style>
</head>
<body>
    <div id="wrapper">
    <iframe src="http://www.facebook.com/plugins/like.php?href=www.yoglimogli.com&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=35"
        scrolling="no" frameborder="0" style="border: none; overflow: hidden; position: relative;
        top: 560px; left: 450px; width: 400px; height: 35px;">
    </iframe>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="600"
        id="FlashID" title="yogli mogli">
        <param name="movie" value="index.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don't want users to see the prompt. -->
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <object type="application/x-shockwave-flash" data="index.swf" width="1000" height="600">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="opaque" />
            <param name="swfversion" value="6.0.65.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
            <div>
                <h4>
                    Content on this page requires a newer version of Adobe Flash Player.</h4>
                <p>
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
                            alt="Get Adobe Flash player" width="112" height="33" /></a></p>
            </div>
        </object>
        <!--<![endif]-->
    </object>

    <script type="text/javascript">
swfobject.registerObject("FlashID");

    </script>
    </div>
</body>
</html>

Open in new window

kaemac21

Author

Commented:
Had to make a few tweaks, but you led me to the solution. Thanks!!