Hyperlink in a div

HTML & CSS
1

Hi guys

I’m fine with php and mysql, html is ok though i’m revisiting it to get rid of tables and upgrade using css. My problem is that i’ve avoided CSS for years and until recently never really thought it was necessary until i was pointed to the zen garden. I know… weird that i’ve got php licked and not got a clue with CSS or even web graphics but hey ho! I had a project that i wanted to make which needed a lot of code to run on the server! (Thats me saying i’m not very artistic).

So, i started reworking my site template today to work with CSS and now I have a problem!

I have this code in my html:


<div class="greeting">Welcome Guest! <a class="greetlink" href="?action=login">You can login or register here!</a></div>

In my stylesheet i have this:


greetlink a:link
   {
   color: #ffffff;
   visited: red;
   }

Now, i know thats wrong. The problem is the background is black while the rest of the page is white so i can’t just use a:link for all the links in the page because it won’t work for me and secondly css is meant to let you group things together or deal with them seperately right?

So how on earth can i do this? - i’ve experimented and so far still can’t find the correct way and google hasn’t turned up much though i suspect i’m probably using the wrong terms.

If you can help me i’d be grateful :wink:

2

Nevermind, solved. I thought the class had to be declared in the <a> tag but instead i found that i should put the <a> tag inside a span tag.

3

Two things.

If every time you have a hyperlink inside a <div class=“greeting”>, you want it to be styled like this, you don’t need to put a class on the link, you can save yourself a bit of typing with
div.greeting a:link {...}.

And that isn’t how you write code for visited links.
First, you show the code for normal, unvisited links with a:link {...}
Then you show the code for visited links with a:visited {...}
You can also have a:hover, a:focus {...} and a:active {...} as well, in that order.

(You should always specify a ‘focus’ state so that people using keyboard navigation can clearly see what link they’ve tabbed to, so you’ll usually want to use the same style as for :hover. ‘Active’, in this context, means what happens as someone clicks on the link)

4

lol - you don’t need to put a span inside the a element. You just don’t need the descendant selector that you used as the class is on the a element.

e.g.


a.greetlink:link {etc..}
a.greetlink:visited {etc..}

However, Stevie has shown you a better way to do this above so make sure you read his post.

5

Hi guys,

Thanks for the tips, very useful :wink:

I knew there must be a simple way of doing it but having literally only decided to seriously learn about CSS last night its rather daunting. The links are done now and working nicely!

Thanks to both of you!

6

I’ll argue that once you’re comfortable writing the separate link states, start grouping them easier:

First, you show the code for normal, unvisited links with a:link {…}
Then you show the code for visited links with a:visited {…}
You can also have a:hover, a:focus {…} and a:active {…} as well, in that order.

Or just
“a” for all links
override visited with :visited only if visited should look different
override :hover and :focus (and active either if you want active, or just want IE6 to show :focus styles)

This means the majority of the CSS sits one time under the “a”, while the other pseudo-classes only list the properies you want different. This prevents you from writing
text-decoration: none
500 times if you always want all links to not have underline (not a great idea, but just an example).

So reason one: laziness. The mark of a true programmer is how lazy s/he is, according to Larry Wall : )

Another thing to watch out for, cause everyone does it at least once:
.greetings a:link, a:visited, a:active {
styles;
}

only the a:link version is applied specifically to links in the greetings div; the other two are global!
.greetings a:link,
.greetings a:visited,
.greetings a:active {
styles;
}

This is the other reason why I tend to avoid :link.

7

Thanks for the inspiration but i did specify that the background for the link concerned was black while the rest of the page was white.

You’re not saying i should use the same css for all the links on the page are you?

So i should have white links on a white background?

I’m aware that i can use a:whatever to cover all generic links but i did explicitly state that i needed CSS for links on a black background while the rest of the page is white.

8

I’m aware that i can use a:whatever to cover all generic links but i did explicitly state that i needed CSS for links on a black background while the rest of the page is white.

That’s fine, but I’m just saying (assuming <div class=“greeting”> is the black box) that
.greeting a {
styles;
}
is more awesome and less work than
.greeting a:link,
.greeting a:visited,
.greeting a:active {
styles;
}

You are still manually setting the styles for just the links in the greeting box, but avoiding the repetition of :link styles.

So that a:whatever can be focussed down to “only a’s inside a certain container” etc.

This will, however, also cover any
a:hover, a:focus
styles you may have set earlier. That would be a good arguement for #someElement a:link, but if the difference is between black backgrounds and white backgrounds, the hover/focus styles would need to be looked at twice to see if they’re sufficient contrast too.

9

Ok, thanks :wink: