Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How to make my css website fit on any res

Posted on 2011-10-30
11
Medium Priority
?
244 Views
Last Modified: 2012-05-12
Hi all
 i have a site here http://www.adbydesigns.com.au/clients/kwm/ i would like  this page to grow and shrink depending on the screne size i was wondering what hte best way way to do this
0
Comment
Question by:awolarczuk
9 Comments
 
LVL 9

Expert Comment

by:pritamdutt
ID: 37055026
Hi,

You have different methods depending on the level of CSS/Table usage you do in your web page.


Looking at your link, I don't see any trace of TABLE as such.

Since you are using primarily divs, you need look at using Fluid CSS, considering it is a good subject. I am sharing couple of nice links on examples of fluid CSS for giving you a headstart. Hope this helps!


1. http://css-tricks.com/138-the-perfect-fluid-width-layout/

2. http://cssgrid.net/

3. http://www.devwebpro.com/css-fluid-layout-tutorial/

4. http://www.dynamicdrive.com/style/layouts/category/C10/

5. http://www.fluidgrid.net/

6. http://kflorence.github.com/flurid/


Hope this helps!!!

Regards,



0
 

Author Comment

by:awolarczuk
ID: 37055740
mate thanks for the feed back io have been looking at this
what do you think would be the best way here to get this done quickly
0
 

Author Comment

by:awolarczuk
ID: 37055840
Mate i have tried to use a example i found here and added it to my site and have found that nothin change the images stay the same size and the screen doesnt get smaller at all

I have updated my main index and css file if u cant help please
Css----



* { /* sets 0 margin and 0 padding on everything */
	margin: 0; 
	padding: 0; 
}


body{margin:0;padding:0;
	font-family:Verdana;
	font-size: 12px;
	line-height:18px;
	font-style: normal;
	color:#000;
	text-align:center;
	font-weight: normal;
	font-variant: normal;
	background:url(images/back.png);
	background-color:#FFF;
	background-repeat:no-repeat;
	
	}
	
	#wrapper, #content-wrapper {
	float: left;
	width: 100%;
}
	
	#back{ position: absolute;
	width:100%;
	height:550px;
	top:100px;
	background-color:   #284457;
}



#text1{
	font-family:Verdana;
	font-size: 14px;
	width:700px;
	position: absolute;
	color: white;
	left: 920px;
	top:150px;
	text-align:justify;
	
	
}

#line1{/*top line under logo */
	top: 59px;
	position:absolute;
	width: 100%;
	height: 40px;
	background-color: #21253b;
	
	
}

#line2{/*line under menu */
	top:652px;
	position:absolute;
	width: 100%;
	height: 40px;
	background-color: #21253b;
	
	
}
#line3{
	height:551px;
	top:100px;
	position:relative;
	width:2px;
	background-color: white;
	left: 890px;
	
}


/* start heading content */
#heading-area {
	width:100%;
	height:50%;
	position:relative;
	float:left;
}

/* start heading content */
#main-area {
	width:100%;
	height:25%;
	position:relative;
	float:left;
}


#middle{/*This is where the contents in the middle of the site are*/
top:50px;
position:absolute;
width:100%;
}

	
#images{
	position:absolute;
	left: 10px;
	top:112px;
	z-index:1001;
}
#logo{/* This is the location of the top logo */
	position:absolute;
	left: 10px;
	z-index:1001;

	
}

/*Nav Menu*/
#nav { /* This is the nav bar detils */
	width: 800px;
	float: left;
	position: absolute;
	top: 652px;
	margin: 0 0 3px 0;
	padding: 0;
	list-style: none;
	background-color: #21253b;
	border: 0px solid #ccc; 	
	left: 0px;
	z-index:1001;}
	
#nav li {
	float: left; }
#nav li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;
	border-right: 1px solid #ccc; }
#nav li a:hover {
	color: #FFFFFF;
	background-color: green; }/* This is the nav bar detils */
#footer{
	position: absolute;
	left:0px; 
	top: 700px; 
	width: 100%;
	background:blue;
	}
#mixedimages{
	top:500px;
	left:940px;
	position: absolute;
	
}

#location{
	position: absolute ;
	top:70px;
	left:1550px;
	font-family: Verdana;
	font-size: 20px;
	color: yellow;
	z-index:1001;
}

.in {
	margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
	margin-top: 0;
}
				#bottomlists{position:absolute; left:300px;top:55px;width:100%;height: 120px;  } /*bottom like table*/

				
				#row1  { float: left;width: 200px; padding-right: 1px; height="auto"; }
				#row2  { float: left;width: 200px; padding-right: 1px; height="auto"; }
				#row3  { float: left;width: 200px; padding-right:1px; height="auto"; }
				#row4 	{ float: left;width: 200px; padding-right:1px; height="auto"; }
				#row5  { float: left;width: 200px; padding-right:1px; height="auto"; }
				#row6  { float: left;width: 200px; padding-right: 1px; height="auto"; }
				
				#cr{position:absolute; left:600px;top:100px;color:black ;font-size: 12px; font-family: Verdana}  /*location of the copywright on the page*/
				
				a.bt:link {color:gray;text-decoration:none; font-family: Verdana; font-size: 14px } 
				a.bt:visited {color:gray;text-decoration:none;font-size: 14px} /* visited link */
				a.bt:hover {color:red;text-decoration:none underline; font-size: 14px}   /* mouse over link */
				a.bt:active {color:gray;text-decoration:none;font-size: 14px}  /* selected link */
		
				#contact {position:absolute;left:25px;height: 370px;top:180px;z-index:1001; font-family: Verdana}	/*This is for the location ofthe contact text*/

