Re: web page design with different resolution - Web Development Discussion Boards

It is that big.. (Huge... You wont believe how huge...)

And the only solution that seem works is slicing the image on the server side...

Thank you

You can slice the image using CSS also. Put a bunch of div elements on the page, each having the image as background but with different background-position settings.

Note: You have to enable printing of background images in the browser, as this is disabled by default.

Despite everything, the person most likely to be fooling you next is yourself.

"... enable printing of background images in the browser ..."

That says it all, I would rather not teaching the application users how to use the app, Cause they have there own job to learn an do ... and most of them not used to use a computer, they are Vogons * mostly

* http://en.wikipedia.org/wiki/Vogon[^]

Hello all.
I want to generate a tiny preview image from a website.

Do you have any suggestions ?
Thank you

Tried WebSnapr[^]? That's kinda their thing.

Citizen 20.1.01
'The question is,' said Humpty Dumpty, 'which is to be master - that's all.'

hi,
i have a problem with webpage design. problem is that i have design a page which work in 1024X768 very fine but if i use another resolution for this than my design is not work properly. i found on google but didn't find any satisfy answer and i try as they tell use table and use % in place of px. but i have still problem i have a page with images. i have left, right, header, bottom and middle part images but when i use with 1024 X 768 its look fine but like use higher resolution than its left which place on right side and bottom side while i use lower resolution than image is goes out side the page. how to over come this problem? Big Grin | :-D

I will do my best?

Can you post a code sample? This might help someone answer your question Smile | :)

Regards,
--Perspx

"The Blue Screen of Death, also known as The Blue Screen of Doom, the "Blue Screen of Fun", "Phatul Exception: The WRECKening" and "Windows Vista", is a multi award-winning game first developed in 1995 by Microsoft" - Uncyclopedia

Introduction to Object-Oriented JavaScript

thanks for reply and if you can help or anybody can help me to overcome this problem.
i send you dummy code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	left:-132px;
	top:0px;
	width:262px;
	height:600px;
	z-index:1;
	background-image: url(images/bgleft.jpg);
}
#apDiv2 {
	position:absolute;
	left:896px;
	top:0px;
	width:111px;
	height:600px;
	z-index:1;
	background-image: url(images/bgright.jpg);
	border: 0;
}
.if11 {
	position: absolute;
	left: 13px;
	top: 2px;
	width: 578px;
	height: 359px;
}
#apDiv3 {
	position:absolute;
	left:116px;
	top:0px;
	width:755px;
	height:600px;
	z-index:1;
	background-image: url(images/b.png);
}
#apDiv4 {
	position:absolute;
	left:0px;
	top:0px;
	width:781px;
	height:200px;
	z-index:10;
	background-image: url(images/top1.png);
	border: 0;
}
#apDiv5 {
	position:absolute;
	left:116px;
	top:560px;
	width:780px;
	height:39px;
	z-index:1;
	background-image: url(images/bottom.jpg);
}
#apDiv6 {
	position:absolute;
	left:0px;
	top:200px;
	width:180px;
	height:360px;
	z-index:1;
	background-image: url(images/left.jpg);
}
#apDiv7 {
	position:absolute;
	left:303px;
	top:200px;
	width:593px;
	height:360px;
	z-index:1;
	background-image: url(images/content.jpg);
}
#apDiv8 {
	position:absolute;
	left:698px;
	top:259px;
	width:168px;
	height:228px;
	z-index:11;
	background-image: url(images/content_velkommen.jpg);
}
.tbltop {
	position: absolute;
	left: 653px;
	top: 7px;
	z-index: 25;
	width: 116px;
}
.atop {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
	font-size: 10px;
	vertical-align: middle;
}
.atop1
{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: underline;
	font-size: 10px;
	vertical-align: middle;
}
#apDiv9 {
	position:absolute;
	left:137px;
	top:215px;
	width:163px;
	height:20px;
	z-index:26;
	font-family: Arial;
	font-size: 12px;
	vertical-align: middle;
	border: thin solid #999999;
}
#apDiv10 {
	position:absolute;
	left:137px;
	top:240px;
	width:163px;
	height:20px;
	z-index:26;
	font-family: Arial;
	font-size: 12px;
	vertical-align: middle;
	border: thin solid #999999;
}
#apDiv11 {
	position:absolute;
	left:137px;
	top:265px;
	width:163px;
	height:20px;
	z-index:26;
	font-family: Arial;
	font-size: 12px;
	vertical-align: middle;
	border: thin solid #999999;
}
#apDiv12 {
	position:absolute;
	left:137px;
	top:290px;
	width:163px;
	height:20px;
	z-index:26;
	font-family: Arial;
	font-size: 12px;
	vertical-align: middle;
	border: thin solid #999999;
}
#apDiv13 {
	position:absolute;
	left:137px;
	top:315px;
	width:163px;
	height:20px;
	z-index:26;
	font-family: Arial;
	font-size: 12px;
	vertical-align: middle;
	border: thin solid #999999;
}
#apDiv14 {
	position:absolute;
	left:312px;
	top:208px;
	width:573px;
	height:326px;
	z-index:27;
}
#div1
{
	position:absolute;
	left:106px;
	top:215px;
	width:168px;
	height:20px;
	z-index:26;
	font-family: Arial;
	font-size: 12px;
	
	vertical-align: middle;
	}
