HTML - Resizing A Website Background To The Viewers Screen Width And Height.

Hello!

I am trying to figure out how sites makes banners that are always 100% of the screen width no matter what resolution.

I tried <table width=100% border=0> but there is still some white space around the edges so its not really 100%.

Is it a style sheet command that does this?

Thanks!

Does anyone know the average width of a screen in html code? I'm using a widescreen labtop to create a website, and I'd like to design it for the normal size screen.

I have some information laid out with a fixed width table in html. It looks fine on a regular monitor. When I display it on a wider monitor, or with a different resolution, I have extra unused space on the right. This, of course, makes sense.

The question is: what is the recommended method for allowing the text and images to fill out the rest of the screen width - especially where it will work with different monitors, resolutions and browsers?

Thanks.

I have different stylesheets depending on screen resolution, so that everything is in place when the browser is maximized. This also includes a javascript code to swap out images based on screen resolution to avoid browser based image resizing.

My menu uses mouseovers, but I can't figure out how to combine the mouseover command as well as the javascvript image swap.

As an example, I'm looking to have a 76px image that will change to another 76px image via mouseover. Then if you have a larger screen, I'm looking to make that a 180px image that changes to another 180px image via mouseover.

Here's my image swap code:

Code:

function loadPic()
{
if (screen.width <= 800)
{
document.getElementById('news').src="news800.png";
document.getElementById('about').src="about800.png";
document.getElementById('blog').src="blog800.png";
document.getElementById('film').src="film800.png";
document.getElementById('photos').src="photos800.png";
document.getElementById('access').src="access800.png";
document.getElementById('set').src="set800.png";
document.getElementById('the').src="the800.png";
document.getElementById('whole').src="whole800.png";
document.getElementById('world').src="world800.png";
document.getElementById('on').src="on800.png";
document.getElementById('fire').src="fire800.png";
}

and here's my mouseover code:
Code:

<a onmouseover="document.images['i1'].src='set1280.png'" onmouseout="document.images['i1'].id='news'" href="http://bweissnews.blogspot.com/" target="inside_frame"><img id="news" name="i1" border=0></a></div>

Any help would be much appreciated! Thanks in advance.

I have a large background image that I am trying to resize depending on resolution.

here's the site: http://coloradoorganiclandscaping.com/

Any ideas?

This is the page I am referring to http://www.thenorthface.com/catalog/index.html

This is as much as i can figure out...


<script type="text/javascript">
var resizeBg = function(){
var h = self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var w = self.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var elem = document.getElementById('backgroundImage');
if(w > h){
elem.width = w;
elem.height = w;
}else{
elem.height = h;
elem.width = h;
}
}
</script>

<div id="background">
<img id="backgroundImage" src="http://cdn.thenorthface.com/wcsstore/TNF_STORE_US_ECOM/Attachment/mar1_TakeAllObstaclesInStride_1380x1380_bg.jpg" width="1" height="1" onload="resizeBg();" alt="Background Image"
title="Photography Credits:" />



This takes care of the resizing when you first load up the page in any size browser to begin with but it does not re size if you try resizing the browser after you have loaded the page up

thanks

Hello there,

I am pretty new to web programming. I am currently having problem with Iframe's height.

here's what happen. I have a page with 2 Div. First div is the header with menu. The 2nd Div Contains 2 Iframes. The first Iframe is my title bar location, and the 2nd iframe is my content location. The menu and title bar location is fine. When I click on something from the menu bar, it changes both the title bar and the content page. I did it like this because I don't want my title bar to scroll up when my content page is longer.

So here's my problem: for the 2nd Iframe which contain my content, I couldn't set the height properly so it will fill and extend to the bottom of the screen when resolution is high. Also i don't want a scroll bar to the whole website, but only to the 2nd iframe. here's an example. I made a very simple version of what is exactly my problem. So is easier to read on the forum.

index.html's code:

<!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>Untitled Document</title>
</head>


<body scroll="no">

<div id="apDiv1" scrolling="no">
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
<p>This is a test.</p>
</div>

<div id="apDiv2" scrolling="no">
<iframe src="123.html" style="position:absolute; width:780px; height:35px; top:240px;" scrolling="no"> </iframe>
<iframe src="abc.html" style="position:absolute; width:780px; height:100%; top:275px;" scrolling="yes"> </iframe>
</div>

</body>
</html>


123.html's code:

<!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>Untitled Document</title>
</head>

<body>
1234567
</body>
</html>


abc.html's code:

<!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>Untitled Document</title>
</head>

<body>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
<p>TEST</p>
</body>
</html>


Notice, I have a long TEST there. because i want only the iframe to scroll, but not the whole website.

Anyone know a solution to this?

I think I am missing something or am an idiot. I have a website that is too wide for some screens (I know its wide... I'm doing it for a specific reason, I promise). When its opened on screens that are not as wide of a resolution, it opens all the way to the left and you have to scroll over to center it.

I am hoping someone can tell me the code to center it. Any ideas?

http://www.faithfamilychurch.com/youth/index.html

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

Hello all,
I'm sorry if this is a little naive, I'm still new to all of this. I'm hoping this is in the right area, it seems to fit best here.

So I made my first website, and it's no where near done content wise, but I asked some friends (online friends who know about web programming) to take a look at it. They all responded that it was annoying because they had to side scroll. This I have figured is because I am working in a lower resolution then them. I'm working on Ubuntu, and I can't find a way to change the resolution.

What I'm wondering is, how do I know what it looks like to my viewers? Is there a way to edit my code so that it views differently in different resolutions and fits everyone's page? and is there a "normal" width that everyone keeps their pages at, so that it is viewable easily by all?

website is here.

Thanks in advance!

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

Hi.

Is it wrong to exceed the width or height of a <div>, or any other tag?

For instance, I've got a <div>, which I set to 50px. Now this is more then I need, because it's only 1 line of text, but I'm using a background image with 50px in height in the <p> tag inside the <div> tag. However, I don't want the <div> tag to be 50px, only 25px.

It's complicated to explain why I need it like this, and I probably haven't done it correctly, but my question is: is it okay for the contents inside a <div> tag to be wider/higher then the actual <div> tag?

Thank you ;D

Hello,

If I measure height and width in % instead of pixels then it does not work in firefox. It only ends up displaying only small region of iframe instead of specified size.

But this works perfectly fine on IE.

Below is the code.

<iframe id="theFrame" name="iframes" src="http://www.abc.org" align="top" height="94%" width="96%"></iframe>

Thanks,
Ruchir

It seems to me all the browsers have no problems to display an image if (width & height) parameters are missing.
What is the purpose of using (width & height)?
Does it make website working faster?

Thanks

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?
_____________________________