css question

D

Daiphron

New Member
Messages
25
Reaction score
0
Points
0
Hi,

I am trying to create a webpage that is devided into subpages with css. This means that visitors would be on one and the same page but when the click a link on that page it would take them to a different section and it would look like they are on a different page. I have seen this before but I forgot the url. I know that this is possible with the overflow:hidden and display:none properties and the sections looked something like this in the url:

www.webaddress.com/#section1
www.webaddress.com/#section2
...

Can anyone help me out with a generic code snippet to accomplish this effect?

Thanks!
 
Twinkie

Twinkie

Banned
Messages
1,389
Reaction score
12
Points
0
This can be easily done with JavaScript or PHP... But here is the code:
HTML: 
<body>
<table style="height: 800px; width: 100%; overflow: hidden;" align="center" border="0" cellpadding="0" cellspacing="0">
<tr><td><a href="#section1"></a>
Site Code (exactly 800px)...
<a href="#section2"></a>
Site Code (exactly 800px)...
</td></tr></table></body>
Or better with PHP:
PHP: 
<body>
<table style="height: 100%; width: 100%; overflow: hidden;" border="0" cellpadding="0" cellspacing="0">
<tr><td style="display: <?php echo ($_GET["section"]===1)? "block;" : "none;"; ?>">
Site Code (any Length)...
</td></tr><tr><td style="display: <?php echo ($_GET["section"]===2)? "block;" : "none;"; ?>">
Site Code (any length)...
</tr></td></table></body>
The URL instead of #section1 would be ?section=1, but it's still easier and more reliable to do.
Adjust size measurements :)
 
Last edited:
D

Daiphron

New Member
Messages
25
Reaction score
0
Points
0
Thanks a lot for the help. PHP won't work on the site that's why I was asking for the CSS version :)
 
VPmase

VPmase

New Member
Messages
914
Reaction score
0
Points
0
You are thinking of AJAX. A mix of javascript and PHP.
Unless you want to load both pages into that one page.

Give me a sec I'll give you a demo of how to do it.

Here is the script:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<style>
	.show{
		display:block;
		visibility:visible;
	}
	.hide{
		display:none;
		visibility:hidden;
	}
</style>
<body>
<script language="javascript1.2">
	function swapPages(p){
		document.getElementById('section1').className = "hide";
		document.getElementById('section2').className = "hide";
		document.getElementById(p).className = "show";
	}
</script>
<a href="#" onclick="swapPages('section1');">Show Section 1</a><br />
<a href="#" onclick="swapPages('section2');">Show Section 2</a>
<div id="section1" class="hide">
	<div>This is the first page.</div>
	<div>This contains the content of section1</div>
</div>
<div id="section2" class="hide">
	<div>This is the second page.</div>
	<div>This contains the content of section2</div>
</div>
</body>
</html>
 
Last edited:
J

jowda

New Member
Messages
6
Reaction score
0
Points
0
What is the benefit of doing it through ajax/php vs. the div tags?
 
Twinkie

Twinkie

Banned
Messages
1,389
Reaction score
12
Points
0
That is not AJAX, that is HTML DOM. With HTML DOM, you can make elements disappear and reappear, although you cannot specify which sections to be displayed in the URL. However, if you use VPmase's suggestion, you would have to load section one and click the link before section two is displayed.
 
VPmase

VPmase

New Member
Messages
914
Reaction score
0
Points
0
jowda said:
What is the benefit of doing it through ajax/php vs. the div tags?
Click to expand...
The difference is that with Ajax you won't have to load both of the 'pages' at once which will decrease the load times.
 
You must log in or register to reply here.
Top