Forum Moderators: not2easy
first I have validated my CSS on the w3C thingie and it tells me
This document validates as CSS level 2.1
My document type is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
By default my links are not underlined
What i want to happen is that when i hover over a link for an underline to appear (this works), and i want the current active link to be underlined, so for instance if I am on the about page the about link is underlined
Here is the relevant CSS
.smallhead {
font-size: 18px;
color: #fff;
}
.smallheadnav {
font-size: 18px;
text-align: right;
color: #fff;
text-decoration: none;
}
span.left {
position: absolute;
left: 0;
}
span.right {
position: absolute;
right: 0;
}
div.line {
font-size: 18px;
position: relative;
text-align: center;
width: 100%;
}
a.smallheadnav:link { text-decoration: none; }
a.smallheadnav:visited { text-decoration: none; }
a.smallheadnav:hover { text-decoration: underline; }
a.smallheadnav:active { text-decoration: underline; }
And here is the section of HTML it should be acting on
<div class="line">
<span class="left">Hedgehog Fancier</span>
<span class="right">
<a class="smallheadnav" href="about.php">About</a>
<a class="smallheadnav" href="index.php">Portfolio</a>
<a class="smallheadnav" href="/blog">Blog</a>
<a class="smallheadnav" href="index.php">Bla</a>
<a class="smallheadnav" href="index.php">Bla</a>
</span>
</div>
currently only the Hover works, and i have no idea why the active doesn't, I am not good at CSS, but i can normally muddle through, but this which i believe should be simple has just stumped me completely.
Any help would be greatly appreciated
and i have no idea why the active doesn't,
It works fine in FF and IE. The HTML and CSS is a bit muddled, so I had to give the links some color in order to see them at all in both browsers.? text-decoration: underline; is functional with a.smallheadnav:active { text-decoration: underline; }
Something else may be interfering causing it not to work.
................................
.smallheadnav {
font-size: 18px;
text-align: right;
color: #fff;
/*text-decoration: none;*/
This container will have no text-decoration: unless you are over-riding it from another container with higher specificity.
................................
You can get rid of all of the:
<a class="smallheadnav"
All of the <a> are contained within <div class="line">
Therefore:
.line a:link { text-decoration: none; }
.line a:visited { text-decoration: none; }
.line a:hover { text-decoration: underline; }
.line a:active { text-decoration: underline; }
This restricts the <a> declarations to ONLY render within .line
Now, each <a> already has its declarations defined and you can drop all of the class calls in the html
<a href="about.php">About</a>
................................
I don't care for the way the <span>s are used, but it's a choice. Not saying that it is wrong.
How would i go about finding what is overriding it
I have tried removing all rules and I cannot get the active state to show,
Here is the entire CSS file, there is also a reset.css file, but when i removed the link to the reset it made zero difference to the links
body {
background: #000;
background-image:url('orange.gif');
background-repeat:repeat-x;
color: #fff;
font-size: 16px;
line-height: 22px;
padding: 0;
margin: 0 auto;
font-family: Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif;
}
#container
{
margin: 0px auto 50px auto;
width: 1000px;
padding: 0px;
}
#intro-header
{
height: 100px;
color: #fff;
}
#intro-text
{
Float: left;
left: 5px;
padding: 0px;
width: 460px;
}
#intro-slide
{
margin-left: 480px;
width: 510px;
padding: 0px;
margin-right: 5px;
}
em {
color: orange;
}
p {
color: #fff;
font-size: 16px;
line-height: 22px;
}
.largehead {
font-size: 44px;
line-height: 38px;
}
span.left {
position: absolute;
left: 0;
}
span.right {
position: absolute;
right: 0;
}
div.line {
font-size: 18px;
position: relative;
text-align: center;
width: 100%;
color: #fff;
}
.grumpy-bunion, head-para {
padding: 5px 0px;
}
div.line a:link { text-decoration: none; color: #fff;}
div.line a:visited { text-decoration: none; color: #fff;}
div.line a:hover { text-decoration: underline; color: #fff;}
div.line a:active { text-decoration: underline; color: #fff;}
and here is a full page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Good Afternoon - How are you</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="flashdetect.js"></script>
<link href="reset.css" rel="stylesheet" type="text/css">
<link href="the.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="intro-header">
<p class="head-para"> </p>
<div class="largehead">Good Afternoon</div><!-- large head -->
<div class="line">
<span class="left">How are you today</span>
<span class="right">
<a href="about.php">About</a>
<a href="index.php">Portfolio</a>
<a href="index2.php">Portfolio2</a>
</span>
</div>
<!-- line -->
</div><!-- intro header -->
<div style="clear:both;"></div>
<div id="intro-text">
<p><em>Welcome to the website . . </em></p>
<p>Bla Bla</p>
</div><!-- intro-text -->
<div id="intro-slide">
<p> </p>
<div id="flashcontent">
<h1>Oops!</h1>
<p>Slideshow would be here</p>
</div>
</div><!-- intro slide -->
</div><!-- container -->
</body>
</html>
(The site background is black hence the white text)
But you didn't give me that, so I had to hack in some color. When I did, the problem described was not there, so wasn't much that I could do except make suggestions to work the problem with.
8:00 - Gotta go.
I think the whole problem is me misinterpreting what "active" means.
lets say that i had set
active to pink and
hover to blue
and visited and link to white
I assumed that "active" meant that when I clicked on the "about" page the about link would turn pink and stay pink for as long as I was on that page basically until I clicked on another link to go to another page. But thats wrong
So yes the code works as it should, when I click on a link it changes to the active state and as soon as I release the mouse button it returns to the default link state
The white links, 'About', 'Portfoliio', and 'Portfolio2' all show text-decoration: underline; on :hover, and maintain the underline onclick (:acitve). The underline is removed in the :visited state.
I can't fix what I can't see. There is another issue. With just the code provided for this sample, are you not seeing the underline with a:active ?
..........................
By the way -
Drop a:link and just use a - and you can drop the extra color declarations. Just an option to consider. rarely use :link myself.
div.line a { text-decoration: none; color: #fff; }
div.line a:visited { text-decoration: none;: }
div.line a:hover { text-decoration: underline; }
div.line a:active { text-decoration: underline;}
..........................
Commercials are half the bleeping show. Ha!
the about link would turn pink and stay pink for as long as I was on that page basically until I clicked on another link to go to another page. But thats wrong
Correct. It is still doable. You have choices to achieve that effect. One is to set the CSS style for that 'link', on that page, to be pink if you are on that page. Another option is to use PHP, which is a fancier way to do the same thing.
...............................
when I click on a link it changes to the active state and as soon as I release the mouse button it returns to the default link state
Exactly correct - with the understanding that if :visited were a different color, then the color would be different when you returned. I wouldn't bother with three links, but a page with a long list of links should have :visited style so that the user can easily keep track of where they have been.
