Resizing Images Using Fluid Layout

The newmid and new-nav images are both 1200px. All the other images are a lot smaller. The whole layout is 1200px in width. Using 1200px as a layout, is there any way to make the images bigger or smaller depending on the resolution size?

http://www.neiu.edu/...i1/default.html

This is a link of how the page looks like. Let me know if something is unclear. Thanks!

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Sharedrive</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>

<body style="margin: 0">
<div id="wrapper1">
	<div id="logo"><img src="Header/logo.gif" /></div>
	<div id="bglogin">
		<div id="login"><img src="Header/login.gif"/></div>

		<div id="bemember"><img src="Header/bamember.gif"/></div>
	</div>
</div>
<div class="rollovers">
<a id="home" href="#"></a>
<a id="features" href="#"></a>
<a id="pricing" href="#"></a>
<a id="blog" href="#"></a>
<a id="about" href="#"></a>
<a id="support" href="#"></a>
</div>
<div id="wrapper2">
	<div id="button1"><a href="button1.html"><img src="New Folder/button1.png" style="border:thick"/></a></div>	
</div>

<div id="wrapper3">
	<div id="box1">
		<div id="unite"><img src="New Folder/unite.png"/></div>
		<div id="textbox"><img src="New Folder/textblock.png"/></div>
		<div id="names">
			<div id="subnames1">
				<div id="hunson"><img src="New Folder/hunson.png"/></div>
				<div id="kajieo"><img src="New Folder/kajieo.png"/></div>
				<div id="purze"><img src="New Folder/purze.png"/></div>

			</div>
			<div id="subnames2">
				<div id="afero"><img src="New Folder/afero.png"/></div>
				<div id="vista"><img src="New Folder/vista.png"/></div>
				<div id="ncz"><img src="New Folder/ncz.png"/></div>
			</div>
		</div>
	</div>
	<div id="box2">

	<div id="files1">
		<div id="subfile1">
			<div id="arrows"><a href="arrows.html"><img src="New Folder/arrows.png"/></a></div>
			<div id="filetext"><a href="filetext.html"><img src="New Folder/filetext.png"/></a></div>
			<div id="text"><p>Easily send and recieve large files up to 5 GB</p></div>

		</div>
		<div id="subfile2">
			<div id="music"><a href="music.html"><img src="New Folder/music.png"/></a></div>

			<div id="filetext"><a href="filetext.html"><img src="New Folder/musictext.png"/></a></div>
			<div id="text2"><p>Store an unlimited amount of music without having to worry about space</p></div>

		</div>

	</div>
	<div id="files2">
		<div id="subfile3">
			<div id="cpu"><a href="cpu.html"><img src="New Folder/cpu.png" /></a></div>

			<div id="videotext"><a href="videotext"><img src="New Folder/videotext.png"/></a></div>
			<div id="text3"><p>Embed videos in your Hub to share with others</p></div>

		</div>
		<div id="subfile4">
			<div id="calen"><a href="cpu.html"><img src="New Folder/calen.png" /></a></div>
			<div id="calentext"><a href="videotext"><img src="New Folder/calentext.png"/></a></div>
			<div id="text4"><p>Work faster each day with tasks and calendars</p></div>

		</div>

	</div>
	
	</div>
</div>
</body>

</html>

#body
{
	margin:0px;
	float:left;
}
img
{
	border-width: 0;
}
#wrapper1
{
	margin:0px;
	float:left;
	width:100%;
	height:90px;
	background-color:black;
}
#logo
{
	margin:0px;
	float:left;
	width:341px;
	height:86px;
}
#bglogin
{
	margin:0px;
	float:right;
	width:175px;
	height:17px;
}
#login
{
	margin:0px;
	float:left;
	width:53px;
	height:17px;
}
#bemember
{
	margin:0 0 0 10px;
	float:left;
	width:108px;
	height:17px;
}
/*navigation*/

#home
{   
    background-image:url('Header/nav.png');
    width: 292px;
    height: 81px;
    background-position: 0px 0px;
    float: left;
 
}
#home:hover
{
    background-position:-179px -161px;
    float: left;
}

#features
{
    background-image: url('Header/nav.png');
    width: 168px;
    height: 81px;
    background-position: -339px 0px;
    float: left;
}
#features:hover
{
 background-position: -339px -81px;
 
}
#features:active 
{
    background-image: url('Header/nav.png');
    width: 120px;
    height: 81px;
    background-position: -339px -161px;
    float: left;
}

#pricing
{
    background-image: url('Header/nav.png');
    width: 181px;
    height: 81px;
    background-position: -520px 0px;
    float: left;
}

#pricing:hover
{
	background-position:-520px -161px;
}
#pricing:active 
{
    background-image: url('Header/nav.png');
    width: 120px;
    height: 46px;
    background-position: -520px -161px;
    float: left;
}
#blog
{
 background-image: url('Header/nav.png');
    width: 151px;
    height: 81px;
    background-position: -679px 0px;
    float: left;
}
#blog:hover
{
 background-position: -679px -161px;
}
#blog:active
{
 background-image: url('Header/nav.png');
    width: 112px;
    height: 46px;
    background-position: -679px -161px;
    float: left;
}

#about
{
    background-image: url('Header/nav.png');
    width: 156px;
    height: 81px;
    background-position: -835px 0px;
    float: left;
}
#about:hover 
{
    background-position: -835px -81px;
}
#about:active
{
    background-image: url('Header/nav.png');
    width: 156px;
    height: 81px;
    background-position: -835px -81px;
    float: left;
}
#support
{
    background-image: url('Header/nav.png');
    width: 268px;
    height: 81px;
    background-position: -996px 0px;
    float: left;
}
#support:hover 
{
    background-position: -996px -81px;
}
#support:active
{
    background-image: url('Header/nav.png');
    width: 120px;
    height: 81px;
    background-position: -966px -81px;
    float: left;
}
.rollovers
{
	text-align:center;
}

