PDA

View Full Version : HTML Frames

Dafydd
09-28-2007, 10:32 PM
I'm wondering something about frames. Is it possible to have a frame entirely encompass another frame, like so:

http://www.ngst.nu/frameinframe.png

Or must it be done like this: dividing things into frame 1, 2, and 6, and then dividing frame 2 into frame 3, 4 and 5?

http://www.ngst.nu/frames.png

I'm wondering because I want an evenly gradient image as a backgroud in the purple field, and I want the image to resize itself to cover the whole window's background...

EDIT: Hm, I guess floating frames will do the job. Or won't they?

EDIT 2: Ok, this is the code I made, but the middle frame won't show up. Why?

<html>
<head>
<title>Stay Ali</title>
<meta name="keywords" content="Stay Ali, stay, ali"/>
<meta name="description" content="Stay Ali"/>
</head>
<body>
<div style="width:100%; position:absolute; left:0px; top:0px;">
<img src="bgr.jpg" style="width:100%;">
</div>
<iframe src="main.html" width="750" height="80%" align="middle">
</iframe>
</body>
</html>
phill
09-28-2007, 10:56 PM
As much as I hate frames...or the suggestion of using frames...iframe (inline frame) is a simple answer to your question. The correct way to do a background like you want is to use css to define the background and make it static.

http://www.w3schools.com/css/css_background.asp
Dafydd
09-28-2007, 11:26 PM
But how do I make the image resize itself, then? Do I need to use layers?
phill
09-29-2007, 04:29 AM
Sadly, there is no good way to do a scalable gradient on a web page. Using JavaScript or server side scripts tend to puke out garbage code for this sort of thing (unless someone has a good example to the contrary)

My suggest for your web page is to first create a gradient in PhotoShop or Gimp that is maybe two or three pixels wide and 600px tall. Then copy the following code into your page in the header (or link to a .css file) and replace image.jpg with the gradient file name and yellow with the color at the bottom of the gradient.

<style type="text/css">
body
{
background-image: url('image.jpg');
background-repeat: repeat-x;
background-color: yellow;
}
</style>

That will give you the background gradient you want. From there I would use css and div tags to position a block similar to how your iframe is with the dimensions you want.

edit: Looks like the reason your iframe is not showing up is because it is hidden behind the gradient image...