I tried div#navigation li a where the li class active is, as I have seen in examples of other CSS, but THAT didn't work correctly, so I tried div#navigation li.active and THAT didn't work...
The CSS:
Code:
div#navigation li //main li
{
margin-bottom:5px;
font: normal 18px Verdana, sans-serif;
color:#0000ff;
}
div#navigation li a //or li.active?
{
font: bold 20px Verdana, sans-serif;
color: #3366CC;
}
what are you trying to do? a hover? :active (note the : instead of the "." ... close though ) is only for when the link is being fired... typically will never be seen unless the user holds the mouse down on the link for an indefinite period of time
No, not hover. This is supposed to work like this:
When a person is on a particular page, that page's link is a lighter blue (#3366CC) than the "not active" blue (#0000FF). It's basically a thing to show what page you're on. :/
No, not hover. This is supposed to work like this:
When a person is on a particular page, that page's link is a lighter blue (#3366CC) than the "not active" blue (#0000FF). It's basically a thing to show what page you're on. :/
Also, how would you go about a hover?
You are referring to an "active" appearance for a menu. This is not the same as the :active pseudoclass for CSS. CSS alone will not know what page is the current page. With server-side includes and a different class attribute used for the body tag depending on which page is being served, and a static id or class added to each menu <li> tag you can control the "active" appearance with simple CSS rules thereafter. But you WILL need the server-side interaction to deliver the HTML correctly in the first place.
An example of how this would work is something like this:
When you change the class of the body tag (which is what the server-side part of this would be for) you will automatically fire the CSS to show the page which is actively being viewed.
Again, this is entirely separate from the :active abilities of CSS.
I see. But does it have to be that complex if I'm just using div#navigation li.active to make the text color different? I've seen this done multiple times or multiple sites. All I did was on each page I set the link of that to <li class="active">etc... and try to CSS it for each "active" link. :/
I see. But does it have to be that complex if I'm just using div#navigation li.active to make the text color different? I've seen this done multiple times or multiple sites. All I did was on each page I set the link of that to <li class="active">etc... and try to CSS it for each "active" link. :/
That way works, too. It's actually easier to code the CSS that way, too if each active state will have the exact same appearance. My method adds the flexibility to use separate colors, images, sizes, etc. for any given menu item's "active page" state. There is no reason you couldn't simplify it as you have suggested.
I would still recommend a server-side include for the menu with a check against which page is being loaded so that the menu file adds the "active" class to the correct menu item each time on its own. That way you set the "active" class dynamically and you won't have such a headache when you need to make a change to your menu.
If you aren't using includes then you will have to update each and every menu rather than just one file if you want to add a menu item or re-order your menu some time down the road.
A tiny bit. Anyways, I can do this dynamically? Man, that'd be a miracle and a half. Unfortunately, I'm still reading books to even learn PHP. I know most of the basics, and that's it.
*EDIT*
Gosh I'm an idiot... I was trying to do the <li> itself and not the <A href:""> that the text was in. I fixed it. But I still would like to know how to do this dynamically.
Suppose that is your normal *.html page file. You want to turn this into a PHP page and use includes to pull in static parts of the page such as the document head (or some part of it, you can really chop this up as small as you want and include it all back together if you want), a sidebar, a banner, a footer, etc.
You can pull each and every one of the items into a separate *.php file (or any workable mix of *.html, *.php, *.txt, etc. files) and then bring them back together later.
So, a general example from the above could be something like so...
head.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
menu.php
PHP Code:
<ul id="menu">
<li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/">Home</a></li>
<li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/about/">About</a></li>
<li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/contact/">Contact Us</a></li>
</ul>
<div id="footer">
<p>This is the footer...</p>
</div>
</body>
</html>
Then, when index.php is visited, the server grabs all of the files included and assembles the HTML to be sent to the user as one piece. It would be indistinguishable to the end user that this has been done. It starts to make a lot more sense once you try it. It's not an advanced technique and it REALLY pays off for site maintenance.
<ul id="menu">
<li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/">Home</a></li>
<li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/about/">About</a></li>
<li<?php if(/*some check here to determine what page you are serving and if it is this link's page, return true*/){ print " class=\"active\""; } ?>><a href="/contact/">Contact Us</a></li>
</ul>
How would I make a check to see what page it's on?
You have a couple of options using the $_SERVER variable in PHP.
Look into $_SERVER['REQUEST_URI'] or $_SERVER['SCRIPT_FILENAME'] or $_SERVER['SCRIPT_NAME'] or __FILE__ for options for the basic tools you would need to test which page is being served. You would take one of those and compare it to the menu item's destination page and if that's the page being served the menu item gets marked as the active page.
Actually setting up the "if" statement correctly will depend on your website's file tree and file names so I can't really guess at those.
You have a couple of options using the $_SERVER variable in PHP.
You could as well just define a variable on each page and check for that in the menu, like:
PHP Code:
/* assume this is the home page */ <?php $page = 'home'; /* we define a page name here – on other pages this would be “about”, “contact”, or whatever */ include('path/to/head.html'); include('path/to/menu.php'); ?> <p>content here…</p> <?php include('path/to/footer.html'); ?>
Before you post, read our: 
CSS for <li class="active"> not working.
) is only for when the link is being fired... typically will never be seen unless the user holds the mouse down on the link for an indefinite period of time
