Deanno0007 Posted October 17, 2012 Share Posted October 17, 2012 Can someone please help me to layer some pages onto one html page.I am told it can be done with tabs along the top to changfe from one to other.Any help would be appreciated TanksDEanno Link to comment Share on other sites More sharing options...
Ingolme Posted October 17, 2012 Share Posted October 17, 2012 It depends on your idea of layers. Some systems load all the content of all the pages and then use Javascript to hide all the sections that weren't selected. If Javascript is disabled, the links just scroll down the page to the right section. <ul id="menu"> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li></ul> <div id="section1"> Content</div><div id="section2"> Content</div><div id="section3"> Content</div> Another possible way is to load the sections with AJAX, and if Javascript is disabled then the links will open the page using PHP instead: <ul id="menu"> <li><a href="section1.php">Section 1</a></li> <li><a href="section2.php">Section 2</a></li> <li><a href="section3.php">Section 3</a></li></ul><div id="content"> Content</div> I've omitted the Javascript and PHP in my examples because it's important to understand the page structure first. Also, this HTML should not need to be modified, you should be able to access and manipulate the elements with Javascript and CSS without adding any extra attributes. 1 Link to comment Share on other sites More sharing options...
bigmuddyfoot Posted October 17, 2012 Share Posted October 17, 2012 If im understanding right you could do something like the following. <!DOCTYPE html><html><style>.btnopt {background: 000000;width:100px;float:left;border:1px solid red}</style><body><p>This is a paragraph. This text has no alignment specified.</p><a href="index.php?btn=1"><div class="btnopt">Btn 1</div></a><? if($_get['btn']==1){?>Text and div here...<?}?><a href="index.php?btn=2"><div class="btnopt">Btn 1</div></a><? if($_get['btn']==2){?>Text and div here...<?}?><a href="index.php?btn=3"><div class="btnopt">Btn 1</div></a><? if($_get['btn']==3){?>Text and div here...<?}?><a href="index.php?btn=4"><div class="btnopt">Btn 1</div></a><? if($_get['btn']==4){?>Text and div here...<?}?></body></html> If you wanted to make it a little nice you could add something like this: ( <? if($_get['btn']==your btn # here) { echo " style=\"background-color:#c0c0c0;\" "; )Just add that after class on lies that look like this...<a href="index.php?btn=1"><div class="btnopt">Btn 1</div></a> Link to comment Share on other sites More sharing options...
Ingolme Posted October 17, 2012 Share Posted October 17, 2012 The array name is $_GET, as opposed to $_get. Putting <div> elements inside <a> elements is invalid in HTML. Link to comment Share on other sites More sharing options...
bigmuddyfoot Posted October 19, 2012 Share Posted October 19, 2012 The array name is $_GET, as opposed to $_get. Putting <div> elements inside <a> elements is invalid in HTML.My bady on the $_GET, On my hosting server it works ether wayand as for the link i never had a problem with it when i have used it this way... I find it works very well. Seams like using a <div> inside of a <a href=""> would be no different then an <img> but i guess you can move the <a href=""> to inside the div it really does not mater works the same. Link to comment Share on other sites More sharing options...
thescientist Posted October 19, 2012 Share Posted October 19, 2012 the difference is <div> is a block element and <a> and <span> are inline elements. A validated document would not allow block elements inside an inline element. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now