HTML - Size To Fit Any Screen Resolution?

Hello,

I am a html/php newbie, I will like to have a border (one image) with a iframe in the middle of it.

I have tried (sorry if it is a bit messy!):

Code:

	<div align="center">
		<!--Begin Template-->
		<table id="Table_01" width="640" height="822" border="0" cellpadding="0" cellspacing="0">
			<tr>
			<!--Header-->
				<img src="images/header_01.png" width="640" height="151" alt="header 1">
			</tr>
			<tr>
			<!--Nav Bar-->
				<img src="images/index_02.png" width="640" height="21" alt="nav bar">
			</tr>
			<tr>
                        <!--Begin border/iframe-->
				<img src="images/index_01.png" width="640" height="384" alt="border 1">
				<div id="top" style="center: 1023x; top: 167px; position: relative; left: 399px; height: 730px;">
					<iframe src="news.html" width="1023" height="478" name="frame" scrolling="auto" frameborder="no"></iframe>
				</div>
			</tr>
		</table>
	</div>

But this only works at 1280x1024 screen resolution. Is there any way to make it compatible with any resolution?

Thanks.

Hi all,

Im just wondering if it is possible in any way to undertake this functionality....

I have different homepages which are essentially the same content but each is designed for a different screen resolution so that when in full screen mode the data will occupy the complete screen.

Is there any way to load a certain homepage based on a user's screen resolution, eg if their resolution is 800x600 then homepage A is loaded, if 1024x768 then homepage B is loaded etc.

Since a user's screen resolution info is readily available is it possible to undertake such a feature?

Thanks in advance!

McB

Well I got a website I want to code and I'm not too good in coding though I'm designing/coding websites for 2-3 years(ocassional hobby).I always tried and retried and asked and searched but I always got side effects.So I want to make this one by-the-book 100% XHTML Strict/transitional W3C Valid
So I was thinking where should I start with and I thought I should start with the background.I can't seem to manage even this one.
As in every single thing I ever done I can't get it to look the same in every evil screen resolution

....Enough talking.As you see in the picture it has 2 parts. the first is a gradient from blue to white(bottom to top) and the other part is a black pattern thing.
How can I implement it?I can't simply adjust it's size to fit my resolution and browser.It needs to look the same for everyone.

Also while the top part can be made with a vertical 1px slice the bottom one has a pattern so it can't.
i was thinking I could divide the website in 2 DIVS:main and footer and set a height percentage % like 80&20 from CSS.Use as background for main a vertical slice and a big image for the footer.But still that wouldn't fix too much ...I don't know.
What would you do if it was your website?
_____________________________

How to make the same layout for all pages in different screen resolutin?
For example, user's screen may set up relolution in pixels as

800x600,
1024x768,
1280x800

Hi, could you check my site:

http://www.monkeygambling.com

and tell me if it works on your screen resolution. I've had some problems with diff resolutions. On 1024 x 768 it sometimes does a slight repeat of the background image because the text i have on there pushes the table down a bit.

thanks

I need to figure out my navigation bar & how exactly I'm going to do it.

I'd prefer to have it one long row, but I'm running at 1280x1024 and it looks great, but I dont think most people run their screens at that.

So what should I do? Keep it long, or make 2 even rows?

Will it adjust to be smaller on the smaller resolutions? Is there a way to make it liquid?

Hi

I have some websites that i would like to centralise on the screen irrelevant of the users screen resolution... some screens the site looks centred etc and its great but then the higher the screen resolution the viewer uses the more stuck up at the top it appears... is there a simple solution so the website centralises on any screen?

Thanks in advance for any help... i really need to get this working

Steve

Ive posted several times here before about this part of my website, guess what.. another challenge yet again

In has got this pop outscript that pops out at the left side of the screen when hovered on.
Click here, see the button on the bottom left to see it working.

Now, I just tested the site on a 1024x768 resolution and when hovered on, it shows but fails
to create a solution for the small screen. ( a horizontal scrolling bar perhaps? )
It just pops up and only half gets shown.

