resizing images using fluid layout

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

Page 1 of 1

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

#1 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

resizing images using fluid layout

Posted 21 May 2010 - 08:07 PM

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;
} 



Is This A Good Question/Topic? 0
  • +

Replies To: resizing images using fluid layout

#2 capty99  Icon User is offline

  • i am colt mccoy
  • member icon

Reputation: 98
  • View blog
  • Posts: 10,081
  • Joined: 26-April 01

Re: resizing images using fluid layout

Posted 22 May 2010 - 12:36 AM

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.
Was This Post Helpful? 0
  • +
  • -

#3 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: resizing images using fluid layout

Posted 23 May 2010 - 11:48 AM

Ok the 960 makes sense but why 960 why not 1004? If most people are in 1024 isn't 1004 enough space to where I can design the whole site I'm just wondering. Thanks for your help
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1