FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Problems with CSS- 2 different Link Styles

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Phil
I was hoping some of you CSS gurus could help. I'm working on a very simple site for a friend. I'm trying to put 2 different styles of links.
The page is at http://www.backyardpotteryandplants.com

The problem I'm having is with the first link on the page. I've assigned it the id #content because the A:links are in the #content container.

Quote:

#content {
width: 80%;
padding: 1em;
background-color: white;
border:2px solid #33527b;
color: #33527b;
-moz-border-radius:20px;
}

#content A:link, a:visited, A:active {

font-family : Verdana, Helvetica, sans-serif;
Font-size : 1em;
color : rgb(70,138,227);
font-weight:bold;

}

#content A:hover {

font-family : Verdana, Helvetica, sans-serif;
Font-size : 1em;
color : rgb(8,222,255);
font-weight:bold;
}


The second set of links is at the footer of the page, thus given the id of footer.

Quote:

#footer {
margin-left: 10px;
margin-right: 10px;
padding: 1em;
}

#footer A:link, A:visited, A:active {
font-family:serif;
font-size: .8em;
color: rgb(1,11,0);
}

#footer A:hover {
font-family:serif;
font-size: .8em;
color: rgb(140,228,141);
}


What is happening is the first link (#content) is taking some, but not all of the attributes of the second link (#footer). Namely, the A:visited attribute (so if you check it out, click the link, then go back).

I know I'm doing something wrong because I'm having thi same problem with another site I'm working on.
codeman
Phil wrote:
I was hoping some of you CSS gurus could help. I'm working on a very simple site for a friend. I'm trying to put 2 different styles of links.
The page is at http://www.backyardpotteryandplants.com

The problem I'm having is with the first link on the page. I've assigned it the id #content because the A:links are in the #content container.

Quote:

#content {
width: 80%;
padding: 1em;
background-color: white;
border:2px solid #33527b;
color: #33527b;
-moz-border-radius:20px;
}

#content A:link, a:visited, A:active {

font-family : Verdana, Helvetica, sans-serif;
Font-size : 1em;
color : rgb(70,138,227);
font-weight:bold;

}

#content A:hover {

font-family : Verdana, Helvetica, sans-serif;
Font-size : 1em;
color : rgb(8,222,255);
font-weight:bold;
}


The second set of links is at the footer of the page, thus given the id of footer.

Quote:

#footer {
margin-left: 10px;
margin-right: 10px;
padding: 1em;
}

#footer A:link, A:visited, A:active {
font-family:serif;
font-size: .8em;
color: rgb(1,11,0);
}

#footer A:hover {
font-family:serif;
font-size: .8em;
color: rgb(140,228,141);
}


What is happening is the first link (#content) is taking some, but not all of the attributes of the second link (#footer). Namely, the A:visited attribute (so if you check it out, click the link, then go back).

I know I'm doing something wrong because I'm having thi same problem with another site I'm working on.


Try this instead:

Quote:

#content {
width: 80%;
padding: 1em;
background-color: white;
border:2px solid #33527b;
color: #33527b;
-moz-border-radius:20px;
}

A#content:link, a#content:visited, A#content:active {

font-family : Verdana, Helvetica, sans-serif;
Font-size : 1em;
color : rgb(70,138,227);
font-weight:bold;

}

A#content:hover {

font-family : Verdana, Helvetica, sans-serif;
Font-size : 1em;
color : rgb(8,222,255);
font-weight:bold;
}


and


Quote:

#footer {
margin-left: 10px;
margin-right: 10px;
padding: 1em;
}

A#footer:link, A#footer:visited, A#footer:active {
font-family:serif;
font-size: .8em;
color: rgb(1,11,0);
}

A#footer:hover {
font-family:serif;
font-size: .8em;
color: rgb(140,228,141);
}


that should work... I tried it a few different ways and that the one that worked for me Very Happy
Phil
So I need to repeat each attribute for the A tag completely?
You Know, sometimes I think I'll never get a hold on this.
I can look at 10 different sites and see 10 different ways to display elements, but when I try, they just never seem to do right.

The example I was using is taken straight out of a Sitepoint book I bought.

But thanks so much codeman. I'll give it a try.
Phil
I tried your example, and it didn't work.
BUT........................
I took your lead and tried this:
Quote:

#content A:link, #content a:visited, #content a:active


instead of
Quote:

A#content:link, a#content:visited, A#content:active


and it worked! I even went and applied what you said to the second page I was working on and it worked too!

Thanks again, I learned something today!
codeman
Sure... glad I could at least get you in the ballpark! lol Keep posting your questions here and I'll keep an eye on and try to help ya if I can't I KNOW there is good help here... they've helped me a TON! Very Happy
Nyizsa
If your links are scattered throughout the page (eg. not in sections), you may also consider the following solution:
Code:
a.style1 {...}
a.style1:hover {...}
a.style1:visited {...}

a.style2 {...}
a.style2:hover {...}
a.style2:visited {...}

Then, in the HTML code, refer to these as:
Code:
<a class="style1" href="URL">The_link</a>
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.