Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS ISSUE how to use link

Status
Not open for further replies.

vishalonne

Technical User
Jul 29, 2012
49
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 -
[ul]
[li]Set 1[/li]
[li]Set 2[/li]
[li]Set 3[/li]
[li]Set 4[/li]
[/ul]
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 -
[ul]
[li]Chapter ABC[/li]
[li]Chapter XYZ[/li]
[li]Chapter MNO[/li]
[li]Chapter POI[/li]
[li]Chapter LMK[/li]
[/ul].
How can do this please guide me.
HEre is the HTML 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>

And CSS 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;
}
Thank you All In Advance with lots of expectation.
 
CSS is for style and presentation only, it can't manage content in any way.

To get content to show up in a specified DIV you'll need to use some type of programming language such as Javascript or PHP among many others. What you use depends on what your server supports. Alternatively you could use iframes and simply target them via your links so they load the page you specify.


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">[b][COLOR=#004499]<a href="papers.html" target="iframe1">[/color][/b]Sample Papers[b][COLOR=#004499]</a>[/color][/b]</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"> [b][COLOR=#004499]<iframe name="iframe1"></iframe>[/color][/b]</div>
	<div class="image002-11">&nbsp;</div>
	<div class="image002-13">Footer</div>
</div>




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Dear Vacunita

Thanking you for looking into my issue. I am using PHP. Can you please help me out with some code reference I got something using jquery but they are using different div from different content, which is not affordable for because I have many content.

Thank you again
 
Assuming each link has its own PHP page, thne simply set the links to have some type of ID for the page and include them inside the DIV.

At its simplest:
Code:
[COLOR=#990000]<[/color]li [b][COLOR=#0000FF]class[/color][/b][COLOR=#990000]=[/color][COLOR=#FF0000]"serviceli"[/color][COLOR=#990000]><[/color]a href[COLOR=#990000]=[/color][COLOR=#FF0000]"page.php?loadPage=papers"[/color][COLOR=#990000]>[/color]Sample Papers[COLOR=#990000]</[/color]a[COLOR=#990000]></[/color]li[COLOR=#990000]>[/color]

Code:
[COLOR=#990000]<[/color]div [b][COLOR=#0000FF]class[/color][/b][COLOR=#990000]=[/color][COLOR=#FF0000]"image002-10"[/color][COLOR=#990000]>[/color]  
[COLOR=#990000]<?php[/color]

[b][COLOR=#0000FF]if[/color][/b][COLOR=#990000]([/color][b][COLOR=#0000FF]isset[/color][/b][COLOR=#990000]([/color][COLOR=#009900]$_GET[/color][COLOR=#990000][[/color][COLOR=#FF0000]'loadPage'[/color][COLOR=#990000]))[/color]
[COLOR=#FF0000]{[/color]
    [b][COLOR=#000080]include[/color][/b][COLOR=#990000]([/color][COLOR=#009900]$_GET[/color][COLOR=#990000][[/color][COLOR=#FF0000]'loadPage'[/color][COLOR=#990000]][/color] [COLOR=#990000].[/color] [COLOR=#FF0000]".php"[/color][COLOR=#990000]);[/color]
[COLOR=#FF0000]}[/color]

[COLOR=#990000]?>[/color]
 [COLOR=#990000]</[/color]div[COLOR=#990000]>[/color]


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top