.divcolor
{
background-color: #11780b;
}
.divcolor1
{
	background-color:#333333;
}
-->
</style>
<script language="javascript">
	function m_over(x)
	{
		x.className="divcolor1";		
	}
	function m_out(x)
	{
	x.className="divcolor";
	}
	function m_overlink(y)
	{
	y.className="atop1";
	}
	function m_outlink(y)
	{
	y.className="atop";
	}
	function prin()
	{
		var v=document.getElementById("if1").src;
		window.open(v,"mywindow","menubar=1,resizable=1,width=590,height=365");  
		window.print(v);
		//alert(v);
	}
</script>
</head>

<body>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3">
<div id="apDiv4">
<table width="45%" border="0" class="tbltop">
  <tr>
    <td align="center"><a class="atop" onmouseover="javascript:m_overlink(this)" onmouseout="javascript:m_outlink(this)" onclick="prin()">xyz |</a></td>
    <td align="center"><a class="atop" onmouseover="javascript:m_overlink(this)" onmouseout="javascript:m_outlink(this)" onclick="javascript:document.getElementById('if1').src='sitemap.html'">sitemap |</a></td>
  </tr>
</table>
<div id="apDiv6"></div>
</div>
</div>

<div id="apDiv5"></div>
<div id="apDiv7">
	<iframe src="../new1/velkommen.html" id="if1" height="365" width="590" frameborder="0" class="if11"></iframe>
</div>
<div id="apDiv9" class="divcolor" onmouseover="javascript:m_over(this)" onmouseout="javascript:m_out(this)" onclick="javascript:document.getElementById('if1').src='Velkommen.html'">  <a class="atop">Velkommen</a></div>
<div id="apDiv10" class="divcolor" onmouseover="javascript:m_over(this)" onmouseout="javascript:m_out(this)" onclick="javascript:document.getElementById('if1').src='firmaprofil1.html'">  <a class="atop">Firmaprofil</a></div>
<div id="apDiv11" class="divcolor" onmouseover="javascript:m_over(this)" onmouseout="javascript:m_out(this)" onclick="javascript:document.getElementById('if1').src='vitilbyder.html'">  <a class="atop">Vi tilbyder</a></div>
<div id="apDiv12" class="divcolor" onmouseover="javascript:m_over(this)" onmouseout="javascript:m_out(this)" onclick="javascript:document.getElementById('if1').src='herliggervi.html'">  <a class="atop">Her ligger vi</a></div>
<div id="apDiv13" class="divcolor" onmouseover="javascript:m_over(this)" onmouseout="javascript:m_out(this)" onclick="javascript:document.getElementById('if1').src='kontaktos.html'">  <a class="atop">Contact Us</a></div>
<div style="background-color:#666666"></div>
</body>
</html>

i look this with different resolution. Big Grin | :-D

I will do my best?

Its pretty obvious if you size things as absolute then if the screen resolution is different to yours its not going to look right. The same type of thing can happen under different browsers. Try researching the different ways to position items using CSS.

Bob
Ashfield Consultants Ltd

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>

	<table width="101%" border="0" cellpadding="0" cellspacing="0" class="tbl1">
