PDA

View Full Version : link color problem


blimp
06-17-2009, 07:43 AM
Can someone please tell me what I'm doing wrong?

I created a dummy page with the following 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=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
a:link {
color: #000;
}
a:hover {
color: #F00;
}
a:active {
color: #00F;
}
-->
</style></head>

<body>
<p><a href="page1.html">PAGE 1</a></p>
<p><a href="page2.html">PAGE 2</a></p>
</body>
</html>


I then saved it as page1.html and a copy as page2.html


http://img134.imageshack.us/img134/8085/picture6t.png


When I preview page1.html in Safari, I get this


http://img132.imageshack.us/img132/2086/picture4jnt.png


My active status color is #00F not that purple that's showing up.

Please help.....

edbr
06-17-2009, 08:30 AM
a:visited {
color: #F00;
}

blimp
06-17-2009, 09:03 AM
edbr, I added the a:visited style as you suggested, however it's still not working the way I actually want it too.


Let me see if I can better explain this.


When I first preview that code I get this show up in my browser.

http://img31.imageshack.us/img31/3530/picture7x.png

Then if I "hover" my mouse over page 2, it turns RED with an underline

Which is exactly what I have coded it to do.

eg:

a:hover {
color: #F00;
text-decoration: underline;
}

http://img140.imageshack.us/img140/2246/picture8j.png

now, when I click on page 2, it looks like this

http://img4.imageshack.us/img4/2310/picture9otr.png

which is perfectly fine and what I want it to do.

The problem is here, if I now click on page 1, I want the page 2 link to return back to the black color, and page 1 to be the active color being blue.

This is what it currently looks like when I click back onto the page 1 link

http://img44.imageshack.us/img44/9615/picture11x.png


What am I doing wrong?

blimp
06-17-2009, 09:11 AM
edbr

I've uploaded this here for you to test

http://www.blimpmedia.com.au/webtest001/links/page1.html

domedia
06-18-2009, 04:33 PM
You're probably have them in the wrong order, link, visited, hover, active.
'active' does not mean 'active' page. It means active link. I think you might have misunderstood the pseudo states of links.

blimp
06-19-2009, 12:55 AM
domedia,

I'm not sure if I really explained my self well in my last post..?

Let's say I have a div box called <div id="navbar_top">. Then within the navbar div box I add my nav text eg:

HOME | ABOUT | CONTACT

In my css styling, the text color will be black and the current viewed page will be, let's say pink.

eg: HOME | ABOUT | CONTACT

Now, when I select the ABOUT page, I want my HOME to return to black and the ABOUT to turn pink.

eg: HOME | ABOUT | CONTACT

Then when I select the CONTACT page, I want my ABOUT to return to black and the CONTACT to turn pink.

eg: HOME | ABOUT | CONTACT

Similar to when you insert a navigation bar in dreamweaver:

UP Image
OVER Image
DOWN Image

So fare what I've found out is that my nav text is best placed in a ul li tag.


<div id="navbar_top">
<ul>
<li><a href="home.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>


Then in my css stylesheet I add the following code:


#navbar_top ul a {
font-family: Verdana, Geneva, sans-serif;
font-size: 18px;
color: #C0F;
text-decoration: none;
}
#navbar_top ul li a:hover,
#navbar_top ul li a:focus,
#navbar_top ul li.current a {
color: #FCF;
text-decoration: underline;
}



Now I add a class to either HOME, ABOUT or CONTACT for this to work.



<body>
<div id="navbar_top">
<ul>
<li class="current"><a href="home.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
</body>


Is there an easier way to do this? or is that just the process?

domedia
06-19-2009, 07:53 PM
Ah I see.

You got it right. That's how I do it. Not aware there's any other way.. anyone else?