Design question

[ajs83]

Other then creating a different file for each section, what's the best way to create a tab header design (similar to paypal.com) that changes based on the section of the site your in?

[Tomness]

CSS, it's excelent for tabed headers, and they're quick downloading because they're not images.

[google.co.uk...]

If you've the knowledge of bullet points and a little about css then you should be okay.

[faltered]

Yup, CSS is the way to go here.

Check out Project Seven navigation tutorials (do a search for this on Google- it's the first hit to come up). They use what they call "Uberlinks" which is where your navigation state would change depending on the page you're on.

It's really quite simple to do if you know CSS at all. Good luck.

[ajs83]

I've looked all over and can not find a tutorial on how to "switch" tabs. Can someone point one out?

[abbeyvet]

Search for listamatic - that should show you what can be done. You are not really "switching" tabs, just giving the illusion of doing it by applying dfferent styles to the various states of the links.

But to be honest you are not going to be able to just go and find a tabbed navbar and copy it with any degree of success - you need to have some understanding of how it works. Have a general look at CSS so that the stuff there makes more sense to you.

[ajs83]

I see all kinds of text css styles, but I want to compose the bar with images similar to Paypal.com. I don't see any tutorials for that.

[ajs83]

anyone?

[abbeyvet]

You can do it by styling links in a list using CSS.

The lists and navigation bars you see at the site I mentioned before may not look exactly as you want, but the principle is the same. You will just need to create some background images and play around with them and it will be possible to make the kind of navigation you are looking for.

Start with one that looks sort of the same, or one that uses background images, replace them with your own and go from there. If you are having problems making it work, post the code you are using in the CSS forum and there will be lots of people willing to help.

[mack]

I have done this is the past using php. Perhaps this is not the best way of acheiving this but it can be done.

what I did was set up my html tab area for each topic area, so that each topic area had it's tab bold and unlinked. In this example i used (home,about and contact)

if ($topic == home)
{
echo "html code for tab with home active";
}else if ($topic == about)
{
echo "html code for tab with about active";
}else{
echo "html code for tab with contact active";

This is a pretty rough example of how it can be done.

Mack.

[ajs83]

Is everything inside of one file or are you using some type of variable (such as example.com/directory.php?area=home)?

Can php pickup something like this

if(page.php) {
echo "blah";
}elseif(site.php){
echo "tada";
}

?

[mack]

I should have been clearer :)

What I did was store that code in nav.php Then every page that includes this file passes a variable. for example index.php would look somethign like this...

<?php
include "header.php";
include "nav.php?topic=home";

content content content

include "footer.php";
?>

The idea you had is pretty cool.

if(page.php) {
echo "blah";
}elseif(site.php){
echo "tada";
}

What you would need to do is use a variable to set the page name. $php_self I belive covers this.

This could cause a problem in a site with a larger number of pages. It would incolve a pretty large if {} else if{} to handle it. May cause a little bit of overhead for the server.

I belive it can be done though.

Mack.

[ajs83]

I'll give it a try.

The code is pretty clean and images are minimal so the only thing I'm looking for out of it is the top five tabs to switch images when a user is is on that page.

[ajs83]

It seems to work!

I set up a test file like below and tried running it under different file names and it worked with no problem.

<?
$current_url = $_SERVER['PHP_SELF'];

echo "$current_url<br>";

if($current_url=='/no.php'){
echo "yes";
}else{
echo "no";
}
?>