homepage Welcome to WebmasterWorld Guest from 54.227.34.0
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
adding css to hyperlinks
whatson

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4463039 posted 5:25 pm on Jun 8, 2012 (gmt 0)

I am having great trouble setting hyperlink style to a specific class. I cant work out why it wont take, here is my code:

.class:link,.class:visited {
font-weight:bold;
color:#CCD9EA;
background-color:#445469;
text-align:center;
padding:6px;
text-decoration:none;
}

 

jinxed

5+ Year Member



 
Msg#: 4463039 posted 5:32 pm on Jun 8, 2012 (gmt 0)

Try this:

.class a {
font-weight:bold;
color:#CCD9EA;
background-color:#445469;
text-align:center;
padding:6px;
text-decoration:none;
}

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4463039 posted 8:01 pm on Jun 8, 2012 (gmt 0)

Post a sample of the HTML for one of your links. That will make it easy to suggest the correct CSS.

legaleagle



 
Msg#: 4463039 posted 10:05 pm on Jun 8, 2012 (gmt 0)

Should be........

.class a:visited {
font-weight:bold;
color:#CCD9EA;
background-color:#445469;
text-align:center;
padding:6px;
text-decoration:none;
}

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4463039 posted 10:48 pm on Jun 8, 2012 (gmt 0)

Hi whatson, the provided code snippet should work as desired for simething like <a class="myclass">My link</a> so as rainborick says, we need a sample of the html to see what you are trying to select.

jinxed and legaleagle - nice suggestions, just note they select a link that is the descendent of an element with the specified class. Something like:
<li class="myclass"><a>My link</a>

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4463039 posted 1:11 am on Jun 9, 2012 (gmt 0)

If there's a conflict between

.class (generic)

and

a.class (specific to a)

the browser will go with the <a class...> version. This is much safer than messing about with !important flags.

:link shouldn't be necessary, as it's the default behavior.

Here as elsewhere, it really helps to explain in English what the problem is that you're trying to solve. Are you dealing with an anchor class as such

<a class = "blahblah" ...

or do you want the rule to apply to any anchors that come inside of some other element, like

<div class = "blahblah" ...
<a href ...

?

whatson

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4463039 posted 1:12 am on Jun 9, 2012 (gmt 0)

Here is my html
<li class="class"><a href="/">Home</a></li>

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4463039 posted 1:22 am on Jun 9, 2012 (gmt 0)

Then your style definitions should read as jinxed showed above:

.class a { ... }

whatson

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4463039 posted 2:18 am on Jun 9, 2012 (gmt 0)

Ok, I got that working, but now the hover effects are not working.
Here is the full CSS code:

.class {
display:inline;
}
.class a{
font-weight:bold;
color:#CCD9EA;
background-color:#445469;
text-align:center;
padding:6px;
text-decoration:none;
}
.class:hover,.class:active {
background-color:#667992;
text-decoration:underline
}

And here is the html:

<li class="topnavlinks"><a href="/">Home</a></li>

Sorry, I am just really new to CSS.

whatson

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4463039 posted 2:40 am on Jun 9, 2012 (gmt 0)

Maybe I should say what I am trying to achieve.
I want a text background for hyperlinks, I want to be able to adjust the width and height of the background, and I want the background color to change on hover.

This is for the top nav bar. I hope that makes sense, and would love to hear the best suggestion to achieve this.

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4463039 posted 3:14 am on Jun 9, 2012 (gmt 0)

.class:hover,.class:active


Shouldn't that be

.class a:hover
and
.class a:active

?

whatson

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4463039 posted 3:45 am on Jun 9, 2012 (gmt 0)

Thanks Lucy, I think you nailed it. Thanks everyone else too.

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4463039 posted 3:41 pm on Jun 10, 2012 (gmt 0)

:hover is only going to work reliably when associated with an anchor (See [w3schools.com ].) So you need...

.class a:hover,.class a:active {...}


... to get the hover effect you're after.

As for this:
I want to be able to adjust the width and height of the background


You can only directly control the width and height of block level elements. Anchors are inline level elements. You can add
display:block; to your anchor CSS...

.class a {display: block;}

... and then add width and height settings to that as the baseline and to the :hover settings for the change. Just remember that this may cause items to jump around on your page as the anchors change in size.

You can also gain some control over the height of an inline anchor tag by using
line-height (sometimes) or padding changes in the :hover code.

Best,
cEM

rainborick

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4463039 posted 12:50 pm on Jun 11, 2012 (gmt 0)

tutsplus has a great tutorial on selectors. Search on "30 css selectors you must memorize".

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved