Help - Search - Members - Calendar
Full Version: iFrames
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
funride
Can anyone help me code, use iFrames?
Mike
Read this first, then tell me if you come across any problems.
funride
Yes, that didnt help at all...

This is my iframe code.
CODE
<DIV style="LEFT: 75px; WIDTH: 400px; POSITION: absolute; TOP:410px; HEIGHT: 2700px">

<IFRAME style="WIDTH: 400px; HEIGHT: 2700px; FI: chroma (color=#339966)" name=nieuws marginWidth=0
marginHeight=0 src="http://avrilpedia.funride.org" frameBorder=0 width=450 scrolling=no height=300 allowTransparency></IFRAME></DIV>


I took that code from my friends site, hes also helping me but I kind of need it now.

It will only show the url he put it the:
CODE
src="http://avrilpedia.funride.org"


Not mine, btw that url is the one I want.
Mike
Have you tried using this? Replace /default.asp with the URL of the page you want to display and see if it works.
funride
Okay got that down, but how do I code my own page for it.
Like I dont want it to display the website in the frame I want it to display the content of the website in the frame, how do I code those.
Example:
hfsh-avril.fanstar.org
Mike
What you need to do is, make a page with only the content in it. Then link that page only.
funride
I did that, but it keeps showing his page, and should I just code that page a like a normal layout?
Mike
Sorry, what?
funride
I replaced the url to what I want, but it keeps showing the original page in the iframe code.
And should I code the content pages like a normal layout?
Mike
Maybe it's because you have a whole inside that certain page? Only put content inside the page that you're linking. Leave out the layout.
funride
That is not the problem, the problem is that it wont show my pages.
I've tried using his content page and and doubled a piece of content, but it still wont show it.
do you get what I mean?
_unsure.gif
Mike
What kind of page is it?
funride
A content page, go to his site.
hfsh-avril.fanstar.org
And you'll see the type of page in his frame.
Mike
Oh I know it's a content page. I was asking what kind of page it was (html, php, asp, etc). Check out this page. You see how that page only has the updates inside it? You need to do that on one page. Then you need to link that page in an iframe and position that iframe around your DIV layout. That's just what that designer did.
funride
I dont know why I'm not getting this!
When I replace the url and save it it stays at HIS page.
What am I doing wrong here are my codes.

Main page:
CODE
<html>
<title>Selena Gomez</title>
<style type="text/css">

body{background-color: #000000;
background-image:url(http://i31.tinypic.com/5d2kvp.png);
background-image: repeat;
color: #000000;
font-family: arial;
text-transform: none;
font-size: 9px;
}

b{
color: #FF0000;
font-family: arial;
text-transform: none;
font-size: 9px;}

#maincontent{
position: absolute;
overflow: hidden;
top: 400px;
left: 68px;
width: 413px}

#navcolumn{
position: absolute;
overflow: hidden;
top: 448px;
left: 520px;
width: 143px}

#elite{
position: absolute;
overflow: hidden;
top: 25px;
left: 68px;
width: 175px;}

#siteupdates{
position: absolute;
overflow: hidden;
top: 225px;
left: 68px;
width: 173px;}

#fotm{
position: absolute;
overflow: hidden;
top: 330px;
left: 243px;
width: 250px;}

#ss{
position: absolute;
overflow: hidden;
top: 25px;
left: 493px;
width: 195px;}

#welcome{
position: absolute;
overflow: hidden;
top: 130px;
left: 493px;
width: 195px;}

#disclaimer{
position: absolute;
overflow: hidden;
top: 285px;
left: 493px;
width: 305px;}

#quote{
position: absolute;
overflow: hidden;
top: 360px;
left: 493px;
width: 305px;}


textarea{
background-color: #000000;
border: 1px dotted #ffffff;
width: 88px;
height: 50px;
letter-spacing: 0px;
text-transform: uppercase;
font-family: small fonts;
color: #ffffff;
font-size: 9px;}

h1{
width: 100%;
padding: 10px;
margin-bottom: 3px;
background-color: 000000 !important;
background-image: url(http://i25.tinypic.com/n1b0yg.png);
color: 000000 !important;
font-family: arial;
font-size: 8pt;
font-weight: none;
text-align: left;
line-height: 8pt;
text-transform: uppercase;
float: left;
margin-left: 0px;}

h2{
width: 100%;
padding: 5px;
margin-bottom: 3px;
background-color: 000000 !important;
color: 812A3A !important;
font-family: arial;
font-size: 8pt;
font-weight: none;
text-align: left;
line-height: 8pt;
text-transform: uppercase;
float: left;
margin-left: 0px;}


#banner{
position: absolute;
top: 0px;
left: 0px;
width: 1024px}

#content h1 { margin-left: 0px;
text-align: left; }
#content p { margin-left: 0px;
width: 300px; }

