SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    May 2004
    Location
    Toronto, Canada
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question help with absolute iframe position

    I have a html website that i have been working on for the past couple of days. I'm not very good with html, but I can do the images. Now to my problem.

    The site I have made has a top banner like image, a image of a navigation bar and a large box for content. I dont know how to make tables so the large box and navigation bars are just images set to background.

    What I want to do is put an iframe on the content picture. To do this I have tried many things, but so far I cannot get the iframe on the content box.

    I was remembering things i had used in my past projects such as "Position: absolute; left: 50px; top: 100px" - or something to that affect.

    My question:
    Is there a code that will set the exact position of the iframe on my website.

    I would also like to add that the images are set to background so they are NOT the problem. My problem is getting the iframe exactly where I want it.

    Can anyone help? I would be very greatful. Thanks.

    (attached is a sample pic - ifr stands for Iframe)
    Attached Images Attached Images
    Last edited by halfsnipe; May 16, 2004 at 11:54.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You should be able to place your iframe where you want it much as you mentioned above.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    iframe#ifr {
     position:absolute;
     left:100px;
     top:100px;
     width:50%;
     height:400px;
     border:1px solid #000
    }
    </style>
    </head>
    <body>
     <iframe id="ifr" src="temp.htm"  scrolling="auto" frameborder="0"></iframe>
    </body>
    </html>
    Hope that helps

    Paul

  3. #3
    SitePoint Member
    Join Date
    May 2004
    Location
    Toronto, Canada
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    You should be able to place your iframe where you want it much as you mentioned above.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    iframe#ifr {
     position:absolute;
     left:100px;
     top:100px;
     width:50%;
     height:400px;
     border:1px solid #000
    }
    </style>
    </head>
    <body>
     <iframe id="ifr" src="temp.htm"  scrolling="auto" frameborder="0"></iframe>
    </body>
    </html>
    Hope that helps

    Paul
    Holy batman. Thanks alot dude. That was really pissing me off there. I owe you one! You need anything ill pay you back. Thanks again. Everyone Paul is a kick *** person! :-P

  4. #4
    SitePoint Member
    Join Date
    May 2004
    Location
    Toronto, Canada
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by halfsnipe
    Holy batman. Thanks alot dude. That was really pissing me off there. I owe you one! You need anything ill pay you back. Thanks again. Everyone Paul is a kick *** person! :-P
    One NEW problem. What code do i need to control the iframe now, as in links. ive tried "<a target="ifr2" href="home.html"> Home </a><br>" but it doesnt work, it brings up a new window. Help? Thanks again Paul.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have to give the iframe a name e.g. name="ifr"

    Code:
    <a href="new.htm" target="ifr">Link</a> 
    <iframe id="ifr" name="ifr" src="temp.htm"  scrolling="auto" frameborder="0"></iframe>
    Something like that

    Pau;

  6. #6
    SitePoint Member
    Join Date
    May 2004
    Location
    Toronto, Canada
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    AWESOME! Thanks again dude.

  7. #7
    SitePoint Member darren emo's Avatar
    Join Date
    Jun 2004
    Location
    california
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One unrelated question:

    Aren't iframes a validation error if one is using a doctype other than frameset?

    If so, I hear that one can achieve the scrolling iframe effect by just adding an overflow: auto; command to that particular div.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by darren
    Aren't iframes a validation error if one is using a doctype other than frameset?
    You're a bit confused lol

    Iframes are not recognised in xhtml strict but are fine for transitional. Framesets are only used for frames and an iframe isn't classed as a frame.

    You can set an element to overflow auto which will apply scrollbars to the element if it is larger than its specified width.

    However you can't supply a source file for the element like you can with iframes (unless you use scripting of course).

    Paul

  9. #9
    SitePoint Member darren emo's Avatar
    Join Date
    Jun 2004
    Location
    california
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sounds good. I LOVE KEVIN YANK


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •