PDA

View Full Version : :active?


tony09uk
04-26-2011, 06:38 PM
Am I right right in thinking that a:active

{
color: #000;
text-decoration:underline;
}

would give me black underlined text when I am viewing a particular page.

e.g

I have 22 video's on my site (each on a separate page) and each one is allocated a number. The numbers are located next to the video. I want the number to look different when the user is on that particular page.

I have used the above code, but it is not working. What have I done wrong?

Ricky55
04-26-2011, 06:47 PM
No it wouldn't. The active state is just when you click on it.

If you want to create a down state for a particular page you can do it one of two ways with html and css or php.

Using html and css you can give your body tag an id then style your nav accordingly or using PHP you can use the code below.

HTML Method

body#home ul li.home then style
body#about ul li.about then style

PHP Method (I prefer this method as it keeps the css short)


<?php $currentPage = basename($_SERVER['SCRIPT_NAME']); ?>

<a href="hello.php" <?php if ($currentPage == 'hello.php') {echo 'class="active"';} ?>>Hello</a>


the you would have the css

ul li a.active then style

This tut uses the html and css method

http://www.sohtanaka.com/web-design/active-state-in-css-navigations/

domedia
04-26-2011, 06:48 PM
Am I right right in thinking that a:active

{
color: #000;
text-decoration:underline;
}

would give me black underlined text when I am viewing a particular page.


Nope, it's the active link on a page (press on the link and don't release to see the state). CSS does not which page you're on.

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

tony09uk
04-26-2011, 06:52 PM
thanks for the quick reply. Would the simple answer be to just use the <strong> tag to highlight the number I want to make bold? (im thinking as an in-line style?)

Ricky55
04-26-2011, 08:02 PM
I think we may be at cross purposes here. If all you want to do is style the look of a link then you can just

a {

}

Then you have a:hover a:visited etc ...

Your original question though implied that you wanted to style a navigational element based on the page you were on.

So if you are on the Home Page the Home link would be highlighted, if you are on the About Us Page the About us link would be highlighted etc.

If this is what you mean then the solution above is still what you want.

If all you want to do is make something bold then you can just use <strong> tags.

If you are wanting to draw attention to something, ie emphasise something then use the <em> tags and style them to be bold.

Using Strong or em tags is not in line style. This is html not css. If it was css then in line style is best avoided as it negates the whole point of css which is to separate style from content.

If you are wanting to style a navigational element based on the page you are on and you don't understand what I mean then say and I knock up a quick example for you.

Ricky55
04-26-2011, 08:19 PM
Here you go mate a very simple example

HTML

<!DOCTYPE html>
<html lang=en>
<head>
<title>Enter Title</title>
<meta charset=utf-8>

<link rel="stylesheet" href="css/main.css" media="screen">

</head>

<body id="home-page">

<ul>
<li class="home"><a href="#">Home</a></li>
<li class="about"><a href="#">About Us</a></li>
<li class="contact"><a href="#">Contact Us</a></li>
</ul>


</body>
</html>


CSS

ul {
list-style-type: none;
font-family: sans-serif;
}

ul li {
float: left;
padding-left: 30px;
}

ul li a {
text-decoration: none;
color: #000;
}

ul li a:hover {
border-bottom: 2px solid red;
}

body#home-page ul li.home a, body#about-page ul li.about a, body#contact-page ul li.contact a {
border-bottom: 2px solid red;
}


Then for each page just change the body id to

For the about page
<body id="about-page">

For the contact page
<body id="contact-page">

Ricky55
04-26-2011, 08:21 PM
The actual files too

http://dl.dropbox.com/u/508261/DW%20Club%20Example.zip

tony09uk
04-26-2011, 09:01 PM
Sorry Ricky, I did not notice your post above DOmedia. The suggestion for the PHP option sounds like what i'm after. I will have a go at the tutorial. PHP scares me though :S

tony09uk
04-26-2011, 09:09 PM
uuuoooo....actually the css may be what im after. I will try both and get back to you.

tony09uk
04-26-2011, 09:50 PM
Right then I have just done the tutorial from sohtanaka.com and I will be using that in the future I think. But like you said it does add a lot to the CSS (I already have plenty there, so want to reduce it rather than add to it). PHP seems the way to go. I don't know anything about PHP yet. Where do I put that code you provided?

I would just play and try to work it out but the one thing I do know is you can't test PHP until it's live (or that's what I read anyways)

Ricky55
04-27-2011, 12:20 AM
PHP is a good option if your pages are already php which mine always are because I'm always using PHP includes (which I strongly suggest you get into using). I use them heavily in every site I do.

I personally think the PHP method is better as the CSS option can get quite lengthly if you have a few pages, its not that adding a few more lines of CSS is going to cost you much at all I just like to keep things clean.

The only slight issue is that if your files have the .php extension then you'll need to be running a local server to view the files. You can't just view them directly in the browser.

This is not difficult to do don't get me wrong but its something to consider.

If you use a Mac then you can grab a copy of MAMP to do this, if you are running Windows then there's WAMP that does the same thing.

If you do decide to use the PHP method then just change your files from .html to .php then add that code I provided. The first line can go right at the top of the page before anything else or anywhere else that you want it as the browser won't render this it just needs to come before the other code. I personally have most of my PHP at the top but you could have this line before the UL tags.

Then the other line is just used in all the links.

PHP creates a variable called $currentPage and makes it equal to whatever the file name is. So using my new example below , if you have a page called index.php then you would then check to see if the current page is index then if it is give that a tag the class of active.

Once you have the class of active you can style it however you want.

This slightly modified code might be better as it removes the .php


$currentPage = basename($_SERVER['SCRIPT_NAME'], '.php');

<a href="/"<?php if ($currentPage == 'index') {echo 'class="active"';} ?>>Home</a>


If you take the PHP out if this its just a regular link


<a href="/">Home</a>

domedia
04-27-2011, 07:44 PM
How many pages Tony, and are they .html pages?

You're going to get the exact same result no matter which approach.

tony09uk
05-04-2011, 01:17 PM
I currently have about 100 pages and will be adding another 100ish pages over the next six months. All HTML. I am thinking of trying to learn PHP to make the site look a bit smoother and more professional

domedia
05-04-2011, 01:49 PM
PHP will not change how your site looks.

tony09uk
05-04-2011, 01:51 PM
That was badly worded. I want to be able to add a membership area and a few other dynamic features on the site.

Corrosive
05-04-2011, 02:40 PM
I'd still look at learning a CMS if I were you Tony. No point in re-inventing the wheel. If you are serious about PHP though, try David J's site; http://codezenith.co.uk/