a img {
border: 1px solid #FF0000;}

a:hover img {
border: 1px solid #000000;}


a, a:active, a:link, a:visited{
color: #000000;
font-family: arial;
text-transform: none;
font-size: 9px;
font-weight: normal;
text-transform: none;
letter-spacing: 0px;
text-decoration: none;}



a:hover{
color: #000000;
font-family: arial;
text-transform: none;
font-size: 9px;
font-weight: normal;
text-transform: none;
letter-spacing: 0px;
text-decoration: none;}


a.navi, a.navi:active, a.navi:link, a.navi:visited{
font-family: arial;
font-weight:normal;
font-size: 8px;
text-transform: uppercase;
letter-spacing:0px;
color:#812A3A;}

a.navi:hover{
font-family: arial;
font-weight:normal;
font-size: 8px;
letter-spacing:1px;
text-transform: uppercase;
letter-spacing:0px;
color:#000000;
border-left: 3px solid #000000;
}
</style>

<html>

<div id="banner">
<img src="http://i27.tinypic.com/307sw9h.png">
</div>

<div id="elite">
<a href="http://hfsh-avril.t35.com"><img src="http://avrilpedia.funride.org/hfsh.png" height="30" width="30" alt="HFSH" border="0"></a>

<a href="http://avril-world.fanzoom.net"><img src="http://avrilpedia.funride.org/aw.png" height="30" width="30" alt="Avril World" border="0"></a>
</div>

<div id="siteupdates">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>
ajkdfhsldfj vdlsjfbsdfkv dkfjdsflnsd vdks sdfloe Poruem adsfjlasdlfjsdlfj dlfja;ldjfl;jkasdf<br>
</div>

<div id="fotm">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>
ajkdfhsldfj vdlsjfbsdfkv dkfjdsflnsd vdks sdfloe Poruem adsfjlasdlfjsdlfj dlfja;ldjfl;jkasdf<br>
</div>

<div id="ss">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>
ajkdfhsldfj vdlsjfbsdfkv dkfjdsflnsd vdks sdfloe Poruem adsfjlasdlfjsdlfj dlfja;ldjfl;jkasdf<br>
</div>

<div id="welcome">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>
ajkdfhsldfj vdlsjfbsdfkv dkfjdsflnsd vdks sdfloe Poruem adsfjlasdlfjsdlfj dlfja;ldjfl;jkasdf<br>
</div>

<div id="disclaimer">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>
ajkdfhsldfj vdlsjfbsdfkv dkfjdsflnsd vdks sdfloe Poruem adsfjlasdlfjsdlfj dlfja;ldjfl;jkasdf<br>
</div>

<div id="quote">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>

</div>

<DIV style="LEFT: 75px; WIDTH: 400px; POSITION: absolute; TOP:410px; HEIGHT: 2700px">

<IFRAME style="WIDTH: 400px; HEIGHT: 2700px; FI: chroma (color=#339966)" name=nieuws marginWidth=0
marginHeight=0 src="http://avrilpedia.funride.org/" frameBorder=0 width=400 scrolling=no height=300 allowTransparency></IFRAME></DIV>









<div id="navcolumn">
<b>01</b>.<a href="link">Link</a><br>
<b>02</b>.<a href="link">Link</a><br>
<b>04</b>.<a href="link">Link</a><br>
<b>05.</b><a href="link">Link</a><br>
<b>06</b>.<a href="link">Link</a><br>




</div>
</html>


Mike
Probably because your coding is so messy. Replace it with this, see what happens:

CODE
<html>
<head>
<title>Selena Gomez</title>
<style type="text/css">

body{background-color: #000000;
background-image:url(http://i31.tinypic.com/5d2kvp.png);
background-image: repeat;
color: #000000;
font-family: arial;
text-transform: none;
font-size: 9px;
}

b{
color: #FF0000;
font-family: arial;
text-transform: none;
font-size: 9px;}

#maincontent{
position: absolute;
overflow: hidden;
top: 400px;
left: 68px;
width: 413px}

#navcolumn{
position: absolute;
overflow: hidden;
top: 448px;
left: 520px;
width: 143px}

#elite{
position: absolute;
overflow: hidden;
top: 25px;
left: 68px;
width: 175px;}

#siteupdates{
position: absolute;
overflow: hidden;
top: 225px;
left: 68px;
width: 173px;}

#fotm{
position: absolute;
overflow: hidden;
top: 330px;
left: 243px;
width: 250px;}

#ss{
position: absolute;
overflow: hidden;
top: 25px;
left: 493px;
width: 195px;}

#welcome{
position: absolute;
overflow: hidden;
top: 130px;
left: 493px;
width: 195px;}

#disclaimer{
position: absolute;
overflow: hidden;
top: 285px;
left: 493px;
width: 305px;}

#quote{
position: absolute;
overflow: hidden;
top: 360px;
left: 493px;
width: 305px;}