<tr>
        	<td rowspan="3" align="center" valign="top" width="15%">
            	<img src="images/bgleft.jpg" height="600" width="171" align="top" />            </td>
		  <td width="65%" align="center" valign="top"><img src="images/top.jpg" align="top" width="780" height="194" /></td>
      <td rowspan="3" align="center" valign="top" width="20%"><img src="images/bgright.jpg" align="top" width="197" height="600" /></td>
      </tr>
        <tr>
        	<td height="359" align="center">b</td>
      </tr>
        <tr>
        	<td align="center">
            	<img src="images/bottom.jpg" align="bottom" height="39" width="780" />            </td>
        </tr>
    </table>

</body>
</html>

css file is:-

@charset "utf-8";
.tbl1 {
position: fixed;
left: 0%;
top: 0%;
background-position: center center;
height: 100%;
width: 100%;
}

what is problem with this code
Thanks for reply. :-D 

<div class="ForumSig">I will do my best?</div>

I have no idea what is wrong with your code. I saw in your original css post that many of the positions were absolute, which is why they would display differently at different resolutions.

There are ways of overcoming your problems, hence my suggestion to research different ways of positioning items using CSS.

Bob
Ashfield Consultants Ltd

tanks for reply but i would like to know
that can i do a page show good in different resolution not cutting images no horizontal scroll. means a perfect webpage. give me a link or example to perform my task?
or whenever i create a page web page.
thanks in advance. Big Grin | :-D

I will do my best?

You need to use Google and find how to determine screen size and resize images on the fly. Its all done with javascript, there are plenty of examples.

Bob
Ashfield Consultants Ltd

i find and do many of the things but i didn't find any good answer which solve my answer and second is you suggest from javascript i have at least 6 images for one page than i will made how many images for all browser and according to monitor screen size. if there is any other solution than told me? thanks for reply. Big Grin | :-D

I will do my best?
Integrated Solutions, Bikaner (Raj.), India

No, I'm out of ideas. Try employing a GOOD web developer Smile | :)

Bob
Ashfield Consultants Ltd

Generating the Image Preview instantly(Without Sever Trip) when user Selects Image from HardDisk.

I am unable to get this worked. Please help me out.

modified on Friday, February 20, 2009 12:58 AM

If no server trip thn javascript is the only best option.
Load the image to a div using js

Please remember to rate helpful or unhelpful answers, it lets us and people reading the forums know if our answers are any good.

Hi everyone,

I have to write an xml file which should look like the below XML file

<?xml version="1.0" encoding="ISO-8859-1"?>
<DEPT>
<CATALOG ID="10">
<CD>
<TITLE>Empire Burlesque 10</TITLE>
<ARTIST>Bob Dylan 10</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart 10</TITLE>
<ARTIST>Bonnie Tyler 10</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits 10</TITLE>
<ARTIST>Dolly Parton 10</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
</CATALOG>
<CATALOG ID="20">
<CD>
<TITLE>Still got the blues 20</TITLE>
<ARTIST>Gary Moore 20</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
</CATALOG>
</DEPT>

And this file should get stored in the client location.
can anyone please help it out?

Thanks and Regards,
Srilatha

Well, Javascript can not write anything on your disk...
What you can do is to use some activex control which can do this for you.

Please remember to rate helpful or unhelpful answers, it lets us and people reading the forums know if our answers are any good.

ActiveX controls will only work with Internet Explorer, however. I bet you could do it with java.

I think saving anything to the clients side in the form of an .xml document would be tricky. You might consider using one or multiple cookies.

Rather than writing all that client-side code, you could let your server return an XML content-type. The browser will prompt the user as to where to save the content.

Take a look at adobe's link below.
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14201&sliceId=1[^]

This adobe link have three flash files.

MY Goal
My sister has no idea to deal with some software. So I wanna make a flash to teach my sister using the software step by step just like the adobe link does. Transfer the flash file from network to her. So how could I make such a flash file?

Please do give me a guide or some useful link. Thanks in advance.

Try reading the Flash user guides that you get when you BUY a copy. Its far too much to expect a full training course on a forum.

Bob
Ashfield Consultants Ltd

A website such as http://www.tutorialized.com has some good Flash tutorials.

Regards,
--Perspx

"The Blue Screen of Death, also known as The Blue Screen of Doom, the "Blue Screen of Fun", "Phatul Exception: The WRECKening" and "Windows Vista", is a multi award-winning game first developed in 1995 by Microsoft" - Uncyclopedia

Introduction to Object-Oriented JavaScript

It's very kind to you for giving me a guide. I appreciate for your help.