CODEWITHSUNDEEP
htmlcsshyperlink
Aisha Ahmed Ahmed
Aisha Ahmed Ahmed

Reputation: 108

display the content of link in a division

I am trying to do a web site I have three links in the side bar story 1 - 2 - 3 what I want is ( when pressing any link.. I want the content of that link to be diplayed in the blue ( main 1)division > how can I do that ?

<style>
    #wrapper{
    color:#FF00FF;
    margin:0px auto;
    padding:0px;
    width:1050px;
    height 1000px; 
    }

    #header
    {
    margin:0px;
    padding:0px;
    width:1000px;
    height:100px;
    background-color:#F74E84;
    }
    #content
    {
    margin:0px;
    padding:0px;
    width:1000px;
    }

    #side
    {

    border-right:dashed;
    border-right-color:#F74E84;
    margin:0px;
    padding:0px;
    width:247px;
    height:700px;
    background-color:#F7C9D8;
    float:left;
    }
    #side ul { list-style-type: none; }
    #side a { text-decoration:none;
              color:black;}
    #main
    {
    background-color:red;
    margin:0px;
    padding:0px;
    width:750px;
    height:700px;
    float:right;
    }
    #main1
    {
    margin:0px;
    padding:0px;
    width:750px;
    height:650px;
    background-color:#DFE4E9;
    float:right;
    }
    #footer
    {
    margin:0px;
    padding:0px;
    width:750px;
    height:50px;
    background-color:#F74E84;
    float: right;
    }

    </style>
    <div id="wrapper">
            <div id="header"> Header </div>
        <div id="content">
        <div id="side"><p>Here is navigation</p>
<ul>
<li><a href="text.html">Story 1</a></li>
<li><a href="Second.html">Story 2</a></li>
<li><a href="Third.html">Story 3</a></li>
</ul></div>
        <div id="main">
        <div id="main1">
        <p>This is my web site </p>
        </div>
        <div id="footer">Footer</div>
     </div>
     </div>
     </div>

Upvotes: 1

Views: 746

Answers (1)

Slicedpan
Slicedpan

Reputation: 5015

Put an iframe inside the div, and give it an id, say 'the_frame'. Then add a target attribute to your links, with the same value

<a href="http://www.website.com" target="the_frame">website</a>

<iframe id="the_frame">  <!-- the link will be loaded inside here -->
</iframe>

Note that many websites will not allow you to embed their sites in an iframe for security reasons, this will work fine for pages on your own site (although this may depend on server configuration)

Upvotes: 2

Related Questions