textarea{
background-color: #000000;
border: 1px dotted #ffffff;
width: 88px;
height: 50px;
letter-spacing: 0px;
text-transform: uppercase;
font-family: small fonts;
color: #ffffff;
font-size: 9px;}

h1{
width: 100%;
padding: 10px;
margin-bottom: 3px;
background-color: 000000 !important;
background-image: url(http://i25.tinypic.com/n1b0yg.png);
color: 000000 !important;
font-family: arial;
font-size: 8pt;
font-weight: none;
text-align: left;
line-height: 8pt;
text-transform: uppercase;
float: left;
margin-left: 0px;}

h2{
width: 100%;
padding: 5px;
margin-bottom: 3px;
background-color: 000000 !important;
color: 812A3A !important;
font-family: arial;
font-size: 8pt;
font-weight: none;
text-align: left;
line-height: 8pt;
text-transform: uppercase;
float: left;
margin-left: 0px;}


#banner{
position: absolute;
top: 0px;
left: 0px;
width: 1024px}

#content h1 { margin-left: 0px;
text-align: left; }
#content p { margin-left: 0px;
width: 300px; }

a img {
border: 1px solid #FF0000;}

a:hover img {
border: 1px solid #000000;}


a, a:active, a:link, a:visited{
color: #000000;
font-family: arial;
text-transform: none;
font-size: 9px;
font-weight: normal;
text-transform: none;
letter-spacing: 0px;
text-decoration: none;}



a:hover{
color: #000000;
font-family: arial;
text-transform: none;
font-size: 9px;
font-weight: normal;
text-transform: none;
letter-spacing: 0px;
text-decoration: none;}


a.navi, a.navi:active, a.navi:link, a.navi:visited{
font-family: arial;
font-weight:normal;
font-size: 8px;
text-transform: uppercase;
letter-spacing:0px;
color:#812A3A;}

a.navi:hover{
font-family: arial;
font-weight:normal;
font-size: 8px;
letter-spacing:1px;
text-transform: uppercase;
letter-spacing:0px;
color:#000000;
border-left: 3px solid #000000;
}
</style>

</head>
<body>

<div id="banner">
<img src="http://i27.tinypic.com/307sw9h.png">
</div>

<div id="elite">
<a href="http://hfsh-avril.t35.com"><img src="http://avrilpedia.funride.org/hfsh.png" height="30" width="30" alt="HFSH" border="0"></a>

<a href="http://avril-world.fanzoom.net"><img src="http://avrilpedia.funride.org/aw.png" height="30" width="30" alt="Avril World" border="0"></a>
</div>

<div id="siteupdates">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>
ajkdfhsldfj vdlsjfbsdfkv dkfjdsflnsd vdks sdfloe Poruem adsfjlasdlfjsdlfj dlfja;ldjfl;jkasdf<br>
</div>

<div id="fotm">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>
ajkdfhsldfj vdlsjfbsdfkv dkfjdsflnsd vdks sdfloe Poruem adsfjlasdlfjsdlfj dlfja;ldjfl;jkasdf<br>
</div>

<div id="ss">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>
ajkdfhsldfj vdlsjfbsdfkv dkfjdsflnsd vdks sdfloe Poruem adsfjlasdlfjsdlfj dlfja;ldjfl;jkasdf<br>
</div>

<div id="welcome">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>
ajkdfhsldfj vdlsjfbsdfkv dkfjdsflnsd vdks sdfloe Poruem adsfjlasdlfjsdlfj dlfja;ldjfl;jkasdf<br>
</div>

<div id="disclaimer">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>
ajkdfhsldfj vdlsjfbsdfkv dkfjdsflnsd vdks sdfloe Poruem adsfjlasdlfjsdlfj dlfja;ldjfl;jkasdf<br>
</div>

<div id="quote">
tadfldfkjdafeiadfncadfljcdbfladvnldcsd fsldjvsdlfjsfldfl;ajsdf slfjsdfljsdf sdlfjsadv sdv;ljsdfl;sdfj<br>

</div>

<DIV style="LEFT: 75px; WIDTH: 400px; POSITION: absolute; TOP:410px; HEIGHT: 2700px">

<IFRAME style="FI: chroma (color=#339966);" name="nieuws" marginWidth="0"
marginHeight="0" src="http://avrilpedia.funride.org/" frameBorder="0" width="400" scrolling="no" height="2700"></IFRAME></DIV>









<div id="navcolumn">
<b>01</b>.<a href="link">Link</a><br>
<b>02</b>.<a href="link">Link</a><br>
<b>04</b>.<a href="link">Link</a><br>
<b>05.</b><a href="link">Link</a><br>
<b>06</b>.<a href="link">Link</a><br>




</div>

</body>
</html>
funride
It didnt change a thing...
Mike
Post a link to the page you're working on.
funride
Okay this is good for closing, got it!
thank you!
Mike
LOLWTF, okay. Topic closed & moved.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.