general iframes question

ice77ice · #1 (**permalink**) 03-21-2006, 08:01 PM

I'm a semi-newbie to web design. Been doing it for awhile but have been leaning on the Dreamweaver crutch the whole time.

I need some advice about a site I'm designing for my band. We have a regular site, but this one will be specifically for our new album, with just album-related info on it. Check out this rough template:

I think I want some sort of frames set-up where the outer border (including header and bottom text links) stays static, and the content changes in the middle when the text links are clicked - a frames sort of thing. However, I want the page to be small (650x400) and to have a border around the whole thing (as is in the above picture), but I could not seem to get this effect with frames in Dreamweaver.

I've come across "iframes" in trying to figure this out, though I'm not quite sure what they are or how to use them. Does anyone know if iframes would be a good solution for my desired outcome? I'm sure I can dig up some tutorials on iframes, so my main question is whether iframes are an appropriate tool for what I want to do.

Any help would certainly be most appreciated!

curtiss · #2 (**permalink**) 03-22-2006, 08:50 AM

iFrames would absolutely be an appropriate solution for what you want to do. They are one of only two solutions I can think of (the other being divs that you hide and show with javascript).

Basically, iFrames are very simple. You place the iFrame tag wherever you want the iFrame to show up in the page.

In addition, in order to get the specific size and the border you're looking for around the rest of the page, I would recommend placing all of your content within a div, and defining the style of the div with CSS.

Code:

<html>
<head>
<title>This is your title</title>
<style language="css" type="text/css">
<!--
#container {
width: 650px;
max-width: 651px;
min-wdith: 649px;
height: 400px;
max-height:401px;
min-height: 399px;
border: 1px solid #000;
}
-->
</style>
</head>
<body>
<div id="container">
<span style="line-height: 50px;">This is your text that goes above the iFrame.</span>
<iFrame src="http://www.yahoo.com/" name="myframe" frameborder="0" width="645" height="300" scrolling="no"></iframe>
<span style="line-height: 50px;">This is your text that goes below the iFrame.</span>
</div>
</body>
</html>