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 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

<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"> </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.

[Drongo_III]

That's quite an odd request and I am not sure what the implications will be for your seo. But...

 

So as I understand it you want to load different content into a single div depending on the link pressed?

 

You can achieve this by:

 

a) Loading your content into the page and hiding it all by default with css (display:none). Then you can use jquery or javascript on your links to optionally display or hide the content.

 

b) Use iframes.  So you place the links on your main page and place the various pieces of content in separate html files. You then use a target attribute on the link to target your iframe. Probably the worst practice for seo.

 

c) Bit more complex but - use ajax to optionally swap the content in the div.

 

d) Create each link so that it points back to the page only with a query string on each link - then using php you optionally incorporate content based on the query string

 

Those are a few suggestions for doing it, if i understand your issue properly that is! What you choose to do depends on a lot of things but those suggestions may put you on the right track.

[squigs]

This sounds like more of a php solution rather than css... I personally still like using links the old fashioned way.

[Christian F.]

I'd definitely go for the PHP+AJAX solution, that way it'll work even if the users don't have JS (activated).

Build the site using standard HTML and PHP first, and then afterwards add the AJAX solution to replace only the content.