SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display one page inside another [was: Does anyone know how to do this?]

    Thanks to you guys here at sitepoint this is my current valid codeing but I was wondering if anyone knows how to do this....if I put a hyperlink in my siderbar div how do I get so that the the page can be viewed in html within the the content div? .

    Would be greatful for the help


    <!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>
    <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
    <link href="admin.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
    /*<![CDATA[*/
    div.c1 {text-align: left}
    /*]]>*/
    </style>
    </head>
    <body>
    <div id="container">
    <div id="banner"><img src="Logo.gif" alt="Logo" width="770" height="150" /></div>
    <div id="navbar"></div>
    <div id="sidebar">
    <div align="center">
    <p>&nbsp;</p>
    <p><a href="#"> Vacancy Matcher</a></p>
    <p>&nbsp;</p>
    </div>
    </div>
    <div align="center"></div>
    <div id="content"></div>
    <div id="uppernav"></div>
    </div>
    </body>
    </html>
    @charset "utf-8";
    #container {
    position : relative;
    margin : 0 auto;
    width : 770px;
    height : 770px;
    background-color : #999999;
    border : 1px inset #00008b;
    }
    #banner {
    position : relative;
    left : 0;
    top : 0;
    width : 770px;
    height : 150px;
    background-color : #ffffff;
    border : 1px inset #00008b;
    }
    #navbar {
    position : relative;
    left : 0;
    top : 0;
    width : 770px;
    height : 50px;
    background-color : #FFFFFF;
    border : 1px inset #00008b;
    }
    #sidebar {
    float: left;
    width : 250px;
    height : 300px;
    background-color : #ffffff;
    border : 1px inset #00008b;
    }
    #content {
    float: right;
    width: 475px;
    height: 275px;
    background-color : #ffffff;
    border : 1px inset #00008b;
    }

    #uppernav {
    float: right;
    margin-left : 50px;
    width : 470px;
    height : 250px;
    background-color : #ffffff;
    border : 1px inset #00008b;
    }

  2. #2
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if I put a hyperlink in my siderbar div how do I get so that the the page can be viewed in html within the the content div?
    if I understand correctly, you want it to work as frames do? (but don't use frames)

    if your layout is consistent, you shouldn't have this problem... if a user clicks the link, just keep the same layout and change what's in the content div.

    you also may want to check out the iframe tag - I've never used them, but to my understanding, they work like frames did.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks it seems to be working for me the iframe seems to be displaying the correct page but what I need to find out know is how do this
    I want the hyperlink to be in the sidebar div so when clicked upon the page will appear in the content div.

    Thanks for your help I am sure there will be someone out their who knows more about iframes.


    current codeing

    <!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>
    <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
    <link href="admin.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <style type="text/css">
    /*<![CDATA[*/
    div.c1 {text-align: left}
    /*]]>*/
    </style>
    </head>
    <body>
    <div id="container">
    <div id="banner"><img src="Logo.gif" alt="Logo" width="770" height="150" /></div>
    <div id="navbar"></div>
    <div id="sidebar">
    <div align="center">
    <p>&nbsp;</p>
    <p><a href="addformclient.htm"> Vacancy Matcher</a></p>
    <p>&nbsp;</p>
    </div>
    </div>
    <div align="center"></div>
    <div id="content">
    <iframe src="addclientform.htm"
    width="475"
    height="275"
    scrolling="auto"
    frameborder="1">

    </iframe>

    </div>
    <div id="uppernav"></div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm not really sure then.... you probably have to use JavaScript...

    something like:
    add id="iframe1" to your iframe, then on the link add
    onclick="document.getElementById('iframe1').src='yourpage.html';"

    that's just a guess - but maybe something like that will work - i'm not too good with JS.

  5. #5
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Give your iframe a name and id. Use the id for styling and the name as target for your links.

    example:
    Code:
    Links:
    <a href="page1.html" target="frame">Link</a>
    <a href="http://siteUrl.com/page2.html" target="frame">Link2</a>
    
    xhtml:
    <iframe src="mypage.html" name="frame" id="frame" scrolling="auto"></iframe> 
    
    Style:
    #frame {
    width:475px; 
    height:275px; 
    border:1px solid #000;
    }

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hmmm, the doctype might have to be changes to "Frameset" to allow target and stay valid.

  7. #7
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This validates as xhtml 1.0 transitional

    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>
    <meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
    <link href="admin.css" rel="stylesheet" type="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    #frame {
    width:475px; 
    height:275px; 
    border:1px solid #000;
    }
    /*<![CDATA[*/
    div.c1 {text-align: left}
    /*]]>*/
    </style>
    </head>
    <body>
    <div id="container">
    <div id="banner"><img src="Logo.gif" alt="Logo" width="770" height="150" /></div>
    <div id="navbar"></div>
    <div id="sidebar">
    <div align="center">
    <p><a href="page1.html" target="frame">Link</a>
    
    </p>
    <p><a href="addformclient.htm"> Vacancy Matcher</a></p>
    <p><a href="http://siteUrl.com/page2.html" target="frame">Link2</a></p>
    </div>
    </div>
    <div align="center"></div>
    <div id="content">
    <iframe src="addclientform.htm" name="frame" id="frame" scrolling="auto"></iframe> 
    </div>
    <div id="uppernav"></div>
    </div>
    </body>
    </html>


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
  •