css question

**Daiphron** · 03-01-2008 09:24 PM

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~~** · 03-01-2008 09:55 PM

This can be easily done with JavaScript or PHP... But here is the code:

HTML Code:

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


<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

**Daiphron** · 03-02-2008 03:24 AM

Thanks a lot for the help. PHP won't work on the site that's why I was asking for the CSS version

**VPmase** · 03-03-2008 10:55 AM

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

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

**jowda** · 03-05-2008 07:58 PM

What is the benefit of doing it through ajax/php vs. the div tags?

**~~Twinkie~~** · 03-05-2008 09:16 PM

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** · 03-05-2008 09:55 PM

Originally Posted by jowda

What is the benefit of doing it through ajax/php vs. the div tags?

The difference is that with Ajax you won't have to load both of the 'pages' at once which will decrease the load times.

Thread: css question

LinkBack

Thread Tools

Display

css question

Re: css question

Re: css question

Re: css question

Re: css question

Re: css question

Re: css question

Similar Threads

Lottery Website (kind of)

Question about reputation....

Odd question but will I be banned for this?

Question about Phpbb and welcom

Posting Permissions