Simple CSS Issue How to use Links in CSS?

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 1
-Set 2
-Set 3
-Set 4

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 ABC
-Chapter XYZ
-Chapter MNO
-Chapter POI
-Chapter LMK

How can do this please guide me.
HEre is the HTML code
[code HTML]<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>[/code]

And CSS Code
[code CSS]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;
}
[/code]
Thank you All In Advance with lots of expectation.

 

You appear to be asking how to recreate framesets using CSS -- something CSS cannot do... It could be done with javascript, but to be brutally frank, framesets were deprecated fifteen or so years ago for a REASON - that reason being it prevents people from linking direct to your content, they confuse and/or prevent proper search indexing of your page, and are an accessibility train wreck... which is why really what you are trying to do has ZERO business on a modern website.

Much less your approach, which absolute positioning ALL of your content areas is NOT how a website should be built -- EVER... since it pretty much means not only are you fixing the height of all your content blocks, anyone with too short a display will never be able to see all the content inside them.

... and for what? Some oddball paranoia about 'pageloads are evil'? Literally that's the only excuse for what you are asking, and it's a lame one at best. Break that up into separate pages.

... and that's without even mentioning the nonsensical/wasteful markup -- for example if every like element -- for example LI, inside a block level container -- for example UL, is getting the same class, NONE of them need classes.

It's a laundry list of how not to build a website... break that into separate pages, STOP absolute positioning everything and let flow do it's job!

 

Problem Solve by simply using jScript Here is code
jscript -
$(function(){
$('#ul1 li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#content').load(page_url);
});
});

<div id="nav" 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 id="ul1" class="serviceul">
<li class="serviceli"><a href="testpage1.htm">Question Papers (unsolved)</a></li>
<li class="serviceli"><a href="#">Question Papers (solved)</a></li>
<li class="serviceli"><a href="#">Sample Papers</a></li>
<li class="serviceli"><a href="testpage2.htm">Notes</a></li>
<li class="serviceli"><a href="#">Solved Assignments</a></li>
<li class="serviceli"><a href="#">Projects</a></li>
<li class="serviceli"><a href="#">Presentations</a></li>
<li class="serviceli"><a href="#">Uploads</a></li>
<li class="serviceli"><a href="#">Forum</a></li>
</ul>
</div>

 

yes, your are change diffrent link color. see you this website and your problem solve here this website

http://www.mcwebdesigner.com/