Open in new window

index.asp
=--------=-=

<!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=UTF-8" />
<title>Home</title>
<!--<link href="settings.css" rel="stylesheet" type="text/css" /> -->
<style type="text/css"> @import url(settings.css); </style>

<!--#include FILE="imagefade.inc" -->  <!--Getting the images and script for fading-->
</head>

<body onload="controler_of_fade();">

<!--opening divs -->



<div id="wrapper">
		
	
    <!--heading divs -->
	<div id="heading-area">
		<div id="logo">
				<img src="images/logo.png" alt="" id="logo2" class=""width="250px" height="125px" />
				
		</div>
    </div><!--end heading divs -->
    <div style="clear:both"></div>
    
 <div id="middle">
 		<div id="location" >HOME</div>
 		<div id="back"></div>
 			
 		<!--#include FILE="menu.inc" -->
		<div id="line1" ></div>
		<div id="line2" ></div>
		<div id="line3" > </div>
	<div id="content-wrapper">
		<div id="content">
			<div class="in">
		<div id="images">
 				<img src="images/delight.png" id="fader" alt="" width="870px" height="528px" />
            		<script type="text/javascript"><!--
						document.getElementById("fader").style.filter="alpha(opacity=0)";
						document.getElementById("fader").style.MozOpacity=0;
						document.getElementById("fader").style.Opacity=0;
				//--></script>
 			</div>
 		<div id="mixedimages"><img src="images/bottom.png" id="miximg" alt="" /></div>
		
			<div id="text1"><p> KWM Media Group (KWM) provides you with a media alliance - developing branding & strategic direction via both traditional and new media, co-ordinating Creative opportunities as well.</p>
							<p>Simply put it takes the best components of a strategist & media buyer and combines it with a direct media buying approach. </p>
							<p>I’m sure that companies like yours have been through many experiences with advertising agencies and so called “media buyers” in the past.</p>
							<p>We take away time demands you experience in dealing with the many reps and their enquiries each and every week.</p>
							<p>KWM offers the most effective and efficient pathway to deliver cost effective results driven campaigns.</p>
		</div>
 </div>   
 
 				</div>
 			</div>
 		</div>
    
    
    <!--main divs -->
	<div id="main-area">
		


		
		<div id="images">
		
			</div>

    </div><!--end main divs -->
    

    
    
    
    <!--footer divs -->
	<div id="footer"><!--#include FILE="footer.inc" --></div> <!-- THis is the footer div -->    



</div><!--end opening divs -->
</body>
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:awolarczuk
ID: 37055912
thought it might be a idea to supple one of the images i am using
bottom.png
wonder.png
0
 

Author Comment

by:awolarczuk
ID: 37061679
All is there is a Java Script that can do this one the fly
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 37068905
Two things you might want to check -- first make sure the markup is OK
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.adbydesigns.com.au%2Fclients%2Fkwm%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

Next, run YSlow.  I could not find a reason why the page loaded so slowly, but YSlow has a few hints.

Next, make a Google search for liquid design css and you will find many good resources.  HTH, ~Ray
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37069396
PS: Mate seems - at least to me - a strange greeting to use on this site.

wikipedia:
Mate is a colloquialism used to refer to a friend and is commonly used in the United Kingdom, Australia, New Zealand and South Africa. It is or has been used interchangeably with many equivalent terms, such as buddy (popular in United States/Canada), pal (Scottish) or bro (New Zealand). It is sometimes abbreviated to M8.[1].

Not sure non-commonwealth experts are keen on it :) http://www.youtube.com/watch?v=zuQK6t2Esng
0
 
LVL 18

Expert Comment

by:mgfranz
ID: 37070734
It sounds to me like you want to scale images and backgrounds based on screen size, while this is possible using any number of ways, it is not very practical when it comes to page layout and design.  Image resolution is the biggest factor, if you set an image to a resolution of 800x600, then stretch it to 1600x1200, it will become almost unusable.  If you start out with an image that has a resolution of 1600x1200, and shrink it to 800x600, the size of the image will probably be over 2mb in size...

0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 2000 total points
ID: 37070793
Whether the code is valid or not the page is not going to re-dimension itself.  The images dictate the minimums, and if you re-size them without they will distort and alter thier qulity, unless multiple images of varying sizes are created with a graphics program and then swapped with scripting when a change in window size is detected during load or during a user re-sizing.

Additionally, most of the elements that are dimensioned in the page are sized in fixed terms using pixels.  These would either need to be changed to express the dimensions in percentages or be modified dynamically with scripting.

Finally, there is a substantial amount of absolute positioning.  That guarantees that the page will break down for some resolutions unless all the position relationships are re-calculated for each change in window size, and even then it will be difficult to avoid overlaps.

Basically this design will not work cross-resolution as it stands without a large amount of scripting to re-draw the page every time the resolution changes; and even with that ther will almost certainly have to be a resolution of the problem of image size using multiple additional images which will make the page even slower than it already is.

If you want to proceed with this design you need to decide what changes and compromises you are prepared to make or go back to the drawing board and re-design it.  There is no easy way to do what you want to do.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question