/*middle*/

#wrapper2
{
	margin:0 0 0 0px;
	float:left;
	width:100%;
	height:370px;
	background-image:url('New Folder/mid.png');
} 
 
#button1
{
	margin:0 20% 0 0;
	float:right;
	width:214px;
	height:61px;
	margin-top:22%;
} 
#wrapper3 
{
	margin:0 0 0 0px;
	float:left;
	width:100%;
	height:550px;
	background-color:#eff7fc;
	border-bottom:thin;
} 

#box1 
{
	margin:0px 0 0 0px;
	float:left;
	width:45%;
	height:550px;
} 

#unite 
{
	margin:0px 0 0 0px;
	float:left;
	width:461px;
	height:28px;
} 

#textbox
{
	margin:0px 0 0 0px;
	float:left;
	width:383px;
	height:165px;
} 
#names 
{
	margin:0 0 0 0px;
	float:left;
	width:90%;
	height:300px;
} 

#subnames1 
{
	margin:40px 0 0 0px;
	float:left;
	width:50%;
	height:265px;
} 

#hunson 
{
	margin:40px 0 0 0px;
	float:left;
	width:258px;
	height:27px;
} 

#kajieo 
{
	margin:40px 0 0 0px;
	float:left;
	width:242px;
	height:33px;
} 

#purze 
{
	margin:40px 0 0 0px;
	float:left;
	width:258px;
	height:27px;
} 

#subnames2 
{
	margin:40px 0px 0 40px;
	float:left;
	width:30%;
	height:265px;
} 

#afero 
{
	margin:40px 0 0 0px;
	float:left;
	width:109px;
	height:27px;
} 

#vista 
{
	margin:40px 0 0 0px;
	float:left;
	width:144px;
	height:40px;
} 

#ncz
{
	margin:40px 0 0 0px;
	float:left;
	width:64px;
	height:26px;
} 

#box2 
{
	margin:0px 0 0 0px;
	float:left;
	width:50%;
	height:550px;
} 

#files1 
{
	margin:0px 0 0 0px;
	float:left;
	width:50%;
	height:300px;
} 

#subfile1 
{
	margin:0px 0 0 0px;
	float:left;
	width:260px;
	height:140px;
} 

#arrows 
{
	margin:0px 0 0 0px;
	float:left;
	width:126px;
	height:82px;
} 

#filetext 
{
	margin:0px 0 0 0px;
	float:left;
	width:102px;
	height:21px;
} 

#text
{
	margin:0px 0 0 0px;
	float:left;
	width:120px;
	height:90px;
} 
#subfile2 
{
	margin:0px 0 0 0px;
	float:left;
	width:260px;
	height:140px;
} 
#music 
{
	margin:0px 0 0 0px;
	float:left;
	width:126px;
	height:99px;
} 

#musictext 
{
	margin:0px 0 0 0px;
	float:left;
	width:112px;
	height:21px;
} 

#text2
{
	margin:0px 0 0 0px;
	float:left;
	width:120px;
	height:90px;
} 
#files2 
{
	margin:0px 0 0 0px;
	float:right;
	width:50%;
	height:300px;
} 

#subfile3 
{
	margin:0px 0 0 0px;
	float:left;
	width:300px;
	height:140px;
} 

#cpu 
{
	margin:0px 0 0 0px;
	float:left;
	width:126px;
	height:101px;
} 
#videotext 
{
	margin:0px 0 0 0px;
	float:left;
	width:147px;
	height:21px;
} 

#text3
{
	margin:0px 0 0 0px;
	float:left;
	width:120px;
	height:60px;
} 

#subfile4 
{
	margin:0px 0 0 0px;
	float:left;
	width:300px;
	height:140px;
} 

#calen 
{
	margin:0px 0 0 0px;
	float:left;
	width:126px;
	height:82px;
} 

#calentext 
{
	margin:0px 0 0 0px;
	float:left;
	width:147px;
	height:21px;
} 

#text4
{
	margin:0px 0 0 0px;
	float:left;
	width:120px;
	height:60px;
}

so here is the deal, 1200 imo is too wide. it's up to you and what you think your audience is (if everyone is using a 1280x1024 then you are fine) but the majority of sites are still built on a 1024 pixel wide minimum - the site itself is normally 960 pixels wide to account for scollbars etc...(and that extra 200 pixels makes a big difference). your site doesn't work horizontally on my brand new macbook pro.

so, thats the first thing you should probably address.

secondly : you dont resize images in a fluid layout, web graphics are raster images, which when expanded or resized will pixelate. so, designs are built around repeating graphics.

so, for your middle image you just take your image, and you can cut a piece of one of the sides off, say 2 or 3 pixels wide, and the height of the entire gradient. then set this as your background for the wrapper, and add

 background-repeat: repeat-x;

which repeats the image horizontally. Then you can remove the gradient from the mid.png and just save it with a transparent background and just leave it as is.

You do the same thing for the navigation (which unnecessarily has images).

So, you design this for a 960 (which if you just turn the navigation into code instead of images and remove the excess space on the sides of the mid.png will probably work just fine) and then it will stretch depending on what size browser window your user has.

I want the image to change in size accordingly to different resolution

2 Replies - 4102 Views - Last Post: 23 May 2010 - 11:48 AM

#1 tscott

resizing images using fluid layout

Replies To: resizing images using fluid layout

#2 capty99

Re: resizing images using fluid layout

#3 tscott

Re: resizing images using fluid layout

General Discussion

Programming Help

Web Development

Follow & Share

Give It A Try!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing