How would I be able to display another website page(my wordpress blog) inside.....

Discussion in 'HTML & Website Design' started by MizzGlass, Jul 15, 2006.

  1. #1
    How would I be able to display another website page(my wordpress blog) inside another page that I am creating?
    I have a ready made website template. What I wanted to do was be able to display my wordpress blog inside a particular section (say in a central rectangle) of this same webpage. Is it possible and how would I go about achieving this

     
    MizzGlass, Jul 15, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    
    object {
        height: yypx;
        width: xxpx;
        overflow: auto;
        }
    ===============
    <object type="text/html"
            data="url of the page">
      <p>you should have seen my other page here, but something broke.</p>
    </object>
    Code (markup):
    You can see an example of this in action at my show/hide demo. Click button 3.

    cheers,

    gary
     
    kk5st, Jul 15, 2006 IP
  3. MizzGlass

    MizzGlass Peon

    Messages:
    81
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks alot gary
     
    MizzGlass, Jul 15, 2006 IP
  4. caley

    caley Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Gary... thanks for the tip.

    Does anyone know how to get rid of the scrollbar when you import another document using

    <object type="text/html" data="http://www.SomeURL.com/SomeFile.html">

    i've experimented by changing the overflow property to visible, hidden, auto, and inherit, but no matter what i change it to i still get the scroll bar even when my content doesn't require one.

    Go to http://www.studiobliss.ca/scrollbar.html for an example of what i mean. Then view source to see my code.

    and/or see my code below in bold
    ------ please tell me how i can get rid of that scroll bar... thanks

    <style type="text/css">
    /*<![CDATA[*/


    object {
    width: 40%;
    max-width: 770px;
    height: 480px;
    overflow: auto;
    }

    #div1 {
    padding: .25em 1em;
    width: 100%;
    max-width: 770px;
    height: 480px;
    -moz-border-radius: 10px;
    }

    .ctr {
    text-align: center;
    }

    /*]]>*/
    </style>

    <div align="center">
    <h1>The imported data is in the box below.</h1>
    </div>


    <div id="div1">


    <p class="ctr"><a href="#"><object type="text/html" data="http://SomeURL.com/SomeFile.html">

    </object></a></p>
    </div>
    </body>
     
    caley, Jul 28, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    Using my example from above,
    
    object {
        width: 100%;
        max-width: 770px;
        height: 480px;
        overflow: hidden;
        border: 0 none;
        }
    Code (markup):
    works as expected. Recheck your style rules and the html for errors. The validators are great help in locating stuff that gets by the eye.

    cheers,

    gary
     
    kk5st, Jul 28, 2006 IP
  6. caley

    caley Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Gary thanks for the validator tip.

    i cleaned up the style rules and html and have no errors in my code anymore.

    i copied your example but i still have the scroll bar showing!?

    How come it works for you but not me?

    see my cleaned up code at: http://www.studiobliss.ca/scrollbar.html


    Could it be that the scrollbar i'm trying to get rid of needs to be removed in the imported document? /imported_data.html?

    thanks,
    caley.
     
    caley, Jul 30, 2006 IP
  7. caley

    caley Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    i found the problem. IE displays a "grayed" scrollbar even when the content fits the window.

    The trick is to set the scrollbar colors to the same color as the background.

    i added this to my /imported_data.html file and it works perfectly!

    <style type="text/css">

    body {background-color: #CEE7A3;
    scrollbar-shadow-color: #CEE7A3;
    scrollbar-highlight-color: #CEE7A3;
    scrollbar-face-color: #CEE7A3;
    scrollbar-3dlight-color: #CEE7A3;
    scrollbar-darkshadow-color: #CEE7A3;
    scrollbar-track-color: #CEE7A3;
    scrollbar-arrow-color: #CEE7A3;}

    </style>

    thanks again for the tips.
    caley
     
    caley, Jul 30, 2006 IP