How do I get my logo to overlap my iframe instead of vice versa? [Archive]

View Full Version : How do I get my logo to overlap my iframe instead of vice versa?

XxsamanthaxX

03-04-2003, 03:38 PM

I've searched the board already and couldn't find anything. So I figured I should ask for some help.
I'm using divs to position everything on my site, but no matter how I place my html or position my iframe, the iframe always covers my logo or graphic. I've tried to use transparent iframes but It never comes out transparent, which means I'm probably doing something wrong....

Thanks
-Samantha

Oh yeah, this isn't really related to my question, but........... Are there any other boarders besides dotted and solid?

MaGiCSuN

03-04-2003, 05:17 PM

Well yeah div overlap everything. If you got a table and an iframe for example then the iframe that is positioned with div's always goes ON TOP of the table. To help you more i need your source or anything that i can check. Do you have it online somewhere? maybe you could post it here so that we can take a look. Thanks :)

about the border thing, these are the options:

dotted, dashed, solid, double, groove, ridge, inset, outset

Love,
Mirna

XxsamanthaxX

03-04-2003, 05:35 PM

Here's the code I've been using.....


<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="400" HEIGHT="370">
<TR>
<TD ROWSPAN="2" COLSPAN="1" WIDTH="300" HEIGHT="80">
<div style="position: absolute; top:0; left:190;"><img src="http://www.gutterxblonde.net/at.gif"></div></TD>
</TR>
<TD ROWSPAN="4" COLSPAN="1" WIDTH="200" HEIGHT="260">
<div style="position: absolute; top:100; left:240;" style="border style:1px dotted"><iframe FRAMEBORDER="0" BORDER=0 width=300
height=600 src="http://www.gutterxblonde.net/updates.html" name=main style=scrolling="auto" allow transparency="true"></iframe></div></TD>
</TABLE>


Another question.... How do I get my content to go into a "box" like the one on this (http://www.so-loud.org) site. So instead of having to scroll down an iframe inside of the main page, you scroll down the entire page.

I hope you can understand what I mean, it's the only way I can explain it......

Thanks
-Samantha

MaGiCSuN

03-04-2003, 05:53 PM

You have added a table, AND divs. If you use divs you don't have to use tables, because the div allready places it for you on the right spot, not the table.
It is the one or the other but you can't use both for one thing. You can use a table for a poll, and div's for your blog, but using divs and tables for your blog only is a bit double. (just for example)

I just tried out the following code and it just is fine, it doesn't cover your image at all.

<div style="position: absolute; top:0; left:190;"><img src="http://www.gutterxblonde.net/at.gif"></div>
<div style="position: absolute; top:100; left:240;" style="border style:1px dotted"><iframe FRAMEBORDER="0" BORDER=0 width=300
height=600 src="http://www.gutterxblonde.net/updates.html" name=main style=scrolling="auto"></iframe></div>

I deleted the 'transparency" part because that won't work at all. Some people think it does, but if you want to have a background in your iframe you have to 'slice' the graphic and put the sliced part that you took out for the iframe as a background on all pages that open inside the iframe.

For your second question about that page you gave me:

You can make a layout like that to make a background with those lines on it, then position your text with div and yes it will position it ON TOP of the bg, so you can set width etc and it will look like you have a table. So like this:

<body background="urlbg.gif">
<div style="position: absolute; top: #px; left: #px; width: #px">
text here</div>

You don't need to set "height" because the blog goes endlessly to the end of the page, so it doesn't need a height tag.

Love,
Mirna

XxsamanthaxX

03-04-2003, 06:10 PM

Thanks a lot for the help :)

Now if I wanted to add things to the sides like extras and links like this site here (http://www.flutterby.org/enter.html),
Would I have to use tables? I really want to avoid using iframes for it.

Thanks
-Samantha

MaGiCSuN

03-04-2003, 06:16 PM

You can also do that with divs too

just add a div around the links and position them. for example if you want to have links all the way to the left but 100px (pixels) from top and 250px width you add this code around the links:

<div style="position: absolute; left: 0px; top: 100px; width: 250px;">
Links here
</div>

now all the links that are in that div are positioned to the left and 100 px from top, and the area that they are in is 250px width.
You do the same with the links on the right. although you can also do this:

<div align="right">links here </div>
now they will be aligned to the WAY right, but if someone with a higher resolution will come to your site the links will get more to the right too, so not right underneat the pic fro example. That's why i better prefer div's, because theyw ill stay on the same spot in every resolution.

love,
Mirna