CSS styling help.

Soldato
Joined
8 Jun 2005
Posts
8,435
Location
United Kingdom
Bit of a problem here that I'm hoping someone here can help fix.

I'm creating a webpage for a uni assignment where I've created some clickable buttons which have been styled through an external style sheet. Part of the styling had to be done using a:link for the buttons to work/display properly.

I'm in the middle of writing a paragraph of text and need to use an anchor tag again to point out a specific website and this is where I hit a problem. The external style sheet uses the anchor settings on it and I don't want it too.

I'm not sure how to solve this one so any help would be appreciated.

Thanks

edit: I know that internal styling over rides it, but the thing is I don't want ANY styling. If I just chage the color of an anchor on an internal style sheet it will change the color.. but use every other property from the external sheet.

Quite frustrating!
 
Last edited:
Where about's is your navigation/clickable buttons located?

Inside a single div? or is that div for the whole website/page?

The best thing to do would be to re-write your css and use the styling for the buttons but make it only affect the anchor tags/links within that certain div, allowing you to have different style links outside of your navigation/buttons thing.

So just paste in your CSS for your anchor(s), and then paste in the styling for the div it is inside, like say <nav> or <mainNavigation>.
 
Basically, give the anchors with the button styling a class of 'button' or something similar and use that class to target the CSS.

Style your basic hyperlinks first then add rules to a button class e.g.

Code:
a:link, a:visited, a:focus, a:active {
    // Default styling here
}

a.button:link, a.button:visited, a.button:focus, a.button:active {
    // Button styling here
}

That will allow you to separate the styles between 'normal' hyperlinks and buttons.
 
Where about's is your navigation/clickable buttons located?

Inside a single div? or is that div for the whole website/page?

The best thing to do would be to re-write your css and use the styling for the buttons but make it only affect the anchor tags/links within that certain div, allowing you to have different style links outside of your navigation/buttons thing.

So just paste in your CSS for your anchor(s), and then paste in the styling for the div it is inside, like say <nav> or <mainNavigation>.

Basically, give the anchors with the button styling a class of 'button' or something similar and use that class to target the CSS.

Style your basic hyperlinks first then add rules to a button class e.g.

Code:
a:link, a:visited, a:focus, a:active {
    // Default styling here
}
 
a.button:link, a.button:visited, a.button:focus, a.button:active {
    // Button styling here
}

That will allow you to separate the styles between 'normal' hyperlinks and buttons.

Thanks for the help.

I red over both of these comments quite a lot to try and take it in (I've only been doing this a few weeks).

In the end I changed the external stylesheet anchors from "a:link", "a:active" etc to "li a:link", "li a:ctive" etc for the buttons where I was then able to create a seperate a:link and use that for links within my normal text.

Hope that makes sense what I've just said!

Appreciate the help.
 
Yes, that only effects anchors within a list :).

Good call as i forgot about that.

But remember if you make another list with hyperlinks/anchors, they will turn out the same.

Good work none the less, did it solve your issue?
 
Yes, that only effects anchors within a list :).

Good call as i forgot about that.

But remember if you make another list with hyperlinks/anchors, they will turn out the same.

Good work none the less, did it solve your issue?

Yep it solved the issue.

I now have a new problem, which is a bit more complicated as I don't know the problem.

My footer for some reason moves above a table I insert into one of the divisions.

I've got no idea why it's doing that!

I have the following divisions

Header - top part of page
LeftNav - where my menu is located
ContentCol - Main area for adding info
Footer - at the bottom (until now)

I also have a wrapper for the leftnav and content col.

Any ideas?

edit: oh god I forgot to add </table> at the end of it in my html document.
 
Last edited:
Back
Top Bottom