Simple CSS Issue How to use link

[vishalonne]

Hello All

I am developing 1 very simple site and I am totally confused "HOW TO DISPLAY MY DIFFERENT CONTENTS IN <DIV>".
Detail -
My links as are in left side in <DIV class="image002-03"> and on clicking on them I just want to display the content of link in Mid of the page in <DIV class="image002_10">

Like if I click in Sample Paper link content of the link that is No of Sample Sets like this-

• Set One
• Set Two
• Set Three

should display in imagae002_10 div.
And if I click on Notes link then in same Div i.e. image002_10 should display the content of the link that is Chapter Names like this -

• Chapter XYZ
• Chapter ABC
• Chapter MNO
  ChChapter QWE

How can do this please guide me.
HEre is the HTML code

<div class="panel_container">
    <div class="image002-03">
        <span id="smalltext" 
            style="bottom: 0px; margin-bottom: 0px; padding-bottom: 0px; font-family: Calibri; font-size: large; text-align: center;">Service Menu</span>
          <ul class="serviceul">
            <li class="serviceli">Question Papers (unsolved)</li>
                                    <li class="serviceli">Question Papers (solved)</li>
        <li class="serviceli">Sample Papers</li>
        <li class="serviceli">Notes</li>
        <li class="serviceli">Solved Assignments</li>
        <li class="serviceli">Projects</li>
        <li class="serviceli">Presentations</li>
        <li class="serviceli">Uploads</li>
        <li class="serviceli">Forum</li>
                        </ul>
    </div>

    <div class="image002-07">  Site Map</div>
    <div class="image002-08">  Advertisement </div>
    <div class="image002-09">  Advertisement </div>
    <div class="image002-10">  Here the content of link should display </div>
    <div class="image002-11">&nbsp;</div>
    <div class="image002-13">Footer</div>
</div>

//And CSS Code

DIV.image002-03
{
    position: relative;
    left: 49px;
    top: 0px;
    width: 208px;
    height: 238px;
    border: thin solid #000000;
}
DIV.image002-07
{
    position: absolute;
    left: 266px;
    top: 174px;
    width: 973px;
    height: 24px;
    border: thin solid #000000;
}
DIV.image002-08
{
    border: thin solid #000000;
    position: absolute;
    left: 277px;
    top: 203px;
    width: 953px;
    height: 109px;
}
DIV.image002-09
{
    position: relative;
    left: 49px;
    top: 4px;
    width: 208px;
    height: 315px;
    border: thin solid #000000;
}
DIV.image002-10
{
    position:absolute;
    left:283px;
    top:355px;
    width:806px;
    height:211px;
}
DIV.image002-11
{
    border: thin solid #000000;
    position: absolute;
    left: 266px;
    top: 320px;
    width: 973px;
    height: 413px;
}
DIV.image002-13
{
    position: absolute;
    left: 48px;
    top: 739px;
    width: 1192px;
    height: 52px;
    border: thin solid #000000;
}

Thank you All In Advance with lots of expectation.

[dany12]

If you want to center your links in the center of the page you will need to use a event handler that in this case is click on sample papaers this can be done with javascript especialy I would recomand jquery this is your starting point http://api.jquery.com/click/ and then this http://api.jquery.com/category/events/

[vishalonne]

Thank you Dany...

[lps]

If I am not mistaken, your question is on how to made the content change when a link is clicked, am I correct? If so, there are 2 ways of doing it.

1. seperate the codes into multiple html and use php $_GET method with action preset to the link to get the correct content. eg.

   $page = $_GET['page'];
   if($page=="page1"){
   include('page1.html');
   }elseif($page=="page2"){
   include('page2.html');
   }

while the links will be

<a href="?page=page1">page 1</a>
<a href="?page=page2">page 2</a>

1. load everthing and use jquery to display wanted area.(this will not work if the user deactivate the javascript of their browser)

   <a id="link_1" class="page" href="#">page 1</a>
   <a id="link_2" class="page" href="#">page 2</a>
   <div id="page1">page 1 content</div>
   <div id="page2">page 2 content</div>

jquery

//bind the click action of the links
jQuery('.page').live('click',function(){
    var id = jQuery(this).attr('id');   //get the id of the clicked link
    var num_array = id.split("_");      //an array to split the id into parts based on symbol "_"
    var content = "page"+num_array[1];
    jQuery(content).show();//show the required div
    jQuery(content).siblings().hide();// hide other div
    return false;//made the link with href not working
})