asked on

Resizing of Website created using Dreamweaver at different screen resolutions

I have created a website for client in dreamweaver 8.

My problem is that at 1280 x 800 , the website is looking great but when I open it at 1024 x 768 resolution , it does not resize itself to fit. Its big because of the real size

Can anybody tell me how to resize it using any code if required.

I just do not want to redesign the whole website all over again.

Its not a template, I have made it from scratch.

Please no sure shot ideas, tell me something which will work.

araim

basicly you have to change the main containter (and possibly all inside, depends on how did you do your website) width from a fixed one to percentage
instead of width:800px do width:100%

it all depends on how is your site built internally, so it's hard to say what exactly to do.
If you want some specific advice, paste some html/css code

wickedsunny

ASKER

I am not a programmer, so I created everything from design view point.

Can araim you tell me where exactly to change that width to 100% in dreamweaver design view ?

I cannot show the design or html due to NDA.

SOLUTION

v2Media

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

wickedsunny

ASKER

Hm Thank V2 for the dissection :) lol

I have not used tables or css, Its simple with layers, but that means I cannot move around much without redesigning everything.

The mistake I did was I created it on my large screen laptop,and it was all screwed up when I checked later on another pc.

I think your java script is a good idea.

I have no idea of programming, so help me out with the exact java code and how to call it with dream weaver.

wickedsunny

ASKER

adaptive graphic will help as well. Especially because I want the main graphic part to remain in center of screen so adaptive graphic can increase on the sides.

ASKER CERTIFIED SOLUTION

v2Media

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

wickedsunny

ASKER

Well Buddy

I do copy paste in the code view so do not worry.

I will give it a try and let you know soon.

Right now I need to create 1024 x 768 version first

Thanks for the code.

wickedsunny

ASKER

That solved the problem but I think with a lower resolution then 1024 x 768, it will again create problems.
I cannot go on making different versions.

Ok I think the best option will be to use adaptive graphics.

How do I upload a file here ?

I will attach a dreamweaver 8 file, which has no images, just layers and layout.

Tell me how to set the width size to % and adaptive graphics, which will be just black background on the sides..

do this in dream weaver and please explain to me how to do it so I can do it myself.

regards

Sunny

v2Media

If it's just a file and no images, you can post the code. Check the box "Attach Code Snippet" and past the html code of your page into the snippet box that appears.

wickedsunny

ASKER

V2 the problem is I want you to show me how you do it without working with the code in dreamweaver.

Anyhow here is the code.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>sample.com</title>
<style type="text/css">
<!--
body {
	background-color: #999999;
}
#Layer1 {
	position:absolute;
	left:82px;
	top:-4px;
	width:1127px;
	height:122px;
	z-index:1;
}
#Layer2 {
	position:absolute;
	left:179px;
	top:127px;
	width:286px;
	height:237px;
	z-index:2;
	background-color: #0000FF;
}
#Layer3 {
	position:absolute;
	left:808px;
	top:86px;
	width:306px;
	height:270px;
	z-index:3;
	visibility: visible;
}
#Layer4 {
	position:absolute;
	left:461px;
	top:127px;
	width:347px;
	height:236px;
	z-index:4;
	background-color: #00FFCC;
}
#Layer5 {
	position:absolute;
	left:179px;
	top:360px;
	width:935px;
	height:174px;
	z-index:8;
	background-color: #CC0000;
}
#Layer6 {
	position:absolute;
	left:179px;
	top:535px;
	width:937px;
	height:70px;
	z-index:6;
	background-color: #009900;
}
#Layer7 {
	position:absolute;
	left:189px;
	top:566px;
	width:621px;
	height:56px;
	z-index:7;
}
.style3 {color: #efd57f; font-family: "Myriad Pro"; font-size: 12px;}
.style2 {	color: #FFFFFF;
	font-size: 10pt;
	font-family: "Myriad Pro";
}
#Layer12 {	position:absolute;
	left:856px;
	top:566px;
	width:167px;
	height:55px;
	z-index:12;
}
#Layer8 {
	position:absolute;
	left:809px;
	top:106px;
	width:303px;
	height:253px;
	z-index:7;
	background-color: #6600CC;
}
-->
</style></head>
 
<body>
<div id="Layer1">
  <div align="center"><img src="Images/website-final-header.jpg" alt="logo header" width="932" height="132" border="1" /></div>
</div>
<div id="Layer2"></div>
<div id="Layer4"></div>
<div id="Layer5"></div>
<div id="Layer6"></div>
<div id="Layer8"></div>
</body>
</html>

Open in new window

SOLUTION

v2Media

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

wickedsunny

ASKER

Thank You V2MEDIA