( blufindr )
Mrs. Sanderson
 Patron
|
      
I'm trying to get a site to work with floating iFrames, but the damn things don't float. Help?
-------
♥Kayla/Sarah/Allie
I've got a feeling
That I was put here
For you
|
|
|
Narfle the Garthok
Dairy Product Addict
Patron
|
Post your code, and I can fix it.
-------
YOU MUST
NARFLE THE GARTHOK!
Robdude is my LW Wife.
|
|
|
|
|
|
|
( blufindr )
Mrs. Sanderson
Patron
|
| Code: | | <html> <head> <title>BLARGH</title> <link rel="stylesheet" type="text/css" href="pages.css"> <link rel="stylesheet" type="text/css" href="home.css"> </head> <body> <marquee>Welcome to my site!</marquee> <p></p> <div id="nav">
<a href="1.html" target="1">1</a>
<p>
<a href="ohai.html" target="1">ohai</a>
</p>
</div> <p></p> <div id="1"> <iframe width="330" height="180" name="1" src="1.html" frameborder="0">I have an iFrame. You just can't see it. <a href="http://www.getfirefox.com/">Get a better browser.</a></iframe> </div> </body> </html> |
First stylesheet:
| Code: | body {
color: #FFFFFF;
font-family: helvetica, verdana, sans-serif;
background-color: #000000;
} |
Second stylesheet:
| Code: | #1 {
position:absolute;
left: 600px;
top: 220px;
width: 330px;
height: 180px;
z-index: 100
} div#nav {
position: absolute;
left: 200px;
top: 100px;
width: 100px;
height: 500px;
z-index: 1;
background-color: green;
} body {
color: white;
font-family: helvetica, verdana, sans-serif;
background-color: #000000;
background-image: url('splatter copy.png');
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
} |
-------
♥Kayla/Sarah/Allie
I've got a feeling
That I was put here
For you
|
|
|
scottyrob
Wealthy Hobo
Patron
|
Owch for using both iframes and the css - float... I hate both and both have compatiabilty problems. But them both together and youve got an inresting combination!
-------
Once a Red Bar, Always a Red Bar... Points are for lossers :)
|
|
|
Narfle the Garthok
Dairy Product Addict
Patron
|
I recommend using javascript to do this floating iframe because the CSS you is a bit messy. | Code: |
//Specify iframe to display. Change src and other attributes except "position" and "left/top":
var iframetag='<iframe id="masterdiv" src="anything.htm" width="350px" height="250px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no" style="position: absolute; left: -300px; top: -300px;"></iframe>' //specify x coordinates of iframe ("right" for right corner, or a pixel number (ie: "20px")):
var masterdivleft="10px" //specify y coordinates of iframe ("bottom" for bottom of page, or a pixel number (ie: "20px")):
var masterdivtop="bottom" var ie=(document.all || window.opera) && document.getElementById
var iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body if (ie)
document.write(iframetag) function positionit(){
masterdivobj=document.getElementById("masterdiv")
var window_width=ie && !window.opera? iebody.clientWidth : window.innerWidth-20
window_height=ie && !window.opera? iebody.clientHeight : window.innerHeight
var dsocleft=ie? iebody.scrollLeft : pageXOffset
var masterdivwidth=masterdivobj.width
masterdivheight=masterdivobj.height
masterdivobj.style.left=(masterdivleft=="right")? window_width-masterdivwidth-20 : masterdivleft
setInterval("repositionit()", 100)
} function repositionit(){
if (ie){
dsoctop=ie? iebody.scrollTop : pageYOffset
masterdivobj.style.top=(masterdivtop=="bottom")? window_height-masterdivheight-14+dsoctop : parseInt(masterdivtop)+dsoctop
}
} if (window.attachEvent)
window.attachEvent("onload", positionit)
|
But that between the <head> </head> tags of your page or make it a .js file and call it in your <head></head> (whatever way you want to do it). The downside of this is it is not FF compatible, but these days you rarely see anyone doing a floating iframe because of all the issues they can cause. If you don't want to go about it that way, take some of the code from this and improve your existing CSS. Post edited at 8:30 am on Aug. 27, 2008 by Narfle the Garthok
-------
YOU MUST
NARFLE THE GARTHOK!
Robdude is my LW Wife.
|
|
|
( blufindr )
Mrs. Sanderson
Patron
|
Quote: from Narfle the Garthok at 12:28 am on Aug. 28, 2008
I recommend using javascript to do this floating iframe because the CSS you is a bit messy. | Code: |
//Specify iframe to display. Change src and other attributes except "position" and "left/top":
var iframetag='<iframe id="masterdiv" src="anything.htm" width="350px" height="250px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no" style="position: absolute; left: -300px; top: -300px;"></iframe>' //specify x coordinates of iframe ("right" for right corner, or a pixel number (ie: "20px")):
var masterdivleft="10px" //specify y coordinates of iframe ("bottom" for bottom of page, or a pixel number (ie: "20px")):
var masterdivtop="bottom" var ie=(document.all || window.opera) && document.getElementById
var iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body if (ie)
document.write(iframetag) function positionit(){
masterdivobj=document.getElementById("masterdiv")
var window_width=ie && !window.opera? iebody.clientWidth : window.innerWidth-20
window_height=ie && !window.opera? iebody.clientHeight : window.innerHeight
var dsocleft=ie? iebody.scrollLeft : pageXOffset
var masterdivwidth=masterdivobj.width
masterdivheight=masterdivobj.height
masterdivobj.style.left=(masterdivleft=="right")? window_width-masterdivwidth-20 : masterdivleft
setInterval("repositionit()", 100)
} function repositionit(){
if (ie){
dsoctop=ie? iebody.scrollTop : pageYOffset
masterdivobj.style.top=(masterdivtop=="bottom")? window_height-masterdivheight-14+dsoctop : parseInt(masterdivtop)+dsoctop
}
} if (window.attachEvent)
window.attachEvent("onload", positionit)
|
But that between the <head> </head> tags of your page or make it a .js file and call it in your <head></head> (whatever way you want to do it). The downside of this is it is not FF compatible, but these days you rarely see anyone doing a floating iframe because of all the issues they can cause. If you don't want to go about it that way, take some of the code from this and improve your existing CSS. 
Thanks  But I got lazy and just decided to chuck everything in a table instead. I'll remember that code for when I need to do this again though 
-------
♥Kayla/Sarah/Allie
I've got a feeling
That I was put here
For you
|
|
|
Narfle the Garthok
Dairy Product Addict
Patron
|
Quote: from blufindr at 3:00 am on Aug. 31, 2008
Quote: from Narfle the Garthok at 12:28 am on Aug. 28, 2008
I recommend using javascript to do this floating iframe because the CSS you is a bit messy. | Code: |
//Specify iframe to display. Change src and other attributes except "position" and "left/top":
var iframetag='<iframe id="masterdiv" src="anything.htm" width="350px" height="250px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no" style="position: absolute; left: -300px; top: -300px;"></iframe>' //specify x coordinates of iframe ("right" for right corner, or a pixel number (ie: "20px")):
var masterdivleft="10px" //specify y coordinates of iframe ("bottom" for bottom of page, or a pixel number (ie: "20px")):
var masterdivtop="bottom" var ie=(document.all || window.opera) && document.getElementById
var iebody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body if (ie)
document.write(iframetag) function positionit(){
masterdivobj=document.getElementById("masterdiv")
var window_width=ie && !window.opera? iebody.clientWidth : window.innerWidth-20
window_height=ie && !window.opera? iebody.clientHeight : window.innerHeight
var dsocleft=ie? iebody.scrollLeft : pageXOffset
var masterdivwidth=masterdivobj.width
masterdivheight=masterdivobj.height
masterdivobj.style.left=(masterdivleft=="right")? window_width-masterdivwidth-20 : masterdivleft
setInterval("repositionit()", 100)
} function repositionit(){
if (ie){
dsoctop=ie? iebody.scrollTop : pageYOffset
masterdivobj.style.top=(masterdivtop=="bottom")? window_height-masterdivheight-14+dsoctop : parseInt(masterdivtop)+dsoctop
}
} if (window.attachEvent)
window.attachEvent("onload", positionit)
|
But that between the <head> </head> tags of your page or make it a .js file and call it in your <head></head> (whatever way you want to do it). The downside of this is it is not FF compatible, but these days you rarely see anyone doing a floating iframe because of all the issues they can cause. If you don't want to go about it that way, take some of the code from this and improve your existing CSS.
Thanks But I got lazy and just decided to chuck everything in a table instead. I'll remember that code for when I need to do this again though
Haha guess that works to, well no problem if you ever need anything related to Web Design/Development feel free to PM me.
-------
YOU MUST
NARFLE THE GARTHOK!
Robdude is my LW Wife.
|
|
|
| Looking for something else?
|
|
|
|
|
|
