iframe background

[GuyBrush Treepwood]

I'm making a website for a friend's band, this is what I've got already:

http://users.skynet.be/am036990/new/

As you can see, I want the background of the iframe to fit in with the
background of the site, just a little bit darker.
The way I do this now is by making the source of the iframe having the
right background and 'setting' the iframe to the right place. This is of
course a cumbersome solution. I don't know very much about html actually,
this site is a way to become more familiar with it. What would be a better
solution, keeping in mind that I would like the site to be XHTML valid?

 

[Oli Filth]

I'm making a website for a friend's band, this is what I've got already:

http://users.skynet.be/am036990/new/

Why do you need to use frames at all?

 

[GuyBrush Treepwood]

Why do you need to use frames at all?

Well, advise me something better.

 

[Oli Filth]

Well, advise me something better.

Umm, ok. Don't use frames unless you have a *very* specific reason for
them. See http://www.html-faq.com/htmlframes/?framesareevil for some
reasons why frames are generally a bad idea from a navigable website
perspective.

There's nothing (as far as I can see) on your site that can't be done
with nested (scrolling) DIVs and some CSS styling.

 

[Oli Filth]

There's nothing (as far as I can see) on your site that can't be done
with nested (scrolling) DIVs and some CSS styling.

Actually, that wasn't very helpful was it! As far as I can see, you're
using frames to implement a scrollable area embedded somewhere in the
middle of the overall page. You can achieve this effect using the
"overflow:auto" CSS property, which when applied to a block element
(such as a <DIV>) will make it scrollable if necessary.

See http://olifilth.co.uk/36.htm for an example of how this works.


P.S. If you're attempting to adhere to W3C standards (which it would
appear from your use of a DOCTYPE) and you're writing a brand new site,
it's generally recommended to go straight to Strict (X)HTML rather than
the Transitional equivalent.

 

[GuyBrush Treepwood]

Actually, that wasn't very helpful was it! As far as I can see, you're
using frames to implement a scrollable area embedded somewhere in the
middle of the overall page. You can achieve this effect using the
"overflow:auto" CSS property, which when applied to a block element
(such as a <DIV>) will make it scrollable if necessary.

See http://olifilth.co.uk/36.htm for an example of how this works.


P.S. If you're attempting to adhere to W3C standards (which it would
appear from your use of a DOCTYPE) and you're writing a brand new site,
it's generally recommended to go straight to Strict (X)HTML rather than
the Transitional equivalent.

OK, I'll take a look at your links. Thanks for the help.

 

[GuyBrush Treepwood]

Actually, that wasn't very helpful was it! As far as I can see, you're
using frames to implement a scrollable area embedded somewhere in the
middle of the overall page. You can achieve this effect using the
"overflow:auto" CSS property, which when applied to a block element
(such as a <DIV>) will make it scrollable if necessary.

See http://olifilth.co.uk/36.htm for an example of how this works.


P.S. If you're attempting to adhere to W3C standards (which it would
appear from your use of a DOCTYPE) and you're writing a brand new site,
it's generally recommended to go straight to Strict (X)HTML rather than
the Transitional equivalent.

But I think the original question still holds? What to do if I want to
have a "transparent" background in this scrollable area?

 

[rf]

But I think the original question still holds? What to do if I want to
have a "transparent" background in this scrollable area?

Let me clarify the above.

You use an iframe.

You want the background of the iframe to be transparent, so the background
of the underlying page shows through?

Well this is not going to happen. An iframe is a seperate browser window (or
can, for all intents and purposes considered to be so) with all of the other
problems that frames in general exhibit (like *not* being able to bookmark
the "page").

Use something other than a iframe, say a scrolling div. This you *can*
cause to have a transparent background, since it lives in the same window as
the rest of the content. In fact the default background is transparent.

BTW if I were that band I would tell you to redesign the layout. Fixed size
and soooo small :-(

 

[GuyBrush Treepwood]

Let me clarify the above.

You use an iframe.

You want the background of the iframe to be transparent, so the background
of the underlying page shows through?

Well this is not going to happen. An iframe is a seperate browser window (or
can, for all intents and purposes considered to be so) with all of the other
problems that frames in general exhibit (like *not* being able to bookmark
the "page").

Well, I meant an illusion of transparancy.

Use something other than a iframe, say a scrolling div. This you *can*
cause to have a transparent background, since it lives in the same
window as the rest of the content. In fact the default background is
transparent.

BTW if I were that band I would tell you to redesign the layout. Fixed
size and soooo small :-(

What do you mean by fixed size? The font or the menu on the left? I really
need these kind of hints and help, I'm trying to learn by making this
site, so thanks in advance.

 

[rf]

Well, I meant an illusion of transparancy.

OK. But it will break as soon as your viewer changes her font size.

http://users.bigpond.net.au/rf/temp/strings.jpg

Notice how the strings no longer line up.

What do you mean by fixed size?

The whole size of the site is fixed inside what looks to be a 600x400 box.
It does not utilize my entire viewport. See above.

See also http://allmyfaqs.com/faq.pl?AnySizeDesign

The font

Your font size seems fine. Haven't checked but it looks like you have
specified 100% or nothing at all. In any case it is changable, even in IE
which is good.

or the menu on the left?

There is no "font size" for that menu as it is pictures of text. Large
enough though. Readable and it fits in with the theme.

I really
need these kind of hints and help, I'm trying to learn by making this
site, so thanks in advance.

OK then.

Lose the frames and the iframe, they are a bloody nuisance Make each "page"
a real single intividual HTML page.

Google for "frames are evil".

You will also avoid having an additional scroll bar on the viewport (one for
the whole "page' and another for the iframe.

Additionally, check the "page" in IE6. The frames have white borders, making
the page look real crook.


That said:

I Really Like that background image.

 

[Oli Filth]

But I think the original question still holds? What to do if I want to
have a "transparent" background in this scrollable area?

See http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html for an
effective explanantion for how to simulate transparency with regard to
background-images.

 

[GuyBrush Treepwood]

OK. But it will break as soon as your viewer changes her font size.

http://users.bigpond.net.au/rf/temp/strings.jpg

Notice how the strings no longer line up.


The whole size of the site is fixed inside what looks to be a 600x400 box.
It does not utilize my entire viewport. See above.

See also http://allmyfaqs.com/faq.pl?AnySizeDesign


Your font size seems fine. Haven't checked but it looks like you have
specified 100% or nothing at all. In any case it is changable, even in IE
which is good.


There is no "font size" for that menu as it is pictures of text. Large
enough though. Readable and it fits in with the theme.


OK then.

Lose the frames and the iframe, they are a bloody nuisance Make each "page"
a real single intividual HTML page.

Google for "frames are evil".

You will also avoid having an additional scroll bar on the viewport (one for
the whole "page' and another for the iframe.

Additionally, check the "page" in IE6. The frames have white borders, making
the page look real crook.


That said:

I Really Like that background image.

Nice to hear.

I've read about CSS, <div> tags and indeed, it seems
better then frames, but I don't really see how to fit my lay-out in a
solution without tables and frames.
I guess this is just a habit of using tables over better solutions, but
can you give some links or hints?

 

[rf]

can you give some links or hints?

The page does not appear to be there anymore.

 

[GuyBrush Treepwood]

On Thu, 17 Feb 2005 10:14:07 +0000, rf wrote:

Sorry, I took it offline. It's back online now:
http://users.skynet.be/am036990/new