I have tried adding overflow:visible, overflow-x:visible, etc. etc.

Frankly I dont know how to solve it, could appreciate some help. Thanks.

Guys, hopefully someone can give me a hand here. bear with me, Im a newbie to html yet Im an intermediate/advanced flash programmer. I learned flash but never learned html the right way and am struggling to make html entrance pages for my flash sites.. I know its usually the other way around. i learned flash first.

ok, I have a website I made which is opened in a fixed window. the html index page says "enter here" and that button opens the fixed size window. that works fine.

The problem is Im trying to learn the html and whenever i have an image on this index page, ( some graphics and the "enter here" button) it may look centered @ 1024 x768 but at a higher resolution ( 1280 x 1024) it will appear on the top left of the screen. I have been tinkering with dreamweaver but im really confused. I keep seeing all of these sites where everything looks aligned regarless of the screen setting.

Im not sure if I should use tables , divs or whatever. i have my website logo as a jpg and some other graphics, and im not sure how to put it into the page so it always looks appropriate no matter what screen setting you are on.
There is a company that makes nice websites and their entrance pages are always good. I am gonna attach the url of one of these. I notice that they always use divs, a LOT. Is thsi the right approach? and can someone look at the example and tell me how they are doing it? i dont put the url in the post becuase I do want google or other engines indexing the url to this post (for privacy)

Thanks a lot

url.zip

Hello,

I'd like to know if there's a way to 'force' a website to be viewed in a certain resolution. My site was designed for 1024x768 at home.

Externally the office computers I tested it on are set to 1280x1024, and the site looks far too small.

Is there html or script that would auto size it to 1024x768 without the user changing monitor resolution?

Here's the code:


Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>www.testing.com</title>

<style type="text/css">
html,body {
    height:100%;
    margin:0;
    background-color:#000;
 }
#vertical {
    float:left;
    width:100%;
    height:50%;
    margin-top:-329px;
 }
#container {
    clear:both;
    width:933px;
    height:658px;
    margin:auto;
 }
#container img {
    display:block;
    width:933px;
    height:658px;
    border:0;
 }
</style>

</head>
<body>

<div id="vertical"></div>

<div id="container">

<img src="comet3.jpg" width="933" usemap="#map" alt="comet3">

<map name="map" id="map">
 <area shape="circle" coords="885,123,9" href="comet2.html" alt="">
 <area shape="circle" coords="916,124,9" href="comet4.html" alt="">
 <area shape="rect" coords="785,71,904,103" href="contact.html" alt="">
 <area shape="rect" coords="665,70,756,109" href="about.html" alt="">
 <area shape="rect" coords="371,73,462,112" href="index.html" alt="">
 <area shape="rect" coords="499,70,632,111" href="portfolio.html" alt="">
 <area shape="poly" coords="891,118" href="#" alt="">
</map>

</div>

</body>
</html>

Thanks to anyone who can help with this!

Cheers

J

I'm an intermediate PS user/css coder/etc but I haven't had to design many sites from the ground up.

With that said, I now have to design a web site that will work for the 800x600 crowd. What canvas size do I use in Photoshop to work with?

Also, what would be the canvas size to use designing for 1024x768 screen resolutions?

Thanks.

Hello Folks,

Okay, I am trying to finally master this. I am working with a CSS Joomla layout that has some flash as main content (for images). I would like for this layout to resize based on the visitors screen size. I've played around with the % in width and so-forth. However my embedded Flash starts to scoot around the page as I change the size of the window. Can someone guide me on exactly how to do this so that "all" the info scales and stays in place. I am assuming that there will be an issue for the site getting really big if the person uses a massive screen (say 27inch plus) In that case how do you limit the size?

Any help will be most appreciated.

Ok, my website is best viewed at 1024x768, is there any way that i can somehow encode a popup that gives the message and an option for it to automaticaly change the screen resoloution to 1024x768?

Many Thanks, Narc

Hello, im trying to set my screen size with a div tag to 1024x768

any help would be very helpful and i'd be very thankful

Code:

Solved Now